Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Babylon.js Animated Sphere - Babylonjs Typing CST Test
Babylon.js Animated Sphere — Babylonjs Code
A sphere that bounces up and down over time.
# babylonjs/demo/bouncing_sphere.js
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI/2, Math.PI/4, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, 0), scene);
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 1}, scene);
scene.registerBeforeRender(() => { sphere.position.y = Math.abs(Math.sin(Date.now() * 0.002)) * 2; });
engine.runRenderLoop(() => { scene.render(); });Babylonjs Language Guide
Babylon.js is a powerful, open-source 3D engine for the web that enables developers to build immersive 3D games, simulations, visualizations, and XR experiences directly in the browser using WebGL, WebGPU, or WebXR.
Primary Use Cases
- ▸3D games and interactive worlds
- ▸Architectural visualization and digital twins
- ▸AR/VR/XR immersive experiences
- ▸Scientific and engineering simulations
- ▸Product configurators and 3D e-commerce
Notable Features
- ▸WebGL + WebGPU rendering
- ▸WebXR full VR/AR support
- ▸Powerful scene graph system
- ▸Advanced PBR material system
- ▸Node-based material and shader editor
Origin & Creator
Babylon.js was created by David Catuhe and the Microsoft Babylon team in 2013, with contributions from a large open-source community.
Industrial Note
Babylon.js is frequently used in aerospace simulations, product configurators, architectural walkthroughs, XR training, and high-fidelity 3D commerce applications.
Quick Explain
- ▸Babylon.js provides a full-featured 3D engine with rendering, physics, materials, and scene management.
- ▸It supports both WebGL and modern WebGPU for high-performance graphics.
- ▸Includes advanced PBR materials, particle systems, shaders, and post-processing effects.
- ▸Offers integrated WebXR support for VR and AR experiences.
- ▸Provides a rich editor, playground, and tooling ecosystem.
Core Features
- ▸Scene and camera system
- ▸Lights, shadows, reflections
- ▸Meshes, materials, textures
- ▸Physics engines support (Ammo.js, Cannon.js, Havok)
- ▸Particles, animations, GUI system
Learning Path
- ▸Learn basic 3D concepts
- ▸Understand scene graph and materials
- ▸Use Playground for experimentation
- ▸Learn WebXR workflows
- ▸Move into shaders and WebGPU
Practical Examples
- ▸Rotating 3D object
- ▸Interactive product viewer
- ▸Physics-driven game mechanics
- ▸AR placement using WebXR
- ▸Custom ShaderMaterial effects
Comparisons
- ▸Babylon.js vs Three.js: Babylon is more opinionated and feature-rich; Three.js is more minimal and flexible.
- ▸Babylon.js vs Unity WebGL: Unity is heavier but more powerful; Babylon is lighter and web-native.
- ▸Babylon.js vs PlayCanvas: PlayCanvas has an online editor; Babylon has deeper XR support.
- ▸Babylon.js vs WebGPU APIs: Babylon abstracts complexity.
- ▸Babylon.js vs A-Frame: Babylon is lower-level but more powerful.
Strengths
- ▸Extremely feature-rich and modern
- ▸High-level API yet highly performant
- ▸Great documentation and playground
- ▸Built-in support for WebXR
- ▸Robust editor for artists and developers
Limitations
- ▸Lower-level than Unity/Unreal
- ▸Complex scenes require optimization expertise
- ▸Large bundle size for full engine
- ▸Limited native tooling compared to heavyweight engines
- ▸Learning curve for shader/material systems
When NOT to Use
- ▸Ultra-lightweight 2D apps
- ▸Non-3D projects without WebGL
- ▸Extremely large AAA-level games
- ▸Projects requiring native C++ engines
- ▸Low-end mobile-first apps with tight constraints
Cheat Sheet
- ▸Engine -> Scene -> Camera -> Mesh -> Material
- ▸ArcRotateCamera for orbit controls
- ▸StandardMaterial vs PBRMaterial
- ▸ImportManager for glTF
- ▸scene.render() inside render loop
FAQ
- ▸Does Babylon.js support WebGPU?
- ▸Yes - Babylon is one of the first engines with full WebGPU support.
- ▸Can I make full games?
- ▸Yes - Babylon supports physics, animations, particles, and audio.
- ▸Is Babylon.js better than Three.js?
- ▸Depends on project - Babylon is more engine-like with built-in systems.
- ▸Does it support Blender models?
- ▸Yes, via glTF exporters.
- ▸Does Babylon run on mobile?
- ▸Yes - supports mobile WebGL/WebGPU and WebXR.
30-Day Skill Plan
- ▸Week 1: Cameras, lights, meshes
- ▸Week 2: Materials, textures, shadows
- ▸Week 3: Physics + animations
- ▸Week 4: WebXR + interactions
- ▸Week 5: Optimization + shaders
Final Summary
- ▸Babylon.js is a full-scale, high-performance 3D engine for the web.
- ▸It offers WebGL and WebGPU rendering, XR support, physics, and advanced materials.
- ▸Ideal for games, simulations, and immersive experiences.
- ▸Backed by strong tools like the Editor and Playground.
- ▸A top choice for modern web-based 3D development.
Project Structure
- ▸src/
- ▸assets/models/
- ▸assets/textures/
- ▸main.ts or index.js
- ▸scenes/ - scene-related modules
Monetization
- ▸3D product viewer SaaS
- ▸WebXR training applications
- ▸Games with microtransactions
- ▸Digital twin licensing
- ▸Babylon-based visualization tools
Productivity Tips
- ▸Use Playground to test ideas
- ▸Leverage Inspector constantly
- ▸Use Node Material Editor for shaders
- ▸Utilize asset caching
- ▸Modularize scenes for maintainability
Basic Concepts
- ▸Engine and Scene
- ▸Camera types (ArcRotate, Free, Universal)
- ▸Lights and shadows
- ▸Meshes and materials
- ▸Animations and actions