Hello,
After testing a CDLOD on flat terrain, the next logical step was to apply it to a sphere 
This kind of approach is usually found in C++, but I wanted to see how far I could push it with JavaScript!
Features
- Floating origin camera
- Real-scale planet (1:1)
- Quadsphere with a uniform mesh
- Asynchronous CDLOD/Quadtree using Web Workers
- Volumetric Atmospheric Scattering Shader
Interesting Aspects
-
Floating Origin Camera:
Instead of moving the camera, objects move around it to handle large-scale rendering efficiently.
Babylon.js Floating Origin Documentation -
Quadsphere with CDLOD:
I’m using a quadsphere with a CDLOD per face, ensuring that the triangles remain uniform across the sphere.
Reference -
Web Workers for Chunk Generation:
The most interesting part is the use of Web Workers to generate the quadtree chunks. Initially, this was handled synchronously on the main thread, and performance was acceptable with a quadtree 6-7 levels deep.
The goal was to free up the main thread for rendering by managing chunk generation in a pool of Web Workers (one worker per chunk).
WebGL2 Planet CDLOD take off wireframe
- Scaling Web Workers:
Strangely, as soon as I exceed 3-4 Web Workers, only Firefox is able to create them properly.
The solution was to use a blob object (MDN Reference) for Web Workers, eliminating URL calls.
This now allows up to 256 or even 512 Web Workers before the browser crashes!
WebGL2 Planet CDLOD with 1 web worker
WebGL2 Planet CDLOD with 16 web workers
WebGL2 Planet CDLOD stress test
Performance
- With this approach, I can now reach 10-12 quadtree levels without lag.
- CPU usage has increased from less than 10% to around 20-25%, and it works quite well.
- The next bottleneck is draw calls!
The code is still a bit messy, and there’s no demo available yet, but I’ll update the post this weekend with more details!
Volumetric Atmospheric Scattering Shader Source
L = Show LOD
² = Debug Layer
