How We Built the BFCM 2023 Globe - Shopify

What this post added

This post details the technical implementation of the BFCM 2023 Globe visualization, focusing on performance optimizations and new visual features. Key contributions include: 1. **Arc Rendering Optimization:** Transitioned from individual meshes per arc to GPU instancing using Three.js and React-three-fiber. This involves deforming geometry in the vertex shader using Bezier curves and instanced buffer attributes, enabling the rendering of tens of thousands of arcs in a single draw call. 2. **City Dot Rendering:** Utilized instanced particles with `gl.POINTS` for city dots, choosing billboarded points over surface-aligned quads for a better glow effect. 3. **Firework Visualization:** Implemented fireworks using instanced meshes with geometry deformed in the vertex shader to simulate gravity and dissipation. Post-processing effects like bloom were added for visual enhancement. 4. **Camera Animation:** Developed a camera animation system using spherical interpolation and a `lookAt` function, with a fix for the 'world flip' issue by dynamically updating the camera's `up` property based on spherical coordinates. 5. **Animated Pins:** Used `react-spring` for polished entrance animations of city pins. 6. **Airplane Animation:** Implemented instanced airplane animations in the GPU by replicating orbital motion in the shader using trigonometry and instanced transformation matrices, allowing for a single draw call.