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

threejs-impl-webgpu

Implements Three.js WebGPU rendering with TSL node materials, compute shaders, and WebGL fallbacks.

1|Updated Aug 20, 2023
Search Tags:#three.js#webgpu#3d rendering#tsl#compute shader#webgl fallback#node material
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-webgpu-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-impl-webgpu
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-impl-webgpu
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-webgpu-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Developers using the Three.js WebGPU renderer frequently hit runtime errors from missing async initialization, unsupported browsers, or accidentally using GLSL shaders and WebGL-only APIs like EffectComposer. This Skill provides correct patterns, API references, and anti-patterns to build WebGPU scenes without these pitfalls. ## Core Features & Use Cases - WebGPURenderer Setup: Correct async initialization, browser feature detection with WebGPU.isAvailable(), and automatic WebGLRenderer fallback for unsupported browsers. - TSL and Node Materials: Full reference for Three Shading Language types, operators, geometry/camera nodes, control flow, and node-based material inputs replacing raw GLSL. - Compute Shaders and Post-Processing: GPU compute via computeAsync with storage buffers and atomics, plus the PostProcessing class with bloom, FXAA, and other TSL-based effects. - Use Case: When migrating a WebGL Three.js scene to WebGPU, follow the six-step migration guide to swap imports, materials, post-processing, and animation loops correctly. ## Quick Start Ask the AI to create a Three.js WebGPU scene with a spinning cube, including browser support detection and a WebGL fallback.

Frequently Asked Questions about threejs-impl-webgpu

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

FAQPage Schema
How do I set up Three.js WebGPURenderer correctly?▼

Import from 'three/webgpu', create the WebGPURenderer, and always await renderer.init() before the first render call. Use renderer.setAnimationLoop() instead of requestAnimationFrame, and wrap setup in an async function since init() returns a Promise.

How do I write shaders for Three.js WebGPU?▼

Use TSL (Three Shading Language) with NodeMaterial instead of raw GLSL strings. TSL is a JavaScript node graph API that compiles to WGSL for WebGPU and GLSL for WebGL2, so ShaderMaterial with GLSL strings is not supported by the WebGPU backend.

Does Three.js WebGPU work in all browsers?▼

WebGPU works in Chrome and Edge 113+, Safari 18+, and Firefox only behind a flag. Always check WebGPU.isAvailable() first and provide a WebGLRenderer fallback so unsupported browsers still render the scene.

Can I use EffectComposer with WebGPURenderer?▼

No, EffectComposer and its passes are WebGL-only and fail with WebGPURenderer. Use the PostProcessing class from 'three/webgpu' with TSL nodes like bloom(), fxaa(), and renderOutput() to build the post-processing chain.

Why does my WebGPU render throw an error on the first frame?▼

The error occurs when renderer.render() is called before await renderer.init() resolves, because the GPU device handle does not exist yet. Always make the entry point async and await initialization before any render or compute call.

How do I run compute shaders in Three.js WebGPU?▼

Create a compute node with compute(shaderFn, count) using TSL, storage buffers via storage(), and dispatch it with await renderer.computeAsync(computeNode). Compute shaders are WebGPU-only and unavailable in the WebGL fallback mode.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio
11

threejs-core-renderer

Configure Three.js renderers, cameras, shadow maps, and shaders for WebGL and WebGPU.

Official
Advanced
afoveaafovea

web-renderer

Optimize Three.js and React Three Fiber scene performance with browser profilers.

Community
Advanced
CarlosQ96CarlosQ96

threejs-animation

Animate Three.js objects with keyframe clips, mixers, and actions.

Community
Advanced
hanzoaihanzoai

threejs-shaders

Build custom GLSL shader effects with Three.js ShaderMaterial and RawShaderMaterial.

Official
Advanced