[{"data":1,"prerenderedAt":118},["ShallowReactive",2],{"navigation":3,"\u002Flab\u002Flidar-scene":4},[],{"id":5,"title":6,"body":7,"date":98,"demo":99,"description":103,"extension":104,"meta":105,"navigation":102,"path":106,"poster":107,"repo":108,"seo":109,"stem":110,"tags":111,"__hash__":117},"lab\u002Flab\u002Flidar-scene.md","Streaming a LiDAR point cloud in the browser",{"type":8,"value":9,"toc":91},"minimark",[10,19,26,31,42,50,53,57,60,64,67,70,73,80],[11,12,13,14,18],"p",{},"The dataset is a 50-frame sequence from PandaSet: 8,562,943 points and 7,748 annotated bounding boxes, captured from a car driving through San Francisco. Each frame arrives as 4.27MB of JSON — a flat array of ",[15,16,17],"code",{},"[x, y, z]"," triples — which compresses to about 1.3MB on the wire. Decompressed, the full sequence is a little over 200MB.",[11,20,21,22,25],{},"That size is the whole problem. You cannot hold every frame in memory, and you cannot run ",[15,23,24],{},"JSON.parse"," on 4.27MB of text on the main thread without visibly dropping the frame you are already rendering. Scrubbing the timeline has to feel immediate anyway.",[27,28,30],"h2",{"id":29},"getting-the-parse-off-the-main-thread","Getting the parse off the main thread",[11,32,33,34,37,38,41],{},"Frames are fetched as raw ",[15,35,36],{},"ArrayBuffer","s and handed to a pool of Web Workers — sized to ",[15,39,40],{},"cores - 1",", clamped between two and four — which decode the JSON and pack the result into a typed array. What comes back is transferred rather than copied, so a decoded frame never crosses the thread boundary twice.",[11,43,44,45,49],{},"The pool dispatches ",[46,47,48],"strong",{},"nearest-first",": when a worker frees up, it takes whichever queued frame sits closest to the frame you are currently looking at. Dragging the timeline changes the target, and in-flight work reorders itself around wherever you land rather than finishing the queue it started with.",[11,51,52],{},"Every frame is recentered against the offset of frame zero. Without that, each frame is positioned in its own sensor-local coordinates and the scene appears to jump between frames.",[27,54,56],{"id":55},"keeping-the-working-set-bounded","Keeping the working set bounded",[11,58,59],{},"Resident frames live in an LRU cache keyed by recency of access, so scrubbing back and forth through a window of frames stays warm while the ones you have left behind get evicted. The cache tracks four states — resident, loading, evicted, absent — because the UI needs to distinguish \"not here yet\" from \"here and gone,\" and a heads-up display in the corner exposes the whole thing while you interact with it.",[27,61,63],{"id":62},"coloring-on-the-gpu","Coloring on the GPU",[11,65,66],{},"Points are colored by height through a custom vertex and fragment shader pair rather than by writing per-point colors on the CPU. The vertex shader also handles point sizing against device pixel ratio, so points stay legible on a Retina display without becoming blobs on a standard one.",[11,68,69],{},"Camera movement is a keyboard rig rather than orbit controls — the scene is a street you drive through, not an object you inspect from outside.",[71,72],"hr",{},[11,74,75,76,79],{},"Built with React, ",[15,77,78],{},"@react-three\u002Ffiber",", and Three.js, bundled by Parcel into a 974KB entry.",[11,81,82,83,90],{},"The point cloud data is from ",[84,85,89],"a",{"href":86,"rel":87},"https:\u002F\u002Fpandaset.org\u002F",[88],"nofollow","PandaSet"," by Hesai and Scale AI, licensed under CC BY 4.0.",{"title":92,"searchDepth":93,"depth":93,"links":94},"",2,[95,96,97],{"id":29,"depth":93,"text":30},{"id":55,"depth":93,"text":56},{"id":62,"depth":93,"text":63},"2026-07-01",{"type":100,"url":101,"desktopOnly":102},"local","\u002Fx\u002Flidar-scene\u002F",true,"A viewer for 50 frames of autonomous-driving LiDAR — 8.5 million points — streamed, decoded off the main thread, and rendered at interactive framerates. Built for a Scale AI code challenge.","md",{},"\u002Flab\u002Flidar-scene","\u002Fimg\u002Flab\u002Flidar-scene.jpg","https:\u002F\u002Fgithub.com\u002Fardz9\u002Flidar-scene",{"title":6,"description":103},"lab\u002Flidar-scene",[112,113,114,115,116],"Three.js","WebGL","React","Web Workers","TypeScript","tDUaxo76pm19H3GTcPX85_poqvP4XudzlVUgqKKTYBo",1783631387863]