I was lucky to collaborate with DotDotDash on the website for Emmit Fenn latest album “Far from here”. The website is centered around a sculpture based on different paintings made by the artist during the creation of his album.
Shadows and textures
The model was provided as a GLTF file from the DotDotDash team. We were trying to get good looking real-time soft shadows and to do so we experimented a bit with various shadow mapping techniques such as Variance, Perspective and Cascaded shadow maps. While we were getting close of our target with cascaded shadow maps, the performances weren’t good enough on middle and low-end devices to provide a smooth experience to all users. We decided to fallback to textures with baked shadows as it was, in the end, the most satisfying look with the best performance results.
Visitors can turn around the sculpture and zoom in and out to catch a glimpse of the various artworks. We wanted them to get quite close to the shapes while keeping a sharp rendering so we would need to have high-res textures. Problem is those can be pretty heavy and could drastically increase the initial loading time of the website if not handled properly.
To solve that issue, I compressed the textures as .basis files, which is a recent image format that outputs compressed textures that can only be decoded by graphic cards and not a CPU. They usually provide better performances results but can be tricky to work with as mobile and desktop GPUs require different compressed formats. The
Basis Universal
project aims to solve this by acting as a wrapper around those, and with very small file sizes. Perfect for our usage! We just had to play around with different texture sizes to find the right mix between file sizes and texture sharpness on screen.
Navigation and transitions
A menu shows all the artworks he made, each of them leading to making-of videos of the recording of the album.
On click, the sculpture turns to reveal the artwork hidden in the sculpture using the principle of anamorphosis .
The GLTF model contains camera data (position, rotation and zoom level) for each artwork to be revealed, and the transition is made with linear and spherical interpolation from the current state of the camera to its target one.
We needed to be able to zoom in really close to the artwork in order to do the “enter” transition, but it was looking bad because the model textures would be scaled really big. In order to achieve the transition, we added matching SVGs of the artworks, layered on top of the scene, fading in while the sculpture fades out. Since we’re dealing with Scalable Vector graphics, we can scale into them without losing quality.
Stack
The website was built with the static generator 11ty . The WebGL is rendered with THREE.js . Animations and navigation were made with personal libraries .