Building a Driving Range in a Web Browser

Building a Driving Range in a Web Browser

Dev blog #8. A change of pace. Less squinting at grainy frames, more watching a ball sail over a fairway.

While I was deep in the weeds on the phone app, I built something completely different on the side: a 3D driving range that runs in a web browser. You load a page, a ball launches off a tee, and it flies out over a fairway with trees and yardage markers, bounces, rolls, and comes to rest. No app install, no launch monitor (yet), just a ball arcing across your screen.

This wasn't a detour for fun, though it was a lot of fun. It scratches two real itches.


Itch one: you have to see it to believe it

A launch monitor spits out numbers. Ball speed, launch angle, spin, carry. Numbers are great, but they're abstract. The moment you take those same numbers and use them to fly an actual ball across a screen, something clicks. You can see that a higher launch carries differently. You can watch spin bend a shot. It turns a table of figures into a golf shot your eyes can read in a second.

So the simulator is the visual half of the story. The phone measures what your ball did; this shows you what that looks like in the air. Same shot, two halves of one experience.

Itch two: are my numbers even right?

This is the serious reason, and it's about trust. It's easy to make a ball fly across a screen in a way that looks plausible. It's much harder to make it fly correctly, the way a real ball with real spin actually behaves. So the flight in this simulator isn't hand-wavy. It's built on a proper model of ball flight: the drag that slows it, the lift that spin generates and that keeps it in the air, the way that spin bleeds off over the course of the shot.

And then I checked it against reality. Golf has decades of well-documented data on how far real shots of a given speed and spin should carry, what the apex should look like, how steeply the ball should come down. I ran the simulator's shots against those known numbers and tuned until they lined up. When a "110 mph driver" in my sim carries about what a 110 mph driver carries in the real world, that's not a coincidence, that's the validation I was after.

That matters way beyond the browser app. A trustworthy flight model is the yardstick I can hold the real app up against. If the phone says you launched it a certain way, I can fly that shot here and sanity-check that the result makes physical sense. The simulator keeps the measurement side honest.

Why a browser

Mostly because it's the lowest-friction way to give users a simulator-like experience without any 3D party apps. The goal will be a smooth user experience where the user scans a QR code with the app and can immediately start sending shots to the driving range. No additional downloads, no network configurations, works on basically anything (tablets, phones, laptops of any brand, etc.). It's also a great way to drum up a little excitement before launch, that's hard to beat.

This one I'm happy to be more open about, by the way, because it's a renderer and a physics model built on textbook golf-ball aerodynamics, not the secret sauce that measures your actual swing. Those two live in different worlds on purpose.

That's the build, from "can a phone even see the ball" all the way to a ball flying across a screen. Thanks for following along this far. There's plenty more coming as I push toward launch.

Want to be there when it drops? Pre-register and stick around. See you on the range.

0 comments

Leave a comment

Please note, comments need to be approved before they are published.