Massive congratulations to Media.Monks for winning Site of the Month June for Persepolis Reimagined. Thanks to everyone who voted, the winner of the Pro Plan is at the end of the article.
The Persian Empire, despite its profound influence, is often overlooked in Western reviews of ancient history. This inspired the Getty Villa Museum to mount a sweeping exhibition of the ancient superpower. To reach an even wider global audience, we created a complementary immersive experience that allows people to visit a historically accurate recreation of the capital of Persia, Persepolis, at the height of its splendor. While our efforts pale in comparison to the epic build of Persepolis, bringing the citadel to life in your browser was an ambitious undertaking that faced us with many interesting challenges.
The Secret to Seamlessness
Crucial to an immersive experience is creating seamless transitions from start to end. From the preloader to the title sequence and into the WebGL initialization, the Persepolis experience is packed with tricks to make this happen.
To avoid a simple preloader, we combine two renders of Persepolis in a shader. One is a render at night and a second one is a render at day time. During the preloader, night slowly turns into day. A fog layer slowly recedes into the fields using a depth map. When all assets are loaded, it is day time and all fog is gone. The preloader now matches the first frame of the intro video perfectly, which allows for a seamless transition.