Loading...
View related media
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.
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.
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.
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.