Field Guide to TSL and WebGPU
- Auto-discovered
Maxime Heckel
Visit resource ↗Description
Field Guide to TSL and WebGPU is a free long-form tutorial by Maxime Heckel on porting WebGL and Three.js effects to Three.js Shading Language and the WebGPU backend.
It clarifies how TSL relates to WebGPU and WGSL, shows node materials versus glslFn and wgslFn escape hatches, then builds recipes for materials, compute shaders, compute-driven particles and instancing, and TSL post-processing. Notes cover React Three Fiber cases where classic material names map to node materials, with interactive playgrounds per stage.
The guide suits intermediate creative developers who already know WebGL or Three.js shaders. Absolute beginners will need prior shader familiarity.
The post is a self-contained blog article with embedded demos, free in a browser. Playgrounds may need a WebGPU-capable browser.
It is useful as a structured migration field guide linking terminology, node materials, and compute patterns in one narrative.
Related resources
- Custom Renderer Features (Cyanilux)
Long-form Cyanilux guide to URP ScriptableRendererFeature and ScriptableRenderPass code: example effects, RTHandle setup, blit paths, and Unity 6 Render Graph notes.
100% match · <code><shaders><blog><free><notes><one><prior><shader> - Fog Plane Shader Breakdown (Cyanilux)
Shader Graph tutorial for unlit fog planes on quads that sample scene depth for vertical fog and doorway fades, with simple and accurate reconstruction paths in Unity URP.
100% match · <shaders><intermediate><blog><cases><developers><effects><free><node> - GPU Instanced Grass Breakdown (Cyanilux)
A Cyanilux URP breakdown on GPU-instanced grass: procedural draw APIs, structured buffers, Shader Graph instancing hooks, and optional indirect draws with compute frustum culling.
100% match · <shaders><intermediate><blog><developers><free><instancing><may><node> - Intro to the Shader Pipeline (Cyanilux)
Introductory Cyanilux blog post on Unity meshes, shader stages, render pipelines, materials, C# property setup, batching, and forward versus deferred paths.
100% match · <code><shaders><blog><free><material><materials><post><shader> - Local UVs for Sprites in Sprite Sheet/Atlas (Cyanilux)
Unity shader techniques for per-sprite 0-1 UVs when sprites live in sheets or atlases: C# UV remap with Shader Graph/HLSL, plus URP object-space and renderer-bounds alternatives.
100% match · <code><shaders><intermediate><blog><developers><effects><free><may> - Polar Coordinates (Cyanilux)
Cyanilux's Polar Coordinates (May 2019, updated Dec 2023) is a Shader Graph article on converting Cartesian UVs to polar space with the Polar Coordinates node. It explains Center, Radial Scale, and Length Scale, quotes the generated Unity HLSL, and uses Split so R is distance from center and G is angle from the downward reference (with notes on negative preview values).
100% match · <shaders><blog><cases><developers><free><node><post><shader> - Rain Effects Breakdown (Cyanilux)
Rain Effects Breakdown (July 2023) is a Cyanilux walkthrough pairing Shuriken rain with Shader Graph ripples, puddles, and rain-on-surface shaders. Particles use stretched billboards in a scaled box with URP or Built-in unlit materials; VFX Graph is noted for URP or HDRP.
100% match · <shaders><intermediate><blog><developers><effects><free><node><particles> - Sun Beams / God Rays Shader Breakdown (Cyanilux)
Sun Beams / God Rays Shader Breakdown is a May 2024 Cyanilux tutorial (updated August 2025) on stylized god rays in Unity URP Shader Graph.
100% match · <shaders><intermediate><blog><developers><free><may><need><node> - Tentacle Shader Breakdown (Cyanilux)
Tentacle Shader Breakdown is a May 2022 Cyanilux Shader Graph tutorial for Technically A Challenge (Technically Speaking Discord): a tentacle mesh wraps a movable target via vertex displacement and rotation, not tessellation. It walks Mesh setup in Blender, TentacleInteract C# for _Radius and _InteractPos, then vertex graph steps - Smoothstep offset, Z clamp, Rotate About Axis, normal rotation, sine length scaling, and sucker pulsation.
100% match · <shaders><intermediate><blog><developers><free><need><node><one> - Introducing WebGPU-Bench: A WebGPU Microbenchmark
Blog post introducing webgpu-bench, a WebGPU micro-benchmark suite used by Web3D Survey to measure arithmetic, memory access, operation costs, and compute strategies.
100% match · <code><intermediate><blog><browser><compute><developers><need><node> - Testing WebGPU data layouts with Facet
Blog post on unit-testing Rust struct layouts against WGSL using Facet reflection and naga.
100% match · <code><shaders><intermediate><blog><compute><post><shows><webgpu> - A field guide to rendering: from triangles to Gaussians
Long-form field guide by Nikolaos Papadopoulos surveying how 3D scenes become pixels, framed as object-order versus image-order strategies.
100% match · <code><blog><demos><field><form><interactive><long><map> - Kiln: WebGPU-Native Out-of-Core Volume Rendering for Multi-GB Datasets
DEV Community article introducing Kiln, a WebGPU-native out-of-core volume renderer that streams multi-GB brick pyramids over HTTP with a fixed VRAM page cache and compute…
100% match · <code><shaders><blog><article><browser><compute><demos><developers> - The wedge product | Geometric algebra episode 6
Episode 6 of the All Angles Geometric algebra series on the wedge product, preparing for three-dimensional geometric algebra. It shows how wedging vectors builds higher-grade…
100% match · <intermediate><builds><free><know><map><material><shows><three> - Snowglobe Breakdown (Cyanilux)
Snowglobe Breakdown is a January 2023 Cyanilux post building a Unity 2021.3 LTS URP snowglobe with VFX Graph snow, Shader Graph lit particles, and a glass refraction shader. VFX uses burst spawn, gravity, turbulence, and inverted Collide with Sphere.
98% match · <shaders><intermediate><blog><contained><developers><free><node><particles> - Adding Native Gaussian Splatting Support to Three.js
Ben Houston blog post on contributing native Gaussian Splatting to Three.js with WebGPU/TSL, including SPZ v3/v4 loaders, a reusable GPU counting sort, and SH1–SH3 view-dependent…
96% match · <code><blog><developers><post><three><tsl><useful><webgpu> - Procedural UV Derivatives Evaluation in SORT Renderer
Long-form post by Jiayin Cao on evaluating texture UV derivatives in the SORT offline renderer when UVs come from a custom shading language rather than fixed mesh attributes.
90% match · <code><shaders><blog><form><language><long><need><post> - Offscreen Rendering // Vulkan For Beginners #33
Episode 33 of OGLDEV’s Vulkan For Beginners series covering offscreen rendering for post-processing.
81% match · <code><already><beginners><know><post><processing><shows> - Fitting Neural Textures and PBR Material Maps with ES (No Backprop)
Blog post mirroring a C++ experiment that fits neural textures and multi-map PBR materials with Evolution Strategies instead of backpropagation.
77% match · <code><shaders><blog><map><material><materials><post> - Post Processing & Render Graph | Unity Shader Code Basics 09
Unity Shader Code Basics episode on custom URP post-process effects with Unity 6 Render Graph.
75% match · <code><shaders><builds><effects><post><processing><shader>