skills.rest
shige1014-dev
shige1014-devCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Implement custom GLSL shader effects in Three.js with ShaderMaterial.

1|Updated Apr 11, 2026
Search Tags:#real-time#glsl#webgl#threejs#shader#shadermaterial
One-click install
npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill threejs-shaders-shige1014-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/shige1014-dev/backup-OpenMontage/tree/main/.agents/skills/threejs-shaders
Command: npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill threejs-shaders-shige1014-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js shader development often requires deep GLSL knowledge and careful integration with ShaderMaterial to build custom visual effects. This Skill provides patterns and guidance to implement vertex/fragment shaders, uniforms, and extensions to built-in materials for real-time visuals in web apps.

Core Features & Use Cases

  • ShaderMaterial and RawShaderMaterial basics with uniforms
  • Common shader patterns: vertex displacement, Fresnel, noise, gradient, rim lighting, and dissolve
  • Extending built-ins with onBeforeCompile and shader injection
  • Instanced shaders and debugging tips
  • Performance considerations for shader-heavy scenes
  • See Also: See related Three.js shader tooling

Quick Start

Create a basic ShaderMaterial in Three.js and apply a simple color shader to render 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 custom GLSL shaders in Three.js?▼

To create custom GLSL shaders in Three.js, use ShaderMaterial or RawShaderMaterial to define vertex and fragment shaders, pass data via uniforms, and render per-pixel visual effects on a mesh.

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

ShaderMaterial provides built-in uniforms and attributes, while RawShaderMaterial gives full control over GLSL code without automatic Three.js injections, requiring manual declaration of all shader variables.

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

You can extend built-in Three.js materials with custom shaders using the onBeforeCompile function to inject GLSL code into existing material programs, enabling vertex displacement or rim lighting without losing built-in features.

What common shader patterns can I implement for real-time web visuals?▼

Common shader patterns for real-time web visuals include vertex displacement, Fresnel effects, noise generation, gradients, rim lighting, and dissolve effects, all configurable via uniforms in Three.js.

Do I need deep GLSL knowledge to use Three.js shader workflows?▼

Yes, implementing custom Three.js shaders requires GLSL knowledge to write vertex and fragment logic, manage varying data, and handle performance considerations for shader-heavy interactive 3D scenes.

How do I optimize Three.js shader performance for heavy scenes?▼

Optimize Three.js shader performance by following provided debugging tips, minimizing complex per-pixel calculations, using instanced shaders, and applying performance considerations tailored for shader-heavy real-time scenes.

Related Skills

Explore More Software Engineering Skills→
video-production-buddyvideo-production-buddy
602

threejs-shaders

Implement custom GLSL shader effects for Three.js projects.

Official
Intermediate
CarlosDoersCarlosDoers

threejs-shaders

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

Community
Intermediate
CloudAI-XCloudAI-X
2.9k

threejs-shaders

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

Community
Advanced
ElementTechElementTech
2

threejs-shaders

Create custom GLSL shaders for Three.js visual effects.

Community
Intermediate