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

What this post added

This post details the technical implementation of the 2020 BFCM Globe and Live View, focusing on realism, performance, and the impact of merchant orders. Key technical contributions include: - **Layered Architecture:** Utilizing a layer-based architecture in three.js for code reuse and flexibility. - **Physically Based Rendering:** Employing `MeshPhysicalMaterial` or `MeshStandardMaterial` with 32bit EXR Environment Maps for realistic lighting and smooth image-based lighting. - **Custom Materials and Shaders:** Developing custom materials extending `MeshStandardMaterial` with custom vertex and fragment shaders (e.g., `ShieldMaterial.ts`, `shield.frag`) to achieve effects like bubble transparency by manipulating pixel brightness and alpha. - **Particle-based Order Visualization:** Implementing a particle system using `three.js` `Points` and `BufferGeometry` with custom attributes to render thousands of orders efficiently. This includes using geo interpolation for surface paths, parabola equations for curved height, and converting to `gl_Position` for 3D appearance. - **Performance Optimization:** Utilizing `BufferAttribute`'s `_updateRange_` to update only necessary attributes per frame, enabling the rendering of up to 150,000 particles at 60fps without performance degradation.