skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill threejs-shaders-x-manist
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jtgironjtgiron

threejs-geometry

Create Three.js geometry with built-in shapes, BufferGeometry, and instanced meshes.

Community
Intermediate
adm-humanerdadm-humanerd

ascii-video

Render input media into colored ASCII video output.

Community
Advanced
coreymaypraycoreymaypray
1

technical-artist

Optimize shaders, VFX, and asset budgets for Unity, Unreal, and Godot.

Community
Advanced
het8802het8802
3

threejs-shaders

Create custom Three.js visual effects with GLSL shaders and uniforms.

Community
Advanced