
This page will walk you through the 3D Commerce Viewer Certification Program, what it is, and how to get a certified viewer version based on the Babylon.js engine.

## 3D Commerce Viewer Certification Program

3D visualization technologies, initially developed for gaming and visual effects, are beginning to transform online retail experiences, advertising, and even physical retail experiences with AR/VR. 3D Commerce is a standardization working group from [**Khronos Group**](https://www.khronos.org/) aiming at removing the barriers to deploying 3D in e-commerce. 

The Viewer Certification Program enables 3D viewers across the industry to demonstrate that they can accurately and consistently display 3D products, clearing the way for reliable 3D and AR-powered shopping across multiple platforms and devices.

![3D Viewer Certification Program Overview (source: Khronos Web site)](/img/how_to/3D-commerce-certif/2021-3dcommerce-certification-overview.jpg)

This program is still in its early days and as a member of this working group, the Babylon.js Team is fully engaged in helping to develop and support its adoption. More info on the [**3D Commerce Web site**](https://www.khronos.org/3dcommerce/).

## Babylon.js Sandbox - certified version

A special version of the [**Babylon.js Sandbox**](https://sandbox.babylonjs.com) has been certified because a couple parameters have to be set differently than the default engine values (which cannot be changed for backward compatibility reasons):
- Specular over alpha has to be turned off (right side of the picture below). It was being used to render glass before the apparition of dedicated glTF extensions such as transmission and volume.

![Specular over alpha turned-on (left) and off (right)](/img/how_to/3D-commerce-certif/specular-over-alpha.jpg)
- sRGB Buffer has to be turned on (right side of the picture below). It has been deactived by default for performance reasons due to browser [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1256340).

![sRGB Buffer turned-on (left) and off (right)](/img/how_to/3D-commerce-certif/sRGB-buffer.jpg)

This 3D Commerce certified Babylon.js Sandbox is accessible here: [**https://3dcommerce.babylonjs.com**](https://3dcommerce.babylonjs.com)

## Certified viewer version based on Babylon.js engine

If you have an existing viewer (or are developing a viewer) based on Babylon.js engine, you can get a certified viewer version by:

- Setting a flag in the glTF loader for Specular over alpha:


```javascript
SceneLoader.OnPluginActivatedObservable.add((plugin) => {
    if (plugin.name === "gltf") {
        const loader = plugin as GLTFFileLoader;
        loader.transparencyAsCoverage = true;
    }
});
```

- Setting a flag at the creation of the engine for sRGB:
```javascript
const engine = new Engine(canvas, antialias, { 
    forceSRGBBufferSupportState: true
});
```

The Certification program will likely evolve with the glTF format and new extensions being taken into consideration. If some changes are not backward compatible, we'll make sure to continue documenting them on this page.



This tutorial:

- Is for you, if you have no or limited experience with web development or servers in general.
- Will show you how to setup and start a simple, local, NodeJs web server for your BabylonJs application.
- Is primarily focused on Windows.

## Nodejs & NPM

If you already have NodeJs and NPM installed, skip to **Sample** section.

Download the latest (LTS) Nodejs installer from https://nodejs.org/en/download/

Run the installer and follow the NodeJs setup Wizard. The default settings are fine for our use.

NPM is included in this installation.

## Sample

Having installed NodeJs and NPM, we're now ready for our server code.

- Create a folder for your project

In this tutorial, we'll use **C:\babylon**

- Download the sample server [master.zip](https://github.com/aWeirdo/babylonJs_sample_server/archive/master.zip)
- Extract the .zip file content to C:\babylon

Your **C:\babylon** folder should now look something like this:

```shell
C:\babylon\public\
C:\babylon\public\index.html
C:\babylon\public\babylonScene.js

C:\babylon\package.json
C:\babylon\readme.md
C:\babylon\server.js
C:\babylon\Windows_NPM_INSTALL.BAT
C:\babylon\Windows_START.BAT

```

**On windows**

- Navigate your file explorer to C:\babylon
- Double-click **Windows_NPM_INSTALL.BAT**
- Wait for BAT window to finish running and close itself. This executes `npm install --save`

A new folder "node_modules" should be created.

- Double-click **Windows_START.BAT**. This executes `node server.js`
- A new BAT window should open:

```shell
C:\babylon>node server.js
Server is listening on port 80
```

- Your server should now be running. Note: Closing this window will shutdown the nodeJs server again.
- In your browser, navigate to http://localhost/
- If the BAT immidiately closes again, please re-check previous steps were done correctly.
- To view errors, in a CMD or PowerShell window run `C:\babylon> node server.js`

**Other OS**

- See NpmJs.org and NodeJs.org documentations for instructions.
- Execute "npm install --save" on C:\babylon
- Execute "node server.js" on C:\babylon

_If anyone wish to expand this section, feel free to PR_

## Public Folder

In the Public folder you'll find a sample scene consisting of a index.html and a babylonScene.js file.

The browser's access is restricted to this folder and it's files & sub-folders.

You're now ready to start your project.



To create the minified version of Babylon.js you just have to
use [gulp](https://github.com/BabylonJS/Babylon.js/tree/master/Tools/Gulp).

But you may want to work with all basic files. In this case, please download the code and use the following include (be aware to have the babylon folder at the root of your site). If you want to use your own shaders in this case, you just have to reference them with a "./" at beginning):

```html
<script src="tools/DevLoader/BabylonLoader.js"></script>
```

And add this command to your script:

```javascript
BABLONDEVTOOLS.Loader.load(function () {
  // Your code using Babylon.
});
```

This will take care of referencing all the required files and launch your code once ready.

If you need any script files to load after Babylon, you can require them:

```javascript
BABLONDEVTOOLS.Loader.require("index.js").load();
```

You can also control the root of your Babylon Folder:

```javascript
BABLONDEVTOOLS.Loader.root("../../").require("index.js").require("other.js").load();
```

When working with all files, you can provide the following information to the engine:

- BABYLON.Engine.CodeRepository: By default, this value points to "/src/"
- BABYLON.Engine.ShadersRepository: By default, this value points to "/src/Shaders/"



Starting with Babylon.js v3.1, we introduced the NullEngine which is a version of the main Babylon.js engine but with no need for a WebGL capable device.

The NullEngine will not produce any rendering and thus can be used in a Node.js / server side environment.

It can be used to:
- Run tests
- Run a server side version of your application / game
- Use specific Babylon.js services (like glTF loaders for instance)

## General

To use a headless version of Babylon.js, just run:

```
var engine = new BABYLON.NullEngine();
var scene = new BABYLON.Scene(engine);
```

If you want to use it in a Node.js environment, you may need to add some additional resources (like support for xhr):

```
var BABYLON = require("../../dist/preview release/babylon.max");
var LOADERS = require("../../dist/preview release/loaders/babylonjs.loaders");
global.XMLHttpRequest = require("xhr2").XMLHttpRequest;

var engine = new BABYLON.NullEngine();
var scene = new BABYLON.Scene(engine);

var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);

BABYLON.SceneLoader.ImportMesh("", "https://playground.babylonjs.com/scenes/", "skull.babylon", scene, function (newMeshes) {
    camera.target = newMeshes[0];

    console.log("Meshes loaded from babylon file: " + newMeshes.length);
    for (let index = 0; index < newMeshes.length; index++) {
        console.log(newMeshes[index].toString());
    }

    BABYLON.SceneLoader.ImportMesh("", "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/", "DamagedHelmet.gltf", scene, function (meshes) {
        console.log("Meshes loaded from gltf file: " + meshes.length);
        for (let index = 0; index < meshes.length; index++) {
            console.log(meshes[index].toString());
        }
    });

    console.log("render started")
    engine.runRenderLoop(function() {
        scene.render();
    })
});

```

## Configuration

You can specifiy some options in the `NullEngine` constructor:

```
var engine = new BABYLON.NullEngine({
    renderWidth: 512,
    renderHeight: 256,
    textureSize: 512
});
```

With `renderWidth` and `renderHeight` you can define the size of the virtual canvas used to simulate the render surface.
With `textureSize`, you can define the size of all textures (which will be all black) used by the NullEngine.

## Troubleshooting

While the goal of the NullEngine is to completely replace the Engine class, some features cannot be used server side:
* `camera.attachControl` cannot be used as it requires an HTML element
* `DynamicTexture` cannot be used as it relies on HTML canvas

Furthermore as we already mentioned earlier, you need to provide an implementation of the `XMLHttpRequest` class.



# Visual Studio Code

VSCode is one of several integrated development environments that can be used to develop projects using Babylon.js. It has the advantage of Git integration built-in and a plugin to display .babylon files.

You can install VSCode from their site: [https://code.visualstudio.com/](https://code.visualstudio.com/)

## Useful plugins

Once installed, a few plugins will help you have the best experience. You can search for them in the extension tab (Ctrl+Shift+d):

1. [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) as well as the chrome browser
2. [Shader languages support for VSCode](https://marketplace.visualstudio.com/items?itemName=slevesque.shader) for syntax highlighting and autocompletion in glsl shader
3. [Babylon.js file viewer](https://marketplace.visualstudio.com/items?itemName=julianchen.babylon-js-viewer) can be used to display the content of a .babylon file directly in VSCode. It can be useful if you want to quickly check if your artist did a good job with an object and their names :)

## Keybindings setup

Finally, I would recommend adding a few shortcuts to your environment. Follow the [guide](https://code.visualstudio.com/docs/getstarted/keybindings#_custom-keybindings-for-refactorings):

1.  To configure keyboard shortcuts the way you want, go to the menu under File > Preferences > Keyboard Shortcuts. (Code > Preferences > Keyboard Shortcuts on Mac)
2.  Click ```Open Keyboard Shortcuts (JSON)``` on the right side and add:

```
// Place your key bindings in this file to overwrite the defaults
[
    { "key": "ctrl+shift+alt+s", "command": "workbench.action.files.saveFiles" },
    { "key": "ctrl+shift+alt+k", "command": "workbench.action.tasks.terminate" },
    { "key": "ctrl+shift+alt+t", "command": "workbench.action.tasks.test" },
    { "key": "ctrl+shift+alt+l", "command": "workbench.action.tasks.showLog" },
    { "key": "ctrl+shift+alt+r", "command": "workbench.action.tasks.runTask" }
]
```

This will make the main commands quicker to access. Do not hesitate to adapt the bindings to your preferences.

![keybindings](/img/how_to/howToStart/keybindings.png)

## Debugging code

Also, in VSCode there is a `Debug` tab on the menu. To use it with Babylon.js you need to install an extension, find out more from [Debugger for Chrome](https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code).

With the test task running from the VSCode debug tab, chose the section you want to debug and launch the debugger.
![debug](/img/how_to/howToStart/debug.png)

Debug session will debug all the Typescript and JavaScript in Chrome and stop on your breakpoints set up in files in VSCode. It debugs all the code from src, materialsLibrary, procceduralTexturesLibrary, postprocessLibrary, etc.

_Hint_: If another chrome session is already running on remote debug on port 9222 the debugger will fail to attach as the port is already open. You will have to close the other remote debug first.



## Introduction

Starting with v3.0, Babylon.js supports rendering using WebGL1 and WebGL2 contexts.
The support is transparent for developers. By default the engine tries to get a WebGL2 context. If none is available then a WebGL1 one is retrieved.

You can test which version of WebGL is enabled with: `engine.webGLVersion` property.

## Shaders

When WebGL2 is enabled, the shaders are automatically converted to GLSL v3.0. Babylon.js will then automatically take advantage of extended instruction/uniform counts.

If you are using custom shaders, the best idea would be to provide GLSL v2.0 shaders. This way your code will work on both contexts.
You can obviously provide only v3.0 shaders but in this case your code will only work when WebGL2 is enabled.

## Supported features

You can find here the list of supported features and the backward compatibility options (when available)

| Feature                      | Description                                                                                                                                                                                                                                        | WebGL1 compatibility                                                                                          | Demo                                                                                                             | More info                                                                |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| Depth Frag                   | Used to compute logarithmic depth buffer                                                                                                                                                                                                           | Yes through an [extension](https://www.khronos.org/registry/webgl/extensions/EXT_frag_depth/)                 | <Playground id="#1180R5#15" title="Depth Frag" description="Depth Frag"/>                               | [Documentation](/features/featuresDeepDive/materials/advanced/logarithmicDepthBuffer) |
| Multisample render targets   | Rendertarget textures can be multisampled to get antialiasing effect                                                                                                                                                                               | No. Has no effect on WebGL1 context                                                                           | <Playground id="#12MKMN" title="Multisample Render Targets" description="Multisample render targets."/> | [See below](/setup/support/webGL2#multisample-render-targets)          |
| Standard derivatives         | Standard derivatites are used in Babylon.js to help compute realtime bump                                                                                                                                                                          | Yes through an [extension](https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives)        | [Demo](https://www.babylonjs.com/Demos/Bump/)                                                                    | [Documentation](/features/featuresDeepDive/materials/using/moreMaterials)             |
| Texture LOD                  | Used by PRBMaterial to simulate microsurface                                                                                                                                                                                                       | Yes through an [extension](https://www.khronos.org/registry/OpenGL/extensions/EXT/EXT_shader_texture_lod.txt) | [Demo](/features/featuresDeepDive/materials/using/HDREnvironment)                                                             | [Documentation](/features/featuresDeepDive/materials/using/introToPBR)                |
| Vertex array objects (VAO)   | A Vertex Array Object (or VAO) is an object that describes how the vertex attributes are stored in a Vertex Buffer Object (or VBO)                                                                                                                 | Yes through an [extension](https://www.khronos.org/registry/webgl/extensions/OES_vertex_array_object/)        | N/A. Every rendering is done with VAO by default                                                                 | [See below](/setup/support/webGL2#vertex-array-objects)                |
| Uniform buffer objects (UBO) | An uniform buffer object (or UBO) let you specify a group of uniforms from a buffer                                                                                                                                                                | No. Uniforms are handled independently on WebGL1 context                                                      | N/A. Materials supporting UBO automatically uses them                                                            | [See below](/setup/support/webGL2#uniform-buffer-objects)              |
| Multiple Render Target (MRT) | Several Render Targets can be rendered in the same draw call.                                                                                                                                                                                      | Yes through an [extension](https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers)              | <Playground id="#NZ6P07" title="Multiple Render Target" description="Multiple Render Target"/>          | [See below](/setup/support/webGL2#multiple-render-target)              |
| Occlusion Queries            | Occlusion queries detect whether a Mesh is visible in the current scene or not                                                                                                                                                                     | Yes through an [extension](https://www.khronos.org/opengl/wiki/Query_Object#Occlusion_queries)                | <Playground id="#QDAZ80#3" title="Occlusion Queries" description="Occlusion Queries"/>                  | [See below](/setup/support/webGL2#occlusion-queries)                   |
| 3D Textures                  | 3D textures are textures with a 3rd dimension. You can see them as multiple 2D textures where every texture is a slice in the 3d texture.                                                                                                          | No. Cannot be created in WebGL1                                                                               | This feature will automatically be used when possible.                                                           | [See below](/setup/support/webGL2#3d-textures)                         |
| 2D Array Textures            | 2D array textures are very similar to 3D textures but are designed for constructing a texture atlas instead of a volumetric texture.                                                                                                               | No. Cannot be created in WebGL1                                                                               | <Playground id="#XEVUD9" title="2D Array Textures" description="2D Array Textures"/>                    | [See below](/setup/support/webGL2#2d-array-textures)                   |
| Power of two textures        | In the past, to achieve the best performance and higher quality texture rendering, images with dimensions that are a power of two were required. With support for WebGL2 this is no longer the case, any sized texture will be rendered optimally. | Yes, however Babylon will resize textures to be a power of two causing a hit to performance                   | N/A. This is done by default                                                                                     | [See below](/setup/support/webGL2#power-of-two-textures)               |
| Transform feedback buffer    | Transform feedback buffer can be used to update vertex buffers from GPU. Babylon.js uses it to implement GPU particles                                                                                                                             | No. Not supported on WebGL1                                                                                   | <Playground id="#PU4WYI" title="Power Of Two Textures" description="Power Of Two Textures"/>            | [See particles documentation](/features/featuresDeepDive/particles/particle_system/particle_system_intro#gpu-particles)       |
| Shadow Samplers              | Shadow samplers are used to enable PCF depth comparison on the hardware. Babylon.js uses it to implement PCF and PCSS shadows.                                                                                                                     | No. Not supported on WebGL1 (shadows fall back to poisson sampling)                                           | <Playground id="#ZT8BKT#57" title="Shadow Samplers" description="Shadow Samplers"/>                      | [See shadows documentation](/features/featuresDeepDive/lights/shadows)                         |
| More precise shadows         | Shadow maps can now use 32 bits depth buffers improving by a large scale the precision of the shadows.                                                                                                                                             | No. Not supported on WebGL1 (shadows precision will fall back to 16 bits)                                     | <Playground id="" title="#ZT8BKT#57More Precise Shadows" description="More Precise Shadows"/>            | [See shadows documentation](/features/featuresDeepDive/lights/shadows)                         |

## Multisample render targets

By default render targets (like mirrors for instance) are created without support for multisampling. To turn it on, just define a value for `renderTarget.samples` > 1.
On WebGL1 context, this will do nothing. On WebGL2 context, this will enable multisampling (more samples imply better antialiasing but a slower rendering).

Here is an example of a mirror (512x512) with and without multisampling:

| No MSAA (1 sample)                 | MSAA (8 samples)                 |
| ---------------------------------- | -------------------------------- |
| ![Title](/img/features/nomsaa.JPG) | ![Title](/img/features/msaa.JPG) |

## Vertex array objects

When possible (either on WebGL2 context or when extension is available on WebGL1 context), Babylon.js will use VAO to control rendering. VAO are a kind of geometry objects. Instead of sending all attributes and buffers used by a mesh (one for position, one for normal, one for indices, one for texture coordinates, etc..), you can build a VAO which will keep track of all attributes / buffers used.

At rendering time, you just have to define one VAO instead of multiple VBO (vertex buffer object).

You can find more details on [Tojicode's blog](http://blog.tojicode.com/2012/10/oesvertexarrayobject-extension.html).

## Uniform buffer objets

On WebGL1 context all uniforms are sent to GPU independently. This means that if your shader uses 16 matrices, you will call WebGL API 16 times to update all matrices before using your shader.

On WebGL2 context, you can use a UBO to set the values in a typed array all inside JavaScript. This means that it's much faster. When all the values are set you can then send them to the GPU with only one call.

You can find more details on [WebGL 2 specification](https://www.khronos.org/registry/webgl/specs/latest/2.0/#3.7.16)

## Multiple Render Target

On former WebGL1, one draw call meant 1 target texture. Now you can bind several target textures to a shader and specify inside the fragment shader the colors you want to put on each texture. Essentially it saves you a lot of CPU time and you can achieve advanced effects like [Deferred Shading](https://fr.wikipedia.org/wiki/Deferred_Shading).

In Babylon.js, our first use of this technique is to render a geometry buffer of the scene.

## Occlusion queries

Occlusion queries detect whether a Mesh is visible in the current scene or not, and based on that the Mesh get drawn or not. Occlusion queries is useful when you have an expensive object on the scene and you want to make sure that it will get drawn if it is visible to the camera and it is not behind any opaque object. BabylonJs provides an implementation for Occlusion queries using property occlusionType in AbstractMesh Class

[Babylon.js Occlusion Queries Feature](/features/featuresDeepDive/occlusionQueries)

[WebGL 2 Occlusion Queries](https://www.khronos.org/opengl/wiki/Query_Object#Occlusion_queries)

## 3D textures

3D textures are mostly used for volumetric effects like color grading, fire, smoke, etc. WebGL 2 support for 3D textures is as good as that for 2D textures.

So far Babylon.js will use them for color grading texture: <Playground id="#17VHYI#2" title="3D Textures Example" description="Simple example of using 3D textures."/>

## 2D array textures

2D array textures allow you to pass a texture atlas to a custom shader. This could be used whenever you have multiple, distinct, 2D textures that you want to blend or switch between inside your shader. For example tiles, terrain splatting or frames of an animation. Using array textures ensures that distinct layers are sampled _as if_ they were separate textures, so there will be no bleeding between different sections of the atlas.

Usage is very similar to 3D textures: create a `RawTexture2DArray`, use `setTexture` on the shader material, and use a sampler of type `sampler2DArray`. Sample using `texture(yourSampler, vec3(u,v,layerIndex))` where `layerIndex` is a 0-based index into the array.

More information is available on the [Khronos wiki](https://khronos.org/opengl/wiki/Array_Texture).

<Playground id="#XEVUD9" title="2D Array Textures Example" description="2D Array Textures Example"/>

## Power of two textures

On WebGL1 context, all textures are resized to a power of two to produce the best quality. This resize may impact performance.

On WebGL2 context, no resize is required and any size texture will be rendered with the best quality.

You can find more details on [WebGL 2 specification](https://www.khronos.org/registry/webgl/specs/latest/2.0/#4.1.3)



## Introduction
Following the specification from the [GPU for the Web Working Group](https://github.com/gpuweb/gpuweb), we have begun the journey to support this new technology. Our plan is to deliver support with WebGPU and WebGL feature parity in Babylon 5.

![Inspector](/img/extensions/WebGPU.png)

### Benefits of WebGPU
The promise behind [WebGPU](https://developer.chrome.com/en/docs/web-platform/webgpu/#what) is an exceptionally faster API provided through lower level control to system graphics resources from JavaScript. We hope to bring these extra performance improvements to developers in order to create even higher quality 3D web games and experiences through a tool they are already familiar with: Babylon.js.

Some features WebGPU brings to the table are:
* Compute shaders
* Ray tracing ([in-progress](https://github.com/gpuweb/gpuweb/issues/535))
* Improved performance across the board
* and more...

## Progress

See the [dedicated progress page](/setup/support/webGPU/webGPUStatus).

You can also follow our progress on out [GitHub dedicated issue](https://github.com/BabylonJS/Babylon.js/issues/6443).

The current implementation of WebGPU is now merged in the main branch of the Babylon.js [GitHub repository](https://github.com/BabylonJS/Babylon.js).

We are putting in a big effort alongside our next release to implement full support. Every contribution is more than welcome, so feel free to create a PR if you are interested in contributing to the future of high performance game development on the web.

## Potential Issues
Even if we are now far into the development process, we are still subject to potential changes as well as specification uncertainties. We will handle these changes one at a time but as a result we may have to adjust the release schedule accordingly.

We have the full support from the amazing teams implementing the WebGPU into the browsers, so we can work together as needed to make development smoother for all.

## Migration of Existing Games and Apps
As backwards compatibility is one of our pillars, the only difference we wish to have is with the engine initialization which needs to be asynchronous:

```javascript
const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();
```

## Will WebGL still be supported?
Yes! Support for WebGL and WebGPU will be maintained side by side for the foreseeable future.

## Testing WebGPU
You can refer to [this page](https://github.com/gpuweb/gpuweb/wiki/Implementation-Status) for detailed information on browser support.

Assuming you're using a browser that supports WebGPU, you can try it out yourself in the [Playground](https://playground.babylonjs.com/) 

![WebGPU](/img/extensions/webGPUPlayground.jpg)

Follow the status from the dedicated [Chrome Status Platform Page](https://www.chromestatus.com/feature/6213121689518080).

All demo code is available on [Github](https://github.com/BabylonJS/Website/tree/master/build/Demos/WebGPU), so you can compare both the WebGL and WebGPU versions and take notice that there are currently no differences beside initialization. We will try to keep it this way. :-)


## Customize Your Build

The Workloads that you might have known are gone in 4.0.0 in favor of [ES6 packages](/setup/frameworkPackages/npmSupport#es6). You do not need anymore to customize the output of the build as you can rely on [tree shaking](https://webpack.js.org/guides/tree-shaking/) on our npm packages externally.



# Developing With and For Babylon.js

For those of you who want to know more about the organization and structure of Babylon.js, in order to either use it to develop well structured projects of your own or to make contributions to it, you have come to the right place.  Here you will find where you can obtain Babylon.js in full or just the modules you need to import into you JavaScript or Typescript application.

Even the best developers need help from time to time and the Babylon.js forum is there to help. To make the best use of the forum check out the first page of this section.

Contributions can come in many forms. Answering question on the forum is a useful contribution. Others may spot spelling errors in the documentation or perhaps ways to improve it. Potential contributors to Babylon.js can come from many different backgrounds. For some of you version controllers, repositories, package managers and task runners are second nature and all you need to know are the requirements set by the Babylon.js core team for a pull-request to be accepted. For other of us, perhaps just wanting to explore the world of 3D, they can start out as a series of confusing hurdles. So this section will contain details that many of you can ignore as obvious. For others those details may be the difference between making a contribution or not.


Developing With and For Babylon.js

Coming next

3D Commerce Certified Viewer

Learn how to get a 3D Commerce certified viewer version based on the Babylon.js engine.

A Local Webserver for Babylon.js

A simple local webserver for running Babylon.js.

Workloads (legacy)

Learn about the legacy workload system in Babylon.js.

Using Visual Studio Code (VSCode)

Learn how to use the popular oss IDE VSCode for Babylon.js development.

The .babylon File Format

Dive deep into the inner workings of the .babylon file format.

Creating The Minified Version of Babylon.js

Learn how to create the minified version of Babylon.js.

WebGL2 Support

Dive into understanding the full scope of support for WebGL2 in Babylon.js.

WebGPU Support

Dive into understanding the full scope of support for WebGPU in Babylon.js.

Running Babylon.js On A Server

Learn how to run Babylon.js on a server.