Single&Multiplayer online game development Webgl's BabylonJs

Name: Single&Multiplayer online game development Webgl's BabylonJs
Rating: 4.2 (155 reviews)

The Extensive Webgl Series ! - Part II : Single and client - server Multiplayer Game Development Using Babylon Js

Created byAhmed Fathy | Tech-Lead | MSc

Last updated 2/2026

English

English [Auto],

What you'll learn

Understand and use the very nice game engine ( BabylonJs ) to create 3D online games (single-player and multi-player)
Learn NodeJs and Socket-io communication library

Course content

8 sections • 58 lectures • 9h 45m total length

Welcome To The Course !2:42
Build single and multiplayer games with Babylon.js in JavaScript, from vehicle-based scenes and tank combat to physics, particles, and multiple cameras, then deploy to Heroku with realtime client-server play.
The Code Files0:05
Hi, Please Note That Different Code Files Are Available Per Section, So That You Work With Me Step By Step.
After You Extract The Folder Go To SinglePlayer/js/Lectuer-Codes, Where You Will Find Code Files For Each Section
Setting up the environment5:36
Set up your Babylon.js development environment for single and multiplayer games by choosing a code editor, creating a JavaScript project, installing Python HTTP server, and loading the Babylon.js max file.

First Scene15:56
Getting Higher Resolution0:37
Materials , Lights , and Textures6:24
Mirror Planes8:48
More about materials21:50
Explore how to apply diverse materials to objects in Babylon.js, including ambient, diffuse, specular, emissive properties, textures, reflection textures, alpha, normal maps, and video textures.
Height Maps17:04
Build terrain from a height map with grass texture, then enable a gravity-enabled, colliding camera and directional lighting for transitions to new levels.
Pointer Lock (FPS) and Using WASD keys12:41
Enable WASD movement and pointer lock to rotate freely while keeping the cursor inside the game, using cross-browser event handling in a Babylon.js scene.

Basic tank, and the follow camera15:40
Moving the tank using WASD keys11:56
Model Loading ! : Importing the dude12:55
Dude Follows Tank !12:59
Organize : The Dude Class4:11
Cloning Models : Multiple Dudes13:11
Bounding Boxes : Theory9:08
Learn how to implement a bounding box for collision detection in Babylon.js to curb per-part checks, by computing min/max vertex coordinates in model space and applying transforms for correct scaling.
Bounding Boxes : Implementation - I15:21
Bounding Boxes : Implementation - II17:22

Introduction to physics11:27
Forces and Impulses18:29
Explosions, Gravitation, & collision callbacks12:52
Fire Cannon balls !19:45
Actions, Triggers, & ActionManager25:33
RayCasting ! : Fire Laser Beams27:46
Learn to fire laser beams with ray casting in Babylon.js, defining origin and direction, rendering visible rays, and detecting intersections with scene meshes.
Particle Systems !5:03
Laser & Blood9:57
Cannon Balls & Blood8:20

The Assets Manager7:12
Discover how the assets manager loads scenes, models, textures, and sounds in a Babylon.js game, with progress callbacks and a render only after all assets are loaded.
Loading Dudes using the Assets Manager5:03
Load the dude model with the assets manager by configuring a mesh task, handling on success to call the imported function with loaded meshes, particle systems, and skeletons.
Loading Sounds !7:22
Follow Camera For The Hero Dude - I9:40
Follow Camera For The Hero Dude - II11:14
Adjusting vertical position using rays7:10
The Free Camera's Ellipsoid Explained4:12
The First Person Shooter (FPS) Dude17:42
Explore implementing a first-person free camera in Babylon.js, handling ground physics and collisions, and switching between free and follow cameras while syncing position and view direction.
Creating the gun-aim (cross-hair)9:45
Fire The Gun !7:20
Multiple View-Ports16:49
Layer masks and multiple cameras6:28
Key-frame Animations ! : Animating The Camera17:53
Learn to create keyframe animations inside Babylon.js by animating the camera’s alpha, beta, and radius with animation objects, set keys, and loop modes such as cycle, relative, or constant.
Multiple Levels ! - I9:14
Develop a modular multi-level architecture by treating each level as a scene within a game object that holds a scenes array and an active scene index, enabling seamless transitions.
Multiple Levels ! - II15:23

Introduction to the multiplayer section0:30
What is Node Js ?2:33
Installing NodeJs1:18
Install the latest stable node.js and complete the setup, then verify by typing node -v in the command prompt, with npm installed by default to support immediate development workflows.
NodeJs modules - First NodeJs Code10:24
Creating a node http server4:53
npm and installing express7:34
Running our game using node server7:23
Run the game on a node server by copying the single-player files into a multiplayer project and serving with express static, then enable automatic restarts with Nordman.
Introduction to websockets3:30
The socket-io library12:31
Our Multiplayer Game - I11:03
Our Multiplayer Game - II8:39
Update tank state on movement and notify the server only when position or rotation changes, then broadcast the new state to all clients for cross‑client tank synchronization.
Our Multiplayer Game - III4:10
Deploying To Heroku6:10

Requirements

Be familiar with programming, preferably in Javascript
Be familiar with basic object oriented programming concepts (classes, member functions, etc)
Be slightly familiar with basic web development components like basic html and the client server model

Description

Welcome to The Extensive Webgl Series - Part II - Single And Multiplayer Online Client-Server 3D Game Development Using WebGL's BabylonJs.

This is the second course in my extensive webgl series. While watching the first course first is recommended, it is not a strict prerequisite for this second course.

In This course you will learn how to create 3D Games inside BabylonJS. BabylonJs is a very nice 3d game engine written in Javascript, that allows creating very nice games quickly and effectively to be run directly on the browser.

The course is divided into two main sections : The Single-player section, and the Multi-player section.

In The single-player section you will learn the following :

How to create your first scene using BabylonJs.
How to apply materials and lights to your scene.
How to use different types of cameras in your scene.
How to create and navigate a vehicle using WASD keys.
How to import models into your game and clone them.
How to detect and handle collisions in your game.
How to apply physics simulations to your object.
How to fire rays.
How to use particle systems
How to create a complete FPS (First Person Shooter) Game from scratch, step by step.
How to load sounds to your game.
How to use multiple cameras and multiple view ports to see multiple areas of your game at the same time.
How to create multiple levels inside your game.
How to deploy your game to a remote server.
And much more...

In the multiplayer section you will learn the following :

How to use NodeJs and its node package manager (npm) to create a web server.
What are websockets and how to use the popular socket-io library.
How to create an interactive client-server multiplayer game using node and socket-io.
How to deploy the multiplayer game to a remote server.

Who this course is for:

People interested in creating online 3D games on the web, both single-player and multi-player games

Single&Multiplayer online game development Webgl's BabylonJs

What you'll learn

Explore related topics

Course content

Welcome To The Course !3 lectures • 8min

Basics of BabylonJs7 lectures • 1hr 23min

Starting The Game !9 lectures • 1hr 53min

Still Some More ...9 lectures • 2hr 19min

And Still Some More ...15 lectures • 2hr 32min

Deploying To Heroku !1 lecture • 9min

Multiplayer Games !13 lectures • 1hr 21min

Get My Other Courses !1 lecture • 1min

Requirements

Description

Who this course is for: