For multi-purpose, highly flexible 3D web graphics, opt for Babylon.js, widely used in diverse fields like education, military training & product design. For location-based applications needing paramount geospatial precision & varying need-based plans, Cesium is the robust choice.
Key Differences Between Babylon.js and Cesium
- Babylon.js is a versatile real-time 3D engine developed by Microsoft, while Cesium caters to geospatial applications with customizable plans.
- Babylon.js facilitates polygon modeling with plug-in physics engines, enabling a wide range of applications. Cesium’s offerings include storage, streaming, and Bing Maps sessions.
- Babylon.js has a free license under Apache 2.0, with its source code readily available. Cesium offers different plans, with prices varying based on needs.
- Cesium’s license terms vary based on the user’s gross revenue or funds, requiring a paid account over certain thresholds.
Comparison | Babylon.js | Cesium |
---|---|---|
Type | 3D Engine | WebGL/Spatial Analysis Platform |
License | Apache License 2.0 | Apache License Version 2.0 |
Development Contributors | Microsoft, Other contributors | CesiumJS Contributors |
Usage | virtual worlds, data visualization, education, avatars, Kinect, training, product design, graphs, modelling | Depends on plan – personal, commercial, Premium, custom |
What Is Babylon.js and Who’s It For?
Babylon.js is a widely-respected real-time 3D engine that enables the display of 3D graphics via HTML5, right in your web browser. Conceptualized in 2013 by David Catuhe and further developed by teams at Microsoft, the engine offers an elaborate spectrum of applications, from fashion avatars to military training and product design. Babylon.js is intended for developers, 3D artists and enthusiasts who wish to embrace the advanced specs of 3D modeling and deliver highly immersive web experiences.
Pros of Babylon.js
- Open-source platform
- Accessible API for user projects
- Supports photo-realistic images through PBR and post-processing methods
Cons of Babylon.js
- Limited use of constructive solid geometry methods
- Requires a good grasp on 3D modeling and programming to fully utilize
What Is Cesium and Who’s It For?
Cesium is a dynamic platform offering diverse plans for varying personal and commercial requirements. With differentiated pricing, storage and data streaming capabilities, Cesium caters to a broad array of users. From the free community plan for non-commercial use, to the scalable, custom plans, there’s a solution for everyone. Cesium is intended for developers, researchers, government projects, and commercial enterprises seeking intuitive geospatial solutions.
Pros of Cesium
- A broad range of plans for different needs
- Unrestricted number of apps and end users for each plan
- Recognizes the contributions from varying contributing persons
Cons of Cesium
- Paid account required if your annual gross revenue is more than $50K
- Can get quite expensive depending on your usage
Code Examples for Babylon.js & Cesium
Babylon.js—Animated Sphere with Texturing
An exciting example of a Babylon.js script, this builds an animated sphere with texturing. Ensure that you have the Babylon.js script installed and correctly linked for this code to function optimally.
// Scene creation
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
// Create a Basic Scene
var scene = new BABYLON.Scene(engine);
// Camera creation and attachment to the canvas
var camera = new BABYLON.ArcRotateCamera('Camera',
Math.PI/2, Math.PI/2, 2,
new BABYLON.Vector3(0,0,5), scene);
camera.attachControl(canvas, true);
// Light creation
var light = new BABYLON.HemisphericLight("light1",
new BABYLON.Vector3(1, 1, 0), scene);
// Sphere creation with dynamic texture
var sphere = BABYLON.Mesh.CreateSphere('sphere1',
16, 2, scene);
var sphereMaterial = new BABYLON.StandardMaterial("mat",
scene);
// Load texture
sphereMaterial.diffuseTexture = new BABYLON.
Texture("/textures/metal.jpg", scene);
sphere.material = sphereMaterial;
return scene;
};
// Call scene creation function
var scene = createScene();
// Render Loop
engine.runRenderLoop(function () {
scene.render();
});
Cesium—Flying Airplane over 3D Terrain
This example creates a Cesium instance with an airplane flying over a 3D terrain. Remember, you need to have the Cesium.js library, access to the terrain server, and an APP_ID to run this script successfully.
// Viewer instance creation
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: new Cesium.CesiumTerrainProvider({
url: 'https://assets.agi.com/stk-terrain/world'
}),
baseLayerPicker: false
});
// Aircraft model addition
var aircraft = viewer.entities.add({
model: {
uri : '../SampleData/models/CesiumAir/Cesium_Air.glb',
minimumPixelSize : 128,
maximumScale : 20000
},
position : Cesium.Cartesian3.fromDegrees(-100.33, 18.29, 5000),
orientation: new Cesium.HeadingPitchRoll.fromDegrees(0, -90, 0),
});
viewer.trackedEntity = aircraft;
// Fly using SampledPositionProperty
var position = new Cesium.SampledPositionProperty();
position.addSample(Cesium.JulianDate.now(),
Cesium.Cartesian3.fromDegrees(-100.33, 18.29, 5000));
position.addSample(Cesium.JulianDate.now().addMinutes(1),
Cesium.Cartesian3.fromDegrees(-110.33, 30.29, 5000));
aircraft.position = position;
Let’s Weigh The Scales: Babylon.js or Cesium?
In the world of web-based 3D visualizations, Babylon.js and Cesium stand tall. But which giant should you root for? Let’s cut to the chase.
3D Modelling Enthusiasts and Professionals
For those engrossed in 3D modeling, Babylon.js should be your pick. Equipped with a user-friendly API, multiple plugins for realistic physics simulation and a robust animation suite, Babylon.js shines for tasks such as product design, virtual worlds and education in medicine. It offers immense versatility for complex modeling utilizing Constructive Solid Geometry.
Commercial and Government Projects
Cesium, on the contrary, asserts its dominance when it comes to commercial and government projects. Its scalability, performance, and differentiated plans make a persuasive case for intensive commercial usage. Be it for research or projects with revenue above $50K, Cesium’s structure caters well to professional undertakings.
Hobbyists and Non-Commercial Developers
If you’re developing for hobby, learning or non-revenue projects, both technologies extend arms. Babylon.js’s open-source nature and Cesium’s community plan offer the chance to experiment and build without constraints. It’s a draw for non-commercial use.
In the tug of war between Babylon.js and Cesium, pick Babylon.js for complex 3D modeling and animation or choose Cesium for commercial and government projects. For non-commercial endeavors, both are competent companions. Now, go ignite your virtual worlds!