README.md

Awesome Babylon.js

A curated list of awesome things related to the Babylon.js game engine.

Babylon.js is an open-source game and rendering engine written in TypeScript designed to be powerful, beautiful, simple, and open. It supports cross-platform game development through WebGL, WebGPU, and the Babylon Native runtime.

Your contributions are always welcome! Please read the contributing guidelines to get started.

Contents

• Official links
• Books
• Playground
• Demos
• Scenes
• Games
• Projects
• Examples
• Links
• Forum

Official links

Official Babylon.js links.

• Babylon.js Documentation
• Babylon.js Editor
• Babylon.js Features
• Babylon.js Playground
• Babylon.js Sandbox
• Babylon Native
• Babylon React Native
• Changelog
• Community Demos
• Forum
• Node Material Editor
• Partners Using Babylon.js
• Specifications
• Social Media
  • GitHub
  • Medium
  • Twitter
  • YouTube Channel
• SpectorJS - Explore and Troubleshoot your WebGL scenes with ease
• Start Contributing to Babylon.js

Books

Books about or for Babylon.js developers.

• Babylon.js Essentials
• Going the Distance with Babylon.js: Building extensible, maintainable, and attractive browser-based interactive applications using JavaScript

Playground

Noteworthy examples of community-contributed content on the Babylon.js playground.

• 360 portal
• 3D UI
• Ammo.js Heightmap
• Antigravity racing game demo
• Augmented Reality Drum
• AI Basketball shooter
• Bowling and grabbing in XR
• Bowling lane showing gutters and physics
• Buttons always face user
• Camera positioning on event
• Captain Dude Fishing
• Car following path
• Change color on collide
• Chessboard layout and camera
• Circle menu in 3D GUI
• Colliding and deforming cubes
• Coronavirus rendering pipeline and shaders
• Custom mesh for 3D button
• Custom WebXR controller mesh
• Dock the boat
• Dynamic snow generation
• Dynamic text in UI
• Exploding Lofi Sphere
• Exploding Lofi Torus
• Exploding Object with Solid Particles
• Explosion on keydown
• Explosions + City burning
• Fenerator 3D with explosion generator
• Flight Simulator Experiment
• Fruit Ninja VR Game
• Furball Shader
• Glowing marbles falling
• Glow World
• Grab and move a ball in WebXR
• Grim Grinning Ghosts with singing
• God of War NME Weapons FX Demo
• Great White Shark animated GLTF model
• GUI follows viewpoint in WebXR
• Gun firing
• Happy Holidays 2020 VR
• Happy holidays custom font
• HERO X
• Hit the cube pointer tracker
• Holographic keyboard
• Hopping game with infinite running
• HtmlMesh demo with overlay
• Joint Impulse Example
• Laser Saber mesh
• Lego Buggy mesh
• Light Paddle glowing mesh
• Mallot and Nail VR
• Marble slide
• Marble Tower
• Mesh Speech Synthesis API
• Music Visualizer
• Newton's cradle physics
• Open url by clicking object
• Pac-Man Arcade Machine in WebXR
• physicsImposter parenting
• PhysX kinematic dynamic bodies
• PhysX fluid rendering
• Ping pong in 3D
• Point Cloud Morphing
• portal + gravity mechanics
• Portal effect using shaders
• Progressive loading of glTF with LOD
• Pulsars / Imps
• Rollercoaster
• Screen Capture and Composition
• Shattered mesh with baked physics demo
• Simple XmlLoader GUI
• Slice CSG mesh on click
• Soft body physics - wrecking ball + blocks
• Solid Particle System collisions
• Space Invader visual effects game
• Space Ship Battle
• Spheres change color only when looked at
• Sphere Spiral infinite rendering pipeline
• SPS change color on click
• StakeShooter game
• Submarine underwater game
• Table billards physics demo
• Tank playground with sound
• Tap to Bounce Cylinder using imposters
• Targeting System for turrets
• TensorFlow.js + Webcam Demo
• TestTowerDef2 Tower Defense Game
• The Pirate Fort
• Tic-Tac-Toe game
• Track with Carriage Following It (First Person)
• Track with Carriage Following It (Third Person)
• Trailing mesh demo
• Under Water Demo
• Velocity test on soccer balls
• Virtual Joystick GUI
• Virtual Tour Booth
• VR Rythym Game
• Watch out for swords game
• Water Refraction with RTT
• Wave Racer
• WebXR Catching Game
• WebXR Physics playground
• WebXR Tennis game
• XR Goal Keeper Trainer
• XR Throw Lab
• Yellow sphere volumetric light mini-game
• Yoshi Falling Balls

Demos

Official Babylon.js demos that really showcase what it is capable of.

