Remove deprecated SceneLoader calls from the docs

content/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_VRM.md

@@ -72,7 +72,7 @@ import * as BABYLON from "@babylonjs/core";
 import "babylon-vrm-loader";
 
 // vrmFile is File object retrieved by <input type="file">.
-const scene = await BABYLON.SceneLoader.LoadAsync("file:", vrmFile, engine);
+const scene = await BABYLON.LoadSceneAsync("file:" + vrmFile, engine);
 const vrmManager = scene.metadata.vrmManagers[0];
 
 // Update secondary animation

content/communityExtensions/editor/workspace/renamingScene.md

@@ -1,6 +1,6 @@
 ---
 title: Renaming a scene
-image: 
+image:
 description: Understanding how to rename a scene
 keywords: editor, workspace, project, scene
 further-reading:
@@ -13,29 +13,33 @@ video-content:
 To rename a scene, just go to the `Assets Browser` panel and rename the scene file by double-clicking its name.
 
 Once accepted, the following folders will be renamed:
-- *`workspacePath`/projects/`oldname`* ->  *`workspacePath`/projects/`newname`* 
-- *`workspacePath`/scenes/`oldname`* -> *`workspacePath`/scenes/`newname`*
+
+- _`workspacePath`/projects/`oldname`_ -> _`workspacePath`/projects/`newname`_
+- _`workspacePath`/scenes/`oldname`_ -> _`workspacePath`/scenes/`newname`_
 
 Scene names must be unique. In case the folders already exists (in other words, if the scene already exists)
 then the operation is aborted.
 
 ## Renaming paths in loaders in sources
+
 Paths to scenes being loaded in the code must have their paths updated.
 
 For example:
+
 ```typescript
 const rootUrl = "./scenes/oldName/";
 
-SceneLoader.Append(rootUrl, "scene.babylon", this.scene, () => {
-	...
+AppendSceneAsync(rootUrl + "scene.babylon", this.scene, () => {
+  // ...
 });
 ```
 
 should be renamed to:
+
 ```typescript
 const rootUrl = "./scenes/newName/";
 
-SceneLoader.Append(rootUrl, "scene.babylon", this.scene, () => {
-	...
+AppendSceneAsync(rootUrl + "scene.babylon", this.scene, () => {
+  // ...
 });
-```
+```

content/communityExtensions/mmdLoader.md

@@ -79,10 +79,10 @@ await new Promise((resolve) => {
 ```typescript
 import "babylon-mmd/esm/Loader/pmxLoader"; // side effect import
 
-const mmdMesh = await SceneLoader.ImportMeshAsync(undefined, "your_model_path.pmx", undefined, scene).then((result) => result.meshes[0]);
+const mmdMesh = await ImportMeshAsync("your_model_path.pmx", scene).then((result) => result.meshes[0]);
 ```
 
-load PMX model by `SceneLoader.ImportMeshAsync` always returns a 1-length array, so you can get the mesh by `result.meshes[0]`.
+load PMX model by `ImportMeshAsync` always returns a 1-length array, so you can get the mesh by `result.meshes[0]`.
 
 ### Import VMD Motion
 

content/contribute/toBabylon/HowToContribute.md

@@ -724,7 +724,7 @@ This is an extended example of how to use the dev host to integrate GUI, Loaders
 import { canvas, engine } from "./index";
 import "@dev/loaders";
 import { Inspector } from "@dev/inspector";
-import { ArcRotateCamera, CubeTexture, Scene, SceneLoader } from "@dev/core";
+import { ArcRotateCamera, CubeTexture, Scene, AppendSceneAsync } from "@dev/core";
 import { AdvancedDynamicTexture, Button } from "@dev/gui";
 
 export const createScene = async function () {
@@ -734,7 +734,7 @@ export const createScene = async function () {
     scene.createDefaultSkybox(hdrTexture, true, 10000);
 
     // The first parameter can be used to specify which mesh to import. Here we import all meshes
-    SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/webp/", "webp.gltf", scene, function (_newMeshes) {
+    AppendSceneAsync("https://assets.babylonjs.com/meshes/webp/webp.gltf", scene).then((result) => {
         scene.activeCamera!.attachControl(canvas, false);
         // scene.activeCamera!.alpha += Math.PI; // camera +180°
         (scene.activeCamera as ArcRotateCamera).radius = 80;

content/features/featuresDeepDive/Exporters/Blender.md

@@ -185,19 +185,19 @@ In `sources`, we have our master scene, with only static objects (on the layer 1
 
 Once exported, you can see in `BJS/index.html` that we create our main scene using this `.babylon`: line 36
 
-```html
-BABYLON.SceneLoader.Load("", "01.master-static-scene.babylon", engine, function (scene) { });
+```javascript
+BABYLON.LoadSceneAsync("01.master-static-scene.babylon", engine).then(function (scene) {});
 ```
 
 Same way for out animated object in `sources/02.classic-animation.blend`: layer 1 is for our object, layer 6 is just for us to see the main scene in our _.blend_. _Export only selected layers_ is used to help us exporting only the first layer to babylon.
 
 Once exported, we can import our meshes inside the onSuccess of our Loader above. Check on `BJS/index.html`, line 64:
 
