GLSL ES & WebGL

Check highp support in fragment shaders (gl.getShaderPrecisionFormat).

34.1 WebGL 1 (GLSL ES 1.00) vs WebGL 2 (GLSL ES 3.00)

#version 100 (or none) #version 300 es attribute, varying gl_FragColor, gl_FragData[] user out vec4 (+ layout(location)) texture2D, textureCube limited (often emulated) full int/uint, bit ops constant bounds only limited indexing rules

3-D textures, texture arrays, MRT, instancing extensions or no texelFetch, textureSize, flat

34.2 Precision on mobile/web

Check highp support in fragment shaders (gl.getShaderPrecisionFormat). Mobile GPUs benefit from mediump for colors/normals; keep positions and large UVs highp to avoid jitter.

#version 300 es
precision highp float;          // REQUIRED: fragment shaders have no default float precision
precision highp int;
precision mediump sampler3D;    // some sampler types need precision declarations

34.3 Web frameworks & shaders

Three.js: ShaderMaterial / RawShaderMaterial, onBeforeCompile to patch built-in shaders, TSL (Three Shading Language) for WebGL/WebGPU.

Babylon.js: ShaderMaterial, Node Material editor.

regl, twgl, PixiJS filters, p5.js createShader, glslify (modules for GLSL, e.g., glsl-noise).

const material = new THREE.ShaderMaterial({
  uniforms: { uTime: { value: 0 } },
  vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,
  fragmentShader: `uniform float uTime; varying vec2 vUv; void main() { gl_FragColor = vec4(vUv, 0.5 + 0.5 * sin(uTime), 1.0); }`,
});

34.4 WebGPU & WGSL

WebGPU uses WGSL, with similar concepts (vertex/fragment/compute, bind groups ≈ descriptor sets). GLSL can be converted to WGSL with naga or Tint; Three.js and Babylon.js support both backends.