Web Shaders

You are writing shaders that run in a browser. Get the platform and language right first, then the technique, then verify visually.

1. Establish the target before writing a line

Ask (or infer from the codebase) which of these you are in — the boilerplate and language differ:

Target	Language	Notes
Raw WebGL 2	GLSL ES 3.00 (`#version 300 es`)	You declare everything. `in/out`, `texture()`, custom `out vec4`.
Raw WebGL 1	GLSL ES 1.00	`attribute/varying`, `texture2D()`, `gl_FragColor`. Legacy — avoid for new work.
WebGPU (raw)	WGSL	`@vertex`/`@fragment`, bind groups, uniform buffers with strict alignment.
Three.js `ShaderMaterial`	GLSL ES 1.00 by default	Three injects camera/model matrices and attributes (see §2). Set `glslVersion: THREE.GLSL3` for GLSL 3.
Three.js `RawShaderMaterial`	whatever you declare	No injected uniforms/attributes or `precision`. You write the full header.
Three.js TSL (WebGPURenderer)	JavaScript nodes	Author with `tslFn`/node ops; compiles to both WGSL and GLSL. No raw shader strings.
React Three Fiber	GLSL via drei `shaderMaterial`	Wraps `ShaderMaterial`; uniforms become material props.

If the project uses WebGPURenderer, prefer TSL over raw WGSL strings — it is the supported path and cross-compiles.