Get the latest tech news

How we built the Black Friday Cyber Monday 2023 globe

Every year for Black Friday Cyber Monday (BFCM), we put together a real-time visualization of purchases made through Shopify-powered merchants worldwide. This year we're cooking up something big, and in anticipation we wanted to show you how we built the globe last year. Video of BFCM 2023 Globe Besides going for better visuals, a big focus was performance. We've put together an interactive deep dive into how we built and optimized the 3D visuals using technologies such as Three.js and React-three-fiber. Before we jump in, here's the globe with simulated data that you can play with. Arcs The arcs flying around are the most important component. Each one represents an order being placed in real time, and they travel from the merchant to the buyer's location. These can be defined as a Bézier curve with 4 control points. Each point is a 3-dimensional vector. P0: located at start position P1: located 25% of the way between start and end P2: located 75% of the way between start and end P3: located at end position Arc height can be adjusted by moving control points P1 and P2 away from the surface. To render the arc, we create a mesh that is a strip of triangles moving along the curve. This gives us the ability to control thickness and have better flexibility for stylizing it with shaders. You'll notice however that as you move the mesh around, it disappears from certain angles. We needed a way to make it always face the viewer. The solution was surprisingly simple. The red lines along the curve represent the tangent at those points. Taking the cross product of the tangent with the direction of the camera gives a new vector. This is used in the vertex shader to offset the position so the mesh always faces the viewer. To texture the arcs, the UVs of the mesh are defined with v going from 0 at the start to 1 at the end. So a vertex in the middle of the

Every year for Black Friday Cyber Monday (BFCM), we put together a real-time visualization of purchases made through Shopify-powered merchants worldwide. Here's a comparison of an early pin animation (left) with the final one (right) that shows how a bit of easing can go a long way to giving a polished feel. To describe a loopy arc we need to upload all the keyframes of our animation curves and some additional data to construct a transformation equivalent to the lookAtMatrix.

Get the Android app