Laboratory & GPU Computing

3D Graphics Lab

Real-time 3D web craft and graphics benchmarks. Comparing next-generation Three.js WebGPU compute pipelines against traditional WebGL rendering across high-throughput particle simulations, procedural shaders, and modern tooling.

Three.js r184WebGPU WGSL ComputeWebGL 2.0 (GLSL)Spline & BlenderReact Three Fiber v9TSL Node Materials

Performance Benchmark Suite

Interactive Fluid Orb Stress Test

Stress-test your hardware with a real-time fluid particle simulation scaling up to 1,000,000 particles. Observe the architectural performance gap between native GPU compute workgroups and traditional draw pipelines.

Next-Gen ComputeWGSL Pipelines
1,000,000
Simulated Particles
60 FPS
Sustained VRAM

Three.js WebGPU (The New)

Dispatches GPU compute workgroups in parallel using WGSL and Storage Buffers. Positions, velocities, and fluid viscosity updates occur entirely within high-speed VRAM with zero CPU-to-GPU PCIe memory transfers.

  • Parallel GPU compute workgroups (64–128 threads/group)
  • Storage Buffers in VRAM (0 bytes PCIe bus bandwidth)
  • Stateful fluid physics with true inertia & momentum
  • Effortlessly scales to 1,000,000 particles at 60 FPS
Launch WebGPU Benchmark
Legacy RasterizationOpenGL ES 3.0
GLSL 2.0
Draw Pipeline
Universal
Global Compatibility

Three.js WebGL (The Old)

Traditional vertex and fragment rasterization pipeline. Because WebGL lacks compute shaders, dynamic animations must rely on stateless closed-form vertex shaders or single-threaded CPU loops.

  • Fixed-function vertex and fragment rasterizer
  • Stateless vertex displacement without particle memory
  • Synchronous OpenGL state validation per draw call
  • Universal 99.5% compatibility across all legacy browsers
Launch WebGL Benchmark
TSL Procedural ShadersInteractive Geometries

WebGPU Procedural Shader Laboratory

Explore real-time procedural geometry and mathematical materials built with Three Shading Language (TSL). Featuring 3D MaterialX fractal noise vertex displacement, morphing mathematical gyroids, and dynamic Fresnel iridescence.

Plasma Orb

MaterialX 3D Noise

Liquid Gyroid

Trigonometric Surface

Cyber Wave

Harmonic Matrix

Launch Shader LaboratoryIncludes live TSL Code Inspector

Architectural Breakdown: Old vs New

Why WebGPU fundamentally redefines performance thresholds for 3D web applications compared to traditional WebGL.

Launch WebGPU →|Launch WebGL →
DimensionWebGPU (WebGPURenderer)WebGL 2.0 (WebGLRenderer)
Compute ArchitectureNative WGSL general-purpose compute workgroupsNot supported (stateless vertex math or GPGPU hacks)
Memory BandwidthGPU Storage Buffers (0 bytes CPU-to-GPU PCIe transfer)Requires Float32Array PCIe upload per frame (needsUpdate)
Physical SimulationStateful integration in VRAM (persistent velocity & inertia)Stateless closed-form displacement (particles have no memory)
Driver OverheadPre-baked Pipeline State Objects (PSOs) & command encodersSynchronous OpenGL ES state validation in JS thread
Throughput at 1M ptsSustained 60 FPS across massive GPU hardware concurrencySevere framerate drop-offs beyond 100K–250K particles
Browser EcosystemChrome 113+, Safari 17.4+, Edge, Firefox NightlyUniversal (99.5% of all global browsers)

Toolchain & Ecosystem

3D Tools, Software & Engineering Resources

The modern design tools, asset optimization pipelines, runtimes, and learning references powering high-craft 3D experiences on the web.

Interactive 3D DesignDesign to Code

Spline — Collaborative 3D in the Browser

Spline bridges the gap between design and production code with real-time browser modeling, physics simulations, and direct React/Three.js export runtimes. Check out Henrik's step-by-step workshop guide to build an interactive 3D rocketship in under 40 minutes.

Spline Rocket WorkshopSpline.design

3D Design & Modeling

Tools for visual design, spatial modeling, and interactive assets.

SplineBrowser-Based 3D

Collaborative web-first 3D design, real-time materials, physics, and direct React/web embed runtimes.

BlenderOpen-Source DCC

The industry standard for polygonal modeling, sculpting, UV unwrapping, texture baking, and glTF export pipelines.

Web 3D Runtimes & Shaders

Core rendering engines and component architectures for frontend web.

Three.js & WebGPUCore Graphics Engine

The foundation of web 3D graphics, featuring the next-gen WebGPURenderer and Three Shading Language (TSL).

React Three Fiber (R3F)React Renderer

Declarative, component-driven React renderer for Three.js with full reactive state and lifecycles.

@react-three/dreiHelper Toolbelt

Battle-tested utilities for R3F: camera controllers, HDR lighting, shader abstractions, and loaders.

Asset Compression & Delivery

Compression tools and formats that minimize network transfer overhead.

Google Draco & MeshoptGeometry Compression

Advanced vertex and index quantization algorithms that shrink 3D mesh payloads by up to 85%.

KTX2 & Basis UniversalGPU Textures

Supercompressed GPU texture containers that decode directly into VRAM without CPU unzipping.

glTF-TransformPipeline Optimization

Command-line pipeline tool to deduplicate materials, resample animations, quantize, and optimize 3D assets.

Curricula & Mathematical Reference

Curated courses and mathematical foundations for shader craft.

Three.js Journey (Bruno Simon)Interactive Course

The premier curriculum for mastering Three.js, custom shaders, physics, Blender workflows, and performance.

The Book of ShadersFragment Shaders

Essential step-by-step guide through the mathematical world of fragment shaders by Patricio Gonzalez Vivo.

Inigo Quilez ArticlesMath & SDF Reference

Gold-standard mathematical references for Signed Distance Functions (SDFs), raymarching, and procedural noise.

Interactive Workshop Slide Deck

Houston, we're coding 3D! 🚀

Explore the interactive presentation covering Three.js fundamentals, React Three Fiber composition, shader techniques, and web graphics craft.

Open Workshop Deck