mcpField
W
webgpu-threejs-tsl

webgpu-threejs-tsl

github.com/dgreenheckDevelopment1.3k1.6k installsUpdated 29w ago
Repository

About webgpu-threejs-tsl

A reference skill for developers building with Three.js and WebGPU. It explains TSL shader concepts and includes examples, templates, and guidance for materials, compute shaders, and post-processing.

Key features

  1. 01TSL node shader documentation
  2. 02Node material and compute examples
  3. 03Post-processing and WGSL guides
  4. 04WebGPU and compute shader templates
  5. 05Device loss and limits reference

Use cases

  1. 01Set up a Three.js WebGPU project
  2. 02Create custom materials with TSL
  3. 03Build GPU-computed particle effects
  4. 04Migrate shader code from GLSL to TSL

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl

After installing, type/webgpu-threejs-tslin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

REFERENCE.md
docs/
compute-shaders.md
core-concepts.md
device-loss.md
limits-and-features.md
materials.md
post-processing.md
wgsl-integration.md
examples/
basic-setup.js
custom-material.js
earth-shader.js
particle-system.js
post-processing.js
templates/
compute-shader.js
webgpu-project.js

Details

From the project README

WebGPU Three.js with TSL

TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.

Quick Start

import * as THREE from 'three/webgpu';
import { color, time, oscSine } from 'three/tsl';

const renderer = new THREE.WebGPURenderer();
await renderer.init();

const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0xff0000).mul(oscSine(time));

Skill Contents

Documentation
  • docs/core-concepts.md - Types, operators, uniforms, control flow
  • docs/materials.md - Node materials and all properties
  • docs/compute-shaders.md - GPU compute with instanced arrays
  • docs/post-processing.md - Built-in and custom effects
  • docs/wgsl-integration.md - Custom WGSL functions
  • docs/device-loss.md - Handling GPU device loss and recovery
  • docs/limits-and-features.md - WebGPU device limits and optional features
Examples
  • examples/basic-setup.js - Minimal WebGPU project
  • examples/custom-material.js - Custom shader material
  • examples/particle-system.js - GPU compute particles
  • examples/post-processing.js - Effect pipeline
  • examples/earth-shader.js - Complete Earth with atmosphere
Templates
  • templates/webgpu-project.js - Starter project template
  • templates/compute-shader.js - Compute shader template
Reference
  • REFERENCE.md - Quick reference cheatsheet

Key Concepts

Import Pattern
// Always use the WebGPU entry point
import * as THREE from 'three/webgpu';
import { /* TSL functions */ } from 'three/tsl';
Node Materials

Replace standard material properties with TSL nodes:

material.colorNode = texture(map);        // instead of material.map
material.roughnessNode = float(0.5);      // instead of material.roughness
material.positionNode = displaced;         // vertex displacement
Method Chaining

TSL uses method chaining for operations:

// Instead of: sin(time * 2.0 + offset) * 0.5 + 0.5
time.mul(2.0).add(offset).sin().mul(0.5).add(0.5)
Custom Functions

Use Fn() for reusable shader logic:

const fresnel = Fn(([power = 2.0]) => {
  const nDotV = normalWorld.dot(viewDir).saturate();
  return float(1.0).sub(nDotV).pow(power);
});

When to Use This Skill

  • Setting up Three.js with WebGPU renderer
  • Creating custom shader materials with TSL
  • Writing GPU compute shaders
  • Building post-processing pipelines
  • Migrating from GLSL to TSL
  • Implementing visual effects (particles, water, terrain, etc.)

Resources

Comments

Markdown supported