skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Writing custom 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 and RawShaderMaterial Setup: Create custom materials with uniforms, vertex shaders, and fragment shaders using built-in or fully manual attribute declarations. - Common Shader Patterns: Implement texture sampling, vertex displacement, Fresnel effects, rim lighting, dissolve effects, noise functions, and gradients. - Extending Built-in Materials: Use onBeforeCompile to inject custom GLSL into MeshStandardMaterial and other built-in materials at known shader chunk points. - Use Case: Build an animated water surface by displacing vertices with sine waves in the vertex shader and updating the time uniform each frame. ## Quick Start Ask the AI to create a Three.js ShaderMaterial with a wave vertex displacement effect and an animated 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 string, and a fragmentShader string. 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 manually, including precision, attributes, and matrices. Use RawShaderMaterial for full control over the shader.

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

Use the material's onBeforeCompile callback to access and modify the shader object. Replace shader chunks like #include <begin_vertex> with custom code and add uniforms through shader.uniforms.

How do I pass data from vertex shader to fragment shader in GLSL?▼

Declare a varying variable with the same name in both shaders, such as varying vec2 vUv. Assign it in the vertex shader and read the interpolated value in the fragment shader.

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

Enable renderer.debug.checkShaderErrors to see compile errors in the console. Common causes include missing uniform declarations, mismatched varying names, or using texture2D with GLSL3 where texture() is required.

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

Yes, set glslVersion to THREE.GLSL3 on the material when targeting WebGL2. Then use texture() instead of texture2D and declare an out vec4 variable instead of gl_FragColor.

Related Skills

Explore More Software Engineering Skills→
TenBeltzTenBeltz

threejs-webgl

Create interactive 3D scenes with Three.js using WebGL rendering.

Official
Advanced
dige04dige04

3d-graphics

Develop 3D web experiences with Three.js across WebGL and WebGPU.

Community
Advanced
rabiasohail098rabiasohail098

webgl-performance-optimizer

Profile WebGL Three.js scenes and optimize toward a 60fps target.

Community
Advanced
het8802het8802
3

threejs-shaders

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

Community
Advanced