Babylon.js: a Guide for Beginners
We always get this feeling of deep excitement when we discover a new world, I guess our Sapien brain is really made to reward us when we uncover new grounds. Learning Babylon.js has been no exception, it has actually been one of the most amazing experiences I’ve had. I thought I would share it with the community for other newcomers, as I just joined the Babylon.js team a few days ago as a Program Manager. I’ve been preparing to join this amazing community of passionate people, and honestly can’t wait to contribute to the creation of 3D and accelerated 2D experiences.
This article will be different from the regular ones. Instead of going into the great detail about a piece of technology being built by the team, it will be about the journey to learn Babylon.js with a focus on the resources I used to go from zero to an educated beginner within a few weeks.
Step 1 — First Contact with Babylon.js
A natural way to start is to look for tutorials on the Babylon.js web site and for videos on YouTube. As I discovered along the way, Babylon.js is characterized by a very active community which is behind most of great documentation.
· Babylon101 is a great place for the very first start. It will take you through the main elements and concepts.
· Babylonjs Tutorial Series is a set of videos to start practicing. You’ll go from “Getting started” to key notions like lights, cameras and materials.
One thing to note is that thanks to the backward compatibility golden rule, you don’t have to worry about finding the latest tutorials: even old versions are still working today.
Step 2 — More Background on GPU, 3D Rendering and 3D Assets
After practicing a little, you may feel the need to go deeper in understanding how things works.
· GPU — Behind Babylon.js, there is of course the power of the GPU. After a quick video to understand how a GPU works, you’ll realized that even if we’ve reached the limits of Moore’s Law on the CPU, the computation power growth is still alive with the GPU and that it is behind the rise of the GPU Computing. A session from JSKongress on WebGL + GPU also helped me understand how the GPU can be used for non-graphic calculation tasks (things have evolved since this 2017 session and WebGPU is on the way).
· Shaders — They are at the heart of 3D and the Book of Shaders is a good guide “through this abstract and complex universe.”
· glTF — It is to 3D what jpeg is to 2D. This efficient run-time 3D assets format started for the web and is now used for all different APIs and all different parts of the pipeline. Understand that glTF is not “yet another file format,” it is the definition of a transmission format for 3D scenes. A full tutorial is available on the Khronos Group GitHub.
Step 3 — Refocusing on Babylon.js with MOOC
Now it was time to go back to Babylon.js and follow some courses available online. Here are the ones I took:
· Introduction to WebGL 3D with HTML5 and Babylon.js: this course will start from zero and will explain the basics of 3D on the web and webGL before going to Babylon.js. It is a great way to put together all the notions you’ve previously discovered and review them in the context of Babylon.js. This course is free.
· 3D Programming with WebGL and Babylon.js for Beginners: a short course (2 hours) that will refresh all the concepts and put them together to build a first application (solar system).
· Single & Multiplayer online game development Webgl’s BabylonJs: a full course (almost 10 hours) that will take you from scratch to fully understanding how to build a 3D game.
Step 4 — Building a Game
Finally, the best moment came: assimilate everything by starting to code my own game during the long week-end of the 4th of July. All pumped-up, I proudly told my 7-year-daughter, “I’m going to build a video game for you.”
Let’s start with the scenario: do you remember the movie Honey, I Shrunk the Kids? That was a vague inspiration. I had a nice 3D version of my apartment that I had done when I was remodeling, so I figured I could reuse it and add small characters chased by bad guys. I thought, “this should be simple.”
Then I hit reality. Exporting my apartment 3D model into a usable scene wasn’t simple. I found some Python script to export to Blender from the 3D Modeling tools I used. The plan was to then export from Blender to Babylon.js. The problem was that the scene didn’t export well in Blender and I would have had to learn Blender to fix it (and I didn’t have time for this). That’s when I realized why a standard like glTF is so important.
I took the opportunity to learn how to build everything in the code and went back to Babylon101 to build the apartment, using plans for the walls and managing the coordinates on a piece of paper. Then I imported the furniture meshes one by one, placing them in the apartment. It ended being a good exercise to practice transformations, coordinates and Standard material.
Then came the time to add the video game logic. I went again through the great course Single & Multiplayer online game development Webgl’s BabylonJs and added the code piece by piece. This was a great exercise to understand and practice all the basic aspects of the game such as creating and moving a character, cloning meshes, managing collision with Bounding Boxes etc…
At the end of the 4 days, the first MVP looked more like a Roomba shooting fireballs to small dudes in an apartment, but my daughter still seemed to have fun playing 😊. I’ll keep iterating on this project and will use it as a way to experiment and learn.
As a final note, I would strongly recommend to spend time on the very active Babylon.js Forum. Browsing through the questions and answers has been a great way to identify new topics to investigate (e.g. mesh and texture compression) and, once on a project, the community is amazing in giving tips and unblocking.
Thomas Lucchini — Babylon.js Team
