In early 2019, I worked on a team to redesign the Shaw Floors homepage around an interactive 3D scene of a room, where the camera perspective changed as the user scrolled down the page. At any frame in the scroll animation, the user could toggle the scene to show it in day or night time, and they could also switch the type of floor in the room they're currently viewing. To add an element of surprise and keep the experience feeling fresh for return users, we featured three different rooms, one of which would be shown at random each time they revisited the page.
I led the front-end development of this page and built it with HTML, Less, JavaScript, and Three.js.
Accomplishments
I created a 3D scene of a room that would smoothly rotate the camera perspective as the user scrolled down the page.
- Problem: This component involved complex animations that would be difficult to render at 60 FPS if built from scratch using the default browser APIs.
- Solution: To enable smooth animations, I reached for Three.js to use the client's GPU and increase the FPS.
I optimized the 3D scene of the room to work well on all devices, regardless of internet connection quality.
- Problem: Initially, the component required loading about 150 full-frame images at 1920×1080, one for each frame of the animation, which wouldn't perform well on devices with a poor internet connection.
- Solution: Our team decided to remove two out of every three images from the animation, bringing the total down from 150 to about 50 frames. Then, we ran a script to batch compress them and decrease all of their file sizes. This decision lowered the fidelity of the animation, making it appear slightly more choppy, especially when the user scrolls slowly. However, it brought the total bundle size down below an agreed-upon threshold of 10MB, which improved performance for users on devices with poor internet connections.