skills.rest
capella-hotel-group
capella-hotel-groupOFFICIAL
Explore all skills by this author →
GitHub

threejs-shaders

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

Updated Apr 6, 2026
Search Tags:#glsl#webgl#three.js#shader#vertex shader#fragment shader#shadermaterial
One-click install
npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill threejs-shaders-capella-hotel-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/capella-hotel-group/capella-hotel-group-poc/tree/main/.github/skills/threejs-shaders
Command: npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill threejs-shaders-capella-hotel-group

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 Patterns: Provides working templates for vertex and fragment shaders with correct uniform, attribute, and varying declarations. - Common Visual Effects: 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: When building a Three.js scene that needs an animated wave surface or a glowing edge effect, use this Skill to generate the correct ShaderMaterial code with uniforms wired to the animation loop. ## Quick Start Write a Three.js ShaderMaterial that displaces vertices with a sine wave 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 write a custom shader in Three.js?▼

Create a THREE.ShaderMaterial with uniforms, a vertexShader, and a fragmentShader written in GLSL. ShaderMaterial automatically provides built-in uniforms like projectionMatrix and attributes like position, normal, and uv.

What is the difference between ShaderMaterial and RawShaderMaterial?▼

ShaderMaterial includes Three.js built-in uniforms and attributes automatically, while RawShaderMaterial requires you to declare everything yourself, including precision, attributes, and matrices. Use RawShaderMaterial when you need full control over the shader source.

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

Use the material's onBeforeCompile callback to access and edit the shader object before compilation. Replace shader chunk includes like #include <begin_vertex> with your injected code and add custom uniforms to shader.uniforms.

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

Assign new values directly to material.uniforms properties inside the animation loop, for example material.uniforms.time.value = clock.getElapsedTime(). For vectors and colors, use methods like set() or setHSL() on the uniform value.

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

Common causes include missing precision declarations in RawShaderMaterial, undeclared uniforms or varyings, and mismatched varying names between vertex and fragment shaders. Enable renderer.debug.checkShaderErrors and log the compiled shader source to diagnose.

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

Yes, set glslVersion: THREE.GLSL3 on the ShaderMaterial to target 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→
calesthiocalesthio
55.1k

threejs-shaders

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

Community
Intermediate
calesthiocalesthio
55.1k

threejs-postprocessing

Implements Three.js post-processing effects using EffectComposer, bloom, DOF, and custom screen-space shaders.

Community
Intermediate
EntelligentsiaEntelligentsia
1

threejs-materials

Select and configure Three.js materials for visuals and performance.

Official
Advanced
soeiroosoeiroo

threejs-materials

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

Community
Intermediate