• ActionBuilder - Turn the lights on/off using flip switches. (source)
• Actions - A torus that goes around in a circle and changes shape when it hovers over another shape. (source)
• Amp360Video - Explore a video in 360°. (source)
• AssetsManager - A human skull. (source)
• AudioAnalyser - Babylon isn't just graphics; it's a full game engine. (source)
• Bones - A walking soldier + animated bunnies. (source)
• Boom - Make things explode with a touch. (source)
• Bump - Render a ball using bump mapping. (source)
• CellShading - Use cell-shading to reproduce a cartoon-like effect. (source)
• Charting - 3D charts. (source)
• ChibiRex - An animated baby T-Rex. What more do you need? (source)
• Dancers - Animated 3D dancers. warning: takes a long time to load. (source)
• Dancing CSG - Constructive Solid Geometry using lights and a sparkly texture. (source)
• Decals - Touch the cat to splatter it with black ink. (source)
• DiStraction - A JavaScript driving game demo. Works with a DS3. (source)
• DragNDrop - Drag and rearrange different shapes. (source)
• Espilit - Explore an entire (barebones) house. (source)
• ExtrudePolygon - Destroy your own house. (source)
• Facets - A fountain of countless balls falling onto a complex shape, showcasing physics. (source)
• Flat 2009 - Explore an extremely detailed apartment, including a fishtank and bathroom. (source)
• FlightHelmet - A realistic aviator's helmet. (source)
• Fur - A disturbingly furred bunny. (source)
• GLTF - A GLTF Alien model featuring facial animations. (source)
• GUI - An interactive 3D UI. (source)
• GlowLayer - Make a neon pipe glow like plasma. (source)
• GlowingEspilit - Espilit but with glowing effects. (source)
• Heightmap - Generate terrain using a heightmap. (source)
• HillValley - Explore a town isolated from the outside world, like in The Twilight Zone. (source)
• HillValleyVR - HillValley but creepier in VR. (source)
• Ink - Quick Demo of using Babylon.js to simulate inking. (source)
• InstancedBones - A group of soldiers marching in sync. (source)
• Instances2 - A complex, moving space engine. (source)
• LookAt - Stare at a colored ball moving around in a box of shapes. (source)
• Mansion - Explore a haunted mansion. (source)
• MansionVR - Explore a haunted mansion in virtual reality. (source)
• MotionBlur - Blur things like if you were moving like The Flash. (source)
• PBRGlossy - Physically based rendering of a battle-damaged sci-fi helmet. (source)
• PBRGlossyBloom - Similar to PBRGlossy, but with an extra bloom filter. (source)
• PPBloom - Simple post-processing. (source)
• PPConvolution - A more advanced post-processing demo. (source)
• Particles - Colorful particles erupting. (source)
• Physics - Spheres and blocks with gravity added. (source)
• Polygon - It's a bird, but how did it get so flat? (source)
• Procedural - Don't hard-code content; generate it procedurally. (source)
• Retail - Explore a small store (no stealing). (source)
• SPS - Simulate asteroids around a planet using a solid particle system. (source)
• SPSCollisions - Solid particles as confetti being raining down on a ball. (source)
• SpaceDeK - Pretty darn close to a space-shooter. (source)
• Sponza - The most famous Babylon.js demo. (source)
• SponzaDynamicShadows - A simpler version of Sponza, but with dynamic lights. (source)
• TheCar - A futuristic car parked all by itself in a garage. Too bad there's no key. (source)
• Train - An incredibly realistic train. (source)
• Tunnel - Travel inside an endless rust-filled tunnel. (source)
• V8 - A complex, moving replica of a V8 engine. (source)
• Video Processing Sample - Quick Demo for setting up a Babylon.js real-time video processing using a webcam. (source)
• WCafe - Windows Cafe is a great place to unwind and have a relaxing look around. (source)
• Yeti - A non-threatening Yeti, complete with snow. (source)

Scenes

Extra demonstrations of Babylon.js

• Minority Race - A racing game made in 2016 for a film school. (source)
• Robot Presentation - A robot gives a timed presentation, with an interactive slider to control animation status. (source)
• World Monger - Become a God and shape the world around you. (source)

Games

Open source games built with Babylon.js

