pn-shader-authoring

Shader authoring skill

When to use

• Writing or refactoring vertex or fragment shaders
• Creating custom Three.js ShaderMaterial or RawShaderMaterial
• Adding custom postprocessing passes
• Migrating custom shaders to WebGPU (prefer TSL per pn-threejs-core for GLSL/WGSL portability)
• Implementing noise, lighting models, or SDF effects
• Optimizing or debugging shader performance

GLSL structure

1. Precision: Use precision highp float; (or mediump for mobile) in fragment shaders. Vertex shaders inherit from fragment or use explicit precision.
2. Uniforms: Declare all uniforms at top; use descriptive names. Pass only what is needed; avoid large uniform blocks when possible.
3. Varyings: Keep varyings minimal; interpolate only necessary data (e.g. vUv, vNormal, vWorldPosition).
4. Defines: Use #define for constants (e.g. #define PI 3.14159265). Avoid magic numbers in shader body.

Three.js ShaderMaterial patterns

• Built-in uniforms: Three.js provides modelViewMatrix, projectionMatrix, normalMatrix, cameraPosition, etc. Use ShaderChunk or copy from Three.js examples when appropriate.
• RawShaderMaterial: Use when you need full control (no built-in chunks). Include required attributes and uniforms manually.
• Updating uniforms: Set uniforms in useFrame or render loop. Avoid creating new objects per frame; reuse uniform objects.
• Texture units: Bind textures to correct units; set uniforms.map.value and uniforms.map.texelSize when needed for postprocessing.

Common patterns

Noise

• Simplex / Perlin: Use established implementations (e.g. from Shadertoy, Inigo Quilez). Optimize for your use case (2D vs 3D).
• FBM (Fractal Brownian Motion): Layer noise at different frequencies for terrain, clouds, or organic patterns. Control octaves and lacunarity for performance.

Lighting models

• Phong: Ambient + diffuse (N·L) + specular (R·V)^n. Use for simple non-PBR.
• PBR: Use physically based BRDF (e.g. Cook-Torrance) when matching Three.js PBR workflow.
• Toon: Step or smoothstep on N·L for cel-shading. Add rim light with fresnel.