Start a fresh conversation. Replace the highlighted placeholders.
Use threejs-shaders to create a WebGL ShaderMaterial effect for [scene or component] that achieves [visual effect], with configurable [uniforms and interaction requirements].
Required inputs
[scene or component]
[visual effect]
[uniforms and interaction requirements]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: threejs-shadersdescription: Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.risk: criticalsource: communitydate_added: "2026-03-06"
Three.js Shaders
Detailed Guide
Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
You need custom shader logic in Three.js.
The task involves ShaderMaterial, uniforms, GLSL, vertex deformation, or fragment-based effects.
You are extending material behavior beyond what built-in materials provide.
Limitations
Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.