Inspiration

Originally, I wanted to make a form of a racing game that was an easy non-expensive zero download expense. However, wanted to add an original twist to it, which is how I landed on the idea of making it an uber competition. I wanted there to be an objective rather just a simple race amongst friends. That's when I thought of downtown, and uber drivers and their friendly competition. Which is why I wanted to make an equivalent map where you are the uber driver competiting with other uber drivers.

What it does

This is a zero-installation game where all you have to do is scan a QR code, and it will bring you to your browser where you can play the 3D multiplayer racing game, where you use your phone in landscape mode as a steering wheel. Throughout the game, there is are people who will spawn and you have to pick them up and drive them to their location. Whoever completes the most drives is the winner, and there are a couple of mini trophies that you can win. There are 3 different types of cars you can use, which are small (basic), large, and luxury. Each has their own benefit and disadvantage allowing for a fun and competitive game.

How we built it

The frontend is built with Three.js and WebGL which renders high-performance 3D grids and vehicle models for mobile and desktop web browsers

It also uses HTML5 in order to use tilt controls, and is networked using node.js and Socket.io over secure HTTPS tunnels via ngrok to minimize latency between the phones and the host.

Challenges we ran into

One of the challenges I ran into was how visually accurate it could be to the real world. In order to have proper 3D modeling of a location I would need something that could handle the higher amount of performance constraints as opposed to a browser. While it could very much be possible, it would be very hard within the short time limit, which is why I opted in for a blocky landscape and just simulated the real world using real data from an API key.

Accomplishments that we're proud of

I'm proud of the design of everything and all the new challenges I had to work around.

What we learned

How to handle browser security permissions in order to allow for an interactive experience in the browser. Furthermore, making basic modeling for the phone to tilt correctly as you turn, and creating an interactive world.

What's next for TrackRace

Advanced physics and inertia: integrating momentum, banking angles, and friction coefficients. Multi-car Collision I think it would be cool if there was an AI announcer throughout the match that could talk about events happening, someone taking the lead, or announcing that the time limit is approaching the end. However, the true next step for TrackRace would be creating a driveable world that looks exactly as the real world would actually work.

Built With

Share this project:

Updates

Submission history