Currently there are lots of native javascript engines like babylon.js, three.js, playcanvas etc to create rich interactive 3D simulation/visualization in browsers. On the other hand, there are also other major game engines like Unity, Unreal, Godot so on to provide html exports, which create virtual assembly code that runs in the browser, but they also have their own constraints.

This post is a draft in which we will be dealing with the popular javascript libraries that support 3D visualization powered by webGL. These webGL frameworks are built on top of the same foundation, yet focussed on different aspects of enhanced web based graphics.

  • Babylon.js
  • Three.js
  • PlayCanvas
  • AFrame
  • Clara.io
  • Sketchfab
  • Deck.gl
  • Plotly.js
  • P5

Babylon.js

Babylon.js is a javascript library that is built on top of openweb standards like webGL 1 & 2, webGPU and webXR. It is a fully featured game or rendering engine which supports physics, animation, VR, particles, ray casting etc. This also supports advanced rendering with PBR (Physically Based Rendering) shaders.

The main advantage of babylon.js is backward compatibility. It supports importing of glTF file format,which is a 3D file that saves 3D model transformation in json format. This engine provides a set of tools like Playground, Inspector, Node material editor, spector.js, etc to make the development process faster and easier.

Playground is a live editor where developers can try out and experiment with their codes. These experiments can also be published as examples so that it is available as sample code in the babylon website.

Babjylon.js has a Node Material Editor, which is a visual editor for shaders. Instead of writing too many lines of code and logics, we can use the drag and drop components to create desired shader effects. The created shader using this node material editor can also be converted to a line of codes and used in our actual project.
.
Spector.js is a debugging tool, which enables webGL developers to know precisely what happens in code and visually debug each and every frame.

Sandbox is a tool where we can drop a gltf, obj, babylon, etc file and view it in the browser.

Babylon Native is a collection of technologies that aims to bring the power and flexibility of Babylon.js to cross-platform applications beyond the browser. The goal of this project is to allow the same JavaScript that powers Babylon.js apps on the web to work identically in native apps on Windows, macOS, iOS, Android, and Linux. This project is under development and not all platforms/features are currently available.

Babylon.js supports webGPU, which is a JavaScript API for accelerated graphics and compute, aiming to provide modern 3D graphics and computation capabilities.

Finally, Babylon.js has exporters for 3Ds Max, Maya, Unity, Blender 3D etc.

There are tons of examples showing complex physics capabilities like cloth simulation, particle system, VR/AR, 360 degree photos etc that are built using babylon.js.

Though babylon.js is still capable of developing general 3D web applications and animations, it is widely used for creating web based games with physics features like collision detection and antialiasing.

Three.js

Three.js is a cross-browser JavaScript library and API used to create and display GPU-accelerated 3D computer graphics in a browser using WebGL. In other words, it is an abstract layer built on top of WebGL to make it easier using JS as part of a website without relying on proprietary browser plugins. There are lots of innovative and interactive web applications built using this framework. Developers can play with advanced rendering controls like post-processing, multipass and deferred rendering to get a truly realistic effect.

Three.js is more of a rendering engine. It depends on Physi.js plugin for physics computations like collision detection and events, vehicle systems, compound objects using the hierarchy system, friction, bounciness, etc. The loading is instant and it is easy to integrate with existing websites.

The framework changes frequently, which leads to lots of outdated solutions. Graphic performances are highly relied on browsers and mobile powers.

As this framework has been created before the introduction of webGL, It has an unique convenience of modular rendering interface allowing it to be used with SVG, HTML5 canvas in addition to webGL

Three.js Vs Babylon.js

Three.js is designed for a general purpose web animation and rendering engine, whereas the babylon.js is designed to take a more targeted approach for web based game development which uses an extensive physics engine for all physics based interaction.

PlayCanvas