• Accessible Breakout - Breakout game fully accessible for people who are blind or visually impaired. (demo)
• Alien Cargo - A WebGL 3D game inspired by the classic puzzle game Sokoban. (demo)
• Attack of the Killer Bunnies - Where bunnies go to die. (demo)
• Barkanoid - Arkanoid / Breakout clone with cinematic opening. (demo)
• Block - A block puzzle game. (demo)
• Cube Endless Runner - Cube Endless Runner is a 3D game built on top of WebGL and HTML5 technologies. (demo)
• Defend - Procedural Cross-Platform 3D Tower Defense Web Game with Physics and AI and Procedural Sound. (demo)
• F18 Fighter Simulation - Simulation driving of F18 Fighter. (demo)
• Hide and Seek Demo - Multiplayer Hide-and-Seek made with BabylonJS and Colyseus. (demo)
• Light Speed Ready! - A spaceship game of gathering resources and leveling your ship. (demo)
• NeoTrap - Music-based game. (demo)
• Planet Builder - Spherical Voxel Engine demo with a robot hand. (demo)
• Raucous Running and Rampaging Robot Racer Rally (R6) - A fast-paced many-explosion robot racer game. (demo)
• Simple 3D FPS - A simple FPS game following Clean Code principles. (demo)
• Space Invaders - Space Invaders in your browser with 3D WebGL. (demo)
• Space Pirates - Shoot down pirates in space. (demo)
• Summer's Festival - Source code for the game tutorial written by capucat. (demo)
• Theasis - FPS game. (demo)
• VoxelSrv - Voxel browser game inspired by Minecraft. (demo)

Projects

Open source projects using Babylon.js

• 3D Creator - A prototype that shows how students (grades 7-12) can use block-based programming to create immersive 3D scenes. (demo)
• 3D Tetris - 3D Tetris using the Babylon.js engine. (demo)
• BABYDOOM - Basic DOOM clone. (demo)
• babylon-accessibility-example - Example of how to add accessibility to 3D models. (demo)
• babylon-demo - Babylon.js demo for academic purposes. (demo)
• BabylonFpsDemo - A first-person shooter with Babylon.js (demo)
• BabylonJS-CharacterController - A CharacterController for Babylon.js (demo)
• BabylonJS-Doom-Clone - Doom-style game crafted with love. (demo)
• BabylonJSFirstSteps - You will find here my first steps on Babylon.js (demo)
• Babylon.js "magic" piano portal - An augmented-reality WebXR animation of Chopin's "Winter Wind" Étude to hang on your wall! Works on flat-screen, too. (demo)
• BabylonJS Typescript Logic Examples - A collection of small projects that show possible ways of handling game logic in a Babylon.js game.
• babylonjs-typescript-webpack-starter - A starter template for those who want to use the famous JavaScript 3D game engine Babylon.js with TypeScript and Webpack.
• babylonjs-webpack-es6 - Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely.
• babylonjs-webxr-template - Babylon.js + TypeScript WebXR template project. (demo)
• babylon-mtoon-material - Unity MToon Shader WebGL porting to Babylon.js. (demo)
• Babylon PostEffect Designer - Full control of post effects adjustments in Babylon.js. Supports real-time post-effect adjustments, mesh import, and post-effect data sharing. (demo)
• babylon_ragdoll_robi - Babylon.js ragdoll robot. (demo)
• babylon-steering - Steering behaviors library for moving entities in the x/z plane.
• Bomberman 3D - Experimental game dev with Babylon.js and Angular 5. (demo)
• cannon-es-debugger-babylonjs - This is a debugger for use with cannon-es. (demo)
• Christmas runner - A Babylon.js game made for Christmas. (demo)
• Divine Voxel Engine - A truly multi-threaded JavaScript voxel game engine written in TypeScript.
• ecsy-babylon - Experimental Babylon.js implementation of ECSY.
• Epic Guide - A FPS game about going for a walk. (demo)
• ergoudan - Havok physics character controller demo. (demo)
• facecap - Mediapipe face capture. (demo)
• fps-babylon-js - Online Multiplayer First Person Shooter with Babylon.js & SocketIO. (demo)
• glTF_Physics_Babylon - Demonstrates filters, joints, and complex assets like a water wheel. (demo)
• HTML5 FPS - Demo of an HTML5 first-person rig built on Babylon.js and React. (demo)
• Kicker - A soccer ball game made for Babylon.js February Challenge. (demo)
• KZ Climbing - A 3D platformer browser game prototype similar to "KZ" maps in Counter Strike. (demo)
• Molvwr - WebGL molecule viewer. (demo)
• multiplayer-babylon-js-game - Multiplayer game with server and client-side physics engine synchronization. (demo)
• Multiplayer FPS-Game - A Multiplayer FPS. (demo)
• nengi + Babylon 3D shooter template - A template game for multiplayer 3D shooters made in Babylon.js + nengi.js with client-side prediction and lag compensation.
• OceanDemo - Ocean demo in WebGPU. (demo)
• Oculus Quest Remote Desktop - Remote desktop for Oculus Quest. (demo)
• Playlist Browser XR - Browse Spotify playlists in Virtual Reality. (demo)
• Pokeball Workshop - Interactive models from Game Freak's classic series. (demo)
• react-babylonjs - React for Babylon.js (demo)
• react-babylon-spring - Build spring-physics based 3D animation with the power of react-babylonjs and react-spring. (demo)
• Roblox meets film noir - A 3D platform game demo using Babylon.js and React. (demo)
• Space Jam: A New Legacy BabylonJS Mixed Reality Experience - This repository pairs with the Babylon.js Mixed Reality module that is part of the Microsoft Learn learning path inspired by the Space Jam: A New Legacy film.
• Swarm - A Babylon.js scene made for the screensaver jam. (demo)
• t5c - The 5th Continent - an open-source multiplayer 3D RPG. (demo)
• TanksBattle_WebGL_Using_Babylonjs - 3D Tanks Battle WebGL game. (video)
• Tomb Raider Nostalgia - View levels and play cut scenes for old Tomb Raider games 1/2/3/4. (demo)
• VR Office Throwing Game - A VR throwing game. (demo)
• Vue-BabylonJS - A ready-to-go 3D environment for Vue.js using Babylon.js (demo)
• webxr-depth-testbed-babylon - Testbed for WebXR Depth Feature. (demo)
• WebXR Measuring Tape - ⚡ An Augmented Reality real-world length-measuring web app using the WebXR HitTarget feature. (demo)
• yuka-babylonjs-examples - Examples of using Yuka for Game AI. (demo)

