# Build Three.js Shaders with GLSL and TSL

Custom Three.js effects require careful handling of shader inputs, color conversion, and renderer compatibility. This skill provides GLSL and TSL examples for building effects and diagnosing common material errors.

## Install

```bash
npx skillstore add cloudai-x/threejs-shaders
```

## Metadata

- Status: approved
- Slug: cloudai-x-threejs-shaders
- Skillstore revision: r1
- Version status: missing
- Tree hash: a7b6bd0724e32aed53ffdf1c7b114a9e9432595463bba44460054a15edfe920b
- Author: cloudai-x
- GitHub username: cloudai-x
- Repository: https://github.com/cloudai-x/threejs-skills/tree/0e181866f095b5f06d005133876e926515390d95/skills/threejs-shaders
- Ref: c993c6abcbffafea2683d7748b53b3dfaf438415
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 73
- Public page: https://skillstore.pages.dev/skills/cloudai-x-threejs-shaders
- Manifest: https://skillstore.pages.dev/api/skills/cloudai-x-threejs-shaders/manifest

## Capabilities

- Explain ShaderMaterial and RawShaderMaterial setup, GLSL declarations, uniforms, varyings, and output color conversion.
- Provide examples for vertex displacement, Fresnel shading, dissolve effects, and instanced attributes.
- Show how to extend built-in WebGL materials with onBeforeCompile and distinct program cache keys.
- Explain shader chunk reuse, compile error logging, and visual debugging of UVs and normals.
- Demonstrate TSL node materials, reusable functions, time nodes, texture sampling, and GLSL migration for WebGPURenderer.
- Identify common Three.js r186 shader API mistakes and renderer compatibility problems.

## Use Cases

- Add Animated Product Materials: Create color waves, displacement, or Fresnel effects while keeping shader uniforms and color conversion consistent.
- Prototype Game Visual Effects: Adapt dissolve shaders and custom instanced attributes for scene objects, then inspect shader errors and coordinate spaces.
- Migrate Effects to TSL: Translate GLSL effects into node materials and reusable TSL functions for WebGPURenderer with its WebGL 2 fallback.

## Prompt Templates

### Create a First Shader

```
Use threejs-shaders to create an animated color wave on a plane in Three.js r186 with WebGLRenderer. Include time uniforms and output color conversion.
```

### Diagnose a Material Problem

```
Review my Three.js r186 shader: [paste shader and renderer setup]. Diagnose dark colors, missing uniform declarations, and coordinate-space mismatches. Explain the required corrections.
```

### Extend a Lit Material

```
Add animated vertex displacement to my r186 MeshStandardMaterial with onBeforeCompile: [paste material setup]. Preserve lighting and use distinct program cache keys for shader variants.
```

### Port a Dissolve Effect

```
Port this GLSL dissolve effect to a reusable TSL Fn for Three.js r186: [paste shader]. Use WebGPURenderer, updatable progress, and portable texture sampling. Identify backend-specific assumptions.
```

## Limitations

- Targets Three.js r186; other releases can require different APIs and shader chunks.
- Provides documentation and examples, not a packaged renderer, automated shader compiler, or test suite.
- Requires a Three.js project and a compatible browser or GPU environment to run and verify examples.
- References texture files and related skills that are not included in this single-file skill.

## Best Practices

- Check the installed Three.js release and renderer backend before choosing GLSL shaders or TSL node materials.
- Keep lighting vectors in one coordinate space and verify texture color spaces before adjusting shader colors.
- Inspect compiled shader errors and visualize intermediate values before adding more effect logic.

## Anti Patterns

- Use ShaderMaterial or onBeforeCompile under WebGPURenderer instead of selecting node materials.
- Mix world-space camera directions with view-space normals when calculating Fresnel or rim lighting.
- Copy obsolete shader chunk names or TSL imports without checking the targeted release.

## Security Audit

- Audited at: 2026-11-07T14:36:45.334\+00:00
- Summary: All 118 static findings are false positives from Markdown formatting, JavaScript shader strings, GLSL entry points, and shader chunk keys. The reviewed documentation contains rendering examples and relative texture loads, with no evidence of shell execution, credential access, reconnaissance, or prompt injection. No evidence found of malicious intent or additional semantic security risks.

## Stats

- Views: 0
- Downloads: 0
- Favorites: 0
- Popularity score: 0