2d:null 2e:["$","title",null,{"children":"Meeting the Metal: My Initial Foray Into GLSL Shaders | Quadbits Studio | Observable"}] 33:T4f3,The lack of portability usually stems from three main areas: 1. The *Shadertoy* Wrapper vs. Raw **GLSL** - **Entry Points**: - In *Shadertoy*, your function must be called `void mainImage(out vec4 fragColor, in vec2 fragCoord)`. - In standard **GLSL** (like **WebGL** or **OpenGL**), the entry point is strictly `void main()`.
- **Built-in Variables**: - *Shadertoy* provides global uniforms like `iTime`, `iResolution`, and `iMouse`. - In a raw **GLSL** canvas, these don’t exist unless you manually define them in your code and pass them to the GPU. 2. Versioning and Flavors **GLSL** has evolved significantly over the years. A shader written for **GLSL 110** (legacy) looks very different from **GLSL 330** or **GLSL ES 3.0** (mobile/web) 3. The Execution Environment - **Web vs. Native**: **WebGL** uses **GLSL ES**, which is a stricter subset of the language compared to the full **OpenGL** used in desktop applications.
- **Hardware Drivers**: Different GPU vendors (Nvidia, AMD, Intel) sometimes interpret the **GLSL** spec slightly differently. A shader that compiles on an Nvidia card might throw an error on an Intel integrated chip because of a missing semicolon or a strict type conversion.34:T135a,viewof fragment = Inputs.input(` /*! * Original by Étienne Jacob (https://www.shadertoy.com/view/3ttSR7) * Processed and updated via Google Gemini; curated by Michaël Guitton * Added chromatic aberration, glow, and optional vignette effects */ #ifdef GL_ES precision highp float; #endif // --( glsl-canvas Uniforms )-- uniform vec2 u_resolution; uniform float u_time; // --( Configuration )-- const bool TURN_ON_ANTI_ALIASING = ${antialiasing + ""}; const bool TURN_ON_VIGNETTE = ${vignette + ""}; const int MAX_PRIMARY_RAY_STEPS = ${steps + ""}; const float PI = 3.141592653589793; // --( Math Helpers )-- float sdTorus(vec3 p, vec2 t) { vec2 q = vec2(length(p.xz) - t.x, p.y); return length(q) - t.y; } float distanceField(vec3 p) { return -sdTorus(p.yxz, vec2(5.0, 1.0)); } vec3 castRay(vec3 pos, vec3 dir) { for (int i = 0; i < MAX_PRIMARY_RAY_STEPS; i++) { float dist = distanceField(pos); pos += dist * dir; } return pos; } float random(in float x) { return fract(sin(x) * 1e4); } float random(in vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); } float pattern(vec2 st, vec2 v, float t) { vec2 p = floor(st + v); return step(t, random(25.0 + p * 0.000004) + random(p.x) * 0.75); } // --( Main Render )-- void main() { vec4 fragColor = vec4(0.0); vec2 fragCoord = gl_FragCoord.xy; // --( HOTFIX )-- // Use explicit constants for loop bounds #define AA_SAMPLES ${ antialiasing ? /* smoothing quality */ 4 : /* high speed */ 1 } // If AA is OFF, we run once. If ON, we run a fixed 2x2 grid. const float aaStep = 0.5; float range = TURN_ON_ANTI_ALIASING ? 0.25 : 0.0; // We use a fixed count loop to satisfy the compiler for (int i = 0; i < 2; i++) { for (int j = 0; j < 2; j++) { // If AA is off, we only care about the first iteration if (!TURN_ON_ANTI_ALIASING && (i > 0 || j > 0)) continue; float di = (float(i) - aaStep) * aaStep; // Results in -0.25 and 0.25 float dj = (float(j) - aaStep) * aaStep; if (!TURN_ON_ANTI_ALIASING) { di = 0.0; dj = 0.0; } // 1. Setup camera and ray vec2 uv = (fragCoord.xy + vec2(di, dj)) / u_resolution.xy; vec2 screenPos = uv * 2.0 - 1.0; vec3 cameraPos = vec3(0.0, 4.2, -3.8); vec3 cameraDir = vec3(0.0, 0.22, 1.3); vec3 planeU = vec3(1.0, 0.0, 0.0) * 0.8; vec3 planeV = vec3(0.0, u_resolution.y / u_resolution.x, 0.0); vec3 rayDir = normalize(cameraDir + screenPos.x * planeU + screenPos.y * planeV); // 2. Raymarch vec3 rayPos = castRay(cameraPos, rayDir); // 3. Mapping float majorAngle = atan(rayPos.z, rayPos.y); float minorAngle = atan(rayPos.x, length(rayPos.yz) - 5.0); vec2 st = vec2(majorAngle / PI / 2.0, minorAngle / PI); // 4. Grid and Motion vec2 grid = vec2(1000.0, 50.0); st *= grid; vec2 ipos = floor(st); vec2 fpos = fract(st); vec2 vel = vec2(u_time * 0.09 * max(grid.x, grid.y)); vel *= vec2(1.0, 0.0) * (0.4 + 2.0 * pow(random(1.0 + ipos.y), 2.0)); // 5. Pattern Generation with Effects // We use to oscillate the RGB values. // Offsetting the phases (0.0, 2.0, and 4.0) ensures the colors cycle // through a spectrum instead of simply pulsing from grey to white. vec3 bgColor = vec3( 0.1 + 0.05 * cos(u_time * 0.5), 0.15 + 0.05 * cos(u_time * 0.4 + 2.0), 0.2 + 0.06 * cos(u_time * 0.3 + 4.0) ); vec3 patternColor = vec3(0.0); float threshold = 0.75 + 0.45 * sin(0.6 * u_time + 0.015 * st.x); float distFromCenter = length(uv - 0.5); float chromAb = 0.5 * distFromCenter; // Distorts Red and Blue channels based on distance from screen center patternColor.r = pattern(st + vec2(chromAb, 0.0), vel, threshold); patternColor.g = pattern(st, vel, threshold); patternColor.b = pattern(st - vec2(chromAb, 0.0), vel, threshold); // 6. Post-processing (scanlines + glow) patternColor *= step(0.2, fpos.y); // Uses the fractional part of the grid to create a soft bloom around the edges float glow = exp(-3.0 * abs(fpos.y - 0.5)); patternColor += patternColor * glow * 0.6; // Combine background with the generated pattern vec3 finalColor = bgColor + patternColor; // 7. Accumulate Fragment Color if (TURN_ON_ANTI_ALIASING) { fragColor += 0.25 * vec4(finalColor, 1.0); } else { fragColor = vec4(finalColor, 1.0); gl_FragColor = fragColor; return; // Exit loop when there's no antialiasing } } } if (TURN_ON_VIGNETTE) { // Subtle vignette for extra depth vec2 vuv = fragCoord.xy / u_resolution.xy; fragColor *= smoothstep(0.8, 0.3, length(vuv - 0.5)); } gl_FragColor = fragColor; } `)35:[] 31:{"id":"ee5394cca5fce702","slug":"meeting-the-metal-my-initial-foray-into-glsl-shaders","title":"Meeting the Metal: My Initial Foray Into GLSL Shaders","thumbnail":"c1fa3163f15c50561e05b79749688ec94301a75fa3bacada0ce2485be0765353","access_level":"public","create_time":"$D2026-03-01T09:00:10.741Z","update_time":"$D2026-03-01T10:00:11.401Z","view_time":null,"first_public_time":"$D2026-03-01T09:00:10.741Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024"},"version":29,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}],"members":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"},{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Meeting the Metal: My Initial Foray Into GLSL Shaders","cells":[{"id":0,"value":"$${[\n md`# Meeting the Metal: My Initial Foray Into GLSL Shaders`,\n md`## A Developer’s Journey from Static Pixels to the Dynamic Power of the GPU`\n].map(($_) =>\n Object.assign($_, {\n style: \"text-wrap: balance;\"\n })\n)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"{\n const ceil = Math.ceil;\n const size = width * scale;\n const canvas = DOM.canvas(ceil(size), ceil(size * factor));\n const options = {\n alpha: false,\n desynchronized: true,\n preserveDrawingBuffer: true\n };\n const sandbox = new GLSL(canvas, options);\n\n sandbox.load(fragment);\n\n await visibility();\n\n yield Object.freeze(\n Object.assign(canvas, {\n style: /* hotfix */ canvas.style.cssText\n .split(/;\\s*/)\n .concat([`width: ${ceil(size)}px`])\n .join(\"; \")\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof antialiasing = Inputs.toggle({ label: \"Antialiasing\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof vignette = Inputs.toggle({\n label: \"Vignette\",\n value: antialiasing,\n disabled: !antialiasing\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof steps = Inputs.range([60, 100], { label: \"Ray Steps\", step: 2 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof scale = {\n const index = +(width <= 360);\n const range = new Map(\n [\n [\n [1, 2],\n [2, 3]\n ][index],\n [\n [2, 3],\n [3, 4]\n ][index]\n ]\n .concat(index ? [[1, 1]] : [])\n .map(([a, b]) => {\n const r = a / b;\n return [(r * 100).toFixed(b & (b - 1) ? 2 : 0) + \"%\", r];\n })\n );\n yield Inputs.radio(range, {\n label: \"Viewport Size\",\n key: range.keys().next().value\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"viewof factor = {\n const ratios = new Map([\n [\"16:9\", 9 / 16],\n [\"8:5\", 5 / 8],\n [\"3:2\", 2 / 3]\n ]);\n yield Inputs.radio(ratios, {\n label: \"Aspect Ratio\",\n key: ratios.keys().next().value\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"

In the field of computer graphics, transitioning from standard programming to shader development is a significant paradigm shift. OpenGL Shading Language (GLSL) is a standard tool for utilizing the parallel processing capabilities of the GPU.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"**GLSL** is executed directly by the graphics pipeline. For programmers familiar with C-style languages, moving from CPU-based logic to GPU execution is a fundamental step in creating high-performance, dynamic visual content.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"**GLSL** doesn’t have the *“forgive and forget”* vibe of JavaScript. It’s strictly typed, meaning you have to be very intentional with your data. Since it’s essentially a math engine for vectors and matrices, things can go from simple to *“mind-bending”* in just a few lines of code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"This very first foray into the intricate world of **GLSL** Shaders doesn’t make me an expert — *far from it* — especially since there seem to be notable differences in the available primitives depending on whether you’re working in a standard **GLSL** environment or a *Shadertoy* sandbox.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"Without Google Gemini’s help, I would have been like a hen staring at a knife, because I didn’t understand why this code, initially written for *Shadertoy*, wouldn’t run as-is in a generic **GLSL** canvas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"**GLSL** is often marketed as a *“universal”* shading language, but in practice, *“Write Once, Run Anywhere”* is rarely true without some manual adjustment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"I must give credit where credit is due, as this notebook would not exist without the foundations laid by [Patricio Gonzalez Vivo](https://www.patriciogonzalezvivo.com/), a multidisciplinary artist, and the digital masterpieces of [Étienne Jacob](https://bleuje.com/), a software engineer and virtuoso artist in the creation of animated GIFs through programming.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"I’m genuinely floored by the sheer computational creative freedom **GLSL** unlocks on the web. There’s a bit of melancholy in realizing how long I’ve overlooked it — it feels like I’ve been standing outside a revolution that’s been happening for years.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$${annotate( `📣`,\n`Some Moiré artifacts can be observed in the animation. I have no idea whether it’s possible to reduce them or not (!?)`)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"

\n${md`~~~${fragment}~~~`}\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"GLSL = require(\"glslCanvas\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { annotate } from \"@galopin/misclib-routines\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 32:"$31:body"