Case Study: Low High Head
An interactive 3D WebGL experience experimenting with dynamic LOD transitions, vertex morphing, and custom shaders.
Graphics Engine Three.js, WebGL
Project Type Interactive 3D Mesh Morphing
Research Scope Vertex Shaders & Level of Detail
Platform Cross-Browser (WebGL Enabled)
Project Overview
The Low High Head project is an academic WebGL experiment designed to explore dynamic rendering thresholds and custom shader interactions. Developed using Three.js, the application dynamically morphs a 3D head model between low-poly and high-poly resolutions in real-time, testing how light propagation, vertex structures, and custom specular highlights behave under different mesh geometries.
By rendering raw model data directly in the browser, the project provides interactive parameters to analyze performance overhead and evaluate vertex morphing equations across thousands of polygons.
Key Technical Focus Areas
- Dynamic Vertex Morphing: Created custom GLSL vertex shaders to smoothly interpolate coordinate mappings between distinct low-poly and high-poly vertex buffers.
- Three.js Lighting & Shadows: Configured real-time shadow map cascades and specular reflection passes to test how directional light propagation adapts to varying surface densities.
- Performance Benchmarking: Investigated GPU pipeline overhead, draw-call frequency, and browser garbage collection patterns when hot-swapping heavy geometry sets.