This is our third collaboration with Panic on a WebGL project. This time, we helped them unveil their latest creation: a new handheld gaming system called Playdate .

Our mission was to create a 3D model of the device that needed to be as realistic as possible, while remaining lightweight enough to be rendered in real-time on a web page. By using technical drawings as a reference, as well as highly-detailed mesh, we were able to produce a very accurate and optimized model (15k polygons) weighing under 1Mb. We also created various PBR materials and textures to maximize realism.

This model is embedded seamlessly into the Playdate teaser website , enabling visitors to rotate the device freely and inspect it from every angle, months before its release.

But Panic did not stop there: they also wanted to show the device in action, and how it's like to play a game using the crank. For this, we applied some video footage from one of Playdate's launch games as a video texture to the screen. We then animated the crank in sync with the video to simulate actual gameplay.

For iOS users, we also made it possible to preview the device in the real world thanks to AR Quick Look. Visit the media page using either an iPhone or iPad to view the Playdate in AR.