skills.rest
Chia1104
Chia1104COMMUNITY
Explore all skills by this author →
Website𝕏@chia7423GitHub

threejs-shaders

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

1|Updated Aug 11, 2026
Search Tags:#glsl#webgl#three.js#shader#ShaderMaterial#uniforms#vertex displacement
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill threejs-shaders-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/Chia1104/agent-air/tree/main/skills/shared/threejs-shaders
Command: npx skills add https://github.com/Chia1104/agent-air --skill threejs-shaders-chia1104

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, varyings, and material injection points, which is error-prone without a structured reference. ## Core Features & Use Cases - ShaderMaterial and RawShaderMaterial Setup: Create custom materials with correctly declared uniforms, attributes, and varyings. - Common Shader Patterns: Implement vertex displacement, Fresnel effects, rim lighting, dissolve effects, noise functions, and gradients with ready-to-adapt GLSL snippets. - 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 this Skill to write a ShaderMaterial with a time uniform and sine-based vertex displacement, then update the uniform each frame in the animation loop. ## Quick Start Use the threejs-shaders skill to create a ShaderMaterial with a Fresnel glow effect for my sphere mesh.

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 automatically provides built-in uniforms like projectionMatrix and attributes like position, normal, and uv, so you only declare your custom uniforms.

What is the difference between ShaderMaterial and RawShaderMaterial?▼

ShaderMaterial includes Three.js built-in uniforms and attributes such as modelViewMatrix and position automatically. RawShaderMaterial gives full control, requiring you to declare everything yourself, including precision statements and matrix uniforms.

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

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

Can I modify built-in Three.js materials with custom GLSL?▼

Yes, use material.onBeforeCompile to modify the shader before compilation. Replace chunks like #include <begin_vertex> with custom code, add uniforms to shader.uniforms, and store the shader reference in material.userData for per-frame updates.

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

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

How do I use WebGL2 GLSL 3.0 features in Three.js shaders?▼

Set glslVersion: THREE.GLSL3 on the ShaderMaterial. Then use texture() instead of texture2D, declare an out vec4 fragment output instead of gl_FragColor, and use in/out instead of varying/attribute.

Related Skills

Explore More Software Engineering Skills→
josippapezjosippapez

threejs-shaders

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

Community
Intermediate
dige04dige04

3d-graphics

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

Community
Advanced
XyrcesXyrces
2

gpu_rendering_optimization

Optimize Godot GPU rendering by reducing draw calls, overdraw, shader cost, and texture memory pressure.

Community
Advanced
calesthiocalesthio
55.1k

threejs-materials

Configure Three.js materials including PBR, toon, and custom GLSL shaders for mesh styling.

Community
Intermediate