-```html
-BABYLON.SceneLoader.ImportMesh("", "", "02.classic-animation.babylon", scene, function (importedMeshes){ });
+```javascript
+BABYLON.ImportMeshAsync("02.classic-animation.babylon", scene).then(function (result) {});
 ```
 
-Now, you already have a basic scene with animations autoplaying in it.
+Now, you already have a basic scene with animations auto-playing in it.
 
 ### Armatures
 
@@ -259,7 +259,7 @@ Let's say you have exported your first scene. In this example we will use [blend
       const engine = new BABYLON.Engine(canvas, true);
 
       // here the doc for Load function: //doc.babylonjs.com/typedoc/classes/babylon.sceneloader#load
-      BABYLON.SceneLoader.Load("", "babylonJS_logo_v3.babylon", engine, function (scene) {
+      BABYLON.LoadSceneAsync("babylonJS_logo_v3.babylon", engine)then(function (scene) {
         //as this .babylon example hasn't camera in it, we have to create one
         const camera = new BABYLON.ArcRotateCamera("Camera", 1, 1, 4, BABYLON.Vector3.Zero(), scene);
         camera.attachControl(canvas, false);
@@ -286,5 +286,3 @@ Let's say you have exported your first scene. In this example we will use [blend
   - some browsers may not want loading the scene, for some security issues (e.g.: Chrome). In this case, you have to open the html file through a webserver (local or not), or try into another browser (e.g.: Firefox, Edge).
 
 ![blender babylon scene loaded in BJS](/img/exporters/blender/babylon/babylon-loaded.png)
-
-#### Animated object

content/features/featuresDeepDive/Exporters/Blender_to_glTF.md

@@ -82,7 +82,7 @@ Let's say you have exported [WaterBottle.glb](https://github.com/KhronosGroup/gl
       const engine = new BABYLON.Engine(canvas, true);
 
       // here the doc for Load function: //doc.babylonjs.com/api/classes/babylon.sceneloader#load
-      BABYLON.SceneLoader.Load("", "WaterBottle.glb", engine, function (scene) {
+      BABYLON.LoadSceneAsync("WaterBottle.glb", engine).then(function (scene) {
         scene.createDefaultCamera(true, true, true);
         scene.createDefaultEnvironment({
           createGround: false,

content/features/featuresDeepDive/animation/animatedCharacter.md

@@ -70,8 +70,9 @@ The result is exported as a .GLB file and the animation information can be seen
 The model can be loaded using the [**ImportMesh**](/typedoc/classes/babylon.sceneloader#importmesh) method of the SceneLoader class and making sure to add the animationGroups parameter as it is used to get and play the animations.
 
 ```javascript
