01 · Problem
What is it for?
Shader creation can fail at several stages, and every allocated GPU resource needs an owner.
02 · Mental model
How should you think about it?
Create vertex and fragment shaders, link a program, resolve requested locations and expose use plus dispose.
Owns shader compilation, linking, required locations and idempotent disposal. Unit tests use a deterministic WebGL mock. Browser-specific drivers and context restoration require integration testing.
03 · Control flow
What happens in which order?
- Compile each shader and inspect its status.
- Link the program and inspect its status.
- Resolve uniforms and attributes.
- Use the program while it is alive.
- Dispose all resources once.
04 · Building blocks
The important contracts
ShaderProgramFactoryCompile, link and own a WebGL program.getUniformLocations / getAttributeLocationsRequire each requested location to exist.use / disposeActivate or release the program explicitly.05 · Build it yourself
Implement a small core
Start with this small independent implementation, then use the steps below to make its contract explicit.
- Compile each shader and inspect its status.
- Link the program and inspect its status.
- Resolve uniforms and attributes.
- Use the program while it is alive.
- Dispose all resources once.
function compile(gl: WebGL2RenderingContext, type: number, source: string) {
const shader = gl.createShader(type);
if (!shader) throw new Error("Shader allocation failed");
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
const log = gl.getShaderInfoLog(shader) ?? "Unknown shader error";
gl.deleteShader(shader);
throw new Error(log);
}
return shader;
}06 · Verify
What should you test?
- Delete allocated resources on compile and link failures.
- Reject missing required locations.
- Make dispose idempotent and reject use after disposal.
Try it yourself
Turn the first verification claim into a failing test, implement the smallest fix, then add a boundary case.
Delete allocated resources on compile and link failures.
Compare your approach
Your check should fail when the stated invariant is deliberately broken, and pass again after the fix. Keep setup deterministic and assert an observable result.
07 · Limits
Trade-offs and failure modes
- Resources are specific to their WebGL context.
- Context loss invalidates prior handles.
- Type casts do not prove a uniform exists.
Unit tests use a deterministic WebGL mock. Browser-specific drivers and context restoration require integration testing.
08 · Keep exploring
Source code and related ideas
yarn tsx packages/webgl-shader-factory/examples/basic.ts