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.