Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

dist/preview release/babylon.max.js

@@ -25206,13 +25206,7 @@ var TargetCamera = /** @class */ (function (_super) {
             }
             this.rotation.x += this.cameraRotation.x * directionMultiplier;
             this.rotation.y += this.cameraRotation.y * directionMultiplier;
-            //rotate, if quaternion is set and rotation was used
-            if (this.rotationQuaternion) {
-                var len = this.rotation.lengthSquared();
-                if (len) {
-                    _Maths_math_vector__WEBPACK_IMPORTED_MODULE_3__["Quaternion"].RotationYawPitchRollToRef(this.rotation.y, this.rotation.x, this.rotation.z, this.rotationQuaternion);
-                }
-            }
+            // Apply constraints
             if (!this.noRotationConstraint) {
                 var limit = 1.570796;
                 if (this.rotation.x > limit) {
@@ -25222,6 +25216,13 @@ var TargetCamera = /** @class */ (function (_super) {
                     this.rotation.x = -limit;
                 }
             }
+            //rotate, if quaternion is set and rotation was used
+            if (this.rotationQuaternion) {
+                var len = this.rotation.lengthSquared();
+                if (len) {
+                    _Maths_math_vector__WEBPACK_IMPORTED_MODULE_3__["Quaternion"].RotationYawPitchRollToRef(this.rotation.y, this.rotation.x, this.rotation.z, this.rotationQuaternion);
+                }
+            }
         }
         // Inertia
         if (needToMove) {

dist/preview release/documentation.d.ts

@@ -31775,6 +31775,11 @@ declare module BABYLON {
          * @see https://www.babylonjs-playground.com/#19O9TU#0
          */
         enableEdgesRendering(epsilon?: number, checkVerticesInsteadOfIndices?: boolean): AbstractMesh;
+        /**
+         * This function returns all of the particle systems in the scene that use the mesh as an emitter.
+         * @returns an array of particle systems in the scene that use the mesh as an emitter
+         */
+        getConnectedParticleSystems(): IParticleSystem[];
     }
 }
 declare module BABYLON {
@@ -79947,7 +79952,8 @@ declare module BABYLON.GLTF2 {
         private static _GetTypedArray;
         private static _GetNumComponents;
         private static _ValidateUri;
-        private static _GetDrawMode;
+        /** @hidden */
+        static _GetDrawMode(context: string, mode: number | undefined): number;
         private _compileMaterialsAsync;
         private _compileShadowGeneratorsAsync;
         private _forEachExtensions;
@@ -80307,34 +80313,34 @@ declare module BABYLON.GLTF2.Loader.Extensions {
          */
         enabled: boolean;
         private _loader;
-        /**
-         * The default variant name.
-         */
-        defaultVariant: string | undefined;
-        private _tagsToMap;
         /** @hidden */
         constructor(loader: GLTFLoader);
         /** @hidden */
         dispose(): void;
         /**
-         * Return a list of available variants for this asset.
-         * @returns {string[]}
+         * Gets the list of available variant tag names for this asset.
+         * @param rootMesh The glTF root mesh
+         * @returns the list of all the variant names for this model
          */
-        getVariants(): string[];
+        static GetAvailableVariants(rootMesh: Mesh): string[];
         /**
-         * Select a variant by providing a list of variant tag names.
-         *
-         * @param {(string | string[])} variantName
+         * Select a variant given a variant tag name or a list of variant tag names.
+         * @param rootMesh The glTF root mesh
+         * @param variantName The variant name(s) to select.
          */
-        selectVariant(variantName: string | string[]): void;
+        static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void;
         /**
-         * Select a variant by providing a single variant tag.
-         *
-         * @param {string} variantName
+         * Reset back to the original before selecting a variant.
+         * @param rootMesh The glTF root mesh
          */
-        selectVariantTag(variantName: string): void;
-        /** @hidden */
-        onLoading(): void;
+        static Reset(rootMesh: Mesh): void;
+        /**
+         * Gets the last selected variant tag name(s) or null if original.
+         * @param rootMesh The glTF root mesh
+         * @returns The selected variant tag name(s).
+         */
+        static GetLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]>;
+        private static _GetExtensionMetadata;
         /** @hidden */
         _loadMeshPrimitiveAsync(context: string, name: string, node: INode, mesh: IMesh, primitive: IMeshPrimitive, assign: (babylonMesh: AbstractMesh) => void): Nullable<Promise<AbstractMesh>>;
     }

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -67317,8 +67317,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lineContainerComponent */ "./components/actionTabs/lineContainerComponent.tsx");
+<<<<<<< HEAD
 /* harmony import */ var babylonjs_loaders_glTF_2_0_Extensions_KHR_materials_variants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_variants */ "babylonjs-loaders/glTF/index");
 /* harmony import */ var babylonjs_loaders_glTF_2_0_Extensions_KHR_materials_variants__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(babylonjs_loaders_glTF_2_0_Extensions_KHR_materials_variants__WEBPACK_IMPORTED_MODULE_3__);
+=======
+/* harmony import */ var _lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../lines/optionsLineComponent */ "./components/actionTabs/lines/optionsLineComponent.tsx");
+/* harmony import */ var _lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../lines/buttonLineComponent */ "./components/actionTabs/lines/buttonLineComponent.tsx");
+
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
 
 
 
