Feb 28, 2023

Above Par-adowski WebXR Mini-Golf

James Kane, Director of Emerging Technology, Paradowski Creative Blog Hero Image

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. When a tough shot was made, people cheered. When the ball got chipped into the river, they laughed.

Though that first iteration of Above Par-adowski struggled with UX and performance problems, we could already see the path toward developing a 3D web experience on par with anything on the Meta Quest Store, and decided to keep working. 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?

While the metaverse may take many forms, 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.

Above Par-adowski’s final source code and assets total just 14MB. We want players to go from their Home environment to gameplay in only seconds, with no store or install required. It’s as simple as click, click—another world. That’s the metaverse built on WebXR. Not only can we achieve the same quality as games in the Meta Quest Store, but we can also exceed it in important areas like distribution, load time, and entry UX.

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:

three.js: The de facto WebGL library of the immersive web
A-Frame: A convenient three.js-based entity-component system built on the browser DOM, plus stock cross-platform interaction components for VR, desktop, and mobile
NVIDIA PhysX: The same physics engine Unity uses, running in the browser via WebAssembly for super accurate and fast collisions
Blender: Fully open source 3D asset creation suite with industry-leading glTF export tooling and recently improved lightbaking tools
Glitch.com: Free hosting for open source projects, plus support for local development and team-based version control processes
WebXR Emulator Browser Extension: A clever tool that lets you develop on desktop with an emulated WebXR device
Meta Quest Developer Hub: Easily debug rendering performance for native and WebXR apps
Discord: m2’s WebXR Discord connected us to top open source WebXR creators

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 the 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

Paradowski’s work is driven by expert creative teams with decades of experience blending design and technology for global brands and top platforms. But 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 setpieces befitting a classic mini golf motif. Utilizing AI-generated art and reference photography, we honed in on a visual direction: kitschy 1970s roadside attractions in the southwest, 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:

“Roadside mini-golf lets you get away with a lot of crazy things, and virtual reality extends that license even further. Our first creative challenge was editing our own ambitions to turn a story-less activity like putt putt into an implied narrative with a sense of awe and surprise and wonder. Because design decisions on a project like this are so interconnected, our process continually bounced from macro considerations like scale and flow to details like lighting and texture. We were like painters admiring our canvas from the corner of a room and then quickly running forward to see how the paint felt a couple millimeters from our eyeballs. Lots of that.”

Knowing this game would essentially 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

Working closely with the 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, this allows artists to store lighting information in a model’s vertex color data and avoids both costly real-time lighting and memory hogging image-based baked lighting. Paradowski’s Lead Technical Artist Colin Freeman explains:

“The technique of using vertex colors has been around since Mario 64. It’s kind-of the old school way of getting lots of polys textured and rendering real-time. The lightbaking part is relatively new, but it’s the same as texture projection and other techniques for projecting onto materials. By storing lighting in vertex colors we can bypass the need for any complex fragment shader calculations. That gave us our poly budget, which was about 10x what we normally cram into complex projects, so we felt pretty comfortable.”

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:

“I prefer making stylized assets, and I was able to lean into it for this project. The creative team had a vision regarding the overall aesthetic for the location and the time period the course would be set in, so as long as I followed those directions, I basically had the liberty to make assets that fit my style. The props in Above Par-adowski play an important role alongside its environment to portray a calming ambience while also helping with its narrative design, paying homage to cartoons and sci-fi media ranging from the 1960s to the late ‘70s.”

Gameplay and Physics

A realistic mini golf game relies on a few simple physics interactions, so Above Par-adowski required us to fine-tune the performance of those calculations.

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 blazing fast even on mobile VR hardware, averaging just 0.25ms per physics frame on Meta Quest 2. That’s only a marginal fraction of our 11.1ms per-frame processing budget at 90hz—a bargain price we’ll happily pay.

But there was another challenge to overcome: Even at 90 frames per second, the club head of a weightless VR putter can still move up to 2 meters between frames—with just the flick of a wrist. This made misses on fast swings (called “collision tunneling”) painfully common. Captured at 90Hz and slowed down 20x, this GIF illustrates the problem:

We managed to fix this ghost-club problem 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 game is more than just its physics, though. There are a handful of other features we put a lot of effort into to ensure Above Par-adowski would stack up to native Meta Quest 2 games—because a defining trait of Paradowski is 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 the need for perfect realism.

But could fidelity be improved? And how would these shadows react to club height, if at all? After some speculation, senior developer Kevin Olson and I weren’t sure—so we performed a highly scientific experiment involving a tennis ball taped to a broomstick (below), 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 three 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:

100,00+ unique visitors—with 70,000+ of them unique VR users—from 168 countries
500,000+ ‘made’ putts
An average 6 minutes and 30 seconds on our site
63% of users returned a second time
Awarded “Coolest WebXR Experience” of 2022 by Glitch
Nominated “Game of the Year” of 2022 by the WebXR Awards

At last year’s Connect, Meta revealed that the Meta Quest Browser is one of the most-used apps on Meta 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 (including outside of VR) 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, so that others can unpack Above Par-adowski, learn from it, and create their own WebXR projects.

We hope it’s helpful! We’re hiring WebXR developers now to work on original games and exciting new client projects. Keep an eye out for our second WebXR project, The Escape Artist, coming March 2023, or reach out if you’re interested in talking about how your brand can harness the 3D open web.

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

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

Design

Games

Quest

Unity

WebXR

Explore more

Oct 1, 2024Meta Avatars SDK Update: Now Supporting Animated Full-bodied Avatars, Parametric Body Shapes, Custom Animations, and More

Meta Avatars SDK v29.6 enables your app to support full-bodied avatars, custom animations, attachables and more. Paired with an updated visual style, Meta Avatars SDK gives you the tools to create more engaging MR and VR experiences for Meta Horizon OS.

Avatar SDK, Avatars, Unity

Read article

Sep 25, 2024Unlock New Possibilities in Mixed Reality with Tools and Features from Meta Connect 2024

Explore announcements from Connect 2024 that reveal why building mixed reality experiences is more rewarding and easier to start than ever before. Browse the latest updates and launches.

Apps, Native SDK, Quest, Unity, Unreal

Read article

Sep 25, 2024Reach New Audiences by bringing your 2D Apps to the Meta Horizon Store

The Meta Horizon Store now supports 2D apps built as progressive web apps (PWAs), web, Android native, or via Meta Spatial SDK. Learn how you can innovate upon existing apps and harness the power of immersion to deliver experiences that feel both fresh and familiar.

Apps, Design, Quest, WebXR

Read article