Examples

Demos of Babylon.js on the web.

• Roller coaster - JS
• Star Fighter - JS
• Blowing Wall - JS
• Trailing Particles - JS
• SPS AssemblyScript Demo - JS/AS
• Yuka Corridor Algorithm - source
• Yuka First-Person Shooter - source
• Yuka Hide And Seek Shooter - source
• Yuka Navigation Mesh - source
• Yuka Navmesh Performance - source
• Yuka Savegames - source
• Yuka Tic-Tac-Toe - source

Links

Information by developers, for developers.

• 80 Level interview - Core developer Jason Carter elaborated on the tools and features available for developers.
• Accessibility Scene Tree for Screen Readers - How to add screen reader support to 3D objects.
• Babylon JS Day 10: Terrarium - Final in a series of lessons that explains how to use AssetsManager.
• Babylon JS Day 19: Golf Club - Shows how to leverage AssetsManager to load a custom model as a VR controller.
• Babylon Native in a Headless Environment - A guide to some of the internals of the new Babylon Native engine.
• Babylon on Quest - Tips on how to develop WebXR games using a Quest headset.
• Building the Web-Based 3d Digital Experience for the Mayflower Autonomous Ship - A behind-the-scenes look at a production-quality Babylon.js project.
• Canvas Accessibility and GUI Animations with Babylon.js - The Babylon.js team introduces two interesting new features in Babylon.js 5: GUI Animations and the Accessibility Twin Renderer.
• Challenges of a web VR throwing game - DEV Community - Developer Wilco Schoneveld shares his experiences developing a VR game using a Quest 2, including the source code.
• Figma to BabylonJS - Figma plugin that allows you to export Figma designs to Babylon.js GUI .json files.
• Frame at Microsoft Build: Speaking the World Into Existence - FrameVR explains their web-based metaverse platform they demoed at Microsoft Build.
• Getting cross-platform rendering with Babylon Native and GLFW - A guide to the low-level rendering architecture using in Babylon Native.
• How to Setup Babylon + Next.js Production Build Optimized for SEO & Speed - 3Designer explains how to use Next.js to improve any Babylon.js project with faster loading and search engine visibility.
• How we published a new Babylon.js recipe book Vol. 1 - CrossRoad explains their road to creating the first book for the Japanese Babylon.js community. (playground)
• Integrating BabylonJS 3D Engine into an Angular Business Application - Gives some great tips about performance optimization.
• Journey Beyond The Docs - Introduction by the Babylon.js team to the officially-endorsed book.
• Mesh shattering with baked physics - Besides explaining how to use precompute physics for mesh shattering, this official blog post from the Babylon.js team shows how to integrate it with Node Material Editor.
• MR and the Web with Babylon.js 5.0 - Microsoft Learn session introducing Babylon.js 5.0 and the new Babylon Native. (recording)
• Optimizing a Large-Scale Babylon.js Scene - Gives tips on how to render a large number of meshes and vertices without impacting performance.
• Using WebXR With Babylon.js — Smashing Magazine - Provides a comprehensive introduction to WebXR and how to use it to develop immersive experiences.
• Yuka + Babylon.js Examples - Game AI Examples with Babylon.js - A first-rate collection of Babylon.js demos, each using Yuka for AI.

Forum

Valuable and informative links from the Babylon.js forum.

• Demo Ammo Physics Scene - Explains the Mustang Demo developed with the Babylon.js Unity Exporter.
• Observablehq.com + BabylonJS StarterKit - Explains how to use Babylon.js on ObservableHQ, the JavaScript equivalent Jupyter Notebooks.
• Yuka Game AI + Babylon.js Examples - A complete list of all the Yuka Babylon.js links.