Animech created this proof of concept to show the kind of quality we could deliver using WebGL. The goal was to create a realtime viewer that could rival rendered product images. We made 2 watches – a chronograph watch and a diamond watch.
Creating the watches
We started by using existing high poly models for the watches, which we then reduced. The goal was not to make the most perfect models — only to get them to an acceptable level. Instead, this project focused more on the rendering tech. As such, the project presented some new challenges.
For the diamond watch, we needed a gem shader for the actual diamonds. The shader creates a cubemap for each unique diamond (utilizing instancing), to which it bakes down light bounces, dispersion, and absorption. The cubemaps are then refracted inside the diamonds. This creates an extremely believable result, since we are essentially ray tracing. The next challenge was to simulate the magnifying glass on the diamond watch. The solution was to render the watch face to a texture, which we sample based on the magnifying glass’ normals. Also since the watch shows the correct date and time, we needed to update the texture every tick of the watch.
To increase the overall visual fidelity, we implemented some post processing effects – depth of field, bloom, and vignetting. We already had basic versions of these effects before, but they had issues. These new effects look way better, and they better preserve HDR information. The finishing touch was to get rid of specular aliasing, which we had quite a lot of because of the reflective surfaces. We ended up using temporal anti aliasing, which was quite a challenge to implement but it was well worth it in the end.
Closing thoughts
I was responsible for optimizing the 3D models, creating materials, lighting the watches, and developing the script for making the watches show the correct time. I was also involved in researching, testing and providing feedback for the rendering tech we developed.
