skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

threejs-shaders

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

1|Updated Aug 17, 2025
Search Tags:#glsl#shaders#webgl#three.js#vertex shader#fragment shader#shadermaterial
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-shaders-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/threejs-shaders
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-shaders-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Writing custom GLSL shaders in Three.js requires knowing which built-in uniforms and attributes are available, how to structure ShaderMaterial versus RawShaderMaterial, and how to inject code into built-in materials without breaking them. This Skill provides working patterns for these tasks so you avoid trial-and-error with shader compilation errors. ## Core Features & Use Cases - ShaderMaterial Setup: Complete examples for uniforms, varyings, vertex displacement, texture sampling, and material properties like blending and transparency. - Common Visual Effects: Ready-to-adapt patterns for Fresnel, rim lighting, dissolve, gradients, noise, and instanced rendering. - Extending Built-in Materials: Use onBeforeCompile to inject custom logic into MeshStandardMaterial and other built-in shaders at known chunk injection 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 continuous motion. ## Quick Start Ask the AI to 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 in Three.js?▼

Create a THREE.ShaderMaterial with vertexShader and fragmentShader strings, plus a uniforms object for values like time or color. Update uniforms each frame via material.uniforms.time.value inside your animation loop.

What is the difference between ShaderMaterial and RawShaderMaterial?▼

ShaderMaterial automatically provides built-in uniforms like projectionMatrix and attributes like position and normal. 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 shader code?▼

Assign a function to material.onBeforeCompile and modify shader.vertexShader or shader.fragmentShader by replacing chunk includes like #include <begin_vertex>. Store the shader reference in material.userData to update custom uniforms later.

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 showing a black screen?▼

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

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

Yes, set glslVersion: THREE.GLSL3 on the material for WebGL2 features. 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→
calesthiocalesthio
55.1k

threejs-shaders

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

Community
Intermediate
MarbleSodasMarbleSodas

p5js

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

Community
Advanced
Totes-MickGOATsTotes-MickGOATs

Unity Graphics Pipeline

Configure Unity 6 URP for racing games with GPU optimization and profiling.

Community
Advanced
soeiroosoeiroo

threejs-materials

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

Community
Intermediate