Three.js Performance & Interaction Case Study
Recreated a glTF and meshoptimizer workflow with progressive LOD loading, explicit geometry caching, measurable rendering states, and unified Three.js controls.
The original professional application used glTF and meshoptimizer. This independent demonstration recreates its performance and interaction patterns with non-proprietary assets. In the professional engagement, I refined an existing neurological visualization workflow so related structures could load efficiently, coexist in one inspectable scene, retain distinct visual states, and share predictable camera controls.
Users
Large related glTF meshes needed to become useful quickly without forcing researchers to load and clear one structure at a time. Overlap also made color carry too much meaning, so loading policy, selection, visibility, material state, and camera behavior needed explicit models.
Contract Frontend Developer responsible for the scoped interaction model, material and visibility behavior, camera controls, and dataset-load performance within an existing research tool.
Decisions
Requesting every full-resolution structure before showing a usable scene increases time to first meaningful render.
Precompute four GLBs per structure and keep LOD selection in one hysteresis-aware distance function.
The public viewer can become interactive on coarse geometry while higher levels load only when camera distance, selection, or quality requires them.
Camera movement can revisit the same LOD repeatedly, and simultaneous requests can otherwise duplicate network and parse work.
Separate the browser cache, explicit application cache, and active scene mesh so each behavior remains measurable and explainable.
Zooming out reduces rendered triangles while higher detail remains ready for immediate reuse.
Related structures should coexist without becoming one irreversible mesh or clearing prior scene content.
Use stable structure IDs and shared coordinates, with one container retaining visibility, color, opacity, status, and current LOD.
The viewer frames, compares, hides, focuses, and recolors structures without removing unrelated scene content.
Implementation
Evidence
The original professional application used glTF and meshoptimizer. This independent demonstration recreates its performance and interaction patterns with non-proprietary assets. Original source code, institutional assets, neurological datasets, research results, and patient information are not shown.
Three.js research demo
Compare two original full-resolution public source GLBs with a packed meshopt LOD 0 bootstrap across a mixed H01 scene—three cortical-layer context surfaces and seven proofread cells—then inspect demand-driven LOD, cache, material, and camera behavior. The public data is unrelated to the professional engagement.
Outcomes
Reflection
A non-proprietary Three.js recreation of performance and interaction patterns for complex neurological surface-mesh visualization.
The Three.js renderers and GLB requests wait until this panel enters the viewport, keeping the case-study page light and the cold-start measurement tied to the moment you reach it. Use the start button above to launch it sooner.