threejs-shaders

Name: threejs-shaders
Availability: InStock
Author: nicolasieber-tm

Create custom Three.js visuals with GLSL ShaderMaterial examples.

Updated Feb 2, 2026

Search Tags:#graphics #webgl #threejs #shader #GLSL #ShaderMaterial #custom-shaders

Ready to run

npx skills add https://github.com/nicolasieber-tm/threejs-skills --skill threejs-shaders

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/nicolasieber-tm/threejs-skills/tree/main/skills/threejs-shaders
Command: npx skills add https://github.com/nicolasieber-tm/threejs-skills --skill threejs-shaders

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js developers often need fine-grained custom visuals beyond built-in materials, requiring ShaderMaterial-based shaders and uniforms. This skill provides clear guidance and examples to implement vertex/fragment shaders, manage uniforms, and extend materials for advanced effects.

Core Features & Use Cases

ShaderMaterial and RawShaderMaterial basics, uniforms management, and GLSL integration
Common shader techniques: color, textures, displacement, Fresnel, noise, rim lighting, dissolve
Extending built-in materials via onBeforeCompile and shader chunks
Instanced shaders, shader includes, and debugging

Quick Start

Follow a minimal example to create a ShaderMaterial with custom vertex/fragment shaders, update time uniform in the animation loop, and apply to a 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 ShaderMaterial in Three.js with GLSL?▼

To create a custom ShaderMaterial in Three.js, define your GLSL vertex and fragment shaders, configure uniforms for dynamic values, and apply the material to a mesh. Update uniforms like time within the animation loop to drive real-time visual effects.

How does onBeforeCompile extend built-in Three.js materials with custom shaders?▼

The onBeforeCompile method in Three.js intercepts the built-in material's shader compilation process, allowing you to inject custom GLSL code and modify shader chunks. This approach extends standard materials with bespoke effects while retaining their built-in functionality.

What common shader effects can I implement using GLSL and Three.js?▼

Common GLSL shader effects in Three.js include color manipulation, texture mapping, vertex displacement, Fresnel, noise generation, rim lighting, and dissolve effects. These techniques enable bespoke materials and real-time visual effects for 3D scenes and interactive games.

Do I need to know GLSL to use custom shaders in Three.js?▼

Yes, knowledge of GLSL is required to write custom vertex and fragment shaders for Three.js ShaderMaterial. You also need familiarity with Three.js shader APIs and patterns such as uniforms management and shader includes to implement advanced real-time effects.

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

ShaderMaterial in Three.js automatically injects built-in uniforms and attributes, simplifying GLSL integration. RawShaderMaterial provides a blank canvas without default Three.js prefixes, offering complete control over shader inputs for highly customized visual implementations.

Why are my custom Three.js shader uniforms not updating in the animation loop?▼

If custom Three.js shader uniforms are not updating, ensure the uniform object is declared outside the render loop and only its value property is modified inside the loop. Proper uniforms management is essential for driving dynamic real-time effects in ShaderMaterial.