3D / WebGL / WebGPU

WebGPU is broadly shipped (Chrome / Edge / Safari 18+ / Firefox 132+) so most new 3D work in 2026 targets WebGPU first with WebGL2 fallback. Tooling has caught up.

React (the dominant 3D ecosystem in JS)

• ★ react-three-fiber (R3F) — declarative React for Three.js. The default 3D ecosystem in JS.
• ★ drei (@react-three/drei) — helpers for R3F: orbit controls, GLTF loaders, environments, postprocessing presets.
• @react-three/rapier — Rapier physics (Rust → WASM) bindings for R3F.
• @react-three/postprocessing — bloom, DoF, SSAO, etc.
• @react-three/cannon — older Cannon.js physics.
• @react-three/fiber + @react-three/xr — WebXR support.

Underlying engines

• ★ Three.js — the foundation; r170+ has WebGPU renderer (THREE.WebGPURenderer).
• Babylon.js — Microsoft-backed; full game engine, gizmos, GUI, Inspector. Excellent if you want batteries-included.
• PlayCanvas — engine + visual editor; commercial but free tier.
• Filament (Google) — physically-based renderer; bindings for many languages.
• OGL — minimal WebGL library; hand-rolled shaders.

Vue / Svelte / Solid

• TresJS — Vue's R3F equivalent.
• Threlte — Svelte's R3F equivalent. Polished and active.
• solid-three — Solid bindings.

Shaders / GPU

• ★ TSL (Three Shading Language) — node-graph shader system in Three.js; compiles to WGSL or GLSL. The path forward for cross-WebGPU/WebGL shaders.
• Lygia — open-source shader function library (Chromatica's lib).
• glslify — older import system for GLSL.
• @webgpu/types — types for raw WebGPU.

Animation & sequencing

• Theatre.js — visual editor for keyframe animation; pairs with R3F.
• Lenis — smooth scroll (often used with R3F scroll setups).

Asset / model handling

• <model-viewer> — Google's web component for displaying glTF/GLB; one-line embed.
• gltf-transform — CLI for optimizing GLB/glTF assets.
• draco / meshopt / KTX2 — compression formats; Three.js has loaders.
• Sketchfab API, Poly Haven, Quaternius — free 3D assets.

AR / VR / WebXR

• ★ WebXR — built into modern browsers; access via R3F's @react-three/xr or directly.
• A-Frame — entity-component HTML for VR/AR scenes; great for marketers / educators.
• Mind AR — image / face tracking AR; runs in browser.
• AR.js — older marker-based AR.
• 8th Wall — commercial WebAR; great for marketing campaigns.
• <model-viewer> with ar attribute — one-tap AR view on iOS/Android.

Pick this if…

• Default 3D in React: R3F + drei.
• Full game engine, batteries included: Babylon.js or PlayCanvas.
• Vue / Svelte: TresJS / Threlte.
• Drop a single 3D asset on a page: <model-viewer>.
• Browser AR experience: <model-viewer> (simple) or A-Frame / Mind AR (full).
• Custom shaders going forward: TSL.