We are a group of creative people who help organizations make their ideas beautiful.

Placeholder Alt Text

Above Paradowski WebXR Mini-Golf

Taking WebXR putt putt from prototype to polished product on par with native Quest 2 games

[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.”

Placeholder Alt Text

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.

Placeholder Alt Text

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:


• 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 used in Unity 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 — develop on desktop with an emulated WebXR device with this clever dev tool


• Meta Quest Developer HUD — easily debug rendering performance for native and WebXR apps


• Discord — m2’s WebXR Discord connected us to top open source WebXR creators

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.

Placeholder Alt Text

Above Par-adowski WebXR Mini-Golf’s entry experience as featured on the Quest 2 browser new tab page.

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.

Generic components for trails, occlusion highlights and particle systems are all available free and open source for any A-Frame application.

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.

AI-generated art and found reference photography were used in the concept phase.

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.”

Early blocking of the overall environment evolved as far-off third-person camera angles were compared with eye-level first-person VR views.

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.

Logo concepts by Dan Rayfield, golf glove by Ayushman Johri, putter by Eric Bowman.

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 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 & sci-fi media ranging from 1960s to late ‘70s.”

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:

Placeholder Alt Text

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.

Placeholder Alt Text

The final blob shadow with height-adjusted blur in-game.

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:

• 115,000+ unique VR users from 168 countries

• 700,000+ made putts

• 6:30 average time on site

• 63% of users returned a second time

• Awarded “Coolest WebXR Experience” of 2022 by Glitch

• WebXR Awards' Game of the Year for 2022

• Webby Honoree in the Immersive Gaming category

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.

Placeholder Alt Text

The view from Hole #1: Your Ad Here! No, really: paradowski.com

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:


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

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