Offsite Tutorials
Introduction
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.
Anyone who wrote a tutorial is welcome on this page, do not hesitate to PR in Github or notify relevant links through forum or Twitter for example.
David Catuhe
- website: http://eternalcoding.com
- forum username: Deltakosh
- social networks: Twitter, Github, Linkedin
| Title | Keywords | Description |
|---|---|---|
Title Open-Sourcing the Docs | Keywords Documentation, Community | Description Deltakosh speaks about core-team documentation philosophies, particularly, community involvement. |
Title Our Move to TypeScript | Keywords TypeScript, Source | Description Here, Deltakosh tells of the thought and activities behind the move from plain JavaScript... to TypeScript. |
Title All About Shaders | Keywords Shaders, Vertex Shader, Fragment Shader, GLSL, ShaderMaterial, CYOS | Description 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. |
Title Blender -> Babylon Exporting | Keywords Blender, Export, Exporter | Description Blender 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. |
Title Understanding Device Orientation | Keywords DeviceOrientation, EventListener | Description 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. |
Title Physics in WebGL Games | Keywords CannonJS, OimoJS, Physics | Description Although this is an older document, it still speaks pertinently about the wonderful world of WebGL physics engine integration. |
Title Creating a Convincing World | Keywords Ground, Water, Skybox, Shadows | Description 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. |
Title Using Multi-Materials | Keywords Materials, SubMaterials, SubMeshes | Description A short introduction to the complex world of multi-materials. Deltakosh shows that it need not be complex whatsoever. |
Title Lights, Lights, Lights | Keywords Light | Description 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. |
Title Unleash the StandardMaterial | Keywords StandardMaterial, Material, Texture | Description Basic StandardMaterial usage/features are the theme in this introductory tutorial. An easy-read doc, covering the basics. |
Title Babylon.js - The Early Days | Keywords Babylon | Description 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. |
David Rousset
- website: https://www.davrous.com
- social networkfs: Twitter
| Title | Keywords | Description |
|---|---|---|
Title Discovering Sponza | Keywords Sponza, WebAudio, IndexedDB, Debug, Cross-Platform | Description David "Davrous" Rousset chronicles his and his team's activities on the innovative Sponza demo, created with Babylon.js. |
Title Collisions & Physics - Oimo.js | Keywords Oimo, Physics, Collision, Collider | Description Davrous continues his great tutorial series with a thorough tutorial about Oimo.js physics, and collider operations. |
Title Babylon.js Main Site - Move to Azure | Keywords Babylon | Description Here, Davrous talks about why the move was a wise idea, and explains the steps involved. |
Title QR-Code Maze - Behind the Scene | Keywords Maze, Game | Description 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. |
Title IndexedDB - Assets Management | Keywords IndexedDB, Assets, Database, Blob | Description 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. |
Title Room-Scale VR with Vive | Keywords Vive, Room Scale, VR, HTC | Description Virtual Reality (VR) is hotter than ever, and David Rousset feels the heat. Davrous shows that the future... is here, now. |
Title Touchy Software Drum Machine | Keywords WebAudio, SVG, Multi-Touches, Synthesis | Description 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. |
Title The Ultimate 3D Tutorial | Keywords 3D, Software 3D, SoftEngine, | Description 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! |
Julian Chenard
- website: http://www.pixelcodr.com
- social networks: Twitter
| Title | Keywords | Description |
|---|---|---|
Title Using VertexData/VertexBuffer | Keywords VertexData, VertexBuffer, Indices, Vertices, Normals | Description 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. |
Title Contributing to Babylon.js | Keywords Contribute, GitHub | Description 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. |
Title Toad Attack - The Making-Of | Keywords Game | Description Here is a fantastic two-part "Basics" tutorial about the making of "Toad Attack", one of Temechon's cool games. Good stuff! |
Title All About ActionManagers | Keywords ActionManager, Actions, Trigger, Predicate | Description 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 How_To in one! |
Title Old School Oimo Physics | Keywords Physics, Oimo, Impostor | Description 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. |
Title More Oimo - Impulses & Velocities | Keywords Physics, Oimo, AngularVelocity, LinearVelocity, ApplyImpulse | Description 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! |
Raanan Weber
- website: https://blog.raananweber.com/
- forum username: RaananW
- social networks: Twitter
| Title | Keywords | Description |
|---|---|---|
Title Everything Babylon | Keywords Babylon | Description 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". |
Title Oimo Physics Car | Keywords Car, Oimo, Physics, Joint, Wheel | Description 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! |
Title CannonJS Cloth Simulation | Keywords Cannon, Physics, Cloth, MeshImpostor | Description 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! |
Title Babylon Bowling - A Web Game | Keywords Visual Studio, Game, NuGet | Description 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. :) |
Title An Introduction to Scene Optimization in Babylon.js | Keywords Optimization | Description 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. |
Title Scene Optimization Part 1 - The Mesh | Keywords Optimization | Description 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. |
Title Scene Optimization Part 2 - The Materials | Keywords Optimization | Description Coming soon! |
Title Scene Optimization Part 3 - The Effects | Keywords Optimization | Description Coming soon! |
Title Integrating Travis-CI andBabylon.js | Keywords Travis, GitHub, Integration, NodeJS, NPM, Gulp, Grunt, TypeScript | Description 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. |
Julien Moreau-Mathis
- website: https://medium.com/@Luaacro
- social networks: Twitter
| Title | Keywords | Description |
|---|---|---|
Title Babylon.js Projects Page | Keywords Actions Builder, Editor, Electron | Description Julien 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. |
Andy Beaulieu
- website: http://www.spritehand.com/
- social networks: Twitter
| Title | Keywords | Description |
|---|---|---|
Title Babylon.js: Physics and Character Animation | Keywords Physics | Description Andy Beaulieu does some substantial early work with adding physics to player characters. Thanks for sharing it, Andy! |
Title Sharing 3D Scans in WebGL usingBabylon.js | Keywords Scan | Description Here, Andy takes a trip down Scanner's Lane, and brings us along for the ride. |
Title Bing 3D Maps using WebGL andBabylon.js | Keywords Map, HeightMap, Bing | Description In 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. |
Title Fluid Simulation usingBabylon.js and LiquidFun | Keywords Fluid, SoftBody, LiquiFun | Description Babylon.js 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. |
Célian Garcia
- social networks: Github
| Title | Keywords | Description |
|---|---|---|
Title Querying for Terrain Data | Keywords VertexData, PostgreSQL, PostGIS, SQL | Description 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. |
Title Creating Tiled Ground in Babylon.js | Keywords Terrain, HeightMap, Tile | Description 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 Working with Babylon.js Terrains | Keywords Terrain, Textures | Description Kostar111 continues his research into terrain generation, in this 3-part translated tutorial. |
Rahman Nasimi Asl
- forum username: nasimiasl
| Title | Keywords | Description |
|---|---|---|
Title ShaderBuilder | Keywords Shader, Fluent | Description 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. |
Title YouTube Tutorials | Keywords GeometryBuilder, Bandicam | Description 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! |
Pryme8
| Title | Keywords | Description |
|---|---|---|
Title neatFLAX - Tutorial Center | Keywords snippets | Description Many excellent How_To are located here. |
Mad Dog Tutorials
| Title | Keywords | Description |
|---|---|---|
Title Youtube tutorials playlist | Keywords game, basic | Description Five substantialBabylon.js video tutorials |
Serapth
- website: https://gamefromscratch.com
| Title | Keywords | Description |
|---|---|---|
Title BabylonJS tutorial series | Keywords beginner, basic | Description Assorted beginner-level text and video tutorials |
Vincent Lamy
- website: https://www.nothing-is-3d.com/
- forum username: Vinc3r
- social networks: Mastodon, Github
| Title | Keywords | Description |
|---|---|---|
Title From Blender to Babylon.js | Keywords Lightmap, Blender, Export | Description Help users to use their precomputed lighting from Blender toBabylon.js (FR version available). |
Title Use a local webserver | Keywords development, testing, server | Description Help users uncomfortable with web dev environment to quickly be able to launch a local webserver instead of using an online FTP (FR version available). |
Andrija Perusic
- forum username: Andrija_Perusic
- social networks: Github, Linkedin
| Title | Keywords | Description |
|---|---|---|
Title Realtime multiplayer game with NullEngine starter project | Keywords React, Colyseus, Typescript, NullEngine, boilerplate, tutorial | Description Simple 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. |
gryff
- forum username: gryff
| Title | Keywords | Description |
|---|---|---|
Title Populate a terrain with custom trees | Keywords terrain, trees, vegetation | Description Quick & efficient tutorial about populate terrain with custom trees and vegetation, using Blender particle system (logic remains the same between softwares) |
Symbitic
- social networks: GitHub
| Title | Keywords | Description |
|---|---|---|
Title Awesome Babylon.js | Keywords TypeScript, Babylon, Physics, WebXR, Playground | Description A list of all the best Babylon.js tutorials, articles, playgrounds, projects, and open-source games. New submissions welcome. |