A World Rendered Beautifully: The Making of the BFCM 3D Data Visualization - Shopify

This post details the technical implementation of the 2020 BFCM Globe and Live View data visualization. It covers the adoption of a layered architecture using three.js, physically based rendering with `MeshPhysicalMaterial` and `MeshStandardMaterial`, and image-based lighting using 32bit EXR Environment Maps. A custom material (`ShieldMaterial`) is described for simulating bubble effects using GLSL shaders and the `onBeforeCompile` hook in three.js. For real-time order visualization, a particle-based approach using `three.js Points` and `BufferGeometry` with custom attributes and shaders is detailed. Techniques for efficient attribute updates using `_updateRange_` are also discussed, enabling the rendering of up to 150,000 particles without performance degradation.