Above Paradowski WebXR Mini-Golf

[Author's note: this piece was originally published on Meta's developer blog and is reprinted here with an expanded media selection.]

At Paradowski Creative we make Webby-winning immersive experiences for top brands on the frontiers of the 3D open web, and earlier this year we wrote about building a WebXR mini-golf prototype in just 40 hours to take our company putt putt tourney “into the metaverse.”

It was just one hole, but during the first-ever public test, there was a spark! For new VR users, putt putt was an anchoring concept — a familiar, low-stakes ritual they could easily grasp and perform, and one that doesn’t require quick reflexes or reaction times. When a tough shot was made, cheers went up. When the ball got chipped into the river, laughter erupted. Despite problems with UX and performance in that first iteration, Above Par-adowski was proof of concept in the affirmative.

Further, we could see the path toward developing a performant, fun experience for the 3D web on par with anything on the app store, and decided to proceed. This post will document and open source that process from the perspective of our expert design, art and development teams.

Why build for the 3D open web?

Paradowski believes the immersive web is the best expression of the metaverse: accessible, cross-platform via WebXR and other open standards, immersive-first yet multi-modal, and built on the already-very-real internet for instant global distribution. The trope goes, “VR can take you anywhere,” and the modern browser can do that better and faster than any other channel.

As such, our stack for this project is rooted in proven web technology. Every one of these tools is free to use, and most are open source:

Building for the web, our game’s source code and assets total just 14mb, allowing users to get from their home environment to gameplay in only seconds, neither app store nor install required. This shows that not only can WebXR achieve native quality, it can also exceed it in important areas like distribution, load time and entry UX. It’s as simple as click, click — another world. That’s the metaverse.

And by building open source, we’re able to harness incredible community support. Critical components including VFX for trails, occlusion highlights and particle systems — even the physics engine itself—were all created or updated for this project by top developers in the WebXR community like Noeri Huisman, Diarmid MacKenzie, and even members of Meta’s own browser team. In multiple cases, wondering aloud about a development problem on WebXR Discord directly resulted in the authoring of new components for Above Par-adowski. What’s more, every one of these open source features remain completely malleable and customizable to meet exacting design standards.

Design and creative direction

Unlike most contemporary WebXR experiences, Paradowski’s work is driven by expert creative teams with decades of experience blending design and technology for global brands and top platforms. And while many of our projects are ruled by client input and requirements, Above Par-adowski allowed our team to follow their own instincts and take greater risks than ever.

We started imagining a series of eclectic, eye-catching set pieces befitting a classic mini-golf motif, and utilized both AI-generated art as well as found reference photography to hone in on a visual direction: kitsch, fun, southwestern ‘70s roadside attractions strewn across nine themed holes on the scale of several kilometers.

Once setting and style were determined, the team began blocking hole and environment layouts using Blender and the VR design software Gravity Sketch. Andy Wise, VP of Creative Technology, describes this multi-perspective process:

Knowing this game would serve as an ad for our agency, we were thoughtful about branding the experience in terms of mark, logo, 2D UI and in-game props. Sound effects, haptics and music also factored into our thinking on user experience, with perfect salsa and bossa nova themes served up by the artist King Flamingo.

Technical art and lighting

In close collaboration with design teams, Paradowski’s technical artists craft beautiful, performant assets for our real-time 3D applications. For this project, they began by experimenting with an “unlit vertex color” pipeline, enabled by a recently-released Blender feature that avoids both costly real-time lighting and memory hogging image-based baked lighting for 3D assets by instead storing lighting information in a model’s vertex color data. Paradowski’s Lead Technical Artist Colin Freeman explains:

The resulting “unlit” materials look and perform great even in a large-scale outdoor environment where final art weighs in around ~310,000 triangles and renders at a smooth maximum framerate of 90hz. Our friends at Wonderland Engine, a leading WebXR editor environment, were so taken with this method that they wrote a how-to post with some useful technical background explaining its significance.

With the art pipeline set, Freeman and technical artists Ayushman Johri and Noah Ilbery modeled all our props from scratch and made dozens of iterations on hole designs while precisely fitting physics colliders to the ever-changing environment mesh. Johri says he enjoyed bringing his own unique sense of style to asset production:

Gameplay and physics

Mini-golf gameplay is based on a few simple physics interactions, so fine-tuning of performance and forces were requirements for this project. Our original prototype used A-Frame’s built-in ammo.js implementation for physics simulation, but the WebXR community is increasingly gravitating towards NVIDIA’s PhysX engine, ported to the browser via WebAssembly. With proper tuning and rationing of static and dynamic colliders, this engine is ripping-fast even on mobile VR hardware, averaging just 0.25ms per physics frame even on Quest 2 mobile hardware. That’s only a marginal fraction of our 11.1ms per-frame processing budget at 90hz, a bargain price we’ll happily pay.

But a problem remained: even at that max refresh rate, the club head of a weightless VR putter can move up to 2 meters between frames with just the flick of a wrist, making misses on fast swings (called “collision tunneling”) painfully common. Captured at 90hz and slowed down 20x, this .gif illustrates the problem:

This was solved with PhysX’s “speculative continuous collision detection.” When a kinematic object moves between frames, not only are the final collision boundaries checked, but so are collisions all along the path from its location in the previous frame to the next. We were able to fork the foundational open source work of developer Zach Capalbo, who created the A-Frame implementation of the engine for his great Vartiste project, and expose this flag for our game.

A few non-physics interactions comprise the remainder of gameplay and user experience, illustrating a defining trait of Paradowski: our willingness to go to ridiculous lengths to make an experience even 1% cooler.

Take shadows, for example. While high-quality real-time shadowmaps were too expensive on our mobile CPU budget, we implemented a performant “blob shadow” system for the club and ball. These primitive shadows aren’t as physically-accurate, but they can still give players a greater sense of depth and club positioning in VR, heightening immersion without need for perfect realism.

But can fidelity be improved? And how should these shadows react to club height, if at all? After some speculation, senior developer Kevin Olson and I weren’t sure—so we performed this highly scientific experiment involving a tennis ball taped to a broomstick, resulting in the development of a more realistic blur shader for the blob shadow. This is pure Paradowski energy on display, and it benefits our design and development processes in a thousand ways.

Takeaways for the community

In our first two months of operation beginning November 1, 2022, Above Par-adowski logged the following analytics while incurring zero out-of-pocket costs for marketing or hosting:

At last year’s Connect event, Meta revealed that the browser is one of the most-used apps on Quest 2, and metrics like this show how hungry users around the world are for high-quality, well-designed content on the immersive web. While the scope of our game is limited for now, it’s not hard to imagine creators building out more sophisticated, productized WebXR games and apps that can be profitably monetized across platforms, whether through brand sponsorships and media placements or in-app purchases, especially over time as devices proliferate and audiences grow.

At Paradowski, we’re deeply invested in building the best branded and sponsored experiences in WebXR, and in driving the medium forward through open source contributions. To that end we’ve open sourced our game code on Glitch for the wider web to unpack and learn from:

https://bitbucket.org/paradowskicreative/above-par-adowski-mini-golf/src/master/

Designed by: Andy Wise, Dan Rayfield, Colin Freeman, Ayushman Johri, and Noah Ilbery.

Developed by: James Kane, Kevin Olson, Ethan Michalicek, and Irina Fawcett.