skills.rest
ElementTech
ElementTechCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-shaders

Create custom GLSL shaders for Three.js visual effects.

2|Updated Jan 30, 2026
Search Tags:#glsl#three.js#shader#shadermaterial#uniforms#vertex-shader#fragment-shader
One-click install
npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-shaders-elementtech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/ElementTech/create-threejs-game/tree/main/template/.claude/skills/threejs-shaders
Command: npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-shaders-elementtech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating bespoke visual effects in Three.js requires writing and integrating GLSL code, managing uniforms and varyings, and deciding between ShaderMaterial and RawShaderMaterial; this Skill consolidates patterns, best practices, and common effects to shorten the learning curve and reduce iteration time.

Core Features & Use Cases

  • ShaderMaterial vs RawShaderMaterial: Guidance on when to use Three.js built-in shader conveniences versus full GLSL control.
  • Uniforms, Varyings & Attributes: How to declare, update, and optimize uniforms, pass varyings, and use instanced attributes.
  • Common Effects: Patterns and implementations for texture sampling, vertex displacement, fresnel, rim lighting, dissolve, noise-based effects, gradients, and post-processing.
  • Extending Built-in Materials: Techniques using onBeforeCompile and shader chunk injection to augment MeshStandardMaterial and other materials.
  • Performance & Debugging Tips: Strategies to minimize uniforms, reduce conditionals, and debug shader compilation issues.

Quick Start

Create a Three.js ShaderMaterial that applies a time-based vertex displacement, include a time uniform and a color uniform, and update the time uniform each animation frame.

Frequently Asked Questions about threejs-shaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create custom GLSL shaders in Three.js?▼

Create custom GLSL shaders in Three.js by using ShaderMaterial or RawShaderMaterial to define vertex and fragment logic, manage uniforms and varyings, and update them per frame for bespoke visual effects.

When should I use ShaderMaterial vs RawShaderMaterial in Three.js?▼

Use ShaderMaterial to leverage Three.js built-in shader conveniences like projection matrices, and use RawShaderMaterial when you need full GLSL control without automatic Three.js shader injections for your WebGL project.

How do I extend built-in Three.js materials with custom GLSL code?▼

Extend built-in Three.js materials like MeshStandardMaterial by using the onBeforeCompile function to inject shader chunks, adding custom GLSL effects without replacing the base material entirely.

What are common GLSL shader effects I can implement for Three.js objects?▼

Common GLSL shader effects for Three.js include vertex displacement, fresnel and rim lighting, dissolve transitions, noise-based effects, gradients, and post-processing effects, all managed through uniforms and varyings.

How do I optimize WebGL shader performance and debug compilation issues in Three.js?▼

Optimize WebGL shader performance by minimizing uniforms, reducing shader conditionals, and managing precision, while debugging compilation issues by reviewing GLSL syntax and shader chunk injections in your Three.js project.

Related Skills

Explore More Software Engineering Skills→
trungdo9trungdo9
3

threejs

Build 3D web applications with Three.js scenes, cameras, and animations.

Community
Advanced
CarlosDoersCarlosDoers

threejs-shaders

Integrate custom GLSL shaders into Three.js scenes via ShaderMaterial or RawShaderMaterial.

Community
Intermediate
AsylcreekAsylcreek

threejs-shaders

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

Community
Advanced
CloudAI-XCloudAI-X
2.9k

threejs-shaders

Create Three.js custom shaders with GLSL for visual effects.

Community
Advanced