Off Road Earth: A Browser-Based Off-Road World at Planetary Scale
Off-road games usually begin by asking players to choose a vehicle. Off Road Earth asks a larger question: what if the vehicle were only one part of the adventure?
Digital Nature designed and developed Off Road Earth as a free, open-world exploration game that runs entirely in a modern web browser. Players can build a 4x4, load an ATV or watercraft onto a working trailer, carry a mountain bike on a hitch rack, travel across real terrain, leave the vehicle on foot, and continue the trip another way. There is no installer, native client, or fixed level boundary—only a URL and a geographic world.
The project brings together React, TypeScript, Three.js, React Three Fiber, Rapier WebAssembly physics, streamed elevation and OpenStreetMap data, Web Audio, and real-time multiplayer. The result is both a playable off-road experience and a demonstration of how far browser-native 3D applications can go when simulation, content streaming, product state, and interface design are treated as one system.
Building the Game as a Modern 3D Web Application
Off Road Earth uses an architecture designed to keep high-frequency simulation work separate from conventional application state:
- React 19 and TypeScript organize the interface, garage, player state, and game systems.
- Three.js and React Three Fiber render the world through a declarative component architecture.
- Rapier provides Rust-based WebAssembly rigid-body physics and collision detection.
- Zustand manages persistent vehicles, customization, menus, world sessions, and multiplayer state.
- Vite builds and delivers the application with optimized production chunks and assets.
- Node.js terrain and multiplayer services bake geographic data, stream world pages, and coordinate shared sessions.
React handles product state, while mutable runtime objects carry the per-frame vehicle, character, camera, and audio data that should never cause interface rerenders. Rapier owns collision and rigid bodies; custom solvers layer domain-specific driving and riding behaviour on top. This separation keeps the codebase maintainable without compromising the responsiveness expected from a real-time game.
The browser is not treated as a simplified target. The same application supports desktop controls, standard gamepads, touch input, scalable graphics quality, full-screen play, persistent local progress, and shareable world locations.
Designing a Persistent Multi-Vehicle Garage
The garage is the product core of Off Road Earth. Instead of selecting one temporary avatar, players own a fleet of vehicles that can be customized, named, stored, deployed, parked, recovered, and moved through the world.
Custom 4x4 Builds
The 4x4 catalog includes multiple generations of the Toyota 4Runner, Tacoma, Tundra, and Land Cruiser, along with Jeep Wrangler and Cherokee platforms, the Ford Bronco, and RAM 1500. Each vehicle is assembled from data rather than delivered as one fixed model.
Players can configure paint and finish, suspension lift and travel, wheel offset, rim design and color, tire type and diameter, spare wheels, bumpers, roof racks, ladders, snorkels, running boards, and auxiliary lighting. The interface immediately applies each selection to the 3D model, while dimensions such as wheel radius, lift, and track width also feed into the physical setup.
This is a direct extension of our 3D product configurator development work: configuration is not a detached preview. It remains visible and meaningful while the product is being used.
Bikes, ATVs, Watercraft, and Trailers
The same garage also manages configurable downhill, enduro, and electric bikes; an ATV; a personal watercraft; and purpose-built trailers. Bikes assemble at runtime from separate frames, forks, handlebars, wheelsets, tires, drivetrains, and rider equipment. Named sockets in the source GLBs establish wheel, suspension, steering, seat, grip, and pedal locations so combinations remain mechanically coherent.
Trailers are first-class physical vehicles rather than cosmetic accessories. A tow vehicle can couple through a simulated hitch, lower a quad trailer ramp, drive an ATV onto the deck, secure it for transport, and release it at the destination. A watercraft trailer carries the personal watercraft between land and water, while a receiver-mounted rack lets a 4x4 carry a bike without abandoning it in the world.
These relationships persist as part of the player's fleet. Nearby vehicles retain full models and physics bodies; distant owned vehicles keep lightweight identity and last-position data until they are needed again. The system preserves the feeling of a continuous expedition without requiring every parked object to remain active indefinitely.
Engineering Different Physics Models for Every Kind of Travel
Off Road Earth does not force every vehicle through one generic controller. Each category has a solver built around the forces and controls that define it.
Four-Wheel Vehicle Dynamics
Trucks and ATVs use a custom four-wheel dynamics model layered over Rapier. Raycast wheel contacts calculate suspension compression, spring and damping forces, tire grip, braking, drivetrain torque, and load transfer without relying on a fragile collection of wheel joints.
The transmission responds to throttle, speed, and direction, while the visual suspension, steering, wheel rotation, and body motion follow the live physical state. Vehicle dimensions and garage choices affect the result: changing tire size or lift is more than a visual transformation because the chassis geometry and centre of mass must continue to make sense on uneven ground.
Mountain Bike Handling
Mountain bikes use their own two-wheel simulation with fork-axis suspension, rear travel, speed-dependent steering, balance assistance, braking, tire slip, bunny hops, and crash detection. Procedural rider animation keeps hands on grips and feet on moving pedals across different frames and wheel sizes. When a crash occurs, the current live pose can become a Rapier ragdoll rather than switching to a canned fall animation.
Watercraft and Towing
The personal watercraft uses buoyancy, jet-pump thrust, water drag, steering forces, planing behaviour, and turn-induced roll. Trailer connections are physical constraints, so tongue load, mass, wheel contact, and the tow vehicle's movement all contribute to the combination's behaviour.
The goal is consistency rather than identical handling. A lifted 4x4 crawling over rocks, a bike loading into a berm, an ATV entering a trail, and a watercraft carving across a lake should each feel like a different machine sharing the same physical world.
Turning Real Geographic Data Into a Playable Planet
The world is built from real digital elevation and OpenStreetMap data. Whistler is the optimized default starting area, while a geographic origin parameter can re-anchor the experience at another latitude and longitude.
A dedicated terrain service performs the expensive and consistency-sensitive work before the data reaches a player. It combines elevation with mapped roads, paths, trails, chairlifts, land cover, lakes, rivers, coastlines, props, and time-trial courses. Trail profiles are solved and carved on the server, and vegetation exclusion is baked into the same authoritative data.
The browser streams compact multi-channel terrain pages on demand. Concentric clipmap-style levels provide detailed ground around the player and progressively coarser terrain toward the horizon. Near pages create Rapier heightfield colliders from the same height samples used by the visible mesh, preventing the visual road and the physical surface from drifting apart.
As the player travels, requests are prioritized and decoded pages live in bounded caches. Geometry and vegetation are prepared within per-frame work budgets. A floating-origin system periodically shifts the local scene to protect precision over long distances while fixed geographic coordinates keep terrain, saved vehicles, maps, and multiplayer positions stable.
Making Exploration Work Beyond the Driver's Seat
A vehicle world becomes more convincing when the player is not welded to the steering wheel. Off Road Earth includes an on-foot character controller with grounded walking, running, turning, jumping, and blended procedural animation.
Players can park, dismount, walk around their vehicle, approach another owned ride, and take control of it. Mounting checks for a safe placement and then transfers input and camera authority without rebuilding the world. For bikes, the character transitions into the same procedural inverse-kinematics system used during riding; for trucks, ATVs, and watercraft, the rig resolves against vehicle-specific seat and control anchors.
A world map and minimap connect this physical interaction to the larger landscape. Players can understand where they are geographically, inspect other players, choose destinations, and share links that open at a specific origin.
Adding Courses, Time Trials, and Replay
Open exploration is supported by structured riding challenges derived from server-authored world features. Course data defines routes, checkpoints, start and finish areas, and optional loops without baking gameplay logic into the terrain mesh.
The time-trial state machine detects course entry, tracks progress, handles missed checkpoints or leaving the route, and presents the result through the HUD. Completed bike runs can be recorded as compact streams of rigid-body, control, wheel, suspension, and rider-pose data, then played back through the existing bike and character presentation systems.
This produces useful gameplay without dividing the planet into conventional levels. A trail remains part of the open world before, during, and after a timed run.
Building Global Multiplayer With Spatial Interest Management
Every player can enter a shared public lobby, create a private room with a short key, share an invite link, use room chat, and see nearby players in the world. Multiplayer supports bikes and driven vehicles, parked vehicles, coupled trailers, vehicle appearance, map positions, and a passenger seat.
The networking model accounts for the fact that players in the same room may be separated by thousands of kilometres. A Node.js WebSocket service places active players in a two-kilometre spatial grid and sends high-frequency pose updates only within the surrounding neighbourhood. Room presence and chat remain global, while a separate low-rate map feed can show distant player positions without spawning their full 3D avatars.
Clients publish compact state snapshots at 15 Hz. Remote players render buffered state slightly in the past, interpolating positions, rotations, suspension, wheel movement, steering, and rider pose for stable playback. Fixed planetary coordinates allow two clients with different local origins—and different floating-origin shifts—to exchange positions without sharing either client's temporary scene coordinates.
The server also arbitrates social interactions. A passenger can occupy another player's vehicle while the driver remains the physics authority, and an unused live vehicle can transfer between players without duplicating its persistent garage identity.
Rendering and Delivering a Large 3D World in the Browser
Off Road Earth's environment combines terrain splat materials, instanced grass and forests, roads and trails, water, weather, particles, cloud shadowing, aerial perspective, and a dynamic lighting cycle. Vehicle headlights and configurable auxiliary lights make the garage choices visible in the world instead of only in a menu.
Performance is managed as an ongoing budget:
- Graphics tiers adjust terrain density, view distance, vegetation, shadows, water detail, particles, and post-processing.
- Adaptive pixel ratio responds to measured rendering performance after startup.
- Stable vendor chunks and revisioned GLB assets improve repeat-visit caching.
- Draco-compressed models reduce the cost of a large modular vehicle catalog.
- Instancing handles repeated vegetation efficiently.
- Terrain, geometry, vegetation, and vehicle activation use bounded distance-aware caches.
- Physics remains local to the surfaces, vehicles, and players that can affect the current experience.
The application also includes canonical metadata, social preview artwork, structured VideoGame and SoftwareApplication data, and crawlable product descriptions. The 3D canvas may be the destination, but the surrounding web document still needs the discoverability and sharing behaviour expected from a modern site.
The Result
Off Road Earth combines several substantial browser applications into one coherent product:
- A persistent garage with customizable 4x4s, bikes, an ATV, watercraft, and trailers
- Vehicle-specific physics for driving, riding, towing, suspension, tire contact, and water travel
- Real-world elevation, roads, trails, vegetation, and water streamed at planetary scale
- On-foot exploration and physical transitions between vehicles
- Time trials and replay within the open world
- Public and private multiplayer with chat, passengers, maps, and spatial interest management
- Device-aware rendering and delivery optimized for zero-install access
The project demonstrates the advantage of treating interactive 3D as a full product discipline. Physics, geography, networking, configuration, UI, performance, and web delivery all have to agree about what the world is and how a player moves through it.
Off Road Earth makes that complexity accessible through the simplest possible entry point: open a link, choose a vehicle, and start exploring.
If you are planning a browser-based simulation, vehicle configurator, multiplayer 3D experience, or interactive geographic application, explore our Three.js and React Three Fiber development services or start a project with Digital Nature.
