Hello, welcome to Babylon.js - a webGL game developer's framework. Throughout the history of Babylon.js, coders and authors have written tutorials and documentation which is stored in places other than at our primary documentation site. In this document, we will attempt to provide links-to and information-about those off-site documents.
| __Title__ | Keywords | Description |
|---|---|---|
| What's New - Babylon.js 2.4 | Canvas2D, RefractionTexture, CubeMap, HDR, Lights, Physics, Unity3D, Parallax, Shader Includes | In this fine document, David Catuhe takes us on a tour of the most exciting new features of Babylon.js version 2.4. David includes some nice demos, brief overviews, and tasty illustrations. Deltakosh knows how to create a great looking document. I think you will agree. |
| Going Further - Babylon.js 2.3 | PointLight, Shadow, WebGL2, Sponza | In this info-file, Deltakosh tells us all about Dynamic Point Light Shadows which is a great new feature of Babylon.js 2.3. He also covers aspects of the fantastic Sponza Demo, which demonstrates this new DPLS feature. |
| What's New - Babylon.js 2.1 | Unity5, Decals, SIMD, Collisions, WebWorkers, Shadows, Parametric Shapes, PostProcess | The Babylon.js 2.1 release brought many new features, and we love them all. Deltakosh introduces us to the very best of them, giving credit to the contributors who made them happen. He often refuses to give himself credit, but we know how much of HIS life is dedicated to contributions - almost all of it. |
| What's New - Babylon.js 2.0 | WebAudio, Volumetric, VLS, SceneOptimizer, Occlusion, SSAO, Level of Detail, LOD, Instanced Bones | Babylon.js 2.2 was a release chocked-full of new, powerful features. These features have become our new best friends, and you can hear the happiness in Deltakosh's words, as he takes us on a brief tour. |
| The Train Demo | DrawElements | The Train Demo, which can be viewed on the Babylon.js main web site... is truly a work of art. It is also a work of technology. In this document, Deltakosh talks about the developing of this grand demo. |
| Open-Sourcing the Docs | Documentation, Community | Deltakosh speaks about core-team documentation philosophies, particularly, community involvement. |
| Our Move to TypeScript | TypeScript, Source | Here, Deltakosh tells of the thought and activities behind the move from plain JavaScript... to TypeScript. |
| All About Shaders | Shaders, Vertex Shader, Fragment Shader, GLSL, ShaderMaterial, CYOS | This is a great introduction to shaders, and how they can be used in Babylon.js. An easy-reading, yet thorough tutorial with great illustrations. Prepare yourself to become excited about shaders, as this document will make you so. |
| Blender -> Babylon Exporting | Blender, Export, Exporter | Blender is an open-source modeler and scene layout application that compliments BabylonJS beautifully. In this heavily-illustrated tutorial, Deltakosh shows us how to do scene exporting... from Blender... to .babylon files. |
| Understanding Device Orientation | DeviceOrientation, EventListener | Device Orientation inputs... are the wave of the future. According to Deltakosh, they "rock"... literally. :) Join David and his friends for this superb exploration of device orientation tech and its uses. |
| Physics in WebGL Games | CannonJS, OimoJS, Physics | Although this is an older document, it still speaks pertinently about the wonderful world of WebGL physics engine integration. |
| Creating a Convincing World | Ground, Water, Skybox, Shadows | In most games, the environment sets the mood/feel of the scene. Here, David introduces us to the primary scene-decoration features of Babylon.js. This is the most-popular, most-read tutorial in all of Babylon land. |
| Using Multi-Materials | Materials, SubMaterials, SubMeshes | A short introduction to the complex world of multi-materials. Deltakosh shows that it need not be complex whatsoever. |
| Lights, Lights, Lights | Light | Although we have a main docs-site tutorial for lights, here is another introductory tutorial that teaches the four main types of lights used in/for Babylon.js. |
| Unleash the StandardMaterial | StandardMaterial, Material, Texture | Basic StandardMaterial usage/features are the theme in this introductory tutorial. An easy-read doc, covering the basics. |
| Babylon.js - The Early Days | Babylon | Take a walk through the early days of the Babylon.js webGL framework. Possibly, one of the first documents where Deltakosh introduces his wonderful 3D system. Since then, Babylon.js has tripled its levels of wonderful. |
| Performance Tips - Instances and GC | Performance, Instantiations, Garbage Collection | Here, Deltakosh shows us some performance tips which apply not only to Babylon.js, but to all JavaScript apps. Tweak your performance - the Deltakosh way. |
| __Title__ | Keywords | Description |
|---|---|---|
| Discovering Sponza | Sponza, WebAudio, IndexedDB, Debug, Cross-Platform | David "Davrous" Rousset chronicles his and his team's activities on the innovative Sponza demo, created with Babylon.js. |
| Collisions & Physics - Oimo.js | Oimo, Physics, Collision, Collider | Davrous continues his great tutorial series with a thorough tutorial about Oimo.js physics, and collider operations. |
| Babylon.js Main Site - Move to Azure | Babylon | Here, Davrous talks about why the move was a wise idea, and explains the steps involved. |
| QR-Code Maze - Behind the Scene | Maze, Game | In this beautifully-produced tutorial (and demo), David Rousset takes us on a sweet ride down the development trail of a fine maze game. Every detail is covered, start to finish. |
| IndexedDB - Assets Management | IndexedDB, Assets, Database, Blob | Keeping your game/scene assets/resources nearby and quickly-retrievable is what it's all about. IndexedDB is the secret. Davrous makes it look easy... because it IS easy. |
| Room-Scale VR with Vive | Vive, Room Scale, VR, HTC | Virtual Reality (VR) is hotter than ever, and David Rousset feels the heat. Davrous shows that the future... is here, now. |
| Touchy Software Drum Machine | WebAudio, SVG, Multi-Touches, Synthesis | Not directly related to Babylon.js, but a very interesting document just the same. Davrous drums-up a touchy project, brings us along for the ride, and doesn't miss a single beat. |
| The Ultimate 3D Tutorial | 3D, Software 3D, SoftEngine, | This tutorial is about writing a software-based 3D engine. Although only slightly related to Babylon.js... this is a WONDERFUL 7-part tutorial that is overflowing with great information and illustrations. Most of it can be applied to Babylon.js. An excellent series of docs! |
| __Title__ | Keywords | Description |
|---|---|---|
| Using VertexData/VertexBuffer | VertexData, VertexBuffer, Indices, Vertices, Normals | Julian "Temechon" Chenard is a fine game programmer, teacher, OOP-master, and a darned nice guy, too. In this splendid tutorial, Temechon uses the handy Babylon VertexData object, along with blank/updatable mesh... to make lightweight trees. |
| Contributing to Babylon.js | Contribute, GitHub | People who are not familiar with source repositories, GitHub, version control, etc... sometimes struggle-with approved methods for open-source contributions. Temechon succeeds in removing those struggles... with this comprehensive tutorial about contributing to Babylon.js. |
| Toad Attack - The Making-Of | Game | Here is a fantastic two-part "Basics" tutorial about the making of "Toad Attack", one of Temechon's cool games. Good stuff! |
| All About ActionManagers | ActionManager, Actions, Trigger, Predicate | Once upon a time, Deltakosh created an ActionManager class with great docs. In this cool tutorial, Temechon uses it within a complete webGL game. Two tutorials in one! |
| Old School Oimo Physics | Physics, Oimo, Impostor | Temechon coded much of the original physics "plugins", interfacing third-party physics engines... to Babylon.js. Later, version 2 of the plugins was developed by Raanan Weber (see below), but Raanan ensured that v2 plugins were backwards-compatible with original v1 plugins. So, this older Oimo-based physics tutorial is still quite pertinent. Its code examples still work great. |
| More Oimo - Impulses & Velocities | Physics, Oimo, AngularVelocity, LinearVelocity, ApplyImpulse | In this slightly-advanced Oimo physics tutorial, Temechon shows us how to "force the issue"... adding energy and direction to Oimo's physics impostors. This tutorial is based-upon the v1 Oimo plugin, but again, due to backwards-compatibility, all code examples work fine with the v2 plugins, as well. It's all good! |
| First Person Shooter Prototype | OOP, Project, Asset, LayerMask, Viewport, PointerLock | The first-person shooter (FPS) game is one of the most enjoyable and popular game-types in 3D land. In this gorgeous tutorial, Julian takes us end-to-end through the development process. As with all of Julian's games and tutorials, he uses Object Oriented Programming (OOP) techniques, which result in re-usable pieces. These OOP pieces streamline work-flow for future games/projects. |
| Temechon's Projects Page | Projects | This is not a link to a tutorial, but instead, a link to Temechon's "Projects" web page. As you can see, Temechon is a prolific game-author, both 2D and 3D. And we know why he is able to produce game after game, quickly and easily, right? Yep, OOP... reusable code... he does it well. Borrow his techniques, and you borrow great wisdom. |
| __Title__ | Keywords | Description |
|---|---|---|
| Everything Babylon | Babylon | Raanan Weber came to the Babylon.js world a bit later than other "old dogs", yet he "took-to" our webGL framework like it was his long-time best friend. Shortly after arriving, Raanan was smoothing-out some of Babylon's rougher roads. A great guy with a great tech-brain, and artistically-creative, too. Here's a link to ALL pages on Raanan's site... that have been tagged "Babylon". |
| Oimo Physics Car | Car, Oimo, Physics, Joint, Wheel | Raanan kindly designed and coded the v2 physics interface/plugins, and did it beautifully, considering he tried to honor both OimoJS and CannonJS third party physics engines. This is a wonderful tutorial... fantastic explanations, gorgeous illustrations, and meticulously detailed. It just doesn't get any better than this. Thanks Raanan! |
| CannonJS Cloth Simulation | Cannon, Physics, Cloth, MeshImpostor | Here we go again. Raanan is back, with what could be considered a miracle. Cloth simulation, with JavaScript! Who would believe it? Raanan Weber would believe it, that's who. And now, he will show you how to do it yourself. Sweet! |
| Babylon Bowling - A Web Game | Visual Studio, Game, NuGet | Located at the MSDN web site, this is part 1 of a 2-part "Web Game" tutorial, using Visual Studio. We haven't been able to locate part 2 yet, but part 1 is wonderful all by itself. Stay tuned for part 2... if we can ever find it. :) |
| An Introduction to Scene Optimization in Babylon.js | Optimization | Here comes TechMaster Raanan again, taking-on a challenging topic... scene optimization. This tutorial series has 3 primary parts, and an introduction. This is that introduction... to this highly-important topic. |
| Scene Optimization Part 1 - The Mesh | Optimization | High-poly-count mesh can bog-down a scene, and Inspector Raanan is on the case. This is part 1 of an unfinished 3-part tutorial series... where Raanan optimizes 3 major sub-sections of a Babylon.js scene (mesh, materials, effects). This is the part about mesh. |
| Scene Optimization Part 2 - The Materials | Optimization | Coming soon! |
| Scene Optimization Part 3 - The Effects | Optimization | Coming soon! |
| WebWorker-Based Collision Detection in Babylon.js | WebWorker, Worker, Collision, Messages | Web workers are a method to fork-off :x certain scene tasks... to separate OS threads. Remember how I mentioned above... that Raanan likes to smooth rough roads? Collision detection/servicing is one of those webGL rough roads caused by heavy loads. In this 2-part series, Raanan meticulously analyses the situation, and applies worker threads to attempt improvements. A link to part 2 is provided near the bottom. |
| Integrating Travis-CI and BabylonJS | Travis, GitHub, Integration, NodeJS, NPM, Gulp, Grunt, TypeScript | This short tutorial is mostly for those who build Babylon.js from TypeScript source. Travis has many features that assist during the build process, and Raanan shows us how to set it up properly. |
| __Title__ | Keywords | Description |
|---|---|---|
| Babylon.js Projects Page | Actions Builder, Editor, Electron | Julien Moreau-Mathis is a French programmer and innovator, and he has become a serious BabylonJS superhero. (He's also a darned nice guy) Luaacro is currently deeply involved in the brand new BJS online editor. Visit this page that summarizes ALL of his projects, and includes many "about/how-to" documents. |
| __Title__ | Keywords | Description |
|---|---|---|
| Babylon.js: Physics and Character Animation | Physics | Andy Beaulieu does some substantial early work with adding physics to player characters. Thanks for sharing it, Andy! |
| Sharing 3D Scans in WebGL using BabylonJS | Scan | Here, Andy takes a trip down Scanner's Lane, and brings us along for the ride. |
| Bing 3D Maps using WebGL and BabylonJS | Map, HeightMap, Bing | In this mini-tutorial, Andy looks at how we can use BabylonJS and WebGL to create a 3D height map and route path, using data from Bing Maps REST Services. |
| Fluid Simulation using BabylonJS and LiquidFun | Fluid, SoftBody, LiquiFun | BabylonJS and LiquidFun allow for the creation of fluid simulations including soft body physics, using JavaScript and WebGL. Andy is here to tell us all about it. |
| __Title__ | Keywords | Description |
|---|---|---|
| A Babylon.js Guide | Guide | JohnK is a great teacher, active Babylon.js user, and a swell person, too. Although retired from academia (Math and I.T.), he hasn't really retired at all. Tour the menu buttons (and many useful documents) of John's comprehensive Guide to Babylon.js, and enjoy. Thanks John! |
| __Title__ | Keywords | Description |
|---|---|---|
| Querying for Terrain Data | VertexData, PostgreSQL, PostGIS, SQL | French researcher Célian Garcia (Kostar111) has worked on elevation models and tiled terrain, using Babylon.js as his plotter/renderer. In this real-time-translated document, Kostar uses DB queries to gather JSON, which he then transforms into a Babylon.js heightMap. |
| Working with Babylon.js Terrains | Terrain, HeightMap | Kostar111 continues his research into terrain generation, in this 3-part translated tutorial. |
| Creating Tiled Ground in Babylon.js | Terrain, HeightMap, Tile | Kostar111 is back, with this Babylon.js-specific tutorial about creating tiled grounds. No translations, great illustrations, and some very nice playground demos. Thanks Célian! |
| __Title__ | Keywords | Description |
|---|---|---|
| ShaderBuilder | Shader, Fluent | Rahman is a master of shaders, and a master of assembling shader code... because of his marvelous ShaderBuilder (EASH) extension for Babylon.js. In this document, Rahman introduces us to the ShaderBuilder magic, and provides some demo scenes. Be patient with the demo scene loading. |
| YouTube Tutorials | GeometryBuilder, Bandicam | Here is Rahman's YouTube page, where there are 6 videos, all related to Babylon.js. Rahman also introduces us to a very unique mesh generator that he calls Geometry Builder. We have seen demos, and they are FANTASTIC! |
Many excellent tutorials are located here. Thanks Andrew!
Five substantial BabylonJS video tutorials which I don't know much about, yet. Let's go view them. Author(s) unknown.
Assorted beginner-level text and video tutorials... from our forum friend Serapth. Thanks Serapth!