skills.rest
Bailipa
BailipaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-syntax-shaders

Write and patch Three.js shaders with ShaderMaterial and RawShaderMaterial.

4|Updated Apr 14, 2026
Search Tags:#glsl#threejs#shader#shadermaterial#onbeforecompile#rawshadermaterial
One-click install
npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-syntax-shaders-bailipa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-syntax-shaders
Source: https://github.com/Bailipa/EZTor_FULLBLOOD/tree/main/.opencode/skills/threejs/threejs-syntax/threejs-syntax-shaders
Command: npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-syntax-shaders-bailipa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Writing and patching GLSL shaders in Three.js can be error-prone, especially when using ShaderMaterial or RawShaderMaterial, managing uniforms, and applying onBeforeCompile changes.

Core Features & Use Cases

  • Simplifies the workflow for creating and modifying shaders with ShaderMaterial, RawShaderMaterial, and ShaderChunk integrations.
  • Guides proper uniform handling, GLSL version considerations, and safe patching of built-in materials.
  • Provides practical examples for common patterns like adding uniforms, injecting chunks, and enabling fog or lights in custom materials.

Quick Start

Start with a basic ShaderMaterial example and progressively extend uniforms, vertex/fragment shaders, and onBeforeCompile patches.

Frequently Asked Questions about threejs-syntax-shaders

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

FAQPage Schema
How do I patch existing Three.js materials using onBeforeCompile?▼

ShaderMaterial provides a simplified interface for writing custom shaders with automatic uniform handling, while RawShaderMaterial requires manual setup of all attributes and uniforms without built-in Three.js prefixes.

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

ShaderMaterial provides a simplified interface for writing custom shaders with automatic uniform handling, while RawShaderMaterial requires manual setup of all attributes and uniforms without Three.js prefixes.

How do I integrate ShaderChunk into a custom Three.js shader?▼

You integrate ShaderChunk by injecting pre-written GLSL snippets into your custom ShaderMaterial, enabling reuse of common lighting, fog, and other effects across WebGL projects.

Does this guide cover managing uniforms and GLSL versions for Three.js shaders?▼

Yes, it guides proper uniform handling, GLSL version considerations, and safe patching of built-in materials, providing practical examples and anti-pattern guidance for Three.js workflows.

Why does my custom Three.js shader break when adding fog or lights?▼

Custom shaders break when required fog or lighting uniforms and ShaderChunk includes are missing, requiring proper integration of these defines and chunks to enable standard effects.

Related Skills

Explore More Software Engineering Skills→
hii-saikrishnahii-saikrishna

threejs-webgl

Create interactive 3D scenes with Three.js and WebGL rendering.

Community
Advanced
tanepipertanepiper
27

webgl-expert

Design and implement WebGL applications with GLSL shaders and rendering pipelines.

Community
Advanced
huangzidahuangzida
2

threejs-shaders

Create and integrate custom GLSL shaders into Three.js scenes.

Community
Advanced
norrbackanorrbacka

threejs-shaders

Create custom Three.js shader code for vertex and fragment materials.

Community
Intermediate