< Home

WebGL - Realistic Car Demo

This project is written (almost) entirely from scratch with JavaScript and WebGL. It does not use any 3D library (like Three.js, Babylon.js) nor any prebuilt physics engine. Further down the page I will do a technical breakdown of how the demo is made.


Technical Breakdown

I will briefly explain each part/idea that was used to make the demo.

Gamepad Input Handling

You are able to control the car with both your keyboard and by connecting a controller. I have only tested with a wired Xbox controller so other controllers might not work or have incorrectly mapped inputs.

Keyboard input is read by detecting keydown and keyup events on the canvas element and updating an object in which every key on the keyboard is set to either true or false based on if it is currently held down or not.

Controller input is a bit harder to read but with the built-in Gamepad API, a snapshot of the state of every input on the controller can be requested when we want to read a certain button or joystick


The physics simulation is split up in two different "layers". The first layer or the base layer is a 3d rigid body simulator like you would see in any other game engine like Unreal or Unity.

The second layer is built on top of the base layer and simulates the vehicle physics. The car is a rigid body and by applying forces to it, we can simulate suspension, friction, air resistance etc. for the vehicle to actually behave like a real vehicle would.


Each wheel simulates suspension forces by casting a ray from it's origin point down towards the ground. If the rays distance is less than the wheels resting length a spring force is applied to the cars rigid body at the contact point of the wheel. A dampening force is also applied at the same point so the vehicle doesn't become unstable and bounces forever.

3D Rendering

Coming soon...


Coming soon...

Play Demo