image/svg+xml
Zemanzo#9229
Loading...
View related media

Web Marbles

playmarbl.es GitHub

Project type

Personal

Platform

Web

Technology used

Rendering
Three.js (WebGL)
Physics
Ammo.js (Bullet)
Back end
Node.js, ╬╝WebSockets
Front end
HTML5, CSS3, ES6
Pipeline
Webpack, Git CLI

Production date

April 2018 - Current

Description


Web-marbles is an open source, free to play online multiplayer browser game. The goal of the game is to have your marble roll down a hill and have it finish first... But you have no control over it! It's simply a game of chance.

This game is inspired by the original Marble Racing Twitch game. The goal was to recreate it from the ground up as a fully web based game. It is made with cost-effectiveness in mind, being able to run it on a relatively low-cost server leaving all rendering to the client.


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.