--- title: "Sixty Frames for the Record: A Three.js Game, Seven Fly-Throughs, and a Wall of CRTs" url: https://daily.dev/posts/sixty-frames-for-the-record-a-three-js-game-seven-fly-throughs-and-a-wall-of-crts-tjn34cai4 source_url: https://tympanus.net/codrops/2026/08/22/sixty-frames-for-the-record-a-three-js-game-seven-fly-throughs-and-a-wall-of-crts type: article source: "Codrops" published: 2026-08-22T14:04:26.933Z updated: 2026-08-22T14:04:56.163Z tags: ["threejs", "creative-coding", "react-three-fiber"] reading_time: 16 upvotes: 3 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Sixty Frames for the Record: A Three.js Game, Seven Fly-Throughs, and a Wall of CRTs **[Codrops](https://daily.dev/sources/codrops)** · 16 min read · 3 upvotes · 0 comments ## Summary A deep technical retrospective on building a Three.js/React Three Fiber experiments lab tied to the author's own music releases: a 3D Space Invaders game (FRONTIER), seven fly-through music visualizers (LXSTNGHT), and a CRT-wall installation (/fm). Covers hard-won rendering lessons: budgeting drawing-buffer pixels instead of device-pixel-ratio, avoiding mix-blend-mode over WebGL canvases, how Three.js bakes light count into shader compile keys causing mid-scene stalls, draw-call batching and frustum-culling pitfalls when merging geometry, HDR/bloom pipeline gotchas (8-bit composer buffers, LDR blend functions inverting colors, NaN from negative grade values), and choreographing visuals to pre-baked audio analysis instead of real-time FFT. Includes concrete GPU timing measurements (2ms frame time, p95 latency figures) and code snippets. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does my custom ShaderMaterial in Three.js not respond to scene lights? Three.js scene lights do not automatically affect a custom ShaderMaterial; you must feed light data into the shader yourself via uniforms. A hexagonal floor shader in a Three.js project stayed unlit by a moving spotlight for a week until the light position and intensity were passed in as a uniform array manually. _Developers debugging custom shader lighting quirks in Three.js can find similar deep-dive writeups on daily.dev._ ### Why does bloom postprocessing turn bright emissive objects black instead of glowing in Three.js? The pmndrs postprocessing library's Bloom effect defaults to BlendFunction.SCREEN, an LDR operator that inverts to negative when both the scene and bloom values exceed 1.0, producing black pixels with glowing rims. Setting blendFunction to BlendFunction.ADD fixes it, since additive blending can never invert to a negative result. _Anyone chasing HDR bloom artifacts in a WebGL pipeline can track similar postprocessing fixes on daily.dev._ ### Why did merging geometries in Three.js break frustum culling and increase rendered triangles? Merging many small meshes into one large geometry per material collapses them into a single bounding sphere spanning the whole merged shape, so it always intersects the camera frustum and gets submitted every frame regardless of visibility. Re-merging per material per smaller spatial segment (e.g. every 3 meters) restores culling and can cut submitted triangles 21-37%. _Teams optimizing draw calls in Three.js scenes can follow more geometry-merging tradeoffs like this on daily.dev._ ## Similar posts on daily.dev - [From Flat to Spatial: Creating a 3D Product Grid with React Three Fiber](https://daily.dev/posts/from-flat-to-spatial-creating-a-3d-product-grid-with-react-three-fiber-sstsygdip) · Codrops · 1 upvotes · 0 comments - [THREE.js-PathTracing-Renderer](https://daily.dev/posts/three-js-pathtracing-renderer-f7kf7vkhm) · Hacker News · 2 upvotes · 0 comments --- Tags: [#threejs](https://daily.dev/tags/threejs), [#creative-coding](https://daily.dev/tags/creative-coding), [#react-three-fiber](https://daily.dev/tags/react-three-fiber) [View this post on daily.dev](https://daily.dev/posts/sixty-frames-for-the-record-a-three-js-game-seven-fly-throughs-and-a-wall-of-crts-tjn34cai4)