2a:null 2b:["$","title",null,{"children":"Fragment Shaders | VIDI Intro Graphics | Observable"}] 30:T735,## WebGL Fundamentals # Fragment Shaders The fragment shader is **the second programmable stage of the graphics pipeline**. Its job is to decide the final color of each pixel (or fragment) that will appear on screen. Think of it as a per-pixel painter: it takes interpolated data from the vertex shader (like colors, normals, or texture coordinates), mixes in any extra logic you give it, and paints the result onto the framebuffer. Fragment shaders usually don't work with vertex positions directly, because the vertex shader has already done the job of placing vertices on screen. At this stage, the fragment shader's main role is deciding *what each pixel looks like, not where it goes*. That said, fragment shaders often still **need position-related data**. For example, world-space or view-space positions of each fragment are important for lighting calculations (like distance to a light source). When that happens, the vertex shader computes those positions and passes them along as **varyings** for the fragment shader to use. These are the key points of fragment shaders: - **Input (outputs from Vertex Shaders)**: Interpolated **varyings** from the vertex shader, along with built-in data like `gl_FragCoord` (pixel position). - **Core Task**: The fragment shader must set an output color, usually **`out vec4`** but it depends on the receiving framebuffer. - **Runs per fragment**: Each fragment (potential pixel) is shaded independently, which makes effects like smooth color gradients, lighting, and textures possible. - **Independent but powerful**: Similar to the vertex shader, an instance of fragment shader doesn't "see" the whole object at once or its neighboring pixels, or fragments. It only sees the fragment it's working on. This independence makes real-time shading, lighting, and effects efficient at massive scale.31:T484,___ # Example 1 (positions only) In this example, the fragment shader has this: ${mdGLSL(` out vec4 fragColor; `)} This declares an output variable for the fragment shader. Every fragment (pixel) that the GPU needs to draw will have its color written to this variable. Inside `main()`, we have: ${mdGLSL(` fragColor = vec4(0.0, 1.0, 0.0, 1.0); `)} This line is the heart of the fragment shader: **you must set an output color**. Here, we simply assign a solid green color to every fragment. A few important points: - Fragment shaders run once per fragment, which is normally one per pixel. So if a triangle covers 1000 pixels, the GPU runs this shader 1000 times in parallel (yes, just for a single triangle). - Unlike vertex shaders, fragment shaders usually don't compute positions; the vertex shader already determined where each fragment appears on screen. The fragment shader's job is **purely to decide what color each pixel should be**. - In this simple example, the color is constant. In more advanced shaders, you could use interpolated data from the vertex shader, textures, or even screen-space coordinates to compute dynamic colors.32:T9a6,class ShaderProgram { constructor(gl, vertSource, fragSource, config = {}) { const { attributes = [] } = config; this.gl = gl; this.program = this._createProgram(vertSource, fragSource); this.attributes = {}; // query all declared attributes attributes.forEach(attr => { const loc = gl.getAttribLocation(this.program, attr.name); if (loc < 0) throw `Attribute ${attr.name} not found in the shader.`; this.attributes[attr.name] = { loc, size: attr.size, offset: attr.offset }; }); let strideFloats = 0; for (const attr of attributes) { strideFloats += attr.size; } this.stride = strideFloats * 4; // in bytes this.vbo = gl.createBuffer(); this.ibo = gl.createBuffer(); this.vao = gl.createVertexArray(); } use() { this.gl.useProgram(this.program); Object.values(this.attributes).forEach(attr => { this.gl.enableVertexAttribArray(attr.loc); }); } uploadMesh(vertexData, indexData) { const gl = this.gl; gl.bindVertexArray(this.vao); gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), gl.STATIC_DRAW); Object.values(this.attributes).forEach(attr => { gl.enableVertexAttribArray(attr.loc); gl.vertexAttribPointer(attr.loc, attr.size, gl.FLOAT, false, this.stride, attr.offset * 4); }); gl.bindVertexArray(null); this.indexCount = indexData.length; } draw() { const gl = this.gl; gl.bindVertexArray(this.vao); gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_SHORT, 0); gl.bindVertexArray(null); } _createProgram(vertSource, fragSource) { const gl = this.gl; const compile = (type, source) => { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(shader); return shader; }; const program = gl.createProgram(); gl.attachShader(program, compile(gl.VERTEX_SHADER, vertSource)); gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragSource)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw "Could not link shaders"; return program; } }33:[] 2e:{"id":"3bda5409fb88a8a8","slug":"fragment-shaders","title":"Fragment Shaders","thumbnail":"009cd89d6aada53e67abb0841521baabe2ea4b53a16f80486d3c6d36c57c8f25","access_level":"public","create_time":"$D2025-09-25T06:15:10.477Z","update_time":"$D2026-01-13T09:59:02.399Z","view_time":null,"first_public_time":"$D2025-09-25T08:02:29.390Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024"},"version":400,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null}],"members":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null,"role":"editor"},{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"13d45957abcd3e98","slug":"webgl-fundamentals","title":"WebGL Fundamentals","owner":{"id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics"}},"type":"notebook","body":{"title":"Fragment Shaders","cells":[{"id":34,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":32,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":237,"value":"___\n## CPU Side (positions only)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":50,"value":"greenShader = new ShaderProgram(\n glC00,\n shader_V_posOnly,\n shader_F_posOnly,\n {\n attributes: [\n { name: \"a_Position\", size: 3, offset: 0 }\n ]\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"renderC00 = () => {\n const positions = [\n // positions\n -0.6, -0.52, 0, // v0 (x, y, z)\n 0.6, -0.52, 0, // v1\n 0.0, 0.52, 0, // v2\n ];\n const indices = [\n 0, 1, 2, // vertices of triangle\n ];\n\n greenShader.use();\n greenShader.uploadMesh(positions, indices);\n\n glC00.clearColor(0, 0, 0, 1);\n glC00.enable(glC00.DEPTH_TEST);\n glC00.clear(glC00.COLOR_BUFFER_BIT | glC00.DEPTH_BUFFER_BIT);\n\n greenShader.draw();\n\n return \"Render OK\";\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"___\n## GLSL Shaders (positions only)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"viewof shader_V_posOnly = mdGLSL(`#version 300 es\nprecision highp float;\n\nin vec3 a_Position;\n\nvoid main() {\n gl_Position = vec4(a_Position, 1.0);\n}\n`, \"Vertex shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"viewof shader_F_posOnly = mdGLSL(`#version 300 es\nprecision highp float;\n\nout vec4 fragColor;\n\nvoid main() {\n fragColor = vec4(0.0, 1.0, 0.0, 1.0);\n}\n`, \"Fragment shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"___\n## Rendering (positions only)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":65,"value":"renderC00();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"canvas00Container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"___\n# Example 2 (with colors)\n\nThis time, the fragment shader receives interpolated data from the vertex shader:\n\n${mdGLSL(` in vec3 v_Color;\n`)}\n\nEach **`v_Color`** comes from the vertex shader outputs (**`out vec3 v_Color`**) and has been linearly interpolated across the surface of each triangle. That means every fragment (pixel) inside a triangle has its own smoothly calculated color based on the surrounding vertices.\n\nInside `main()`, we have:\n\n${mdGLSL(` fragColor = vec4(v_Color, 1.0);\n`)}\n\nAgain, this line is the core of the fragment shader: it assigns a final color to each fragment. Here, we simply take the interpolated vertex color and output it as the fragment color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":243,"value":"___\n## CPU Side (with colors)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":84,"value":"basicShader = new ShaderProgram(\n glC01,\n shader_V_basic,\n shader_F_basic,\n {\n attributes: [\n { name: \"a_Position\", size: 3, offset: 0 },\n { name: \"a_Color\", size: 3, offset: 3 }\n ]\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"renderC01 = () => {\n const positionsAndColors = [\n // positions // colors\n -0.6, -0.52, 0, 1, 0, 0, // v0 and c0 (x, y, z, r, g, b)\n 0.6, -0.52, 0, 0, 1, 0, // v1 and c1\n 0.0, 0.52, 0, 0, 0, 1, // v2 and c2\n ];\n const indices = [\n 0, 1, 2, // vertices of triangle\n ];\n\n basicShader.use();\n basicShader.uploadMesh(positionsAndColors, indices);\n\n glC01.clearColor(0, 0, 0, 1);\n glC01.enable(glC01.DEPTH_TEST);\n glC01.clear(glC01.COLOR_BUFFER_BIT | glC01.DEPTH_BUFFER_BIT);\n\n basicShader.draw();\n\n return \"Render OK\";\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"___\n## GLSL Shaders (with colors)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":78,"value":"viewof shader_V_basic = mdGLSL(`#version 300 es\nprecision highp float;\n\nin vec3 a_Position;\nin vec3 a_Color;\n\nout vec3 v_Color;\n\nvoid main() {\n gl_Position = vec4(a_Position, 1.0);\n v_Color = a_Color;\n}\n`, \"Vertex shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"viewof shader_F_basic = mdGLSL(`#version 300 es\nprecision highp float;\n\nin vec3 v_Color;\n\nout vec4 fragColor;\n\nvoid main() {\n fragColor = vec4(v_Color, 1.0);\n}\n`, \"Fragment shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"___\n## Rendering (with colors)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":95,"value":"renderC01();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"canvas01Container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"___\n# Example 3 (`gl_FragCoord`)\n\nIn this example, the fragment shader doesn't rely on any vertex attributes. Instead, it uses a built-in variable called **`gl_FragCoord`**, which provides the screen-space coordinates of each fragment (pixel).\n\nThe shader uses these coordinates to create a simple checkerboard pattern and overlay a gradient, demonstrating that fragment shaders can compute per-pixel colors directly on the GPU.\n\n**`gl_FragCoord`** is available in every fragment and lets the shader know where it is on the screen, enabling effects that don’t depend on vertex data.\n\n*This example illustrates that fragment shaders aren’t just for passing along vertex colors, they can generate procedural patterns, gradients, or other interesting visuals entirely on the fragment stage.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":249,"value":"___\n## CPU Side (`gl_FragCoord`)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":121,"value":"posColorsShader = new ShaderProgram(\n glC02,\n shader_V_posColors,\n shader_F_posColors,\n {\n attributes: [\n { name: \"a_Position\", size: 3, offset: 0 }\n ]\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"renderC02 = () => {\n const positionsAndColors = [\n // positions\n -1.0, 1.0, 0, // v0\n 1.0, 1.0, 0, // v1\n 1.0, -1.0, 0, // v2\n -1.0, -1.0, 0, // v3\n // covers the entire screen space from -1.0 to +1.0\n ];\n const indices = [\n 0, 1, 2, // vertices of triangle 1\n 0, 2, 3, // vertices of triangle 2\n ];\n\n posColorsShader.use();\n posColorsShader.uploadMesh(positionsAndColors, indices);\n\n glC02.clearColor(0, 0, 0, 1);\n glC02.enable(glC02.DEPTH_TEST);\n glC02.clear(glC02.COLOR_BUFFER_BIT | glC02.DEPTH_BUFFER_BIT);\n\n posColorsShader.draw();\n\n return \"Render OK\";\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"___\n## GLSL Shaders (`gl_FragCoord`)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":115,"value":"viewof shader_V_posColors = mdGLSL(`#version 300 es\nprecision highp float;\n\nin vec3 a_Position;\n\nvoid main() {\n gl_Position = vec4(a_Position, 1.0);\n}\n`, \"Vertex shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"viewof shader_F_posColors = mdGLSL(`#version 300 es\nprecision highp float;\n\nout vec4 fragColor;\n\nvoid main() {\n float size = 25.0; // size of each square in pixels\n float xSquare = floor(gl_FragCoord.x / size);\n float ySquare = floor(gl_FragCoord.y / size);\n \n vec3 color;\n if (mod(xSquare + ySquare, 2.0) < 1.0) {\n color = vec3(\n gl_FragCoord.x / 400.0,\n gl_FragCoord.y / 400.0,\n (400.0 - gl_FragCoord.x) / 400.0\n );\n } else {\n color = vec3(0.0);\n }\n \n fragColor = vec4(color, 1.0);\n}\n`, \"Fragment shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"___\n## Rendering (`gl_FragCoord`)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":138,"value":"renderC02();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"canvas02Container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"___\n### The code below handles the necessary setup for the notebook. You can skip it if boring epics aren't on your reading list.\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":53,"value":"___\n## Shader Program","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":55,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"width = 400;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"canvas00 = canvas00Container.querySelector(\"#canvas00\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"canvas01 = canvas01Container.querySelector(\"#canvas01\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"canvas02 = canvas02Container.querySelector(\"#canvas02\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"glC00 = makeGLContext(canvas00);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"glC01 = makeGLContext(canvas01);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"glC02 = makeGLContext(canvas02);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"makeGLContext = (canvas) => {\n let ctx = canvas.getContext(\"webgl2\");\n if (!ctx) {\n throw \"Could not get WebGL context!\";\n }\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"import { mdGLSL, style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"