Zemanzo#9229
Loading...

Web Marbles

(Working title)

View on GitHub

Project type

Personal

Platform

Web

Technology used

Rendering
Three.js (WebGL)
Physics
Ammo.js (Bullet)
Back end
Node.js, socket.io
Front end
HTML5, CSS3, ES6

Production date

April 2018 - Current

Description


This game aims to recreate Marble Racing from the ground up, as a fully web based game. The goal is to make it cost-effective, being able to run it on a relatively low-cost server leaving all rendering to the client. Inspired by the original Marble Racing Twitch game:

This project is very much a work in progress.


My responsibilities


Physics simulation

One of the first and foremost requirements for this game was to have a physics simulation running on the server, without the need to render it directly but instead send over the simulation results to the client. At first I had used schteppe's cannon.js physics library, but found that the terrain implementation had serious issues. So instead, I moved over to ammo.js, which is a direct JavaScript port of the well-known Bullet physics library. This is working great and perfectly suits my needs.

Networking

To efficiently send over the physics results to the client is a whole other challenge. My first idea was to use UDP as a base protocol, since inter- and extrapolation could easily take over for any lost packages. It would also reduce overhead, which is important with the amount of data we are sending over. Unfortunately, even in this day and age, there is still no proper UDP standard that browsers can make use of. So, I was bound to TCP. Fortunately, websockets have become widely supported, which is ideal for my case. It reduces the XHR overhead and allows real-time messaging between client and server. After adding in tickrate and tick buffers, it works quite graciously.

Client renderer

Although I had experimented with Three.js before, this is the first time I am actually using it on a larger scale. Having to sync up the physics world from the server with the rendered world on the client was quite the challenge. Even more so was to create a material for the terrain. It's still a work in progress, but it has basic blending of materials and uses a normal map for extra depth & detail.