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

Summary

The 2020 Black Friday Cyber Monday Globe and a related Live View visualization had to represent orders from one million merchants within two months while remaining realistic and performant. The team used a reusable layer architecture with three.js, physically based rendering, 32-bit EXR environment maps, and custom materials and shaders for the Earth and carbon-offset bubble effects. To display thousands of orders, it replaced arc-heavy rendering with particle-based visuals built from Points, BufferGeometry attributes, and ShaderMaterial. An automatic optimizer monitors frame rate and, when it stays below 55 fps for more than two seconds, lowers canvas pixel ratio to 1x and reduces environment-map resolution, helping low-power devices return to 60 fps. The resulting implementation became an internal library for future globes.

Context

The project needed to represent orders from one million merchants in a globe built within two months, while providing a similar visualization in Live View. Thousands of orders made arc-based rendering visually cluttered and reduced frame rate, and the team also needed the experience to perform well on low-end devices.

Approach / What changed

The team organized the application into reusable layers and built the globe with three.js. It used physically based rendering, 32-bit EXR environment maps, custom materials and shaders, particle-based order rendering, and an automatic frame-rate optimizer that reduces canvas and environment-map resolution when performance remains low.

Takeaways

• A layer architecture minimized shared state and encapsulated functionality, allowing code reuse across the BFCM Globe, Live View Globe, and future experiences.
• The carbon-offset visualization extended MeshStandardMaterial through onBeforeCompile, custom shaders, and uniforms; bubble opacity was driven by the brightness of the rendered pixel.
• When frame rate remained below 55 fps for more than two seconds, the optimizer reduced canvas pixel ratio to 1x and lowered environment-map resolution, cutting WebGL work while preserving a consistent high frame rate.

Related reading