skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

webgpu-threejs-tsl

Build WebGPU Three.js applications with TSL node materials, compute shaders, and post-processing.

1|Updated Aug 20, 2023
Search Tags:#javascript#shaders#three.js#webgpu#tsl#compute shaders#node materials
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill webgpu-threejs-tsl-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webgpu-threejs-tsl
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/webgpu-threejs-tsl
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill webgpu-threejs-tsl-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) components.

What problem does it solve? Writing GPU shaders for Three.js traditionally requires GLSL or WGSL string code, which is hard to compose, debug, and maintain. This Skill provides complete guidance for using TSL (Three.js Shading Language) to write shaders in JavaScript with the WebGPU renderer, including node materials, GPU compute, and post-processing. ## Core Features & Use Cases - TSL Shader Development: Covers types, operators, swizzling, uniforms, control flow, and custom Fn() functions for building node-based materials. - GPU Compute Shaders: Documents instancedArray storage buffers, workgroups, atomics, and common pitfalls like JS variable reassignment versus TSL property assignment. - Production Concerns: Explains WebGPU device loss recovery, device limits and features, and post-processing pipelines with RenderPipeline. - Use Case: Build a 100,000-particle GPU physics simulation with mouse interaction using the included compute shader template and particle system example. ## Quick Start Ask the AI to create a Three.js WebGPU scene with an animated TSL material using the basic-setup example as a starting point.

Frequently Asked Questions about webgpu-threejs-tsl

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

FAQPage Schema
How do I set up Three.js with the WebGPU renderer?▼

Import from 'three/webgpu', create a THREE.WebGPURenderer, and call await renderer.init() before rendering or running compute shaders. TSL functions are imported separately from 'three/tsl'.

How do I write a compute shader in TSL?▼

Create storage buffers with instancedArray(count, 'vec3'), define the shader with Fn(() => {...})().compute(count), then run it with renderer.compute(shader) after renderer.init(). Access elements via buffer.element(instanceIndex).

Why does my TSL variable reassignment inside If() not work?▼

TSL intercepts property assignments on nodes but not JavaScript variable reassignment, so value = value.add(1) inside If() is invisible to the shader. Use select() for conditional values, .toVar() with .assign(), or direct element.assign() calls instead.

Does Three.js WebGPU handle GPU device loss automatically?▼

No, you must listen to renderer.backend.device.lost and handle recovery yourself. On unexpected loss (reason 'unknown'), dispose the renderer and reinitialize, optionally restoring saved application state.

How do I increase WebGPU buffer size limits in Three.js?▼

Pass requiredLimits such as maxBufferSize and maxStorageBufferBindingSize to the WebGPURenderer constructor, which forwards them to requestDevice(). Check adapter.limits first to confirm the GPU supports the requested values.

What is the difference between MeshStandardNodeMaterial and MeshPhysicalNodeMaterial?▼

MeshStandardNodeMaterial provides PBR with metalness and roughness nodes, while MeshPhysicalNodeMaterial adds clearcoat, transmission, iridescence, sheen, and anisotropy for advanced effects like glass and car paint.

Related Skills

Explore More Software Engineering Skills→
JetBrainsJetBrains
302

webgpu-threejs-tsl

Guide building WebGPU-enabled Three.js applications with TSL shaders.

Official
Advanced
kettleofketchupkettleofketchup

threejs

Build cross-browser 3D web applications with WebGL and WebGPU renderers.

Community
Advanced
nirholasnirholas
5

3d-features

Modify Three.js viewer state, GUI controls, loaders, and environments.

Community
Intermediate
encounterplusencounterplus
16

pixijs-custom-rendering

Implement custom PixiJS shader rendering with GLSL and WGSL programs.

Official
Advanced