🎨 GLSL Complete Support
Complete GLSL language support for Visual Studio Code with advanced syntax highlighting, IntelliSense, comprehensive hover documentation for functions and types, and custom function detection.
✨ Features
📚 Comprehensive Hover Documentation
- Native Functions: Hover over any GLSL built-in function to see detailed documentation
- GLSL Types: Complete type system documentation (vec2, vec3, mat4, samplers, etc.)
- Custom Functions: Automatically detects and documents your custom shader functions with JSDoc comments
- 100+ Functions: Full coverage of GLSL standard library
- Rich Formatting: Clear, well-structured documentation in Markdown format
🎨 Advanced Syntax Highlighting
- Custom GLSL grammar for accurate syntax coloring
- Support for all GLSL keywords, types, and built-in variables
- Shader-specific highlighting for vertex, fragment, geometry, and compute shaders
⚡ IntelliSense & Autocompletion
- Smart autocompletion for all GLSL functions
- Type suggestions (float, vec2, vec3, mat4, samplers, etc.)
- Context-aware completion items
- Custom function suggestions from your current file
🔧 Custom Function Detection
- Automatically parses your shader files
- Supports JSDoc-style documentation comments
- Custom functions appear in hover and autocompletion with a 🔧 badge
📂 Multi-Extension Support
Works seamlessly with all shader file extensions:
.glsl - Generic GLSL.vert / .vs - Vertex shaders.frag / .fs - Fragment shaders.geom / .gs - Geometry shaders.comp - Compute shaders.tesc - Tessellation control shaders.tese - Tessellation evaluation shaders
🎯 Documented Functions & Types
GLSL Types Coverage
- Scalar types:
void, bool, int, uint, float, double
- Vector types:
vec2, vec3, vec4, ivec2-4, uvec2-4, bvec2-4, dvec2-4
- Matrix types:
mat2, mat3, mat4, and all variants (mat2x3, mat3x4, etc.)
- Sampler types:
sampler1D, sampler2D, sampler3D, samplerCube, and all variants
- Image types:
image1D, image2D, image3D, and all variants
- Special types:
atomic_uint, generic types (genType, genIType, etc.)
Function Categories
- Trigonometric:
sin, cos, tan, asin, acos, atan, sinh, cosh, tanh, etc.
- Exponential:
pow, exp, log, exp2, log2, sqrt, inversesqrt
- Common:
abs, sign, floor, ceil, fract, mod, min, max, clamp, mix, step, smoothstep
- Geometric:
length, distance, dot, cross, normalize, faceforward, reflect, refract
- Matrix:
matrixCompMult, outerProduct, transpose, determinant, inverse
- Vector Relational:
lessThan, greaterThan, equal, notEqual, any, all, not
- Texture:
texture, texture2D, textureCube, textureLod, textureSize, texelFetch, textureGrad, textureOffset
- Derivative (fragment shader only):
dFdx, dFdy, fwidth
- Bit Manipulation:
floatBitsToInt, intBitsToFloat, floatBitsToUint, uintBitsToFloat
- Packing/Unpacking:
packUnorm2x16, unpackUnorm2x16, packHalf2x16, unpackHalf2x16, etc.
🚀 Installation
From Visual Studio Code Marketplace
- Open VSCode
- Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
- Search for "GLSL Complete Support"
- Click Install
From VSIX File
- Download the
.vsix file from releases
- Open VSCode
- Go to Extensions (Ctrl+Shift+X)
- Click the three dots menu → "Install from VSIX..."
- Select the downloaded file
Manual Installation (Development)
- Clone this repository
- Install dependencies:
npm install
- Package the extension:
npm run package
- Install the generated
.vsix file in VSCode
📖 Usage
Basic Hover Documentation
- Open any GLSL shader file (
.frag, .vert, .glsl, etc.)
- Hover over any GLSL function or type
- View instant documentation with:
- Function/type signature
- Detailed description
- Technical information
- Code examples
Example:
void main() {
vec3 color = vec3(1.0, 0.0, 0.0);
vec3 interpolated = mix(color, vec3(0.0, 0.0, 1.0), 0.5);
// ^^^ Hover over "mix" to see documentation
float len = length(position);
// ^^^^^^ Hover over "length" for details
}
Custom Function Documentation
Document your custom functions using JSDoc-style comments:
/**
* Calculates ambient occlusion for a given position
* @param position The world space position
* @param normal The surface normal
* @return Ambient occlusion factor between 0 and 1
*/
float calculateAO(vec3 position, vec3 normal) {
// Your implementation
return ao;
}
// Now hover over "calculateAO" anywhere in your shader!
IntelliSense Autocompletion
- Start typing a function or type name
- Press Ctrl+Space to trigger suggestions
- Select from the list of functions, types, and custom functions
- Custom functions are marked with a 🔧 badge
Quick Function Reference
Open the command palette (Ctrl+Shift+P / Cmd+Shift+P) and run:
- GLSL: List Functions - Browse all available functions and types
- Search and insert functions directly into your code
🎨 Screenshots
Hover Documentation
IntelliSense Autocompletion
Custom Function Detection
⚙️ Configuration
No configuration required! The extension works out of the box.
However, you can customize VSCode settings for GLSL files:
{
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": false
},
"[glsl]": {
"editor.defaultFormatter": "your-formatter"
}
}
🤝 Contributing
Contributions are welcome! Here's how you can help:
Adding Functions
Edit glsl-functions.js or glsl-types.js:
"functionName": {
signature: "returnType functionName(params)",
description: "Brief description",
details: "Detailed technical information",
examples: ["example1", "example2"]
}
Improving Documentation
- Fork the repository
- Make your changes
- Submit a pull request
Reporting Issues
Found a bug or have a suggestion? Please open an issue on GitHub.
🗺️ Roadmap
- [ ] Snippet support for common shader patterns
- [ ] Shader validation and error checking
- [ ] Support for HLSL (DirectX shaders)
- [ ] Interactive shader preview
- [ ] Multi-language documentation (French, Spanish, German)
📝 License
MIT License - Feel free to use and modify!
🙏 Acknowledgments
- GLSL specification by Khronos Group
- Inspired by the shader development community
📚 Resources
📊 Stats
Developed with ❤️ for the shader community
Star ⭐ this project if it helps you!
| |
