Hello BJS community,
Yesterday we shipped the Azure global infrastructure. The project aims to explain and visualize the elements of the cloud infrastructure and a few concepts around cloud and it’s offerings.
There were a couple goals:
- Seamless navigation - globe always in view and should change stage depending on context
- Real(istic) geo data - everything on the globe should be dynamic
- Load fast, run fast - aim for better performance as possible
- Must work on mobile
The globe, satellites, pins and hdrTexture are crafted by our terrific 3D artist with careful considerations on file and texture size, polygon count etc.
As the sole developer with trivial experience with Babylon.js, this was an intimidating task. Thanks to this forum and knowledge sharing in countless threads, I was able to execute this.
JS framework is Vue, and there are sprinkles of GSAP around the site.
We have two engines running in the background, globe scene and particles scene, and canvases are positioned/moved around using CSS. They live in a wrapping container behind the content.
The data for pin positions are lat,lng coordinates translated to the surface.
Fiber lines were the trickiest part, source is a huge number of GeoJson LineStrings. In order to have some kind of animation on them, I used tubes. Generating a huge amount of tubes on client kills the browser, especially mobile. I wanted to use solid particle system instead, but due to time constrains followed the shortest path: used GTLF2Export to download the generated tube meshes, and used it as a single 3D mesh. This increased download size, but resulted in faster initial load, lesser draw calls and higher FPS, and resolved mobile device issues.
Again, shout-out to creators and maintainers of BJS and it’s amazing community who made this possible! (to you too, @jhadenfeldt)