threejs-shaders

Write custom GLSL shaders and ShaderMaterials for Three.js visual effects.

Updated Jul 16, 2026

Search Tags:#glsl #webgl #three.js #shader #vertex shader #fragment shader #shadermaterial

Ready to run

npx skills add https://github.com/X-manist/Cohmira --skill threejs-shaders-x-manist

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/threejs-shaders
Command: npx skills add https://github.com/X-manist/Cohmira --skill threejs-shaders-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Writing custom WebGL shaders in Three.js requires juggling GLSL syntax, uniform declarations, varying interpolation, and material injection points, which is error-prone without a structured reference. ## Core Features & Use Cases - ShaderMaterial Patterns: Ready-to-use templates for ShaderMaterial and RawShaderMaterial with correct uniform and attribute declarations. - Common Effects: Implementations of vertex displacement, Fresnel, rim lighting, dissolve, noise, and gradient effects. - Built-in Material Extension: Use onBeforeCompile to inject custom GLSL into MeshStandardMaterial and other built-in materials. - Use Case: You need an animated wave effect on a plane mesh. Use the vertex displacement pattern with a time uniform updated in the animation loop. ## Quick Start Create a Three.js ShaderMaterial with a wave vertex displacement effect and a time uniform updated each frame.

Frequently Asked Questions about threejs-shaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a custom shader material in Three.js?▼

Create a THREE.ShaderMaterial with uniforms, a vertexShader, and a fragmentShader string. ShaderMaterial provides built-in uniforms like projectionMatrix and attributes like position, so you only declare your custom uniforms in GLSL.

What is the difference between ShaderMaterial and RawShaderMaterial?▼

ShaderMaterial automatically injects built-in uniforms and attributes such as modelViewMatrix and position. RawShaderMaterial gives full control, requiring you to declare precision, attributes, and all matrices yourself.

How do I modify a built-in Three.js material with custom GLSL?▼

Use the material's onBeforeCompile callback to access the shader object, add custom uniforms, and replace shader chunks like #include <begin_vertex> with your injected code. Store the shader reference to update uniforms per frame.

How do I pass data from vertex shader to fragment shader in GLSL?▼

Declare a varying with the same name in both shaders, such as varying vec2 vUv. Assign it in the vertex shader, and the GPU interpolates the value across fragments for use in the fragment shader.

Why is my Three.js shader not compiling or rendering?▼

Enable renderer.debug.checkShaderErrors to surface compile errors, and log shader source inside onBeforeCompile. Common causes include missing precision declarations in RawShaderMaterial, undeclared uniforms, and GLSL version mismatches.