Go Behind the Scenes with James C. Kane to Explore the Road to ‘In Tirol’

Over the last few years, while working as an agency director for global brands like Sesame Street, adidas and Verizon, my team and I created several of the most popular original WebXR games today, including Above Par Mini Golf and Escape Artist, which reached more than 1 million players and was featured in the Meta Connect 2024 keynote.

Earlier this year, I launched my first solo title, In Tirol, designed and developed in three months then debuted at Game Developers Conference. In the game, you play an artist fleeing a storm across expressionist manor grounds on the outskirts of Salzburg, 1914, solving puzzles and deciphering clues to find safety in an increasingly surreal world. This post will review the creative and technical process behind this project.

The browser is among the top apps in the Meta Horizon ecosystem, and WebXR offers instant global distribution of immersive content to a global audience that is increasingly hungry for casual, accessible games. This channel is cross-platform by default, governed by open standards, and can even surpass native apps in important areas like load time and entry UX. No high-friction install process nor gigabyte-plus downloads necessary — in just seconds, you’re transported to another world.

Over the next few years, I’m predicting more and more capable WebXR devices and browsers will emerge, maturing tools including WebGPU will level the playing field for graphics performance, and trusted payment options will finally open up for creators across the 3D web, leading to yet more growth and innovation. In summary, the future of the XR web platform is bright, and I’ve made it my mission to help push it forward.

My game’s setting, style, music and themes were drawn from turn-of-the-century Austrian culture, then and now a global center of art and commerce. Years ago I lived in Vienna as a journalism and music student, and in October 2023 I released Escape Artist there at AWE EU. The idea for In Tirol took root soon after.

My art style was influenced primarily by German expressionist film and the Vienna Secessionists’ painting, patterns and ethos (including direct re-use of several public domain masterpieces). I box-modeled a square kilometer of low-lit, asymmetrical set decoration with simple earthy colors to evoke feelings of unease and uncertainty, or being threatened by the elements. Hand-painted brushstrokes of light and shadow — common in expressionist film sets due to constrained resources and technology — were repurposed in VR as a performant replacement for expensive real-time shadow-casting lights. The parallels are clear in many places:

With the setting and art direction decided, I moved on to the script. I write immersive narratives in screenplay style, which already has syntax and language for stage direction, set pieces, action sequences and character dialog. If your narrative branches a lot, this could be limiting, but my story would be fairly linear in this case.

Pacing is key across all media, but perhaps most of all in VR. The longer any story beat takes, the more UX friction mounts. For In Tirol, my goal was for the player not to move more than a few meters without advancing the plot, and for the game to unfold in less than 15 minutes. Terse, direct dialog would be important to keep things flowing, and to make the game more accessible for global audiences. I wanted that audience to see clear parallels between the game world and our own.

As I write, I’m filtering for what I can realistically produce on-budget and performantly on my minimum target device. As a solo creator, the achievability of any concept given available resources and timeline is critical. Even with careful planning, I’ll need to improvise and compromise at several points, and the flexibility of being a one-person team allows me to pivot on a dime when something isn’t working.

Audio is critical to immersion and has minimal impact on performance, so it’s a low-risk, high-reward area of focus for designers. Where necessary, I recorded foley tracks, but also relied heavily on freesound.org and other open source SFX libraries. More than half of In Tirol’s total build size is music, dialog or sound effects in .mp3 at 128kbps.

For the game’s score, there was only one choice: Vienna’s Gustav Mahler (1860–1911), the greatest classical composer of his age. His music illuminates and colors every emotional beat of In Tirol. Specifically, I used public domain recordings of Symphonies № 1, 2, 5, and 8 available on archive.org from 1929—just a few years after Mahler’s death, but before the Nazis would try to erase his memory because of his Jewish heritage. These contain a crackle and overdrive that is entirely absent from any pristine modern symphony performance, and fits perfectly with the cinematic film noir mood of the game.

I also voiced all three characters, but ran the line readings through ElevenLabs’ voice-changer AI. By doing the vocals myself, I could impart the exact rhythm, intonation and emotion I intended in the script, but still transform that into unique character voices, giving a much greater degree of control versus prompted AI-generated dialog alone. I even created regional “custom voices” using a few minutes of open source recordings of people’s authentic accents and speaking voices from around Europe.

Plenty of audio editing and cleanup in Ableton was necessary, even with these AI tools. I have no doubt that professional actors would have done a better job, but with my limited resources, I’m happy with these results.

Music and sound are even imbued in gameplay elements, including a theremin puzzle that uses the Web Audio API to modulate a sine wave’s amplitude and frequency in real-time with tremolo and reverb, much like the real instrument. I use the same normalized values to drive the lighting intensity of the scene behind it.

When creating expansive virtual worlds with hundreds of assets across kilometers of 3D space, a proper visual game engine-editor is important. In Tirol was created in PlayCanvas, an open source 3D web engine. Its form and function will feel familiar to users of Unity or Unreal, but it’s entirely browser-based, allowing for consistent rendering of WebGL/WebGPU content across your editor and runtime environments.

Iteration time is fantastic and it has many of the features you’d expect from native engines: particle systems, a full animation state graph system, clustered lighting and even VS Code extensions for writing code locally.

The final atmosphere and feel of the game emerged from a spectrum of classic VFX techniques. Bloom, grain and CRT television scanline effects are mixed in a single full-screen shader (a first for a WebXR game featured by Meta) mimicking the look of early 3D console gaming, or the roiling VHS darkness of Skinamarink (an indie horror film in which almost nothing happens that’s nevertheless spellbinding).

I also developed a custom UV scrolling particle effect for the constant rain, lightning and expressionist flames, and used simple vertex animation to make dead trees twitch in the wind and soaked laundry flap on clotheslines.

To hit performance targets for Meta Quest 2, I had to pivot between several different lighting techniques. The hand-painted “brushstroke lights” were helpful, but I was stubbornly unwilling to compromise on one thing: the torch should be a handheld real-time shadow-casting light. This enhances the dynamism and mood of the scene in VR more than any other effect.

But with that and post-processing enabled, I had very little GPU headroom to spend elsewhere, and still needed to populate my chiaroscuro game world with light sources that should appear dynamic in the shifting wind and rain.

My solution was to paint vertex color directly onto 3D models, then pipe that data through the emissive channel, on top of the diffuse, lightly randomizing the intensity value every few frames. Amplified by the bloom post-processing and abstract sprite sheets, this can read visually as a flickering flame. While not entirely physically-correct, it’s a performant artistic choice: represent only the minimal expression of the thing.

Just three months after production began, the game debuted at a Game Developers Conference event on March 23 and, weeks later, launched on the new tab page for every Quest 2, Pro, 3, and 3S browser around the world under “Best of the Immersive Web.”

In Tirol is receiving tens of thousands of MAU from more than 140 countries with little-to-no marketing. With some fairly standard content development and promotional practices, this is a sizable-enough audience to start building a sustainable community around. Naturally I wasn’t able to achieve everything I’d envisioned in three months, and have plenty of longer-term aspirations for this game world and others. As WebXR matures, including adding better tools for monetization, myself and a diehard community of 3D web developers will continue advancing the field one passion project at a time.

More information about the author can be found at https://jamesckane.com, and you can read his original blog post here. If you’re interested in getting started with WebXR, join the WebXR Discord community, and try different 3D web engines such as PlayCanvas, Wonderland Engine, A-Frame and react-three/fiber. 3D artists and animators should become familiar with the free open source 3D suite Blender and its glTF export functions.