WebGPU Blob Tutorial

This tutorial recreates the animated blob effect with Three.js WebGPU and TSL node materials. The shape is driven by procedural noise, while the emissive color slowly shifts between two tones over time.

1) Import WebGPU + TSL

The important part here is using `three/webgpu` together with the TSL node helpers. That gives you shader-like control without writing raw WGSL for this effect.

1import * as THREE from "three/webgpu"
2import { Fn, mix, mx_noise_vec3, positionLocal, sin, time, uniform } from "three/tsl"

2) Create the Scene

A dense icosahedron gives the blob enough vertices to deform nicely. The node material handles both displacement and glow.

1const scene = new THREE.Scene()
2const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
3const renderer = new THREE.WebGPURenderer({ canvas, alpha: true })
4
5const geometry = new THREE.IcosahedronGeometry(1, 10)
6const material = new THREE.MeshPhysicalNodeMaterial()
7material.wireframe = true

3) Displace the Geometry

This is the core blob move. Sample procedural noise from the local position, scale it, and add it back onto the original vertices.

1material.positionNode = Fn(() => {
2  const pos = positionLocal
3  const noise = mx_noise_vec3(pos.mul(1.2).add(time))
4  const displacement = noise.mul(0.3)
5  return pos.add(displacement)
6})()

4) Add Animated Emissive Color

To keep the wireframe from feeling static, blend two colors with a sine wave tied to time. The result slowly breathes between pink and indigo.

1material.emissiveNode = Fn(() => {
2  const color1 = uniform(new THREE.Color(0x6366f1))
3  const color2 = uniform(new THREE.Color(0xec4899))
4  return mix(color1, color2, sin(time))
5})()