← LeaderboardThe Skill Leaderboard

webgpu-threejs-tsl

Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.

Published by dgreenheck ↗dgreenheck/webgpu-claude-skill

Try your first task

Create a minimal animated WebGPU material

Start a fresh conversation.

Use the webgpu-threejs-tsl skill to create a minimal example for the Three.js project at `<project-path>`. Use the `three/webgpu` and `three/tsl` entry points, initialize `WebGPURenderer`, and create a red `MeshStandardNodeMaterial` animated with `oscSine(time)`. Replace `<project-path>` with the actual project path and keep the result focused on this basic setup.

Required inputs

  • `<project-path>`: replace with the existing Three.js project path
  • A project using the recommended Three.js r171+ compatibility level and the required `three/webgpu` import-map entry
  • A supported WebGPU browser target

Suggested template by Skill Leaderboard, grounded in the linked source. Task evidence ↗

SKILL.md

name: webgpu-threejs-tsldescription: Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.

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