Welcome to Hogwarts by Active Theory & Pottermore Wins SOTM September!

Active Theory teams up with the digital heart of the wizarding world Pottermore for their third Site of the Month. Coming up they discuss overcoming some of the challenges they faced during the making of this dream project. Thanks to everyone who voted and tweeted, find the winner of the year's Pro Plan in the Awwwards Directory below.

Creating an interactive Hogwarts was a dream project. What could be better than letting millions of Harry Potter fans immerse themselves into this fantastical world, discovering information and exploring the layout of Hogwarts and its surrounding areas? This was a uniquely innovative project.

We were able to deliver the experience in a way that was accessible in a matter of seconds from your home computer or even the phone in your pocket and collaborate with Pottermore’s development, creative and editorial teams to deliver an integrated and seamless user experience.

One of the major challenges was how we were going to load the entire Hogwarts castle in a way that didn’t feel like you were downloading an entire video game.

The Challenge

We were supplied with some assets that made up the majority of the geometry we needed, but they weren’t created for real-time rendering. So through a large effort of re-modeling and optimization, we brought the total triangles down from 6,000,000 to 210,000 without losing noticeable visual quality.

This amount of data as an OBJ file still weighed in at 37.4mb and GLTF weighed 24.1mb. We felt this was still too much to expect a user on a mobile device to download, even if the user was downloading the entire Hogwarts castle.

Instead we wrote a custom exporter for Maya using the Python API, and exported only position data with float precision clamped to 4 decimal places, ignoring UV and Normal data. This data when gzipped weighed only 2.1mb.

You can read more details about the design process in this technical case study Welcome to Hogwarts published by Active Theory.

Thanks for all your shout outs and votes @RomainDebain you have won a year in the Awwwards Directory!