@@ -67326,6 +67332,7 @@ __webpack_require__.r(__webpack_exports__);
 var VariantsPropertyGridComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(VariantsPropertyGridComponent, _super);
     function VariantsPropertyGridComponent(props) {
+<<<<<<< HEAD
         return _super.call(this, props) || this;
     }
     VariantsPropertyGridComponent.prototype.render = function () {
@@ -67335,6 +67342,49 @@ var VariantsPropertyGridComponent = /** @class */ (function (_super) {
         }
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { globalState: this.props.globalState, title: "VARIANTS" })));
+=======
+        var _this = _super.call(this, props) || this;
+        _this._lastOne = 0;
+        return _this;
+    }
+    VariantsPropertyGridComponent.prototype.render = function () {
+        var _this = this;
+        var root = BABYLON.GLTF2.Loader.Extensions;
+        var variants = root.KHR_materials_variants.GetAvailableVariants(this.props.host);
+        if (!variants || variants.length === 0) {
+            return null;
+        }
+        var options = variants.map(function (v, i) {
+            return { label: v, value: i + 1 };
+        });
+        options.splice(0, 0, { label: "Original", value: 0 });
+        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { globalState: this.props.globalState, title: "VARIANTS" },
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_3__["OptionsLineComponent"], { label: "Active variant", options: options, noDirectUpdate: true, target: this.props.host, propertyName: "", onSelect: function (value) {
+                        if (value === 0) {
+                            root.KHR_materials_variants.Reset(_this.props.host);
+                        }
+                        else {
+                            root.KHR_materials_variants.SelectVariant(_this.props.host, variants[value - 1]);
+                        }
+                        _this._lastOne = value;
+                        _this.forceUpdate();
+                    }, extractValue: function () {
+                        var lastPickedVariant = root.KHR_materials_variants.GetLastSelectedVariant(_this.props.host) || 0;
+                        if (lastPickedVariant && Object.prototype.toString.call(lastPickedVariant) === '[object String]') {
+                            var index = variants.indexOf(lastPickedVariant);
+                            if (index > -1) {
+                                _this._lastOne = index + 1;
+                            }
+                        }
+                        return _this._lastOne;
+                    } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "Reset", onClick: function () {
+                        root.KHR_materials_variants.Reset(_this.props.host);
+                        _this._lastOne = 0;
+                        _this.forceUpdate();
+                    } }))));
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
     };
     return VariantsPropertyGridComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));

dist/preview release/inspector/babylon.inspector.d.ts

@@ -1322,6 +1322,19 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface IVariantsPropertyGridComponentProps {
+        globalState: GlobalState;
+        host: any;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class VariantsPropertyGridComponent extends React.Component<IVariantsPropertyGridComponentProps> {
+        private _lastOne;
+        constructor(props: IVariantsPropertyGridComponentProps);
+        render(): JSX.Element | null;
+    }
+}
+declare module INSPECTOR {
     interface IMeshPropertyGridComponentProps {
         globalState: GlobalState;
         mesh: BABYLON.Mesh;

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -1551,6 +1551,24 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/com
         render(): JSX.Element | null;
     }
 }
+declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/variantsPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    import { LockObject } from "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/lockObject";
+    import { GlobalState } from "babylonjs-inspector/components/globalState";
+    interface IVariantsPropertyGridComponentProps {
+        globalState: GlobalState;
+        host: any;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class VariantsPropertyGridComponent extends React.Component<IVariantsPropertyGridComponentProps> {
+        private _lastOne;
+        constructor(props: IVariantsPropertyGridComponentProps);
+        render(): JSX.Element | null;
+    }
+}
 declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "babylonjs/Misc/observable";
