skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Write custom GLSL shaders and ShaderMaterial effects for Three.js scenes.

Updated Jun 30, 2026
Search Tags:#glsl#webgl#three.js#shader#ShaderMaterial#vertex shader#fragment shader
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill threejs-shaders-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/threejs-shaders
Command: npx skills add https://github.com/ayofemiade/cleva --skill threejs-shaders-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Writing custom GLSL shaders in Three.js requires knowing built-in uniforms, attribute declarations, varying syntax, and material injection points, which are easy to get wrong and hard to debug. ## Core Features & Use Cases - ShaderMaterial and RawShaderMaterial Setup: Provides working templates for vertex and fragment shaders with correct uniform, attribute, and varying declarations. - Common Effect Patterns: Includes ready-to-adapt implementations of vertex displacement, Fresnel, rim lighting, dissolve, noise, gradients, and texture sampling. - Extending Built-in Materials: Shows how to use onBeforeCompile to inject custom GLSL into MeshStandardMaterial and other built-in materials at known shader chunk points. - Use Case: You want an animated wave effect on a plane mesh. Use the vertex displacement pattern with a time uniform updated in the animation loop to produce the effect without searching documentation. ## Quick Start Ask the AI to create a Three.js ShaderMaterial with a Fresnel glow effect on a sphere mesh.

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 string, and a fragmentShader string. ShaderMaterial automatically provides built-in uniforms like projectionMatrix and attributes like position, normal, and uv, so you only declare your custom uniforms in GLSL.

What is the difference between ShaderMaterial and RawShaderMaterial?▼

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

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

Assign a function to material.onBeforeCompile and modify shader.vertexShader or shader.fragmentShader by replacing include chunks like #include <begin_vertex>. Add custom uniforms to shader.uniforms and store the shader reference in material.userData for per-frame updates.

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

Declare a varying with the same name and type 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?▼

Set renderer.debug.checkShaderErrors = true to log compile errors, and print the final shader source inside onBeforeCompile. Common causes include missing precision declarations in RawShaderMaterial, undeclared uniforms, or mismatched varying names.

Can I use GLSL 3.0 features with Three.js shaders?▼

Yes, set glslVersion: THREE.GLSL3 on the material when targeting WebGL2. Then use texture() instead of texture2D and declare an out vec4 variable instead of writing to gl_FragColor.

Related Skills

Explore More Software Engineering Skills→
josippapezjosippapez

threejs-shaders

Write custom GLSL shaders for Three.js ShaderMaterial and built-in material extensions.

Community
Intermediate
MarbleSodasMarbleSodas

p5js

Generate p5.js sketches from prompts and export as HTML, PNG, GIF, MP4, or SVG.

Community
Advanced
Jose-Polanco-OxteJose-Polanco-Oxte
3

renderdoc-gpu-debug

Inspect and debug GPU frame captures with RenderDoc via the rdc-cli command line.

Community
Advanced
soeiroosoeiroo

threejs-materials

Select and tune Three.js materials for real-time 3D scenes.

Community
Intermediate