Playcanvas is an interactive web 3D application/game engine based on HTML5 and WebGL as underlying technology. It is a proprietary cloud hosted creation platform that allows designers/developers to edit simultaneously from multiple computers through a browser based interface.

This has an inbuilt support of rigidbody, physic simulations, 3D audio, 3D animations, etc. It is mainly known for the collaborative real time editor where multiple developers can edit simultaneously. It also has a support for importing unity scenes.

Disney’s “Hour of codes”, a game based on the movie Moana was developed using play canvas.

The code is open source MIT licensed in github, whereas the online engine has free and premium plans.

Pricing Details for personal use

Free Pro5 Pro10 Pro20
Storage 200 MB 500 MB 2000 MB 10000 MB
Private project 0 5 10 20
Team 2 5 10 20
IOS export No yes yes Yes
Cost 0 $15/mo $30/mo $60/mo

Aframe

Aframe is a webVR plugin that allows us to develop virtual reality experiences. It is built on top of HTML which makes it easy to get started. But A-Frame is not merely a 3D scene graph or a markup language, the core is a powerful entity-component framework that provides three.js with an extensible, and composable structure.

This WebGL based VR plugin provides prebuilt components to be used in the application like models, video players, skyboxes, geomentries, controls, animations, cursors etc.

The codes written are compatible with every major VR headset and device that can access the internet. This means that we can open the same VR apps built in Aframe in any of the VR devices like Gear VR, Oculus Rift, HTC Vive, Google Cardboard, windows mixed reality etc and also, it can run without a headset on desktop and mobile. So, we can create an HTML5 game that can run on every major device ever.

Clara.io

Clara is a web based tool for 3D designing like polygon modeling, keyframe and skeletal animation, texture mapping, photorealistic rendering. It is developed using HTML5, JavaScript, WebGL and Three.js and does not rely on any browser plugins. The digital content created can be exported/imported in FBX, Collada, OBJ, STL, Three.js, Babylon.js etc.

As an alternative of softwares like Maya, blender, 3Ds Max, etc. the designers can use Clara.io in the browser for creating the models and other related assets. This also supports collaborative real-time editing and scripting.

Sketchfab

Sketchfab is a platform that relies on the WebGL JavaScript API to publish, share, discover, buy and sell 3D, VR and AR content. It provides a viewer based on the WebGL and WebXR technologies that allows users to display 3D models on the web, to be viewed on any mobile browser, desktop browser or Virtual Reality headset.

Sketchfab implements the WebVR JavaScript API to provide a Virtual Reality mode of its viewer on compatible VR headset.Rendering is achieved using classic real-time rendering or physically based rendering.

Deck.gl

Deck.gl is a framework for visual exploratory data analysis of large datasets based on WebGL. Mostly geo-spatial data visualizations are built using deck.gl.

It allows complex visualizations to be constructed by composing existing layers, and makes it easy to package and share new visualizations as reusable layers. Icon, text, scatter plot, arc layer etc are some of the standard layers that are commonly used. The developers can combine these existing layers to create new one.

Deck.gl is a great match with React, supporting efficient WebGL rendering under the Reactive programming paradigm. And when used with Mapbox GL it automatically coordinates with the Mapbox camera system to provide compelling 2D and 3D visualizations on top of your Mapbox based maps.

Deck.gl is a better choice for creating map based or geo-spatial visualization.

Plotly

Plotly.js is a high-level, declarative charting library which is built on top of d3.js and stack.gl. It supports Webgl APIs that can be used for increased speed, improved interactivity, and the ability to plot a very large number of datapoints.

P5

p5.js is an open-source JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else. It has two renderers, the P2D (default renderer) helps in rendering 2D graphics. Whereas the WEBGL renderer enables 3D by introducing the third dimension Z.

D3, Plotly and P5 have basic support for 3D plots and interactions (based on webGL). Any of the applications requires a basic 3D visualization with minimal interactions, the developer can prefer any of these tools for creating their visualization.