threejs-shaders_skill
960
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill cloudai-x/threejs-skills --skill threejs-shaders- SKILL.md13.7 KB
Overview
This skill explains how to create and integrate custom GLSL shaders in Three.js using ShaderMaterial and RawShaderMaterial. It covers uniforms, varyings, common shader patterns (noise, displacement, rim/fresnel, dissolve), and techniques to extend built-in materials. The content focuses on practical examples, performance tips, and debugging strategies for WebGL1/WebGL2 GLSL variants.
How this skill works
ShaderMaterial wraps your GLSL code while providing built-in Three.js uniforms and attributes so you can access matrices, normals, UVs, and camera position. RawShaderMaterial gives full control and requires you to declare those inputs explicitly. Uniforms are defined in JavaScript and updated at runtime; varyings pass interpolated data from vertex to fragment stages. You can inject code into existing materials via onBeforeCompile or include shared ShaderChunk snippets for reuse.
When to use it
- When you need custom visual effects not possible with built-in materials (procedural textures, dissolves, rim lighting).
- To modify geometry at vertex level (vertex displacement, waves, instanced offsets).
- When implementing post-processing or fullscreen fragment effects using ShaderMaterial on a screen quad.
- To extend MeshStandardMaterial or other built-ins with small tweaks via onBeforeCompile.
- When targeting WebGL2 features or GLSL3 (use RawShaderMaterial or glslVersion: THREE.GLSL3).
Best practices
- Minimize and group uniforms; update only when values change to reduce CPU-GPU cost.
- Prefer mix/step/smoothstep over branching to avoid divergent shader paths.
- Precompute heavy values in JavaScript or textures (lookup tables) instead of per-pixel work.
- Use ShaderChunk to share common functions and keep shader strings modular.
- Enable extensions (derivatives, fragDepth) only when needed; use GLSL3 for WebGL2 features.
Example use cases
- Animated water with vertex displacement driven by time and noise uniforms.
- Fresnel or rim lighting for stylized highlights on characters or objects.
- Dissolve transition using a noise texture and an edge glow controlled by a progress uniform.
- Custom PBR tweaks: inject subtle vertex offsets into MeshStandardMaterial via onBeforeCompile.
- Instanced rendering with per-instance offsets or colors supplied via InstancedBufferAttribute.
FAQ
Use RawShaderMaterial when you want full GLSL control and must declare every uniform/attribute yourself; ShaderMaterial is easier when you want Three.js built-ins like projectionMatrix and cameraPosition.
How do I update uniforms every frame?
Store a reference to material.uniforms and set material.uniforms.myUniform.value = newValue inside your animation loop (or update shader.uniforms when using onBeforeCompile).
How can I debug shader errors?
Enable renderer.debug.checkShaderErrors, log compiled shader code from onBeforeCompile, and render diagnostic outputs (vUv, normals, positions) to the fragment color for visual debugging.
