CloudQuest
WebGL city optimization and shader-based lighting
Role
Technical Artist
Context
CloudQuest is an educational game platform deployed to WebGL, requiring high performance and visual quality. The project involved creating a large-scale city environment that needed to run smoothly in browsers.
Problems & Constraints
WebGL deployment constraints, large scene complexity, and the need for real-time lighting without traditional lightmaps. Performance targets required maintaining 60fps on mid-range devices.
My Contributions
Developed custom shader-based lighting system, optimized city geometry using LOD groups, implemented efficient occlusion culling, and created automated build pipeline for WebGL deployment.
Technical Deep Dive
Created a custom shader system using Unity URP that combines: - Distance-based LOD system with 4 levels - Shader-based fake GI using vertex colors and light probes - Optimized shadow cascades for WebGL - Texture atlasing to reduce draw calls The lighting system uses a combination of baked light probes and real-time directional light, with custom shader code to blend between them smoothly.
Results / Impact
Achieved consistent 60fps on target devices, reduced build size by 40%, and improved load times by 60%. The shader-based lighting system eliminated the need for lightmap baking while maintaining visual quality.