How We Built the BFCM 2023 Globe

Summary

The 2023 BFCM Globe is a real-time visualization of purchases made through Shopify-powered merchants worldwide, with animated arcs, city dots, fireworks, camera movement, atmospheric noise, stars, and a custom material. Performance was a central concern because the earlier approach used a separate mesh and draw call for every arc, causing more than 1,000 simultaneous arcs to slow some mobile devices. The revised arc system uses instancing, interleaved per-arc attributes, and vertex-shader Bézier deformation, allowing tens of thousands of arcs in one draw call and an initial benchmark of up to one million arcs on an M1 laptop. Other effects were similarly consolidated, including billboarded point particles for cities and single-draw-call fireworks, while 2D psrdnoise and a stripped-down shader reduced rendering cost. The result combines richer visuals with substantially greater rendering capacity.

Context

The Globe is produced each year for Black Friday Cyber Monday to visualize purchases made through Shopify-powered merchants worldwide. For the 2023 version, improving visual quality was paired with a strong focus on performance because the previous per-arc mesh approach could make rendering more than 1,000 arcs at once difficult for some mobile devices.

Approach / What changed

The implementation uses Three.js and React-three-fiber with instanced rendering. Arcs share base geometry and material data while per-instance control points and start times are uploaded in an interleaved buffer and used by a vertex shader to reconstruct Bézier curves. City dots use instanced gl.POINTS, fireworks are built as a single instanced mesh and draw call, and rendering cost is reduced with 2D psrdnoise and a simplified custom shader.

Takeaways

• Instanced arcs store four Bézier control points and a start time per order, allowing the GPU to deform shared geometry and update only the specific slot for a newly arrived order.
• The city visualization uses camera-facing instanced particles with gl.POINTS, while fireworks combine launch and burst trails in one mesh and one draw call, with attributes controlling their separate animations.
• The implementation chose cheaper 2D psrdnoise over 3D psrdnoise after correcting seams, stretching, and distortion with custom icosphere UVs; the material was also reduced from thousands of shader lines to about a hundred.

Related reading