Sylo: Real-time WebGL Environment
Optimised a hero environment for real-time, reducing geometry and texture cost while maintaining visual fidelity.
Applied high-to-low poly workflows, camera projection, and foliage card techniques to meet runtime constraints, ensuring smooth playback across desktop and mobile devices.
Built as an interactive scrolling WebGL experience using Three.js & GSAP.
Real-time environment with mouse-driven parallax and scroll-based camera push-in
Comparison of decimated geo + normal map against the original high-resolution assets, preserving most of the surface detail for camera projection while massively reducing polycount
Shrinkwrapped simple geo onto clustered rock assets to capture surface silhouette while significantly reducing overall mesh complexity
Foliage cards used to enhance the sense of parallax during camera push-in, while reducing geometry cost
Early camera exploration and scene layout, with hero textures projected onto low-poly geometry
Original hero environment geo prior to optimisation. Lots of beautiful detail, but far too high resolution for the web
Created simple 3D characters from 2D artwork using height maps and transparent fur cards, adding depth and volume while keeping them lightweight for real-time use
Full In-browser experience