webgpu-threejs-tsl

Item: webgpu-threejs-tsl
Rating: 4.8
Author: Implexa

Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and…

view source

installs

stars

karma

SkillRank score ↗

4.8/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-06-21

webgpu-threejs-tsl covers node-based shader authoring in javascript using three.js tsl, with a quick-start example but minimal depth on renderer setup, debugging, or production patterns.

structure

3.0

trigger phrases

4.0

procedure

5.0

edge cases

2.0

documentation

5.0

strengths

SKILL.md

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

related skills

semantically similar in the cross-vendor index

clawhub

68% match

Comprehensive Three.js 3D graphics reference

Detailed Three.js 3D graphics reference covering scene setup, cameras, geometries, materials, lights, animations, controls, loaders, math utilities, and debu...

don't have the plugin yet? install it then click "run inline in claude" again.