Funked-up flamingo shows what WebGL can do

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

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.

Words: Peter Gasston

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.

Like this? Read these!

• 3 top tools to create a responsive website
• Brilliant Wordpress tutorial selection
• Download free textures: high resolution and ready to use now