- Published on
WebGPU & WebGL 2026 Complete Guide - Three.js, React Three Fiber, Babylon.js, PlayCanvas, TresJS, Needle Engine, Native WebGPU, WGSL Deep Dive
- Authors

- Name
- Youngju Kim
- @fjvbn20031
Prologue - In 2026, Web 3D Is Reborn Again
When Chrome 113 turned WebGPU on by default in April 2023, it felt like another standards skirmish. WebGL 2 was running fine, WebGPU was flag-gated on Safari and Firefox, and Three.js had a "WebGPURenderer" sitting in the experimental bucket.
Three years later, in May 2026, the landscape has fully shifted.
- WebGPU is on by default in Chrome, Edge, Firefox, and Safari 26. Global coverage is roughly 95%.
- Three.js r182 elevates
WebGPURendererto the recommended renderer.WebGLRendereris now the fallback. - Babylon.js 8 treats WebGPU as a first-class citizen. Microsoft-sponsored, with IndexedDB shader caching and automatic fallback.
- PlayCanvas - acquired by Snap in June 2024 - is now deeply tied to Snapdragon AR but keeps evolving its open-source engine.
- TresJS is R3F for Vue. Needle Engine exports Unity scenes as glTF and runs them on the web.
- TSL (Three Shading Language) unifies GLSL and WGSL, and WGSL compute shaders run LLMs, MediaPipe, and Whisper inside the browser.
This post covers the full web graphics stack as of May 2026 - the WebGPU vs WebGL gap, when to pick Three.js vs R3F vs Babylon vs PlayCanvas vs TresJS vs Needle, the WGSL essentials, how to ship ML via compute shaders, and the Korean/Japanese community resources.
1. WebGL 2 vs WebGPU - What Changed
In one line: WebGL is a JavaScript wrapper around OpenGL ES 3.0; WebGPU is a new API abstracting Vulkan, Metal, and DirectX 12. They are different in spirit.
| Item | WebGL 2 | WebGPU |
|---|---|---|
| Released | Stable 2017 | Default on in Chrome 113, April 2023 |
| Underlying | OpenGL ES 3.0 | Vulkan/Metal/D3D12 abstraction |
| Shader language | GLSL ES 3.00 | WGSL |
| Compute shaders | None | Built-in (first class) |
| Multithreaded queues | None | Command Encoder/Queue |
| Indirect dispatch | Partial (instancing) | indirectDraw, indirectDispatch |
| Async | Callback-based | Promise-based (mapping, submit) |
| Pipeline state | Mutable globals | RenderPipeline objects |
| Texture compression | DXT/ETC/ASTC (partial) | BC/ETC2/ASTC (per-GPU) |
| Debugging | Spector.js | Chrome DevTools WebGPU panel |
Key line: WebGL is "draw only"; WebGPU is "draw + compute". That single compute-shader addition makes ML inference, simulation, image post-processing, and particles all run on the GPU.
What about performance? On simple rasterization (polygon drawing) the two are similar. WebGPU pulls ahead when draw calls multiply because CPU overhead is much lower. On compute-heavy workloads (image processing, ML inference) 2 to 3x is typical.
2. Browser Support Status (as of May 2026)
A clear support table makes decisions easier.
- Chrome/Edge - 113+ stable (April 2023). Same on Android.
- Firefox - Default-on for desktop in 121, stabilized through 2025.
- Safari - Beta in 17.4 on macOS and iOS, shipped officially in Safari 26 (macOS Tahoe, September 2025).
- Mobile - Chrome Android and Safari iOS 26 both default-on.
Fallback is simple.
if (navigator.gpu) {
// Use WebGPU
const adapter = await navigator.gpu.requestAdapter()
const device = await adapter.requestDevice()
} else {
// Fallback to WebGL 2
const gl = canvas.getContext('webgl2')
}
Three.js's WebGPURenderer handles this branch automatically. If WebGPU is unavailable it falls back to WebGLRenderer. You almost never have to worry about it in practice.
3. Native WebGPU - Dawn and wgpu-rs
In-browser WebGPU comes from one of two implementations.
- Dawn - Google's C++ library. It is the WebGPU implementation in Chromium. You can use the same code in desktop apps too - Skia and Flutter ship it.
- wgpu-rs - Mozilla's Rust library. Firefox, Servo, Bevy, Veloren, and others use it. Runs the WebGPU standard verbatim on native desktop and mobile.
The key point: the WebGPU API is not trapped inside browsers. With wgpu-rs in Rust or Dawn in C++ you can ship desktop and mobile native apps using the same shaders (WGSL) and the same API. WGSL is effectively the standard GPU shading language sitting on top of SPIR-V.
Bevy (the Rust game engine) targets desktop, mobile, and web (WASM) from a single codebase using wgpu-rs. "Write once, GPU anywhere" is not a joke anymore.
4. WGSL - WebGPU Shading Language
If you know GLSL, half an hour gets you comfortable. Different syntax, similar ideas.
The smallest vertex shader (WGSL):
struct VertexInput {
@location(0) position: vec3<f32>,
@location(1) color: vec3<f32>,
}
struct VertexOutput {
@builtin(position) clip_position: vec4<f32>,
@location(0) color: vec3<f32>,
}
@vertex
fn vs_main(in: VertexInput) -> VertexOutput {
var out: VertexOutput;
out.clip_position = vec4<f32>(in.position, 1.0);
out.color = in.color;
return out;
}
@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
return vec4<f32>(in.color, 1.0);
}
Line-by-line differences from GLSL.
@vertex,@fragment,@compute- per-function entry points. Vertex and fragment can live in one file.vec3<f32>- generic typing. Integer, float, unsigned int are explicit. There is no implicit float like GLSL'svec3.@location(N)- input/output slots used for both vertex buffers and fragment outputs.@builtin(position)- the equivalent ofgl_Position.
The biggest change is compute shaders.
@group(0) @binding(0) var<storage, read_write> data: array<f32>;
@compute @workgroup_size(64)
fn cs_main(@builtin(global_invocation_id) id: vec3<u32>) {
let i = id.x;
if (i < arrayLength(&data)) {
data[i] = data[i] * 2.0;
}
}
A shader that doubles a 1D array in groups of 64. ML, simulation, image processing - they all follow this pattern.
5. Three.js and TSL - One Shader, Two Backends
Three.js is the de facto standard for web 3D with 2.7M+ weekly npm downloads. r182 (December 2025) promoted WebGPURenderer to the recommended renderer.
The smallest scene:
import * as THREE from 'three'
import { WebGPURenderer } from 'three/webgpu'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000)
camera.position.z = 5
const renderer = new WebGPURenderer({ antialias: true })
await renderer.init()
renderer.setSize(w, h)
document.body.appendChild(renderer.domElement)
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshStandardMaterial({ color: 0x44aa88 })
)
scene.add(cube)
scene.add(new THREE.AmbientLight(0xffffff, 0.4))
const dir = new THREE.DirectionalLight(0xffffff, 1.0)
dir.position.set(5, 10, 7.5)
scene.add(dir)
renderer.setAnimationLoop(() => {
cube.rotation.y += 0.01
renderer.render(scene, camera)
})
Two differences from WebGL.
await renderer.init()- WebGPU requires async init.setAnimationLoop- recommended overrequestAnimationFrame. It also drives WebXR.
TSL - Three Shading Language
A JS DSL introduced in Three.js 0.158. Write the shader once, compile to both GLSL and WGSL.
import { Fn, vec3, sin, time, uv } from 'three/tsl'
const myColor = Fn(() => {
const t = sin(time.mul(2.0))
return vec3(uv().x, t, uv().y)
})
material.colorNode = myColor()
You get a shader graph without writing GLSL by hand. Three.js converts it to WGSL on WebGPU and GLSL on WebGL automatically. As of 2026 we recommend authoring new shaders in TSL.
6. React Three Fiber + drei - 3D on a React Tree
R3F expresses Three.js as React components. Imperative code becomes a tangled mess past 50 nodes; R3F restores the tree.
import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment } from '@react-three/drei'
function Cube() {
return (
<mesh rotation={[0, 0.4, 0]}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="hotpink" />
</mesh>
)
}
export default function Scene() {
return (
<Canvas camera={{ position: [0, 0, 5], fov: 75 }}>
<ambientLight intensity={0.4} />
<directionalLight position={[5, 10, 7.5]} intensity={1} />
<Cube />
<OrbitControls />
<Environment preset="city" />
</Canvas>
)
}
JSX tags like mesh and boxGeometry map to Three.js class names. OrbitControls and Environment come from drei (the Poimandres helper library). Without drei, R3F is worth half its value.
R3F v9 with WebGPU - async gl prop
import { Canvas } from '@react-three/fiber'
import { WebGPURenderer } from 'three/webgpu'
<Canvas
gl={async (props) => {
const r = new WebGPURenderer(props)
await r.init()
return r
}}
>
{/* ...scene... */}
</Canvas>
R3F v9 accepts an async factory, so WebGPU initialization fits naturally into the React lifecycle. The Poimandres team is actively polishing this as of May 2026.
R3F ecosystem helpers
- leva - GUI (the React equivalent of dat.gui).
- zustand - scene state management (a Redux alternative).
- valtio - another state library.
- maath - 3D math helpers.
- react-spring - animation.
- drei -
OrbitControls,useGLTF,Html,Text,Sky,Sparkles, and more.
All of this comes out of a single OSS collective named Poimandres. R3F's biggest strength is that a coordinated team - not one person - ships the entire surface.
7. Babylon.js 8 - The Full-Stack Engine Backed by Microsoft
Babylon takes a different stance than Three.js. Three.js is a library (parts); Babylon is an engine (a finished product).
That distinction clarifies the choice.
- Inspector - Babylon ships a visual inspector. One line,
scene.debugLayer.show(), edits the scene graph, lights, and materials in a GUI. - Physics - Havok, Cannon, and Ammo integration are built in.
- WebGPU - Babylon has treated WebGPU as first class since 2020. Shader caching, automatic fallback, and a compute shader API are all polished.
- PBR - Physically based rendering materials are very thorough (Unreal/Unity tier).
- Playground - Run code instantly at
playground.babylonjs.com.
The smallest Babylon scene:
import { Engine, Scene, ArcRotateCamera, HemisphericLight, MeshBuilder, Vector3 } from '@babylonjs/core'
const canvas = document.getElementById('renderCanvas')
const engine = new Engine(canvas, true, { preserveDrawingBuffer: true })
const scene = new Scene(engine)
const camera = new ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2.5, 5, Vector3.Zero(), scene)
camera.attachControl(canvas, true)
new HemisphericLight('light', new Vector3(0, 1, 0), scene)
MeshBuilder.CreateBox('box', { size: 1 }, scene)
engine.runRenderLoop(() => scene.render())
A bit more explicit, and you get an ArcRotateCamera (orbit camera) out of the box. With Three.js you would have wired up OrbitControls separately.
Babylon WebGPUEngine
For WebGPU, swap Engine for WebGPUEngine.
import { WebGPUEngine } from '@babylonjs/core'
const engine = new WebGPUEngine(canvas)
await engine.initAsync()
The syntax is nearly identical to Three.js's await renderer.init(). Babylon does a better job on WebGPU shader caching (IndexedDB), so first-load times on large scenes are quicker.
Pick line: Three.js if you want reference sites, R3F, and small components; Babylon if you want a game-grade engine, an inspector, and maturity.
8. PlayCanvas - A Game Engine with a Browser Editor
PlayCanvas has a different shape from the other two. It includes a visual editor that runs in the browser - think Unity Editor for the web.
[Browser editor: playcanvas.com]
| (drag and drop)
v
[scenes, prefabs, materials, scripts]
|
v
[build -> CDN hosting -> <iframe> embed]
You build a scene in PlayCanvas Editor and that scene is your web game. There is no separate build step. That is why it dominates interactive 3D ads, car configurators, and similar designer-driven projects.
The engine itself is open source (MIT). If you only want code, use the playcanvas npm package.
Snap acquired PlayCanvas in June 2024. Tied to Snapdragon Spaces and Snap Lens, it has become a standard engine for shipping mobile AR on the web. Post-acquisition, the open-source engine continues to evolve.
9. TresJS - R3F for the Vue Community
If you are on Vue and envy R3F, TresJS is the answer. Express Three.js as Vue components.
<script setup>
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
</script>
<template>
<TresCanvas>
<TresPerspectiveCamera :position="[3, 3, 3]" />
<TresMesh>
<TresBoxGeometry />
<TresMeshStandardMaterial color="hotpink" />
</TresMesh>
<TresAmbientLight :intensity="0.5" />
<OrbitControls />
</TresCanvas>
</template>
TresMesh instead of R3F's mesh, TresBoxGeometry instead of boxGeometry - Vue prefers PascalCase with a prefix. @tresjs/cientos is the equivalent of drei.
The ecosystem is roughly 1/10 the size of R3F's, but the core is all there. A Nuxt module exists, and the API fits well with Vue 3's Composition API.
10. Needle Engine - Build in Unity, Run on the Web
Needle has a unique stance: build the scene in Unity Editor, then export glTF and run it on the web.
[Unity Editor]
| (install Needle package)
| (Export glTF)
v
[scene.glb] + [scripts.js]
|
v
<needle-engine> -> WebGL/WebGPU rendering
Unity's component system layered on top of Three.js. Unity-side C# components (Transform, MeshRenderer, Light) serialize into glTF extensions, and client-side JS components (@needle-tools/engine) restore them.
Pros: Unity's enormous asset ecosystem (animations, shader graphs, physics) flows to the web for free, including WebXR. Cons: Unity is required (10 GB+ editor install).
Commercial licensing is separated, so indies and small teams are nearly free. You see it on bigger marketing sites (Coca-Cola, LG, and friends).
11. Wonderland Engine - WebXR First
Wonderland is more specialized. It is the engine that runs WebXR (VR/AR) best.
- A native visual editor (desktop app).
- Very light (engine core around 500 KB).
- WebXR-tuned: 90 fps is the target.
- Near-native performance on Meta Quest and the Vision Pro browser.
For VR games and training simulators it is much faster than Three.js or Babylon. The downside: overkill for general 3D websites.
12. Spline - The Figma for 3D Designers
Spline is the no-code camp. Build a 3D scene in a browser-based design tool and embed it as a React component or iframe.
import Spline from '@splinetool/react-spline'
export default function App() {
return <Spline scene="https://prod.spline.design/abc/scene.splinecode" />
}
Main use case: interactive 3D hero illustrations on landing pages. A WebGPU rendering option was added in 2025. The point is that designers create 3D the way they create in Figma.
13. PixiJS 8 - When You Need 2D
Right in the middle of 3D and you suddenly need 2D? Canvas 2D is slow, and using Three.js for 2D is overkill. PixiJS is the answer.
PixiJS 8 (released 2024) treats WebGPU as first class. Like Three.js, it falls back to WebGL automatically.
- 2D sprites, UI, interactive ads.
- Game UI and HUD overlays.
- Some charting and data visualization.
deck.gl (geo visualization) and PixiJS both have roots in the Uber orbit, but PixiJS is driven by the UK OSS community.
14. Cesium - 3D Earth and Geospatial
When the scene is a whole planet, the answer is Cesium. It also authored the OGC-standardized 3D Tiles format.
- Direct loading of Sentinel, NASA, and OpenStreetMap data.
- Streaming satellite, drone, and LiDAR meshes.
- WebGL 2 today, WebGPU backend in development.
An industrial tool that integrates with NVIDIA Omniverse and Unreal Engine. Practically standard in government GIS, defense, and urban digital twins.
15. Compute Shaders + In-Browser ML
The biggest change WebGPU brings is compute. With GPU compute in the browser, ML inference moves to the client.
TensorFlow.js + WebGPU backend
import * as tf from '@tensorflow/tfjs'
import '@tensorflow/tfjs-backend-webgpu'
await tf.setBackend('webgpu')
await tf.ready()
const model = await tf.loadGraphModel('/model/model.json')
const output = model.predict(input)
1.5 to 3x faster than the WebGL backend. Small-model inference (MobileNet, BlazePose) is close to native.
ONNX Runtime Web + WebGPU
The web build of Microsoft's ONNX runtime. The WebGPU EP (Execution Provider) is stable.
import * as ort from 'onnxruntime-web/webgpu'
const session = await ort.InferenceSession.create('model.onnx', {
executionProviders: ['webgpu'],
})
const output = await session.run({ input: inputTensor })
Most Hugging Face models export to ONNX. transformers.js (the HF official) wraps this for the web.
import { pipeline } from '@xenova/transformers'
const generator = await pipeline('text-generation', 'Xenova/gpt2', {
device: 'webgpu',
})
const out = await generator('Once upon a time', { max_new_tokens: 50 })
A GPT-2 class model runs in the browser. Small LLMs no longer need a server for inference.
WebLLM - Real LLMs in the Browser
A project from Carnegie Mellon's MLC team. Real LLMs - Llama, Phi, Gemma - running on WebGPU.
import * as webllm from '@mlc-ai/web-llm'
const engine = await webllm.CreateMLCEngine('Llama-3.2-3B-Instruct-q4f16_1-MLC')
const reply = await engine.chat.completions.create({
messages: [{ role: 'user', content: 'hello' }],
})
Up to 3B-8B models run at 20 to 40 ms per token on M2/M3 Macs. Not blazing, but the server-free LLM is the point. It matters in domains - medical, legal - where data must never leave the device.
MediaPipe + WebGPU
Google's MediaPipe (image and video ML) ships a WebGPU backend. Face detection, hand tracking, and pose estimation hit 60 fps in the browser.
whisper.cpp + WebGPU
whisper.cpp - the C++ port of OpenAI Whisper - has a WebAssembly + WebGPU build. Speech recognition in the browser.
16. glTF - The PNG/JPG of 3D
The standard exchange format is glTF 2.0 (Khronos). JSON, binary buffers, and PNG/JPG/KTX2 textures.
.gltf- JSON referencing separated assets..glb- a single binary. Recommended for the web.
Three.js's GLTFLoader, R3F's useGLTF, and Babylon's SceneLoader.Append all share this format.
The glTF optimization toolchain
# gltf-transform - the strongest CLI
npx gltf-transform optimize input.glb output.glb
# Texture compression
npx gltf-transform ktx2 input.glb output.glb
# Draco/Meshopt mesh compression
npx gltf-transform draco input.glb output.glb
gltf-transform is the de facto standard. A 1 GB Blender export drops to 50 MB.
Basis Universal + KTX2
PNG/JPG decompress on the CPU before being uploaded to the GPU. KTX2 (Basis Universal) uploads in a GPU-native compressed format (BC7, ETC2, ASTC) directly. Both GPU memory and loading time shrink.
# basisu CLI
basisu -ktx2 -uastc texture.png
# gltf-transform also produces KTX2
npx gltf-transform uastc input.glb output.glb
KTX2 is supported by both WebGL 2 and WebGPU. Load it via Three.js's KTX2Loader.
17. Shader Libraries and Tools
Writing GLSL/WGSL from scratch is hard. The following resources are the answer.
- Three.js Shading Language (TSL) - the JS DSL covered above.
- patapom WGSL collection - WGSL example dump on GitHub.
- Shadertoy - the home of GLSL fragment shaders. WGSL ports exist.
- The Book of Shaders - the free book by Patricio Gonzalez Vivo.
- WebGPU Samples - the Google-official set at
webgpu.github.io/webgpu-samples.
Debugging tools
- Chrome DevTools WebGPU panel - built in since Chrome 119. Shader source, pipeline state, memory usage.
- Spector.js - WebGL only. Frame capture, per-draw-call analysis.
- RenderDoc - native GPU debugger. Helpful in wgpu-rs and Dawn workflows.
18. Use Cases - What to Use Where
- Portfolio sites and hero sections - R3F + drei. Spline is also great.
- Product configurators (cars, furniture) - Three.js or PlayCanvas. Babylon if PBR fidelity matters.
- Data visualization - deck.gl (geo), Three.js + custom shaders (abstract viz).
- Browser games - PlayCanvas and Babylon.js. Wonderland for the heavyweight tier.
- AR/VR (WebXR) - Wonderland Engine and Needle Engine.
- 8thWall spatial AR - the Niantic 8th Wall platform.
- Reusing Unity assets - Needle Engine.
- 2D games and interactive ads - PixiJS 8.
- Earth and map 3D - Cesium.
- In-browser ML - transformers.js + WebGPU, WebLLM.
19. Cross-Platform 3D Engines That Target the Web
Beyond web-native engines, the big cross-platform engines also target the web.
- Unity WebGL - an old option. Build size is large (20 MB+). Unity WebGPU added experimentally in 2024.
- Unreal Engine - Pixel Streaming - render on the server and stream as video over WebRTC. Useful when the scene is too heavy for mobile.
- Godot 4 - Web Export - WebAssembly + WebGL 2. WebGPU shipped in 4.4.
Versus the web-native engines (Three.js, Babylon, PlayCanvas), build size and start time are the downsides. If you already have work in Unity or Unreal, Pixel Streaming is the fastest path.
20. Korean and Japanese Communities
English-language resources dominate web 3D, but the Korean and Japanese communities are growing fast.
Korea:
- The Korean WebGL/WebGPU users group - Facebook and Discord channels.
- Three.js Korean translations - the community-driven
threejs.krunofficial translation. - Toss Frontend -
tossfaceand 3D interaction. Many sessions at the SLASH conference. - NAVER FE Talks - regular Three.js and R3F sessions.
Japan:
- ICS.media - Japan's largest frontend magazine. Overwhelmingly the densest source of Three.js and WebGPU tutorials.
- Three.js Tokyo / three.js Japan - regular meetups.
- Yasunobu Ikeda - ICS.media editor. Multiple Three.js books to his name.
- WebGL Total - the Japanese-language WebGL primer.
ICS.media is excellent enough that it would stand up to translation. If Japanese is not a barrier for you, it is worth visiting often.
21. Famous Three.js Sites
If you need inspiration, the following are sites to visit.
- bruno-simon.com - the portfolio of Three.js Journey instructor Bruno Simon. You literally drive the site as a car.
- active-theory.com - an interactive ad agency. Their own site is the showcase.
- lusion.co - a UK agency. The essence of Three.js marketing sites.
- rafa-marsala / igor-bachelard.com - individual portfolios.
- threejs.org/examples - 200+ official examples. New features land here first.
Bruno Simon's Three.js Journey course (threejs-journey.com) is the de facto textbook. 95 chapters, over 100 hours. If you are starting out, it is the unqualified recommendation.
22. Learning Roadmap (Practical Edition)
If you are starting fresh, follow this order.
- JS and web basics - DOM, Canvas, and
requestAnimationFrameshould be familiar. - Three.js fundamentals -
threejs.org/manualor Three.js Journey chapters 1-30. - Build your first scene - cube, lighting, OrbitControls, and a glTF load.
- R3F intro - move to R3F after you understand Three.js. It is faster that way.
- Shaders (GLSL/TSL) - the free Book of Shaders plus Shadertoy.
- WebGPU - the official tutorial at
webgpu.github.io. - WGSL - Google's WebGPU Samples.
- Special topics - WebXR, glTF optimization, compute shaders - pick what you need.
On average, 3 to 6 months gets you to a production-site level.
23. Five Frequently Asked Questions
Q1. Do I still need to learn WebGL 2?
If you need fallback code, learn the basics. New shaders should be authored in TSL or WGSL.
Q2. R3F vs raw Three.js?
R3F if you are in a React project. Three.js if it is a static site or vanilla JS. Same engine, two use modes.
Q3. Is Babylon better than Three.js?
The strengths differ. Babylon wins on polish, inspector, physics, and WebGPU maturity. Three.js wins on ecosystem, documentation, example count, and the job market.
Q4. Is PlayCanvas's visual editor really worth using?
For designer-heavy projects - marketing sites, car configurators - it is dominant. For code-driven projects you do not have to use it.
Q5. Can you really run an LLM in the browser?
3B to 8B is practical. 70B is not viable yet on memory and speed. Small assistants, code helpers, and translators are the right size.
24. Outro - The "Write Once, Runs Anywhere on the GPU" Era
Three currents converge into web 3D in 2026.
- WebGPU shipping - 95% of users can run compute shaders.
- TSL - one shader gets you both GLSL and WGSL.
- Mainstream in-browser ML -
transformers.js, WebLLM, and MediaPipe make server-free ML real.
Together, server-free interactive 3D + AI sites become real. You borrow the user's GPU and run LLMs, image generation, and real-time 3D side by side. Server cost, latency, and privacy concerns all approach zero.
The tools are ready. The remaining step is to build. One good shader, one scene, one experiment. Stack them and you get the web's next era.
References
- WebGPU specification -
https://www.w3.org/TR/webgpu/ - WGSL specification -
https://www.w3.org/TR/WGSL/ - Can I Use WebGPU -
https://caniuse.com/webgpu - Three.js -
https://threejs.org/ - Three.js Journey (Bruno Simon) -
https://threejs-journey.com/ - TSL docs -
https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language - React Three Fiber -
https://r3f.docs.pmnd.rs/ - drei -
https://github.com/pmndrs/drei - Poimandres collective -
https://pmnd.rs/ - Babylon.js -
https://www.babylonjs.com/ - Babylon.js Playground -
https://playground.babylonjs.com/ - PlayCanvas -
https://playcanvas.com/ - PlayCanvas Engine GitHub -
https://github.com/playcanvas/engine - TresJS -
https://tresjs.org/ - Needle Engine -
https://needle.tools/ - Wonderland Engine -
https://wonderlandengine.com/ - Spline -
https://spline.design/ - PixiJS -
https://pixijs.com/ - Cesium -
https://cesium.com/ - glTF 2.0 -
https://www.khronos.org/gltf/ - gltf-transform -
https://gltf-transform.dev/ - Basis Universal -
https://github.com/BinomialLLC/basis_universal - KTX 2.0 -
https://www.khronos.org/ktx/ - Dawn (Chromium WebGPU) -
https://dawn.googlesource.com/dawn - wgpu-rs -
https://wgpu.rs/ - TensorFlow.js -
https://www.tensorflow.org/js - ONNX Runtime Web -
https://onnxruntime.ai/docs/tutorials/web/ - transformers.js -
https://huggingface.co/docs/transformers.js/ - WebLLM (MLC) -
https://webllm.mlc.ai/ - MediaPipe -
https://developers.google.com/mediapipe - WebGPU Samples -
https://webgpu.github.io/webgpu-samples/ - The Book of Shaders -
https://thebookofshaders.com/ - Shadertoy -
https://www.shadertoy.com/ - ICS.media (Japan) -
https://ics.media/ - Khronos glTF Sample Models -
https://github.com/KhronosGroup/glTF-Sample-Assets