A few people have asked how I built the virtual world Threedium.
Well here’s how - https://punkoffice.com/3d_multiplayer_games
There’s also full source code and a playable demo. Hope this helps people create some cool multiplayer Babylon.js games!
19 Likes
I’ve created a playground with all the client code: https://playground.babylonjs.com/#GG536W#32
3 Likes
Awesome! I’d love to use this with our connected block project someday!
1 Like
Please do! I’d like to see more multiplayer Babylon.js websites so I can see how others use it and learn from that.
1 Like
Ahh, my continuous badgering has finally paid off!
We salute you! Well, I do anyway. 
1 Like
Any chance you could add in the virtual joysticks? 
@ozRocker
I just wanted to explain how the communication between client and server works. The rest is more about building games, which is outside the scope of this tutorial. But there should be plenty of other examples here on using virtual joysticks.
2 Likes
True, thank you again. 
Now it’s time for me to mix in some nullengine with your example and try to get some authoritative-ness going 
Super~pro @ozRocker
Totally impressive work.
Kinda make me cry a little tear. : )
It is admirable.
We try to share~back at same level.
Share the same view.
Clapping.
Awesome!
:afalcon:
1 Like
WOW! I had no idea there was a headless version of Babylon.js. I remember looking for that ages ago. I set up an authoritative server system a while ago but it didn’t have any real physics. I just didn’t want to get into writing a physics engine. Looks like its not necessary now 'cos the nullengine can do all that
1 Like
There are people here that are much smarter than me. I just want to give them a push in the multiplayer direction and see what they come up. Even happy for people to criticise my methods and help me improve my code.
1 Like
I’m glad I could point it out for you 
I’ve been focusing on some other areas to do with multiplayer environments like live streaming audio and video, so people can hear / watch the same things. A few people have asked about voice chat so you can talk to others while playing a game 'cos its not so easy to slay dragons and type chat messages at the same time. I’ve seen some peer-to-peer webRTC libraries that can do that. I’m going to experiment with adding that to a Babylonjs scene.
2 Likes
There a lot of tutorials how to start with WebSockets or SocketIO. I we do not have tutorials about how to avoid network latency. I found only one: Real Time Multiplayer in HTML5 - Build New Games It is very old. It is 2012. But it has good methods with client prediction and interpolation. I deployed a final demo from the tutorial on free hosting Heroku: Real time multi-player games with HTML5 You can run it in two browsers and see how movement is smooth. Please, make tutorials how to smooth movement in simple multiplayer games.
1 Like
Unfortunately there is no perfect solution for this. You can either have realtime or you can have accuracy, but not both. Client predication and interpolation can be good for a lot of cases there it causes problems too. A good example is when someone shoots at your head and you quickly jump out of the way. With client prediction you will still get shot in the head because on the other player’s screen you are still walking forward
2 Likes
This tutorial uses Input Prediction and smooth movement interpolation from the Counter-Strike game Engine. You will find this link in the tutorial above: Source Multiplayer Networking - Valve Developer Community If these methods are very bad why does the Counter-Strike engine use them?
2 Likes
This is a code on GitHub from the tutorial above that you can check out and run locally.
2 Likes
sorry, my words did not come out right. I agree with you, its a better solution, especially for realtime games. I’m just pointing out that its not a perfect solution. But overall, yes its a much better solution which is why everyone is using it.
Anyway, I’m no expert in multiplayer games. I just created a basic tutorial because some people wanted to see a very simple tutorial using Babylon.js in a multiplayer environment. You probably know much more about it than me.
1 Like
I am beginner too. But now we have a lot of very basic tutorials but we do not have another tutorials. If you think input prediction in not perfect than make a tutorial about better solution. Because every beginner do no want to have this problem (I copied it from the tutorial above)
Important Networking Concepts
Client prediction
We have mentioned this before now, so lets take a look at what exactly it entails. In a naive approach to networking, you might try the following model:
- Client presses the right key, tell the server
- Message arrives at server sometime in the future ( 200ms latency )
- Server sends back the new position to the client
- Message arrives at the client ( 200ms latency )
- Client updates their position 400ms+ later.
This approach might work well over LAN connections where the latency is really low, but when connecting players to a server via the Internet, latency can be anywhere from 30ms to 800ms - rendering the game unplayable because of the delay. When you push a key the response is so badly delayed that it will not be a very good game to play at all. But how do we solve this?
Client prediction is the solution, and simply means acting on input immediately, predicting what the server will calculate as well. We apply input with the assumption that your results and the server results (whenever they arrive) will be the same. When a client presses the right key twice, and ends up at
x = 2, the server will arrive at the same conclusion and tell you 600ms later - you are still in the correct place.This is important for immediate feedback on the client side, and even though updates are running via a server, the client positions should match up.
1 Like
Interpolation of other client positions
Now all we need to update is the other client positions, as they arrive from the network. Again, a naive approach would be to simply set their positions as soon as the message arrives from the server but this leads to extremely jerky rendering of the other clients.
The solution is to store the positions we get from the server and interpolate between them. This means that we draw them a few frames behind the server, but it allows for very smooth updates of all other client positions. In our demo, based on the Source Engine article listed above, we draw the other clients 100ms behind the actual server positions.
All of this is implemented in the demo and elaborated on below in code form, but for more information and very good diagrams on the topic, Gabriel Gambetta did an excellent three part series on the concepts presented - including client prediction, interpolation and the reasons why these work best for real time games. Most important for our example is that we store the input sequence of each input the player gives us. We use this to track where the server is in our list of inputs, and we re-process input that the server has not yet received.
2 Likes