skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-shaders

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

Updated May 5, 2026
Search Tags:#glsl#shaders#webgl#three.js#shadermaterial#uniforms#vertex displacement
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill threejs-shaders-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/threejs-shaders
Command: npx skills add https://github.com/josippapez/ai-setup --skill threejs-shaders-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Writing custom visual effects in Three.js requires knowing GLSL syntax, uniform wiring, and material internals, which are easy to get wrong without a reference. This Skill provides ready-to-use shader patterns and API guidance so you can implement custom effects without digging through Three.js source code. ## Core Features & Use Cases - ShaderMaterial and RawShaderMaterial setup: Create custom materials with uniforms, varyings, and correct GLSL declarations for floats, vectors, colors, matrices, and textures. - Common effect patterns: Implement vertex displacement, Fresnel and rim lighting, noise, gradients, dissolve effects, and texture sampling with copy-paste shader code. - 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 the effect immediately. ## Quick Start Ask the AI to create a Three.js ShaderMaterial with a wave vertex displacement effect animated by a time uniform.

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 write the main function and your custom declarations.

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

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

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

Assign a function to material.onBeforeCompile, then edit shader.vertexShader or shader.fragmentShader by replacing chunk includes like #include <begin_vertex>. Add custom uniforms to shader.uniforms and store the shader reference for per-frame updates.

How do I pass textures to a Three.js shader as uniforms?▼

Add the texture to the uniforms object as { value: texture } and declare it in the fragment shader as uniform sampler2D. Sample it with texture2D(map, vUv) in GLSL 1.0, passing UV coordinates through a varying from the vertex shader.

Why is my Three.js shader not compiling or showing a black screen?▼

Enable renderer.debug.checkShaderErrors to log compile errors, and inspect the final shader source inside onBeforeCompile. Common causes are missing varying declarations, undeclared uniforms, or using texture2D with glslVersion set to THREE.GLSL3.

How do I update shader uniforms every frame in Three.js?▼

Assign new values directly, such as material.uniforms.time.value = clock.getElapsedTime(), inside the animation loop. For vectors and colors use .set() or .copy() on the existing value rather than replacing the object.

Related Skills

Explore More Design & Creative Skills→
NebulavenusNebulavenus
36

forge-mesh-loading

Load and render textured OBJ models with a fly-around camera in SDL3 GPU.

Community
Intermediate
gyalamanch001agyalamanch001a

threejs-postprocessing

Add post-processing effects to Three.js scenes with EffectComposer multi-pass rendering.

Community
Intermediate
soeiroosoeiroo

threejs-materials

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

Community
Intermediate
het8802het8802
3

threejs-shaders

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

Community
Advanced