§ GUIDES
three.js deep dives
Measured, long-form articles on three.js performance and asset pipelines: compression, LOD, instancing, shaders and more.
- THREE.JS RENDERING · 20 MINThree.js shadows: acne, bias, pixelation and soft shadowsWhy three.js shadows get acne, stair-steps, peter-panning or detached contacts, and how to fix each one: shadowSide, bias and normalBias in world units, shadow camera fitting and cascades, PCF vs VSM vs PCSS, cheap contact shadows, and the r182 PCFSoftShadowMap and WebGPURenderer bugs. Each fix has screenshots and measured cost.
- THREE.JS PERFORMANCE · 21 MINDisposing three.js scenes: what actually leaks, measuredWe loaded and unloaded a 54-vehicle GLB pack ten times with six cleanup strategies and measured renderer.info, the JS heap and Chrome’s GPU-process and tab memory. What scene.remove() leaks, why renderer.info is not a memory meter, what a retained gltf costs, AnimationMixer, EffectComposer and renderer teardown — plus a dispose helper and a way to test your own app.
- THREE.JS PERFORMANCE · 20 MINWebGPURenderer vs WebGLRenderer in 2026: a real-scene benchmarkOne 4,176-mesh three.js scene rendered by WebGLRenderer, WebGPURenderer and its WebGL 2 fallback on one Windows laptop: CPU time per frame, first frame, cost per mesh, what BundleGroup and instancing recover, the r182 shadow regression and the pixel differences.
- THREE.JS RENDERING · 19 MINThree.js transparency: sorting, depthWrite and renderOrderHow three.js sorts transparent objects and why it goes wrong: depthWrite, renderOrder, intersecting meshes, always-on-top markers, foliage with alphaTest, alphaToCoverage and alphaHash, transmission glass and order-independent transparency — each with screenshots and measured cost.
- THREE.JS RENDERING · 17 MINWhy is my GLB black or too dark in three.js? Common causes, measuredA symptom-first guide to black or dark GLB models in three.js: lighting and environment maps, output colour conversion and material problems in the file, each with before/after renders and a checker you can paste.
- THREE.JS PERFORMANCE · 19 MINDraco vs Meshopt vs uncompressed GLB, measuredFive real GLB files encoded as plain, quantized, Draco and Meshopt: sizes with and without gzip/Brotli, load times on fast and slow 4G, decode cost, GPU memory, visual error, and which engines and tools can open each one.
- THREE.JS PERFORMANCE · 18 MINLOD in three.js without stutter: hitches, pops and flicker, measuredWhy THREE.LOD hitches the first time a level appears, what compileAsync does not cover, what hidden levels cost every frame, and when hysteresis or a dithered fade is worth it — measured.
- THREE.JS PERFORMANCE · 21 MINInstancedMesh vs merged geometry vs BatchedMesh: what to use for 10,000 propsWe drew the same 10,000 props seven ways in three.js and measured frame time, culling, memory, moving, picking and shadows. What to use, and when.
- THREE.JS PERFORMANCE · 18 MINWhy your three.js scene freezes: shader recompilation and light countHiding one PointLight froze our three.js test scene for 4.8 s. Why light counts force shader recompiles, what else does, and how to fix it — measured.