.CLIENT .Shopify Globe
.ROLE .Webgl / Graphics Programming
.DATE .2023
Shopify launched in 2023 it’s entrepreneurship index, a comprehensive study measuring the impact of entrepenours in Shopify’s ecosystem.
I was tasked of implementning their landing page in webgl as well managing asks from Jam3’s creative director and more junior teammates. We had multiple data vizualization scenes each with different animations and visuals.
In the videos below you ca see some behind the scene captures, The first one shows how the overall structure of the webgl app works, we have a camera with a plane parented to it, this plane has a gradient texture to create some fake glow behind the globe.
when you click on a country we convert the current camera xyz positions to latitude and longitude and animate those values towards the selected country coordinates, as a final step we convert the lat, long to xyz positions.
Theres also a large texture next to the globe, we render a svg model of a map containing all the contries; once a country is selected we modify the material on the svg mesh to highlight it.
The next video shows some customizations controls for the globe it self, like color, light position, shadow etc.. as well as the controls for the procedural animations for each statistics.