Pablo The Flamingo is a delightful example of WebGL animation. Read on to learn how it was made.
A one-trick site, but what a delightful trick! Pablo is a flamingo who loves to dance, and he’s brought to life beautifully in fully responsive WebGL. Just don't try to mute the sound...
Pablo is the result of a collaboration between authors Nathan Gordon, Pascal van der Haar and Jono Yuen. It isn’t a promotional site, but a side-project that came about through a conversation between web developer Gordon and art director Van der Haar.
How it was made
Try to mute the sound and Pablo gets vexed
Pablo began life as a model constructed in Maya. This was then exported as a simple grid mesh, to which the illustrations by designer Yuen were added as a texture. The models were then brought into the browser, where 3D modelling library three.js and physics library Matter.js were used to bring Pablo to life online.
"I was able to create a precise form that could be directly mapped to the physics base. This gave me the result that I was after, and was the largest 'aha!' moment of the whole project," says Gordon.
The response from the public has been incredible - in his first week online Pablo was seen 60,000 times, won FWA Site of the Day and earned countless plaudits across social media.
Peter Gasston is a veteran web developer who now works as a technologist and frontend lead at rehabstudio. He’s the author of The Book of CSS3 and The Modern Web.
