shader-programming-glsllisted

# Shader Programming GLSL ## Overview A comprehensive guide to writing GPU shaders using GLSL (OpenGL Shading Language). Learn syntax, uniforms, varying variables, and key mathematical concepts like swizzling and vector operations for visual effects. ## When to Use This Skill - Use when creating custom visual effects in WebGL, Three.js, or game engines. - Use when optimizing graphics rendering performance. - Use when implementing post-processing effects (blur, bloom, color correction). - Use when procedurally generating textures or geometry on the GPU. ## Step-by-Step Guide ### 1. Structure: Vertex vs. Fragment Understand the pipeline: - **Vertex Shader**: Transforms 3D coordinates to 2D screen space (`gl_Position`). - **Fragment Shader**: Colors individual pixels (`gl_FragColor`). ```glsl // Vertex Shader (basic) attribute vec3 position; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ``` ```glsl // Fragment Shader (basic) uniform vec3 color; void main() { gl_FragColor = vec4(color, 1.0); } ``` ### 2. Uniforms and Varyings - `uniform`: Data constant for all vertices/fragments (passed from CPU). - `varying`: Data interpolated from vertex to fragment shader. ```glsl // Passing UV coordinates varying vec2 vUv; // In Vertex Shader void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } // In Fragment Shader