FWA 100
WebGL on Canvas 8.03.20
WebGL on Canvas 8.03.20
Celebrating 100 FWA with artistic expression and fun.
The FWA is a pillar within the web development community. For over 20 years its founder and owner Rob Ford has built a huge community and earnt the respect and recognition from creatives all around the world. The platform was built for showcasing the best of web, which encourages and drives studios all around the world to earn the coveted SOTD, SOTM and SOTY awards.
Earning these awards is by no means an easy feat, web development projects can take months to years to develop and then each website submitted goes before the public and a curated set of judges for a score to be given.
In 2019 Jam3 was approaching winning 100 FWAs. I’ve been fortunate to help contribute to some of those award winning projects during my time at the company. Pablo, one of the co-founders of Jam3 and the Executive Creative Director at the time, tasked a small group of us to create something special and memorable in marking our 100 FWA milestone.
I along with three others, Charlotte, Victoire and Aaron started to brainstorm ideas on how we could celebrate this special achievement. During our concepting phase we defined three pilars that would define the tone of the experience: Playfulness, Curiosity, and Gratitude.
We pitched several ideas to Pablo before all agreeing on one. Our idea was a story that showcased Jam3’s journey from the start to the present with a glimpse of the future.
We created visual mood boards for each section to roughly figure out art direction and interactions.
The past would explore Jam3’s beginnings. Using a geode rock as a metaphor for Jam3’s potential, clicking down on the surface would grow crystal shards releasing energy. The longer the user clicks down the more change they would see. The rock eventually explodes into thousands of pieces which float through space surrounding the user.
One of the technical hurdles I faced with this interaction was exploding the mesh into all the shards. The mesh of the rock deforms realtime to where the user is clicking down, with the vertex position being changed directly in the shader, I needed to find a solution to export these positions from the GPU to CPU.
The crystal shards are instanced tetrahedra, therefore each instance needed to align to the deformed geode mesh. As the mesh explodes I render the geode mesh into a separate render target, which encodes the vertex positions to rgb. On the javascript side I can simply read the render target data and unpack the vertex position from the pixel data. This technique seemed to work fairly well for mobile and desktop but I’d like to find a more robust solution in the future.
To learn more about how I solved this challenge along with shader snippets please check out the case study.
The present day at Jam3 would explore our growth, we’re multiplying in numbers, opening up more offices in different places.
During our moodboard exploration phase we were drawn to the idea of spheres to represent growth. I first started to prototype with 2D physics libraries in Javascript to explore some simple user interactions, our team wanted the interaction to feel tangible, like you’re physically playing with the spheres.
After making several prototypes I found the 2D physics’ libraries limiting. I started to research other libraries and came across Oimo.js, a lightweight 3D physics library thats very simple to use with a low performance cost.
I’ll admit I hadn’t really worked much with physics libraries before so understanding the features and terminology was key to finding out an interesting technique to use for the interaction. After a day or so playing around with the library, I became particularly fascinated with distance joints - a joint in which two objects can be connected together. After applying some spring tension, the spheres would naturally collide with one another creating a tangible motion.
The shading of this scene is probably my favourite in the whole experience. Victoire and I liked the idea of the spheres using different materials. I prototyped several different shaders which were influenced by real world objects and phenomena such as marbles and iridescence, to name a few.
Performance is always a top priority of mine whenever I work with a visual effect or shader so I made every sphere an instance. This meant I needed a shader setup that uses snippets to control which instance uses the corresponding shader effect.
With many of the spheres simulating glass like properties I added cube map reflections to simulate real world reflections. My implementation only uses a single cubemap rendered from the center of the scene, which by no means is physically correct, but visually it makes the spheres in motion look more real. This was an additional effect only I only enable for higher end GPUs.
To learn more about the shader composition please refer to the case study.
The future was equally unclear to our team as we tried to figure out the direction we wanted to take. Our first idea was based around connecting dots, each time the user connected a sequence together a new dimension would appear orthogonal to the user. However this seemed to lack depth and a satisfying visual finale.
Victoire’s logo for the experience uses the infinity symbol to represent the 00’s in 100. I thought this was an interesting shape to use visually in 3D. Thinking back to the work I did on Chanel Intangible Matter, the loading screen flies through a tunnel while content is loaded. Using the same camera technique, what if the user were to fly through a vortex of space into the future?
That was more than enough of an idea for me to start with. I constructed the infinity geometry with a custom formula for threejs tube buffer geometry. A particle system flows around the path creating a sense of speed and momentum as the user holds down to accelerate the camera. As the camera picks up speed the field of view elongates creating a sense of warp drive towards the destination.
Finally, the camera animates back and reveals the infinity shape. Digital confetti explodes around to celebrate this special moment.
After the final words are shown the user is invited to click and explode digital confetti throughout the scene. A pool of 8 confetti meshes are created to avoid additional garbage collection from being generated. Each confetti mesh is composed of an instanced tetrahedron with all the animations being driven directly in the vertex shader.
Closing Thoughts
The FWA has been a source of inspiration for me since I was an aspiring web developer in the early 2000’s. From Flash to HTML the web has evolved and grown, enabling creators like our team at Jam3 to create special experiences like this.
Achieving 100 FWA is a remarkable feat and I’m particularly grateful that Jam3 has personally invested in allowing a small group of us to create a project like this. Not only does it help our team grow and learn, the results will hopefully inspire a new generation of artists and coders to create passionate, playful experiences like this in times to come 🖤.