skills.rest
nicolasieber-tm
nicolasieber-tmCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Create custom Three.js visuals with GLSL ShaderMaterial examples.

Updated Feb 2, 2026
Search Tags:#graphics#webgl#threejs#shader#GLSL#ShaderMaterial#custom-shaders
One-click install
npx skills add https://github.com/nicolasieber-tm/threejs-skills --skill threejs-shaders
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
huangzidahuangzida
2

threejs-geometry

Create and optimize three.js geometries with built-in shapes, BufferGeometry, and instanced meshes.

Community
Advanced
sbalagan22sbalagan22

threejs-shaders

Create custom GLSL shaders with Three.js ShaderMaterial and RawShaderMaterial.

Community
Advanced
rheadshrheadsh
38

td-glsl-vertex

Create and manipulate GLSL vertex shaders within TouchDesigner's GLSL MAT operator.

Community
Advanced
het8802het8802
3

threejs-shaders

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

Community
Advanced