skills.rest
mooch10
mooch10COMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

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

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

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 extension hooks, which are easy to get wrong and hard to debug. ## Core Features & Use Cases - ShaderMaterial Patterns: Provides ready-to-use vertex and fragment shader templates for ShaderMaterial and RawShaderMaterial with correct uniform and varying declarations. - Common Visual Effects: Includes 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. - Use Case: When building a Three.js scene that needs an animated wave surface or a glowing edge effect, use this Skill to generate the correct shader code and uniform update loop. ## Quick Start Write a Three.js ShaderMaterial with a wave vertex displacement effect and a time uniform updated in the animation loop.

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 modelViewMatrix plus attributes like position, normal, and uv automatically.

What is the difference between ShaderMaterial and RawShaderMaterial in Three.js?▼

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

How do I update shader uniforms in the Three.js animation loop?▼

Assign new values directly to material.uniforms, for example material.uniforms.time.value = clock.getElapsedTime(). For vectors and colors use .set(), and for matrices use .copy() with the desired matrix.

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

Use material.onBeforeCompile to access the shader object, add custom uniforms to shader.uniforms, and replace shader chunks like #include <begin_vertex> with your injected GLSL code.

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

Enable renderer.debug.checkShaderErrors to surface compile errors, and log shader.vertexShader and shader.fragmentShader inside onBeforeCompile. Common causes include missing precision declarations, undeclared varyings, or mismatched uniform types.

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

Yes, set glslVersion: THREE.GLSL3 on the ShaderMaterial for WebGL2 features. Then use texture() instead of texture2D and declare an out vec4 variable instead of gl_FragColor.

Related Skills

Explore More Software Engineering Skills→
jtgironjtgiron

threejs-geometry

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

Community
Intermediate
47thtechcorner47thtechcorner
21

threejs-postprocessing

Implement post-processing pipelines with bloom and depth of field in Three.js.

Community
Advanced
utsavm81098utsavm81098

threejs-materials

Select and configure Three.js material types for lighting, textures, and shaders.

Community
Advanced
soeiroosoeiroo

threejs-materials

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

Community
Intermediate