@@ -4747,6 +4765,19 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface IVariantsPropertyGridComponentProps {
+        globalState: GlobalState;
+        host: any;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class VariantsPropertyGridComponent extends React.Component<IVariantsPropertyGridComponentProps> {
+        private _lastOne;
+        constructor(props: IVariantsPropertyGridComponentProps);
+        render(): JSX.Element | null;
+    }
+}
+declare module INSPECTOR {
     interface IMeshPropertyGridComponentProps {
         globalState: GlobalState;
         mesh: BABYLON.Mesh;

dist/preview release/loaders/babylon.glTF2FileLoader.js

@@ -1246,19 +1246,43 @@ var KHR_materials_variants = /** @class */ (function () {
     };
     /**
      * Gets the list of available variant tag names for this asset.
+<<<<<<< HEAD
      */
     KHR_materials_variants.GetAvailableVariants = function (rootMesh) {
         return Object.keys(this._GetVariantsMap(rootMesh));
+=======
+     * @param rootMesh The glTF root mesh
+     * @returns the list of all the variant names for this model
+     */
+    KHR_materials_variants.GetAvailableVariants = function (rootMesh) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            return [];
+        }
+        return Object.keys(extensionMetadata.variants);
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
     };
     /**
      * Select a variant given a variant tag name or a list of variant tag names.
      * @param rootMesh The glTF root mesh
+<<<<<<< HEAD
      * @param variantName The variant name(s) to select
      */
     KHR_materials_variants.SelectVariant = function (rootMesh, variantName) {
         var variantsMap = this._GetVariantsMap(rootMesh);
         var select = function (variantName) {
             var entries = variantsMap[variantName];
+=======
+     * @param variantName The variant name(s) to select.
+     */
+    KHR_materials_variants.SelectVariant = function (rootMesh, variantName) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error("Cannot select variant on a glTF mesh that does not have the " + NAME + " extension");
+        }
+        var select = function (variantName) {
+            var entries = extensionMetadata.variants[variantName];
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
             if (entries) {
                 for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
                     var entry = entries_1[_i];
@@ -1274,11 +1298,47 @@ var KHR_materials_variants = /** @class */ (function () {
         }
         else {
             select(variantName);
+<<<<<<< HEAD
         }
     };
     KHR_materials_variants._GetVariantsMap = function (rootMesh) {
         var _a, _b;
         return (_b = (_a = rootMesh === null || rootMesh === void 0 ? void 0 : rootMesh.metadata) === null || _a === void 0 ? void 0 : _a.gltf) === null || _b === void 0 ? void 0 : _b[NAME];
+=======
+        }
+        extensionMetadata.lastSelected = variantName;
+    };
+    /**
+     * Reset back to the original before selecting a variant.
+     * @param rootMesh The glTF root mesh
+     */
+    KHR_materials_variants.Reset = function (rootMesh) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error("Cannot reset on a glTF mesh that does not have the " + NAME + " extension");
+        }
+        for (var _i = 0, _a = extensionMetadata.original; _i < _a.length; _i++) {
+            var entry = _a[_i];
+            entry.mesh.material = entry.material;
+        }
+        extensionMetadata.lastSelected = null;
+    };
+    /**
+     * Gets the last selected variant tag name(s) or null if original.
+     * @param rootMesh The glTF root mesh
+     * @returns The selected variant tag name(s).
+     */
+    KHR_materials_variants.GetLastSelectedVariant = function (rootMesh) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error("Cannot get the last selected variant on a glTF mesh that does not have the " + NAME + " extension");
+        }
+        return extensionMetadata.lastSelected;
+    };
+    KHR_materials_variants._GetExtensionMetadata = function (rootMesh) {
+        var _a, _b;
+        return ((_b = (_a = rootMesh === null || rootMesh === void 0 ? void 0 : rootMesh.metadata) === null || _a === void 0 ? void 0 : _a.gltf) === null || _b === void 0 ? void 0 : _b[NAME]) || null;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
     };
     /** @hidden */
     KHR_materials_variants.prototype._loadMeshPrimitiveAsync = function (context, name, node, mesh, primitive, assign) {
@@ -1289,18 +1349,34 @@ var KHR_materials_variants = /** @class */ (function () {
                 assign(babylonMesh);
                 if (babylonMesh instanceof babylonjs_Meshes_mesh__WEBPACK_IMPORTED_MODULE_1__["Mesh"]) {
                     var babylonDrawMode = _glTFLoader__WEBPACK_IMPORTED_MODULE_0__["GLTFLoader"]._GetDrawMode(context, primitive.mode);
+<<<<<<< HEAD
                     // For each mapping, look at the tags and make a new entry for them
+=======
+                    var root = _this._loader.rootBabylonMesh;
+                    var metadata = (root.metadata = root.metadata || {});
+                    var gltf = (metadata.gltf = metadata.gltf || {});
+                    var extensionMetadata = (gltf[NAME] = gltf[NAME] || { lastSelected: null, original: [], variants: {} });
+                    // Store the original material.
+                    extensionMetadata.original.push({ mesh: babylonMesh, material: babylonMesh.material });
+                    // For each mapping, look at the tags and make a new entry for them.
+                    var variants_1 = extensionMetadata.variants;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
                     for (var _i = 0, _a = extension.mapping; _i < _a.length; _i++) {
                         var mapping = _a[_i];
                         var _loop_1 = function (tag) {
                             var material = _glTFLoader__WEBPACK_IMPORTED_MODULE_0__["ArrayItem"].Get("#/materials/", _this._loader.gltf.materials, mapping.material);
                             promises.push(_this._loader._loadMaterialAsync("#/materials/" + mapping.material, material, babylonMesh, babylonDrawMode, function (babylonMaterial) {
+<<<<<<< HEAD
                                 var root = _this._loader.rootBabylonMesh;
                                 var metadata = (root.metadata = root.metadata || {});
                                 var gltf = (metadata.gltf = metadata.gltf || {});
                                 var map = (gltf[NAME] = gltf[NAME] || {});
                                 map[tag] = map[tag] || [];
                                 map[tag].push({
+=======
+                                variants_1[tag] = variants_1[tag] || [];
+                                variants_1[tag].push({
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
                                     mesh: babylonMesh,
                                     material: babylonMaterial
                                 });

dist/preview release/loaders/babylon.glTFFileLoader.js

@@ -3826,19 +3826,43 @@ var KHR_materials_variants = /** @class */ (function () {
     };
     /**
      * Gets the list of available variant tag names for this asset.
+<<<<<<< HEAD
      */
     KHR_materials_variants.GetAvailableVariants = function (rootMesh) {
         return Object.keys(this._GetVariantsMap(rootMesh));
+=======
+     * @param rootMesh The glTF root mesh
+     * @returns the list of all the variant names for this model
+     */
+    KHR_materials_variants.GetAvailableVariants = function (rootMesh) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            return [];
+        }
+        return Object.keys(extensionMetadata.variants);
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
     };
     /**
      * Select a variant given a variant tag name or a list of variant tag names.
      * @param rootMesh The glTF root mesh
+<<<<<<< HEAD
      * @param variantName The variant name(s) to select
      */
     KHR_materials_variants.SelectVariant = function (rootMesh, variantName) {
         var variantsMap = this._GetVariantsMap(rootMesh);
         var select = function (variantName) {
             var entries = variantsMap[variantName];
+=======
+     * @param variantName The variant name(s) to select.
+     */
+    KHR_materials_variants.SelectVariant = function (rootMesh, variantName) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error("Cannot select variant on a glTF mesh that does not have the " + NAME + " extension");
+        }
+        var select = function (variantName) {
+            var entries = extensionMetadata.variants[variantName];
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
             if (entries) {
                 for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
                     var entry = entries_1[_i];
@@ -3854,11 +3878,47 @@ var KHR_materials_variants = /** @class */ (function () {
         }
         else {
             select(variantName);
+<<<<<<< HEAD
         }
     };
     KHR_materials_variants._GetVariantsMap = function (rootMesh) {
         var _a, _b;
         return (_b = (_a = rootMesh === null || rootMesh === void 0 ? void 0 : rootMesh.metadata) === null || _a === void 0 ? void 0 : _a.gltf) === null || _b === void 0 ? void 0 : _b[NAME];
+=======
+        }
+        extensionMetadata.lastSelected = variantName;
+    };
+    /**
+     * Reset back to the original before selecting a variant.
+     * @param rootMesh The glTF root mesh
+     */
+    KHR_materials_variants.Reset = function (rootMesh) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error("Cannot reset on a glTF mesh that does not have the " + NAME + " extension");
+        }
+        for (var _i = 0, _a = extensionMetadata.original; _i < _a.length; _i++) {
+            var entry = _a[_i];
+            entry.mesh.material = entry.material;
+        }
+        extensionMetadata.lastSelected = null;
+    };
+    /**
+     * Gets the last selected variant tag name(s) or null if original.
+     * @param rootMesh The glTF root mesh
+     * @returns The selected variant tag name(s).
+     */
+    KHR_materials_variants.GetLastSelectedVariant = function (rootMesh) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error("Cannot get the last selected variant on a glTF mesh that does not have the " + NAME + " extension");
+        }
+        return extensionMetadata.lastSelected;
+    };
+    KHR_materials_variants._GetExtensionMetadata = function (rootMesh) {
+        var _a, _b;
+        return ((_b = (_a = rootMesh === null || rootMesh === void 0 ? void 0 : rootMesh.metadata) === null || _a === void 0 ? void 0 : _a.gltf) === null || _b === void 0 ? void 0 : _b[NAME]) || null;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
     };
     /** @hidden */
     KHR_materials_variants.prototype._loadMeshPrimitiveAsync = function (context, name, node, mesh, primitive, assign) {
@@ -3869,18 +3929,34 @@ var KHR_materials_variants = /** @class */ (function () {
                 assign(babylonMesh);
                 if (babylonMesh instanceof babylonjs_Meshes_mesh__WEBPACK_IMPORTED_MODULE_1__["Mesh"]) {
                     var babylonDrawMode = _glTFLoader__WEBPACK_IMPORTED_MODULE_0__["GLTFLoader"]._GetDrawMode(context, primitive.mode);
+<<<<<<< HEAD
                     // For each mapping, look at the tags and make a new entry for them
+=======
+                    var root = _this._loader.rootBabylonMesh;
+                    var metadata = (root.metadata = root.metadata || {});
+                    var gltf = (metadata.gltf = metadata.gltf || {});
+                    var extensionMetadata = (gltf[NAME] = gltf[NAME] || { lastSelected: null, original: [], variants: {} });
+                    // Store the original material.
+                    extensionMetadata.original.push({ mesh: babylonMesh, material: babylonMesh.material });
+                    // For each mapping, look at the tags and make a new entry for them.
+                    var variants_1 = extensionMetadata.variants;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
                     for (var _i = 0, _a = extension.mapping; _i < _a.length; _i++) {
                         var mapping = _a[_i];
                         var _loop_1 = function (tag) {
                             var material = _glTFLoader__WEBPACK_IMPORTED_MODULE_0__["ArrayItem"].Get("#/materials/", _this._loader.gltf.materials, mapping.material);
                             promises.push(_this._loader._loadMaterialAsync("#/materials/" + mapping.material, material, babylonMesh, babylonDrawMode, function (babylonMaterial) {
+<<<<<<< HEAD
                                 var root = _this._loader.rootBabylonMesh;
                                 var metadata = (root.metadata = root.metadata || {});
                                 var gltf = (metadata.gltf = metadata.gltf || {});
                                 var map = (gltf[NAME] = gltf[NAME] || {});
                                 map[tag] = map[tag] || [];
                                 map[tag].push({
+=======
+                                variants_1[tag] = variants_1[tag] || [];
+                                variants_1[tag].push({
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
                                     mesh: babylonMesh,
                                     material: babylonMaterial
                                 });

dist/preview release/loaders/babylonjs.loaders.d.ts

@@ -1934,15 +1934,38 @@ declare module BABYLON.GLTF2.Loader.Extensions {
         dispose(): void;
         /**
          * Gets the list of available variant tag names for this asset.
+<<<<<<< HEAD
+=======
+         * @param rootMesh The glTF root mesh
+         * @returns the list of all the variant names for this model
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
          */
         static GetAvailableVariants(rootMesh: Mesh): string[];
         /**
          * Select a variant given a variant tag name or a list of variant tag names.
          * @param rootMesh The glTF root mesh
+<<<<<<< HEAD
          * @param variantName The variant name(s) to select
          */
         static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void;
         private static _GetVariantsMap;
+=======
+         * @param variantName The variant name(s) to select.
+         */
+        static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void;
+        /**
+         * Reset back to the original before selecting a variant.
+         * @param rootMesh The glTF root mesh
+         */
+        static Reset(rootMesh: Mesh): void;
+        /**
+         * Gets the last selected variant tag name(s) or null if original.
+         * @param rootMesh The glTF root mesh
+         * @returns The selected variant tag name(s).
+         */
+        static GetLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]>;
+        private static _GetExtensionMetadata;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
         /** @hidden */
         _loadMeshPrimitiveAsync(context: string, name: string, node: INode, mesh: IMesh, primitive: IMeshPrimitive, assign: (babylonMesh: AbstractMesh) => void): Nullable<Promise<AbstractMesh>>;
     }

dist/preview release/loaders/babylonjs.loaders.js

@@ -5206,19 +5206,43 @@ var KHR_materials_variants = /** @class */ (function () {
     };
     /**
      * Gets the list of available variant tag names for this asset.
+<<<<<<< HEAD
      */
     KHR_materials_variants.GetAvailableVariants = function (rootMesh) {
         return Object.keys(this._GetVariantsMap(rootMesh));
+=======
+     * @param rootMesh The glTF root mesh
+     * @returns the list of all the variant names for this model
+     */
+    KHR_materials_variants.GetAvailableVariants = function (rootMesh) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            return [];
+        }
+        return Object.keys(extensionMetadata.variants);
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
     };
     /**
      * Select a variant given a variant tag name or a list of variant tag names.
      * @param rootMesh The glTF root mesh
+<<<<<<< HEAD
      * @param variantName The variant name(s) to select
      */
     KHR_materials_variants.SelectVariant = function (rootMesh, variantName) {
         var variantsMap = this._GetVariantsMap(rootMesh);
         var select = function (variantName) {
             var entries = variantsMap[variantName];
+=======
+     * @param variantName The variant name(s) to select.
+     */
+    KHR_materials_variants.SelectVariant = function (rootMesh, variantName) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error("Cannot select variant on a glTF mesh that does not have the " + NAME + " extension");
+        }
+        var select = function (variantName) {
+            var entries = extensionMetadata.variants[variantName];
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
             if (entries) {
                 for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
                     var entry = entries_1[_i];
@@ -5235,10 +5259,44 @@ var KHR_materials_variants = /** @class */ (function () {
         else {
             select(variantName);
         }
+        extensionMetadata.lastSelected = variantName;
     };
+<<<<<<< HEAD
     KHR_materials_variants._GetVariantsMap = function (rootMesh) {
         var _a, _b;
         return (_b = (_a = rootMesh === null || rootMesh === void 0 ? void 0 : rootMesh.metadata) === null || _a === void 0 ? void 0 : _a.gltf) === null || _b === void 0 ? void 0 : _b[NAME];
+=======
+    /**
+     * Reset back to the original before selecting a variant.
+     * @param rootMesh The glTF root mesh
+     */
+    KHR_materials_variants.Reset = function (rootMesh) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error("Cannot reset on a glTF mesh that does not have the " + NAME + " extension");
+        }
+        for (var _i = 0, _a = extensionMetadata.original; _i < _a.length; _i++) {
+            var entry = _a[_i];
+            entry.mesh.material = entry.material;
+        }
+        extensionMetadata.lastSelected = null;
+    };
+    /**
+     * Gets the last selected variant tag name(s) or null if original.
+     * @param rootMesh The glTF root mesh
+     * @returns The selected variant tag name(s).
+     */
+    KHR_materials_variants.GetLastSelectedVariant = function (rootMesh) {
+        var extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error("Cannot get the last selected variant on a glTF mesh that does not have the " + NAME + " extension");
+        }
+        return extensionMetadata.lastSelected;
+    };
+    KHR_materials_variants._GetExtensionMetadata = function (rootMesh) {
+        var _a, _b;
+        return ((_b = (_a = rootMesh === null || rootMesh === void 0 ? void 0 : rootMesh.metadata) === null || _a === void 0 ? void 0 : _a.gltf) === null || _b === void 0 ? void 0 : _b[NAME]) || null;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
     };
     /** @hidden */
     KHR_materials_variants.prototype._loadMeshPrimitiveAsync = function (context, name, node, mesh, primitive, assign) {
@@ -5249,18 +5307,34 @@ var KHR_materials_variants = /** @class */ (function () {
                 assign(babylonMesh);
                 if (babylonMesh instanceof babylonjs_Meshes_mesh__WEBPACK_IMPORTED_MODULE_1__["Mesh"]) {
                     var babylonDrawMode = _glTFLoader__WEBPACK_IMPORTED_MODULE_0__["GLTFLoader"]._GetDrawMode(context, primitive.mode);
+<<<<<<< HEAD
                     // For each mapping, look at the tags and make a new entry for them
+=======
+                    var root = _this._loader.rootBabylonMesh;
+                    var metadata = (root.metadata = root.metadata || {});
+                    var gltf = (metadata.gltf = metadata.gltf || {});
+                    var extensionMetadata = (gltf[NAME] = gltf[NAME] || { lastSelected: null, original: [], variants: {} });
+                    // Store the original material.
+                    extensionMetadata.original.push({ mesh: babylonMesh, material: babylonMesh.material });
+                    // For each mapping, look at the tags and make a new entry for them.
+                    var variants_1 = extensionMetadata.variants;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
                     for (var _i = 0, _a = extension.mapping; _i < _a.length; _i++) {
                         var mapping = _a[_i];
                         var _loop_1 = function (tag) {
                             var material = _glTFLoader__WEBPACK_IMPORTED_MODULE_0__["ArrayItem"].Get("#/materials/", _this._loader.gltf.materials, mapping.material);
                             promises.push(_this._loader._loadMaterialAsync("#/materials/" + mapping.material, material, babylonMesh, babylonDrawMode, function (babylonMaterial) {
+<<<<<<< HEAD
                                 var root = _this._loader.rootBabylonMesh;
                                 var metadata = (root.metadata = root.metadata || {});
                                 var gltf = (metadata.gltf = metadata.gltf || {});
                                 var map = (gltf[NAME] = gltf[NAME] || {});
                                 map[tag] = map[tag] || [];
                                 map[tag].push({
+=======
+                                variants_1[tag] = variants_1[tag] || [];
+                                variants_1[tag].push({
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
                                     mesh: babylonMesh,
                                     material: babylonMaterial
                                 });

dist/preview release/loaders/babylonjs.loaders.module.d.ts

@@ -2081,15 +2081,38 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_variants" {
         dispose(): void;
         /**
          * Gets the list of available variant tag names for this asset.
+<<<<<<< HEAD
+=======
+         * @param rootMesh The glTF root mesh
+         * @returns the list of all the variant names for this model
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
          */
         static GetAvailableVariants(rootMesh: Mesh): string[];
         /**
          * Select a variant given a variant tag name or a list of variant tag names.
          * @param rootMesh The glTF root mesh
+<<<<<<< HEAD
          * @param variantName The variant name(s) to select
          */
         static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void;
         private static _GetVariantsMap;
+=======
+         * @param variantName The variant name(s) to select.
+         */
+        static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void;
+        /**
+         * Reset back to the original before selecting a variant.
+         * @param rootMesh The glTF root mesh
+         */
+        static Reset(rootMesh: Mesh): void;
+        /**
+         * Gets the last selected variant tag name(s) or null if original.
+         * @param rootMesh The glTF root mesh
+         * @returns The selected variant tag name(s).
+         */
+        static GetLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]>;
+        private static _GetExtensionMetadata;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
         /** @hidden */
         _loadMeshPrimitiveAsync(context: string, name: string, node: INode, mesh: IMesh, primitive: IMeshPrimitive, assign: (babylonMesh: AbstractMesh) => void): Nullable<Promise<AbstractMesh>>;
     }
@@ -4750,15 +4773,38 @@ declare module BABYLON.GLTF2.Loader.Extensions {
         dispose(): void;
         /**
          * Gets the list of available variant tag names for this asset.
+<<<<<<< HEAD
+=======
+         * @param rootMesh The glTF root mesh
+         * @returns the list of all the variant names for this model
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
          */
         static GetAvailableVariants(rootMesh: Mesh): string[];
         /**
          * Select a variant given a variant tag name or a list of variant tag names.
          * @param rootMesh The glTF root mesh
+<<<<<<< HEAD
          * @param variantName The variant name(s) to select
          */
         static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void;
         private static _GetVariantsMap;
+=======
+         * @param variantName The variant name(s) to select.
+         */
+        static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void;
+        /**
+         * Reset back to the original before selecting a variant.
+         * @param rootMesh The glTF root mesh
+         */
+        static Reset(rootMesh: Mesh): void;
+        /**
+         * Gets the last selected variant tag name(s) or null if original.
+         * @param rootMesh The glTF root mesh
+         * @returns The selected variant tag name(s).
+         */
+        static GetLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]>;
+        private static _GetExtensionMetadata;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
         /** @hidden */
         _loadMeshPrimitiveAsync(context: string, name: string, node: INode, mesh: IMesh, primitive: IMeshPrimitive, assign: (babylonMesh: AbstractMesh) => void): Nullable<Promise<AbstractMesh>>;
     }

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":116118,"engineOnly":152523,"sceneOnly":514506,"minGridMaterial":651370,"minStandardMaterial":799899}
+{"thinEngineOnly":116118,"engineOnly":152523,"sceneOnly":514648,"minGridMaterial":651511,"minStandardMaterial":800040}

dist/preview release/viewer/babylon.module.d.ts

@@ -31988,6 +31988,7 @@ declare module "babylonjs/Meshes/abstractMesh" {
     import { RawTexture } from "babylonjs/Materials/Textures/rawTexture";
     import { Color3, Color4 } from "babylonjs/Maths/math.color";
     import { Plane } from "babylonjs/Maths/math.plane";
+    import { IParticleSystem } from "babylonjs/Particles/IParticleSystem";
     import { Ray } from "babylonjs/Culling/ray";
     import { Collider } from "babylonjs/Collisions/collider";
     import { TrianglePickingPredicate } from "babylonjs/Culling/ray";
@@ -32856,6 +32857,11 @@ declare module "babylonjs/Meshes/abstractMesh" {
          * @see https://www.babylonjs-playground.com/#19O9TU#0
          */
         enableEdgesRendering(epsilon?: number, checkVerticesInsteadOfIndices?: boolean): AbstractMesh;
+        /**
+         * This function returns all of the particle systems in the scene that use the mesh as an emitter.
+         * @returns an array of particle systems in the scene that use the mesh as an emitter
+         */
+        getConnectedParticleSystems(): IParticleSystem[];
     }
 }
 declare module "babylonjs/Actions/actionEvent" {
@@ -109489,6 +109495,11 @@ declare module BABYLON {
          * @see https://www.babylonjs-playground.com/#19O9TU#0
          */
         enableEdgesRendering(epsilon?: number, checkVerticesInsteadOfIndices?: boolean): AbstractMesh;
+        /**
+         * This function returns all of the particle systems in the scene that use the mesh as an emitter.
+         * @returns an array of particle systems in the scene that use the mesh as an emitter
+         */
+        getConnectedParticleSystems(): IParticleSystem[];
     }
 }
 declare module BABYLON {

dist/preview release/viewer/babylonjs.loaders.module.d.ts

@@ -1657,7 +1657,8 @@ declare module "babylonjs-loaders/glTF/2.0/glTFLoader" {
         private static _GetTypedArray;
         private static _GetNumComponents;
         private static _ValidateUri;
-        private static _GetDrawMode;
+        /** @hidden */
+        static _GetDrawMode(context: string, mode: number | undefined): number;
         private _compileMaterialsAsync;
         private _compileShadowGeneratorsAsync;
         private _forEachExtensions;
@@ -2057,6 +2058,7 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_variants" {
     import { Nullable } from "babylonjs/types";
     import { IGLTFLoaderExtension } from "babylonjs-loaders/glTF/2.0/glTFLoaderExtension";
     import { GLTFLoader } from "babylonjs-loaders/glTF/2.0/glTFLoader";
+    import { Mesh } from 'babylonjs/Meshes/mesh';
     import { AbstractMesh } from 'babylonjs/Meshes/abstractMesh';
     import { INode, IMeshPrimitive, IMesh } from "babylonjs-loaders/glTF/2.0/glTFLoaderInterfaces";
     /**
@@ -2073,34 +2075,34 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_variants" {
          */
         enabled: boolean;
         private _loader;
-        /**
-         * The default variant name.
-         */
-        defaultVariant: string | undefined;
-        private _tagsToMap;
         /** @hidden */
         constructor(loader: GLTFLoader);
         /** @hidden */
         dispose(): void;
         /**
-         * Return a list of available variants for this asset.
-         * @returns {string[]}
+         * Gets the list of available variant tag names for this asset.
+         * @param rootMesh The glTF root mesh
+         * @returns the list of all the variant names for this model
          */
-        getVariants(): string[];
+        static GetAvailableVariants(rootMesh: Mesh): string[];
         /**
-         * Select a variant by providing a list of variant tag names.
-         *
-         * @param {(string | string[])} variantName
+         * Select a variant given a variant tag name or a list of variant tag names.
+         * @param rootMesh The glTF root mesh
+         * @param variantName The variant name(s) to select.
          */
-        selectVariant(variantName: string | string[]): void;
+        static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void;
         /**
-         * Select a variant by providing a single variant tag.
-         *
-         * @param {string} variantName
+         * Reset back to the original before selecting a variant.
+         * @param rootMesh The glTF root mesh
          */
-        selectVariantTag(variantName: string): void;
-        /** @hidden */
-        onLoading(): void;
+        static Reset(rootMesh: Mesh): void;
+        /**
+         * Gets the last selected variant tag name(s) or null if original.
+         * @param rootMesh The glTF root mesh
+         * @returns The selected variant tag name(s).
+         */
+        static GetLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]>;
+        private static _GetExtensionMetadata;
         /** @hidden */
         _loadMeshPrimitiveAsync(context: string, name: string, node: INode, mesh: IMesh, primitive: IMeshPrimitive, assign: (babylonMesh: AbstractMesh) => void): Nullable<Promise<AbstractMesh>>;
     }
@@ -4394,7 +4396,8 @@ declare module BABYLON.GLTF2 {
         private static _GetTypedArray;
         private static _GetNumComponents;
         private static _ValidateUri;
-        private static _GetDrawMode;
+        /** @hidden */
+        static _GetDrawMode(context: string, mode: number | undefined): number;
         private _compileMaterialsAsync;
         private _compileShadowGeneratorsAsync;
         private _forEachExtensions;
@@ -4754,34 +4757,34 @@ declare module BABYLON.GLTF2.Loader.Extensions {
          */
         enabled: boolean;
         private _loader;
-        /**
-         * The default variant name.
-         */
-        defaultVariant: string | undefined;
-        private _tagsToMap;
         /** @hidden */
         constructor(loader: GLTFLoader);
         /** @hidden */
         dispose(): void;
         /**
-         * Return a list of available variants for this asset.
-         * @returns {string[]}
+         * Gets the list of available variant tag names for this asset.
+         * @param rootMesh The glTF root mesh
+         * @returns the list of all the variant names for this model
          */
-        getVariants(): string[];
+        static GetAvailableVariants(rootMesh: Mesh): string[];
         /**
-         * Select a variant by providing a list of variant tag names.
-         *
-         * @param {(string | string[])} variantName
+         * Select a variant given a variant tag name or a list of variant tag names.
+         * @param rootMesh The glTF root mesh
+         * @param variantName The variant name(s) to select.
          */
-        selectVariant(variantName: string | string[]): void;
+        static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void;
         /**
-         * Select a variant by providing a single variant tag.
-         *
-         * @param {string} variantName
+         * Reset back to the original before selecting a variant.
+         * @param rootMesh The glTF root mesh
          */
-        selectVariantTag(variantName: string): void;
-        /** @hidden */
-        onLoading(): void;
+        static Reset(rootMesh: Mesh): void;
+        /**
+         * Gets the last selected variant tag name(s) or null if original.
+         * @param rootMesh The glTF root mesh
+         * @returns The selected variant tag name(s).
+         */
+        static GetLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]>;
+        private static _GetExtensionMetadata;
         /** @hidden */
         _loadMeshPrimitiveAsync(context: string, name: string, node: INode, mesh: IMesh, primitive: IMeshPrimitive, assign: (babylonMesh: AbstractMesh) => void): Nullable<Promise<AbstractMesh>>;
     }

inspector/src/components/actionTabs/tabs/propertyGrids/variantsPropertyGridComponent.tsx

@@ -17,17 +17,28 @@ interface IVariantsPropertyGridComponentProps {
 }
 
 export class VariantsPropertyGridComponent extends React.Component<IVariantsPropertyGridComponentProps> {
+<<<<<<< HEAD
+=======
+    private _lastOne = 0;
+
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
     constructor(props: IVariantsPropertyGridComponentProps) {
         super(props);
     }
 
     render() {
+<<<<<<< HEAD
         let variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(this.props.host);
+=======
+        let root = (BABYLON as any).GLTF2.Loader.Extensions;
+        let variants = root.KHR_materials_variants.GetAvailableVariants(this.props.host);
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
 
         if (!variants || variants.length === 0) {
             return null;
         }
 
+<<<<<<< HEAD
         let options = variants.map((v, i) =>  {
             var displayName = v;
 
@@ -37,6 +48,14 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
             return {label: displayName, value: i}
         });
 
+=======
+        let options = variants.map((v: string, i: number) =>  {
+            return {label: v, value: i + 1}
+        });
+
+        options.splice(0, 0, {label: "Original", value: 0})
+
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
         return (
             <div>
                 <LineContainerComponent globalState={this.props.globalState} title="VARIANTS">
@@ -45,17 +64,46 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
                         target={this.props.host}
                         propertyName=""
                         onSelect={(value: number) => {
+<<<<<<< HEAD
                             BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(this.props.host, variants[value]);
+=======
+                            if (value === 0) {                                
+                                root.KHR_materials_variants.Reset(this.props.host);
+                            } else {
+                                root.KHR_materials_variants.SelectVariant(this.props.host, variants[value - 1]);
+                            }
+                            this._lastOne = value;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
 
                             this.forceUpdate();
                         }}
                         extractValue={() => {
+<<<<<<< HEAD
                             let lastOne = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetLastSelectedVariant(this.props.host) || 0;
                             let index = variants.indexOf(lastOne) ;
 
                             return index < -1 ? 0 : index;
                         }}
                     />
+=======
+                            let lastPickedVariant = root.KHR_materials_variants.GetLastSelectedVariant(this.props.host) || 0;
+
+                            if (lastPickedVariant && Object.prototype.toString.call(lastPickedVariant) === '[object String]') {
+                                let index = variants.indexOf(lastPickedVariant as string);
+                                if (index > -1) {
+                                    this._lastOne = index + 1;
+                                }
+                            }
+
+                            return this._lastOne;
+                        }}
+                    />
+                    <ButtonLineComponent label="Reset" onClick={() => {
+                        root.KHR_materials_variants.Reset(this.props.host);
+                        this._lastOne = 0;
+                        this.forceUpdate();
+                    }} />
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
                 </LineContainerComponent>
             </div>
         );

loaders/src/glTF/2.0/Extensions/KHR_materials_variants.ts

@@ -20,6 +20,7 @@ interface IKHRMaterialVariants {
 
 interface IExtensionMetadata {
     lastSelected: Nullable<string | Array<string>>;
+    original: Array<{ mesh: AbstractMesh, material: Nullable<Material> }>;
     variants: IVariantsMap;
 }
 
@@ -70,14 +71,9 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
-     * The default variant. Use with SelectVariant to reset the model to the original.
-     */
-    public static readonly DEFAULT = "__default__";
-
-    /**
      * Select a variant given a variant tag name or a list of variant tag names.
      * @param rootMesh The glTF root mesh
-     * @param variantName The variant name(s) to select. Use the `DEFAULT` property to reset back to original.
+     * @param variantName The variant name(s) to select.
      */
     public static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void {
         const extensionMetadata = this._GetExtensionMetadata(rootMesh);
@@ -106,7 +102,24 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
-     * Gets the last selected variant tag name(s).
+     * Reset back to the original before selecting a variant.
+     * @param rootMesh The glTF root mesh
+     */
+    public static Reset(rootMesh: Mesh): void {
+        const extensionMetadata = this._GetExtensionMetadata(rootMesh);
+        if (!extensionMetadata) {
+            throw new Error(`Cannot reset on a glTF mesh that does not have the ${NAME} extension`);
+        }
+
+        for (const entry of extensionMetadata.original) {
+            entry.mesh.material = entry.material;
+        }
+
+        extensionMetadata.lastSelected = null;
+    }
+
+    /**
+     * Gets the last selected variant tag name(s) or null if original.
      * @param rootMesh The glTF root mesh
      * @returns The selected variant tag name(s).
      */
@@ -136,13 +149,13 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
                     const root = this._loader.rootBabylonMesh;
                     const metadata = (root.metadata = root.metadata || {});
                     const gltf = (metadata.gltf = metadata.gltf || {});
-                    const extensionMetadata: IExtensionMetadata = (gltf[NAME] = gltf[NAME] || {
-                        lastSelected: null,
-                        variants: { [KHR_materials_variants.DEFAULT]: [{ mesh: babylonMesh, material: babylonMesh.material }] }
-                    });
-                    const variants = extensionMetadata.variants;
+                    const extensionMetadata: IExtensionMetadata = (gltf[NAME] = gltf[NAME] || { lastSelected: null, original: [], variants: {} });
 
-                    // For each mapping, look at the tags and make a new entry for them
+                    // Store the original material.
+                    extensionMetadata.original.push({ mesh: babylonMesh, material: babylonMesh.material });
+
+                    // For each mapping, look at the tags and make a new entry for them.
+                    const variants = extensionMetadata.variants;
                     for (const mapping of extension.mapping) {
                         for (const tag of mapping.tags) {
                             const material = ArrayItem.Get(`#/materials/`, this._loader.gltf.materials, mapping.material);

sandbox/debug.html

@@ -53,15 +53,6 @@
         </div>
         <div id="footer" class="footer">
             <div id="animationBar">
-                <div class="dropdown">
-                    <div id="dropdownBtn">
-                        <img src="Assets/Icon_Up.svg" id="chevronUp">
-                        <img src="Assets/Icon_Down.svg" id="chevronDown">
-                        <span id="dropdownLabel"></span>
-                    </div>
-                    <div id="dropdownContent">
-                    </div>
-                </div>
                 <div class="row">
                     <button id="playBtn" class="pause">
                         <img id="playImg" src="Assets/Icon_Play.svg">
@@ -69,7 +60,27 @@
                     </button>
                     <input id="slider" type="range" min="0" max="100" value="0" step="any">
                 </div>
+                <div class="dropdown">
+                    <div id="dropdownBtn" class="dropdownBtn">
+                        <img src="Assets/Icon_Up.svg" id="chevronUp" class="chevronUp">
+                        <img src="Assets/Icon_Down.svg" id="chevronDown" class="chevronDown">
+                        <div id="dropdownLabel" class="dropdownLabel"></div>
+                    </div>
+                    <div id="dropdownContent" class="dropdownContent">
+                    </div>
+                </div>
             </div>
+            <div id="variantBar">
+                <div class="dropdown">
+                    <div id="dropdownBtn-variants" class="dropdownBtn">
+                        <img src="Assets/Icon_Up.svg" id="chevronUp-variants" class="chevronUp">
+                        <img src="Assets/Icon_Down.svg" id="chevronDown-variants" class="chevronDown">
+                        <div id="dropdownLabel-variants" class="dropdownLabel"></div>
+                    </div>
+                    <div id="dropdownContent-variants" class="dropdownContent">
+                    </div>
+                </div>
+            </div> 
             <div class="footerRight">
                 <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
                         alt="Display inspector" title="Display inspector" /></a>

sandbox/index-media.css

@@ -13,7 +13,7 @@
         width: 100px;
     }
 
-    #dropdownBtn {
+    .dropdownBtn {
         width: 100px;
     }
 }

sandbox/index.html

@@ -48,15 +48,26 @@
                     <input id="slider" type="range" min="0" max="100" value="0" step="any">
                 </div>
                 <div class="dropdown">
-                    <div id="dropdownBtn">
-                        <img src="Assets/Icon_Up.svg" id="chevronUp">
-                        <img src="Assets/Icon_Down.svg" id="chevronDown">
-                        <div id="dropdownLabel"></div>
+                    <div id="dropdownBtn" class="dropdownBtn">
+                        <img src="Assets/Icon_Up.svg" id="chevronUp" class="chevronUp">
+                        <img src="Assets/Icon_Down.svg" id="chevronDown" class="chevronDown">
+                        <div id="dropdownLabel" class="dropdownLabel"></div>
                     </div>
-                    <div id="dropdownContent">
+                    <div id="dropdownContent" class="dropdownContent">
                     </div>
                 </div>
             </div>
+            <div id="variantBar">
+                <div class="dropdown">
+                    <div id="dropdownBtn-variants" class="dropdownBtn">
+                        <img src="Assets/Icon_Up.svg" id="chevronUp-variants" class="chevronUp">
+                        <img src="Assets/Icon_Down.svg" id="chevronDown-variants" class="chevronDown">
+                        <div id="dropdownLabel-variants" class="dropdownLabel"></div>
+                    </div>
+                    <div id="dropdownContent-variants" class="dropdownContent">
+                    </div>
+                </div>
+            </div> 
             <div class="footerRight">
                 <a href="javascript:void(null);">
                     <div class="custom-upload"

sandbox/index.js

@@ -112,8 +112,14 @@ if (BABYLON.Engine.isSupported()) {
             if (variants && variants.length > 0) {
                 variantBar.style.display = "flex";
                 variantDropdownContent.innerHTML = "";
+<<<<<<< HEAD
                 variantDropdownLabel.innerHTML = "Default";
                 variantDropdownLabel.title = "Default";
+=======
+                variantDropdownLabel.innerHTML = "Original";
+                variantDropdownLabel.title = "Original";                
+                createVariantDropdownLink("Original", root);
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
                 for (var index = 0; index < variants.length; index++) {
                     createVariantDropdownLink(variants[index], root);
                 }

sandbox/variants.js

@@ -34,6 +34,7 @@ variantDropdownBtn.addEventListener("click", function() {
 
 function createVariantDropdownLink(variantName, target) {
     var variant = document.createElement("a");
+<<<<<<< HEAD
     var displayName = variantName;
 
     if (displayName === BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.DEFAULT) {
@@ -47,6 +48,19 @@ function createVariantDropdownLink(variantName, target) {
 
         variantDropdownLabel.innerHTML = displayName;
         variantDropdownLabel.title = displayName;
+=======
+    variant.innerHTML = variantName;
+    variant.title = variantName;
+    variant.addEventListener("click", function() {
+        if (variantName === "Original") {
+            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.Reset(target);
+        } else {
+            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(target, variantName);
+        }
+
+        variantDropdownLabel.innerHTML = variantName;
+        variantDropdownLabel.title = variantName;
+>>>>>>> eed1cab37fd382f46ffdd6ed91c732acd8c85b76
     });
     variantDropdownContent.appendChild(variant);
 }