--- title: WebGL and GLSL: Writing Shaders for the Web description: What writing your own shaders buys you over a library, what it costs in maintenance, and the point where reaching for Three.js is clearly the better decision. canonical: https://www.hire-web-dev.com/stack/webgl-glsl/ section: Stack updated: 2026-09-11 author: SumanKumar Phuyal site: hire-web-dev.com note: >- Generated from the page of record at the canonical URL above. The four case studies are placeholder work and their metrics were never measured; imagery is AI-generated concept art. See https://www.hire-web-dev.com/disclosure/. --- # WEBGL AND GLSL The newest part of my toolkit and the one I've had to work hardest at. Writing shaders is a genuinely different discipline from writing application code, and the transferable skills are fewer than I expected. ## Why it's a different discipline Application code runs once per event. A fragment shader runs once per pixel per frame — on a 1440p display at sixty frames per second, that's roughly two hundred and forty million executions a second. A conditional branch that costs nothing in JavaScript can be catastrophic there, because the GPU may execute both sides and discard one. You end up reaching for arithmetic that produces the same result without branching, which feels perverse until it becomes natural. ## What I use it for Procedural environments, where fractal Brownian noise built from a cheap hash gives convincing fog, cloud and terrain with no geometry and no download. Raymarched primitives — an analytically intersected sphere is mathematically perfect at any zoom and costs a fixed number of operations. And instanced rendering for the Nexus graph, where forty thousand nodes became one draw call reading position and colour from a data texture. The debugging story is the hardest adjustment. There's no console, no breakpoint, no stack. You output a value as a colour and reason about what you see, which means developing a habit of visualising intermediate variables — normals, depth, UV coordinates — as images. It's slow at first and becomes a genuinely useful way of thinking. ## Where I'm still weak Complex lighting models. I can write a convincing metal with an environment approximation and a fresnel term, but a physically correct multi-light setup with shadows is beyond what I'd take money for. I'd bring in a specialist rather than pretend otherwise. ## Key facts - Since: 2025 - Language: GLSL ES 3.0 - Used on: Aether, Nexus - Still learning: Constantly ## Detail - Since: 2025 - Language: GLSL ES 3.0 - Strong at: Procedural, raymarching - Weak at: Complex lighting ## Topics FRAGMENT SHADERS, FBM NOISE, RAYMARCHING, INSTANCING, BRANCHLESS MATH ## Image ![Brushed metal slab tilted in darkness and edge-lit violet and blue, the raw surface a shader draws onto](https://www.hire-web-dev.com/assets/img/webgl-glsl-brushed-metal-slab.jpg)