-BABYLON.SceneLoader.ImportMesh("", "https://assets.babylonjs.com/meshes/", "HVGirl.glb", scene, function (newMeshes, particleSystems, skeletons, animationGroups) {
-  const hero = newMeshes[0];
+// Load hero character and play animation
+BABYLON.ImportMeshAsync("https://assets.babylonjs.com/meshes/HVGirl.glb", scene).then(function (result) {
+  var hero = result.meshes[0];
 
   //Scale the model down
   hero.scaling.scaleInPlace(0.1);
@@ -87,7 +88,7 @@ BABYLON.SceneLoader.ImportMesh("", "https://assets.babylonjs.com/meshes/", "HVGi
 });
 ```
 
-<Playground id="#Z6SWJU#5" title="Load Model and Play Animation Group" description="Simple example of loading a gltf/glb asset and playing the animation groups tha come with it." image="/img/playgroundsAndNMEs/divingDeeperAnimatedCharacter1.jpg" isMain={true} category="Animation"/>
+<Playground id="#Z6SWJU#1144" title="Load Model and Play Animation Group" description="Simple example of loading a gltf/glb asset and playing the animation groups tha come with it." image="/img/playgroundsAndNMEs/divingDeeperAnimatedCharacter1.jpg" isMain={true} category="Animation"/>
 
 The names of the AnimationGroups can be found in the Sandbox via the Inspector, by loading the model and selecting the Animation Group in the Scene Explorer.
 

content/features/featuresDeepDive/animation/baked_texture_animations.md

@@ -22,7 +22,7 @@ The `VertexAnimationBaker` class generates a texture for you given the animation
 let baker = null,
   mesh = null;
 const animationRanges = [{ from: 1, to: 20, name: "My animation" }];
-BABYLON.SceneLoader.ImportMeshAsync("", "https://raw.githubusercontent.com/RaggarDK/Baby/baby/", "arr.babylon", scene, undefined)
+BABYLON.ImportMeshAsync("https://raw.githubusercontent.com/RaggarDK/Baby/baby/arr.babylon", scene, undefined)
   .then((importResult) => {
     mesh = importResult.meshes[0];
     // create the baker helper, so we can generate the texture
@@ -58,7 +58,7 @@ BABYLON.SceneLoader.ImportMeshAsync("", "https://raw.githubusercontent.com/Ragga
 
 Here's an example for a single mesh:
 
-<Playground id="#CP2RN9#16" title="Vertex Texture Animations" description="An example of playing a vertex texture animation."/>
+<Playground id="#CP2RN9#235" title="Vertex Texture Animations" description="An example of playing a vertex texture animation."/>
 
 ## VATs for instances
 
@@ -107,7 +107,7 @@ Baking the texture can be a slow process, and will play the entire animation vis
 let baker = null,
   mesh = null;
 const animationRanges = [{ from: 1, to: 20, name: "My animation" }];
-BABYLON.SceneLoader.ImportMeshAsync("", "http://example.com", "arr.babylon", scene, undefined)
+BABYLON.ImportMeshAsync("http://example.com/arr.babylon", scene, undefined)
   .then((importResult) => {
     mesh = importResult.meshes[0];
     // create the baker helper, so we can generate the texture
@@ -134,7 +134,7 @@ let baker = null,
 const animationRanges = [{ from: 1, to: 20, name: "My animation" }];
 
 // read your mesh like always
-BABYLON.SceneLoader.ImportMeshAsync("", "http://example.com", "arr.babylon", scene, undefined)
+BABYLON.ImportMeshAsync("http://example.com/arr.babylon", scene, undefined)
   .then((importResult) => {
     mesh = importResult.meshes[0];
     // read the vertex data file.

content/features/featuresDeepDive/audio/v1/playingSoundsMusic.md

@@ -431,30 +431,22 @@ Here is a simple sample loading a _.babylon_ scene file embedding some sounds:
 ```javascript
 const canvas = document.getElementById("renderCanvas");
 const engine = new BABYLON.Engine(canvas, true);
-BABYLON.SceneLoader.Load(
-  "TestScene/",
-  "testsound.babylon",
-  engine,
-  function (newScene) {
-    newScene.executeWhenReady(function () {
-      newScene.activeCamera.attachControl(canvas);
-
-      const gunshotSound = newScene.getSoundByName("gunshot-1.wav");
-      window.addEventListener("keydown", function (evt) {
-        if (evt.keyCode === 32 && gunshotSound) {
-          gunshotSound.play();
-        }
-      });
-
-      engine.runRenderLoop(function () {
-        newScene.render();
-      });
+BABYLON.LoadSceneAsync("TestScene/testsound.babylon", engine).then(function (newScene) {
+  newScene.executeWhenReady(function () {
+    newScene.activeCamera.attachControl(canvas);
+
+    const gunshotSound = newScene.getSoundByName("gunshot-1.wav");
+    window.addEventListener("keydown", function (evt) {
+      if (evt.keyCode === 32 && gunshotSound) {
+        gunshotSound.play();
+      }
     });
-  },
-  function (progress) {
-    // To do: give progress feedback to user
-  },
-);
+
+    engine.runRenderLoop(function () {
+      newScene.render();
+    });
+  });
+});
 ```
 
 Pressing the spacebar will play the gunshot sound.

content/features/featuresDeepDive/cameras/camera_introduction.md

@@ -251,7 +251,7 @@ function startGame() {
     const canvas = document.getElementById("renderCanvas");
     const engine = new BABYLON.Engine(canvas, true);
 
-    BABYLON.SceneLoader.Load("Espilit/", "Espilit.babylon", engine, function (newScene) {
+    BABYLON.LoadSceneAsync("Espilit/Espilit.babylon", engine).then(function (newScene) {
 
       const VJC = new BABYLON.VirtualJoysticksCamera("VJC", newScene.activeCamera.position, newScene);
       VJC.rotation = newScene.activeCamera.rotation;
@@ -268,9 +268,7 @@ function startGame() {
           newScene.render();
         }),
       }),
-    }, function (progress) {
-    // To do: give progress feedback to user.
-    }),
+    });,
   }
 }
 ```

content/features/featuresDeepDive/events/promises.md

@@ -23,12 +23,12 @@ Regarding portability, Babylon.js provides a custom polyfill for browsers where
 ### Basic usage
 
 ```javascript
-BABYLON.SceneLoader.LoadAssetContainerAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene).then(function (container) {
+BABYLON.LoadAssetContainerAsync("https://playground.babylonjs.com/scenes/skull.babylon", scene).then(function (container) {
   container.addAllToScene();
 });
 ```
 
-<Playground id="#JA1ND3#63" title="Simple Promise Example" description="Simple example loading an asset into a scene after the file has been loaded." image="/img/playgroundsAndNMEs/divingDeeperPromises1.jpg"/>
+<Playground id="/#JA1ND3#1052" title="Simple Promise Example" description="Simple example loading an asset into a scene after the file has been loaded." image="/img/playgroundsAndNMEs/divingDeeperPromises1.jpg"/>
 
 ### Chaining multiple promises together
 
@@ -37,7 +37,7 @@ const scene = new BABYLON.Scene(engine);
 const xrPromise = scene.createDefaultXRExperienceAsync();
 xrPromise
   .then((xrExperience) => {
-    return BABYLON.SceneLoader.AppendAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene);
+    return BABYLON.AppendSceneAsync("https://playground.babylonjs.com/scenes/skull.babylon", scene);
   })
   .then(function () {
     // xr resolved, skull added to the scene
@@ -51,10 +51,8 @@ Note: This is not supported in all browsers
 ```javascript
 const main = async function () {
   const scene = new BABYLON.Scene(engine);
-  const helper = scene.createDefaultVRExperience();
-  const supported = await helper.webVRCamera.useStandingMatrixAsync();
-  console.log(supported);
-  await BABYLON.SceneLoader.AppendAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene);
+  const xrPromise = await scene.createDefaultXRExperienceAsync();
+  return BABYLON.AppendSceneAsync("https://playground.babylonjs.com/scenes/skull.babylon", scene);
 };
 ```
 
@@ -66,10 +64,10 @@ const scene = new BABYLON.Scene(engine);
 const baseUrl = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/";
 
 Promise.all([
-  BABYLON.SceneLoader.ImportMeshAsync(null, baseUrl + "BoomBox/glTF/", "BoomBox.gltf", scene).then(function (result) {
+  BABYLON.ImportMeshAsync(baseUrl + "BoomBox/glTF/BoomBox.gltf", scene).then(function (result) {
     result.meshes[0].position.x = 0.01;
   }),
-  BABYLON.SceneLoader.ImportMeshAsync(null, baseUrl + "Avocado/glTF/", "Avocado.gltf", scene).then(function (result) {
+  BABYLON.ImportMeshAsync(baseUrl + "Avocado/glTF/Avocado.gltf", scene).then(function (result) {
     result.meshes[0].position.x = -0.01;
     result.meshes[0].position.y = -0.01;
     result.meshes[0].scaling.scaleInPlace(0.25);
@@ -80,4 +78,4 @@ Promise.all([
 });
 ```
 
-<Playground id="#U2KKMK#1" title="Load 2 Asset At Once" description="Simple example of loading 2 assets at once inside of a promise." image="/img/playgroundsAndNMEs/divingDeeperPromises2.jpg"/>
+<Playground id="#U2KKMK#308" title="Load 2 Asset At Once" description="Simple example of loading 2 assets at once inside of a promise." image="/img/playgroundsAndNMEs/divingDeeperPromises2.jpg"/>

content/features/featuresDeepDive/importers/glTF/progressiveglTFLoad.md

@@ -44,29 +44,25 @@ BABYLON.SceneLoader.OnPluginActivatedObservable.addOnce(function (loader) {
 When loading large assets either using loose files or with range requests, it is useful to show the download progress. Progress is supported through the progress callback of `BABYLON.SceneLoader` methods which is a small subset of the HTTP request [progress event](https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent). Here is an example from the demo above:
 
 ```javascript
-BABYLON.SceneLoader.AppendAsync(
-  url,
-  undefined,
-  scene,
-  function (event) {
-    // Compute the percentage for each stage unless the length is not computable.
-    // The lengthComputable is often false when serving content that is gzipped.
-    const percentage = event.lengthComputable ? " " + Math.floor((event.loaded / event.total) * 100) + "%" : "";
-
-    // Check if an LOD is loading yet.
-    if (lodNext === null) {
-      // Ignore GLB header progress.
-      if (event.total === 20) return;
-
-      // Show that the glTF is downloading.
-      bottomLine.text = "Loading glTF..." + percentage;
-    } else {
-      // Show that the LOD is downloading.
-      bottomLine.text = "Loading '" + lodNames[lodNext] + "' LOD..." + percentage;
-    }
-  },
-  ".glb",
-);
+BABYLON.AppendSceneAsync(url, scene, {
+  pluginExtension: ".glb",
+}).then(function (event) {
+  // Compute the percentage for each stage unless the length is not computable.
+  // The lengthComputable is often false when serving content that is gzipped.
+  const percentage = event.lengthComputable ? " " + Math.floor((event.loaded / event.total) * 100) + "%" : "";
+
+  // Check if an LOD is loading yet.
+  if (lodNext === null) {
+    // Ignore GLB header progress.
+    if (event.total === 20) return;
+
+    // Show that the glTF is downloading.
+    bottomLine.text = "Loading glTF..." + percentage;
+  } else {
+    // Show that the LOD is downloading.
+    bottomLine.text = "Loading '" + lodNames[lodNext] + "' LOD..." + percentage;
+  }
+});
 ```
 
 ## Key Notes
@@ -80,15 +76,15 @@ It is useful to stop at a specific LOD to inspect the results. This can be achie
 
 ```javascript
 BABYLON.SceneLoader.OnPluginActivatedObservable.addOnce(function (loader) {
-    if (loader.name === "gltf") {
-        loader.onExtensionLoadedObservable.add(function (extension) {
-            if (extension.name === "MSFT_lod") {
-                // Stop at the first LOD.
-                extension.maxLODsToLoad = 1;
-            }
-        }
-    }
-}
+  if (loader.name === "gltf") {
+    loader.onExtensionLoadedObservable.add(function (extension) {
+      if (extension.name === "MSFT_lod") {
+        // Stop at the first LOD.
+        extension.maxLODsToLoad = 1;
+      }
+    });
+  }
+});
 ```
 
 ## Enabling Logging