Inspiration
We have all experienced missing a turn and then having to take a long detour back, which could have been easily prevented through practice. So we created an open-world simulator that we can use to practice driving on real roads.
What it does
Race & Chase is a browser-based open-world driving simulator on a real, drivable 3D map the WORLD. You can enter a start and end point and drive to your destination with directions like you would on an actual road. You can explore in an open-world sandbox, driving Lamborghinis around downtown Vancouver, or even simulate flying over Tokyo! You can literally go anywhere you want!
How we built it
Next.js (React) for the app shell and UI Mapbox GL JS for the real 3D map, building data, and Directions/Geocoding/Search APIs for route planning three.js as a custom rendering layer on top of the map for the car, character, and lighting cannon-es for vehicle physics and collision OpenStreetMap (Overpass API) for the live road network powering NPC traffic Kenney's free Car Kit for vehicle models Browser localStorage to persist progress (cash, owned cars)
Challenges we ran into
Camera angles was quite tricky, they weren't locked onto the player or was too zoomed in It was difficult to work on multiple branches at the same time; it takes a lot of effort to solve merge conflicts.
Accomplishments that we're proud of
Routing and live recalculation of the directions and path. Getting an interactive 3d map of the world and allowing cars to drive and planes to fly over.
What we learned
We had to understand the dependencies of different APIs. Combining them into the same project required knowing what data each one gives and what data feeds into it. Working with git branches under time pressure taught us to branch after major shared systems are pushed to avoid painful reconciliation later
What's next for Race & Chase
Merging the two products, one for sandbox, the other for route planning, into a single game. Adding a GPS radar to simulate the same navigation as Google Maps. Improving the graphics with satellite images to make the environment and terrain realistic.
Built With
- cannon-es
- javascript
- mapboxgl
- next.js
- overpass-openstreetmap
- react
- three.js
Log in or sign up for Devpost to join the conversation.