Overview
The article details the development of Shopify's BFCM 2023 Globe, focusing on the real-time visualization of purchases made through Shopify-powered merchants. It emphasizes performance optimization and the use of technologies like Three.js and React-three-fiber to create an interactive 3D globe.
What You'll Learn
1
How to optimize 3D visuals using instancing in WebGL
2
Why using Bézier curves is essential for rendering arcs in 3D
3
How to implement camera animations using spherical interpolation
4
How to apply noise functions for realistic textures in 3D graphics
Prerequisites & Requirements
- Understanding of 3D graphics concepts and WebGL
- Familiarity with Three.js and React-three-fiber(optional)
Key Questions Answered
How does instancing improve performance in 3D rendering?
Instancing allows multiple copies of the same base mesh to be drawn simultaneously on the GPU, sharing geometry and material data. This reduces the number of draw calls needed, significantly improving performance, especially when rendering large numbers of objects like arcs.
What techniques were used to create the fireworks effect?
The fireworks effect was achieved by generating a base mesh using Three.js's IcosahedronGeometry, connecting triangle strips to simulate gravity, and applying noise functions to animate the trails. This was all done in a single draw call for efficiency.
What challenges were faced with camera animations?
The main challenge was ensuring the camera maintained the correct 'up' direction when moving to different cities. A solution was implemented to dynamically set the camera's up property each frame based on its spherical coordinates, preventing the camera from flipping upside down.
How were loopy arcs implemented in the globe?
Loopy arcs were created using keyframes and cubic Hermite splines for more control over animations. The arcs were animated by defining their motion through keyframes, allowing for whimsical paths while maintaining performance through instancing.
Key Statistics & Figures
Maximum arcs rendered
up to a million arcs
This was achieved on an M1 laptop, showcasing the effectiveness of the instancing technique.
Data per arc
17 floats
This was the optimized amount needed to upload to the GPU for loopy arcs, well below the WebGL limit.
Technologies & Tools
Frontend
Three.js
Used for rendering 3D graphics and creating the globe.
Frontend
React-three-fiber
Facilitates the integration of Three.js with React for building 3D applications.
Key Actionable Insights
1Utilize instancing in your 3D applications to enhance performance when rendering multiple objects.This technique is particularly beneficial in scenarios where you need to display numerous similar objects, such as particles or arcs, as it reduces the load on the GPU and improves frame rates.
2Experiment with different noise functions to achieve unique textures in your 3D models.Using noise functions like psrdnoise can add depth and realism to your textures, especially when applied to surfaces like spheres, enhancing the overall visual appeal of your graphics.
3Implement camera animations using spherical interpolation for smooth transitions.This method can significantly improve user experience in interactive applications, allowing for more engaging navigation through 3D environments.
Common Pitfalls
1
Failing to dynamically update the camera's up direction can lead to unexpected behavior when navigating to different locations.
This issue arises because the camera's up property does not automatically adjust with its rotation. To avoid this, ensure that the up property is recalculated based on the camera's spherical coordinates during animations.
Related Concepts
3d Graphics
Webgl
Performance Optimization Techniques
Animation In 3d Environments