WebGPU Three.js TSL — guide skill for backgrounds & shaders

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

TSL node materials, GPU compute, post-processing and WGSL for three.js WebGPURenderer, by the Three.js Roadmap author.

What it does

A reference skill for three.js's WebGPU path. It covers WebGPURenderer setup, TSL syntax and node materials, GPU compute with instanced arrays, TSL post-processing, custom WGSL functions, device loss and device limits. It ships runnable examples (particles, an Earth shader, a post-processing chain) and two project templates. It was updated for three r183+ API changes in April 2026, and JetBrains includes it in its curated, verified skills catalog. It is beta because the skill has not changed since 2026-04-02, outside our 180-day window, while TSL keeps changing. For video, note that its examples animate with TSL's built-in time node, which follows the renderer clock. When frames must be exact, drive a uniform() from composition time instead.

Use when

Not for

Install

More backgrounds & shaders skills