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.
- website: http://eternalcoding.com
- forum username: Deltakosh
- social networks: Twitter, Github, Linkedin
TitleOpen-Sourcing the Docs
DescriptionDeltakosh speaks about core-team documentation philosophies, particularly, community involvement.
TitleOur Move to TypeScript
TitleAll About Shaders
KeywordsShaders, Vertex Shader, Fragment Shader, GLSL, ShaderMaterial, CYOS
DescriptionThis 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.
TitleBlender -> Babylon Exporting
KeywordsBlender, Export, Exporter
DescriptionBlender is an open-source modeler and scene layout application that complimentsBabylon.js beautifully. In this heavily-illustrated tutorial, Deltakosh shows us how to do scene exporting... from Blender... to .babylon files.
TitleUnderstanding Device Orientation
DescriptionDevice 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.
TitlePhysics in WebGL Games
KeywordsCannonJS, OimoJS, Physics
DescriptionAlthough this is an older document, it still speaks pertinently about the wonderful world of WebGL physics engine integration.
TitleCreating a Convincing World
KeywordsGround, Water, Skybox, Shadows
DescriptionIn 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.
KeywordsMaterials, SubMaterials, SubMeshes
DescriptionA short introduction to the complex world of multi-materials. Deltakosh shows that it need not be complex whatsoever.
TitleLights, Lights, Lights
DescriptionAlthough 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.
TitleUnleash the StandardMaterial
KeywordsStandardMaterial, Material, Texture
DescriptionBasic StandardMaterial usage/features are the theme in this introductory tutorial. An easy-read doc, covering the basics.
TitleBabylon.js - The Early Days
DescriptionTake 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.
KeywordsSponza, WebAudio, IndexedDB, Debug, Cross-Platform
DescriptionDavid "Davrous" Rousset chronicles his and his team's activities on the innovative Sponza demo, created with Babylon.js.
TitleCollisions & Physics - Oimo.js
KeywordsOimo, Physics, Collision, Collider
DescriptionDavrous continues his great tutorial series with a thorough tutorial about Oimo.js physics, and collider operations.
TitleBabylon.js Main Site - Move to Azure
DescriptionHere, Davrous talks about why the move was a wise idea, and explains the steps involved.
TitleQR-Code Maze - Behind the Scene
DescriptionIn 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.
TitleIndexedDB - Assets Management
KeywordsIndexedDB, Assets, Database, Blob
DescriptionKeeping 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.
TitleRoom-Scale VR with Vive
KeywordsVive, Room Scale, VR, HTC
DescriptionVirtual Reality (VR) is hotter than ever, and David Rousset feels the heat. Davrous shows that the future... is here, now.
TitleTouchy Software Drum Machine
KeywordsWebAudio, SVG, Multi-Touches, Synthesis
DescriptionNot 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.
TitleThe Ultimate 3D Tutorial
Keywords3D, Software 3D, SoftEngine,
DescriptionThis 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!
KeywordsVertexData, VertexBuffer, Indices, Vertices, Normals
DescriptionJulian "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.
TitleContributing to Babylon.js
DescriptionPeople 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.
TitleToad Attack - The Making-Of
DescriptionHere is a fantastic two-part "Basics" tutorial about the making of "Toad Attack", one of Temechon's cool games. Good stuff!
TitleAll About ActionManagers
KeywordsActionManager, Actions, Trigger, Predicate
DescriptionOnce upon a time, Deltakosh created an ActionManager class with great docs. In this cool tutorial, Temechon uses it within a complete webGL game. Two How_To in one!
TitleOld School Oimo Physics
KeywordsPhysics, Oimo, Impostor
DescriptionTemechon 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.
TitleMore Oimo - Impulses & Velocities
KeywordsPhysics, Oimo, AngularVelocity, LinearVelocity, ApplyImpulse
DescriptionIn 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!
TitleFirst Person Shooter Prototype
KeywordsOOP, Project, Asset, LayerMask, Viewport, PointerLock
DescriptionThe 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 How_To, he uses Object Oriented Programming (OOP) techniques, which result in re-usable pieces. These OOP pieces streamline work-flow for future games/projects.
TitleTemechon's Projects Page
DescriptionThis 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.
DescriptionRaanan 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".
TitleOimo Physics Car
KeywordsCar, Oimo, Physics, Joint, Wheel
DescriptionRaanan 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!
TitleCannonJS Cloth Simulation
KeywordsCannon, Physics, Cloth, MeshImpostor
TitleBabylon Bowling - A Web Game
KeywordsVisual Studio, Game, NuGet
DescriptionLocated 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. :)
TitleAn Introduction to Scene Optimization in Babylon.js
DescriptionHere 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.
TitleScene Optimization Part 1 - The Mesh
DescriptionHigh-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.
TitleScene Optimization Part 2 - The Materials
TitleScene Optimization Part 3 - The Effects
TitleIntegrating Travis-CI andBabylon.js
KeywordsTravis, GitHub, Integration, NodeJS, NPM, Gulp, Grunt, TypeScript
DescriptionThis 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.
TitleBabylon.js Projects Page
KeywordsActions Builder, Editor, Electron
DescriptionJulien Moreau-Mathis is a French programmer and innovator, and he has become a seriousBabylon.js 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.
TitleBabylon.js: Physics and Character Animation
DescriptionAndy Beaulieu does some substantial early work with adding physics to player characters. Thanks for sharing it, Andy!
TitleSharing 3D Scans in WebGL usingBabylon.js
DescriptionHere, Andy takes a trip down Scanner's Lane, and brings us along for the ride.
TitleBing 3D Maps using WebGL andBabylon.js
KeywordsMap, HeightMap, Bing
DescriptionIn this mini-tutorial, Andy looks at how we can useBabylon.js and WebGL to create a 3D height map and route path, using data from Bing Maps REST Services.
TitleFluid Simulation usingBabylon.js and LiquidFun
KeywordsFluid, SoftBody, LiquiFun
TitleQuerying for Terrain Data
KeywordsVertexData, PostgreSQL, PostGIS, SQL
DescriptionFrench 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.
TitleWorking with Babylon.js Terrains
DescriptionKostar111 continues his research into terrain generation, in this 3-part translated tutorial.
TitleCreating Tiled Ground in Babylon.js
KeywordsTerrain, HeightMap, Tile
DescriptionKostar111 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!
Rahman Nasimi Asl
DescriptionRahman 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.
DescriptionHere 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!
TitleneatFLAX - Tutorial Center
DescriptionMany excellent How_To are located here.
Mad Dog Tutorials
TitleYoutube tutorials playlist
DescriptionFive substantialBabylon.js video tutorials
TitleBabylonJS tutorial series
DescriptionAssorted beginner-level text and video tutorials
TitleFrom Blender to Babylon.js
KeywordsLightmap, Blender, Export
DescriptionHelp users to use their precomputed lighting from Blender toBabylon.js (FR version available).
TitleUse a local webserver
Keywordsdevelopment, testing, server
DescriptionHelp users uncomfortable with web dev environment to quickly be able to launch a local webserver instead of using an online FTP (FR version available).
TitleRealtime multiplayer game with NullEngine starter project
KeywordsReact, Colyseus, Typescript, NullEngine, boilerplate, tutorial
DescriptionSimple starter project for a multiplayer game using authoritative server arhitecture made with Colyseus and Babylon.js NullEngine. Starter includes a simple scene where players can move freely and a lobby.
- forum username: gryff
TitlePopulate a terrain with custom trees
Keywordsterrain, trees, vegetation
DescriptionQuick & efficient tutorial about populate terrain with custom trees and vegetation, using Blender particle system (logic remains the same between softwares)
- social networks: GitHub
KeywordsTypeScript, Babylon, Physics, WebXR, Playground
DescriptionA list of all the best Babylon.js tutorials, articles, playgrounds, projects, and open-source games. New submissions welcome.