From our sponsor: Leverage AI for dynamic, custom website builds with ease.
Crosswire challenged us to create a website that broke the mould, something that fully embodied their disruptive approach to the industry. It needed to be unique, memorable and visually striking.
The core challenge was visualising Crosswire’s complex service offering in a simple and digestible way. Our solution was to create a 3D environment that represented the digital landscape of a customer’s business which we then brought to life using WebGL.
Challenges:
1. Scene Layout and Animations
The environment was designed using a 3D grid system, inspired by the shapes that make up the company’s brand mark. By repeating these components, we created sections and simple animations to work as visual representations of the product features. The small triangular shapes that move around the landscape represent the users of the product.
The grid consisted of individual models that needed to be positioned correctly. To achieve this we used our internal Blender add-on to export the scene as a point cloud. Using this technique, we were able to target the position and rotation for each individual model and identify which of them had to be animated. This allowed us to create an instanced mesh for each model and position them in the WebGL environment; reducing the complexity of the process and keeping the experience as performant as possible.
2. Material And Reflections
The design took advantage of a metallic material that reflected its environment as the user scrolls down the page. Naturally, real time reflections and shadows in WebGL are something very performance heavy and we had to look into creative ways to overcome these limitations.
To achieve the aesthetic defined in our style frames, we initially attempted to mimic the environment created in the 3D software by creating a custom HDR. The initial results were promising, but unfortunately it was still far from the design. On scroll a slight shift in rotation would change the scene’s aesthetic drastically.
As a result of this we decided to experiment with matcaps, which use the camera coordinates to map a texture and provide a baked lighting model. This approach proved quite effective, and with some fine tuning in blender, we were able to achieve the visual results we were after. However, we found that a single matcap throughout the entire experience didn’t provide the exact lighting we were looking for, so instead we tried fading between multiple matcaps as the camera moved through which worked well.
A core consideration when creating WebGL environments is performance. It’s always a balancing act between the visuals and that ever important 60fps. As a result we are always looking for inventive ways of improving performance wherever possible.
3. Lack of Frustum Culling on InstancedMesh
One example of this is utilising Three.js’s InstancedMesh when building the collection of blocks that form the “floor” as they are made up of three different repeated geometries. At the time of building the project, the InstancedMesh object didn’t support frustum culling out of the box therefore we had to implement our own solution.
Since we also wanted to control other WebGL elements when each section entered and left the camera frustum, we opted to make a “FrustumDetector” component which extends the existing Frustum class from Three. This allowed us to group the floor into sections and only render what is visible.
4. User Trails
The small triangular shapes (users) that move across the scene on predefined paths needed to form trails behind them. There are a few ways to achieve this but we chose to take the path that the user follows, and build a custom geometry by sampling equidistant points along it and forming a wall-like structure. This meant we could then form a 2D trail shape using the UV coordinates in the fragment shader and move it on the x-axis, using the progress of the user position along the path.
5. Radial Scan
Part of the experience required a “scanning” effect that covered the scene. This could have been a simple 2D plane that covered the floor, but we found the effect wasn’t convincing unless it followed the shape of the 3D landscape correctly. Instead we decided to do this in the fragment shader of the material used on the geometry that makes up the floor.
The talented Yuri Artiukh (a.k.a @akella) recently recreated this effect, which can be viewed here. His approach closely resembles the original, so need for an additional breakdown here!
Conclusion
We hope you liked this Case Study, if you have any questions, feel free to ask us on Twitter @uns__nstudio we would be very happy to receive your feedback!
