Player 2 Has Joined the Game(THREE.JS vs Babylon)

6 min readSep 26, 2019

WebGL (Web Graphics Library) is a JavaScript API for rendering drawing 2D and 3D graphics on almost all modern Web Browsers.

WebGL programs consist of control code written in JavaScript and optional shader code that is written in Shader Language, a language similar to C or C++, and is executed on a computer’s GPU.

Shaders are tiny programs that run on GPU for each pixels of screen. If you have a 1080p screen, which has 2 million pixels at 60fps, it already takes 120 million operations per second just to touch every pixel once. If you have blending and overlaps, that only goes up.

This operations counts can be measured with Floating point operations per second (FLOPS, flops or flop/s).

GigaFLOPS = 10^9 FLOPS

Imagine if you do this task on CPU.

Core i7 Sandy-Bridge, 3,4 GHz = 92 GFLOPS
Nvidia Tesla GP100, 1,48 GHz = 10600 GFLOPS(100X faster)

To harness this power we need to learn Language that GPU speak

Microsoft Introduced Shader Language in year 2000. Initially shaders were very hard to program due to their syntax resembled the Assembly programming. Which lead to evaluation of HLSL to GLSL

High-Level Shader Language (HLSL) : Microsoft recognised this shortcoming of Shaders Programming Language and in 2003 Microsoft released HLSL as a part of Direct3D 9.0. HLSL allowed the manipulation of shaders in a high-level language whose syntax was based on C.
OpenGL Shading Language (GLSL): A year after in year 2004 OpenGL added support for Shaders with the released of GLSL in OpenGL 2.0.
OpenGL Embedded System Shading Language (OpenGL ES): API for embedded systems based on, and very similar to OpenGL & used by modern smartphones such as the iPhone and Android devices.
Web Graphics Library (WebGL): cross-platform compatible 3D graphics API for the web browser. Programs embedded in JavaScript consist of shader code written in OpenGL ES Shading Language (GLSL ES).

Quick Summary

GLES is subset of OpenGL
WebGL is subset of GLES
WebGL 1.0 is based on OpenGL ES 2.0
WebGL 2.0 is based on OpenGL ES 3.0

Introducing THREE.JS

WebGL adoption has been driven by Three.js. Without it, simply getting one triangle rendered on the screen is a challenge that could go wrong in any number of places.

As the GPU is mostly a black box, this is frustration city for newbies. Three.js made real 3D graphics immensely more accessible.

Look at the amount of code we need to write to draw a simple Triangle in WebGL:

Drawing a triangle with THREE.JS

var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0, 0, 0);
var v2 = new THREE.Vector3(30, 0, 0);
var v3 = new THREE.Vector3(30, 30, 0);
var triangle = new THREE.Triangle(v1, v2, v3);
var normal = triangle.normal();
geom.vertices.push(triangle.a);
geom.vertices.push(triangle.b);
geom.vertices.push(triangle.c);
geom.faces.push(new THREE.Face3(0, 1, 2, normal));
var mesh = new THREE.Mesh(geom, new THREE.MeshNormalMaterial());
scene.add(mesh);

THREE.js made our life simpler by abstracting away all WebGL. THREE.JS iw very powerful & but THREE js have few major shortcomings for developers :

THREE.JS have a very steep learning curve.

Learning THREE js requires time, practise & persistency. I think it is because of 2 main reasons:

Lake of good documentation: THREE.js documentation is very verbose . It’s good for quick reference but not for beginners. Just have a look at Geometry documentation:

That's all there is! SO I had to depend upon external tutorials . I found this tutorials very helpful

WebGL Fundamentals: https://webglfundamentals.org
THREEJS Fundamental: https://threejsfundamentals.org/

2. Lake of a Playground for testing: THREE js have a editor https://threejs.org/editor/ but its not mature enough.

I had to create my own playground because every time I create a new scene had to go through copying a lot of boilerplate code just to add a scene & camera.

This is the Template I use for experimenting

My Shader Exploration playground,for each new shader I add a new Cube:

3. Community support: Old framework with not so active community. THREE jS have 500+ issues while Babylon though relatively new framework have only 50+ issues

Adding Physics Engine is Painful:

Integration of physics in THREE.JS with even a simple Mesh Object is a hideous task. Just look at the code of Ammo JS Soft Body demo: AmmoJS SoftBody Cloth

if you want to build game with THREE.JS using a Physics Engine then you will have 2 choose between Amoo.JS & CANNON.JS. I wrote a simple Scene with THREE JS & React & it was not fun.

With little to none documentation about Physics engine integration creating this scene was not easy.

INTRODUCING BABYLON.JS

Babylon was developed in their free time by two Davids from Microsoft : David Catuhe and David Rousset

Babylon was first introduced in 2013 & as of today it has 190+ contributors.

Named after an ancient Mesopotamian Kingdom Babylon is a modern JavaScript WebGL Engine which abstracts away ugly details a bit more than THREE.JS. This abstraction gives a low learning curve for beginners & reduce time to create a new Scene So building same scene with Babylon takes less time than THREE JS(roughly 60% less).

Just like THREE JS Babylon JS uses Canvas to render 3D models with the help of it’s Shader Programs.

But unlike THREE JS the source code of Babylon is written in TypeScript and then compiled into a pure JavaScript version.

This JavaScript version of Babylon is available to end users as Node Packages & CDN.

babylonjs — Babylon’s core.
babylonjs-materials — a collection of Babylon-supported advanced materials.
babylonjs-loaders — All of Babylon’s official loaders (OBJ, STL, glTF)
babylonjs-post-process — Babylon’s post processes.
babylonjs-procedural-textures — Officially supported procedural textures
babylonjs-serializers — Scene / mesh serializers.
babylonjs-gui — BabylonJS GUI module.
babylonjs-viewer — The stand-alone BabylonJS Viewer.

CDN

<script src=”https://cdn.babylonjs.com/babylon.js"></script> <script src=”https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script> <script src=”https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> <script src=”https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script> <script src=”https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script> <script src=”https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script> <script src=”https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script> <script src=”https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>

THREE JSdoesn't have full support of npm. I have seen few gold hearted developers compiled and published node packages for THREE.JS by them self:

Babylon PlayGround

Babylon JS have a wonderful Playground for fooling around we can search for a playground from thousands of other playground. This is very helpful for community.

A template I use for Prototyping

PHYSICS IMPOSTER & ANIMATIONS

In order to simulate physics, Babylon allows Integrations of Physics Engines Plugin for Ammo, CANNON & OIMO JS out of box along with option to add own Physics Engine.

I found Babylon JS Physics Imposter satisfying & fun to work with . A simple FPS I have Integrated using snippets from Babylon Playground:

Hitesh Sahu

Hitesh Sahu is Mobile Apps and Web developer

hiteshsahu.com

To wrap up : The future of Babylon Js seems promising. Babylon is more developer friendly and have more cool features than good old THREE.js. If THREE js don't take actions then soon Babylon gone be favourite WebGL engine for Devs.