@babylonjs/inspector 5.0.0-beta.9 → 5.0.0-rc.0

package/babylon.inspector.bundle.max.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-inspector"] = factory(require("@babylonjs/core"), require("@babylonjs/gui"), require("@babylonjs/loaders"), require("@babylonjs/materials"), require("@babylonjs/serializers"));
 	else
 		root["INSPECTOR"] = factory(root["BABYLON"], root["BABYLON"]["GUI"], root["BABYLON"], root["BABYLON"]["MATERIALS"], root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE__babylonjs_core_Misc_observable__, __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_image__, __WEBPACK_EXTERNAL_MODULE__babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE__babylonjs_materials_grid_gridMaterial__, __WEBPACK_EXTERNAL_MODULE__babylonjs_serializers_glTF_2_0_index__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE__babylonjs_core_Misc_observable__, __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_control__, __WEBPACK_EXTERNAL_MODULE__babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE__babylonjs_materials_grid_gridMaterial__, __WEBPACK_EXTERNAL_MODULE__babylonjs_serializers_glTF_2_0_index__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -45814,6 +45814,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 var DebugTabComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(DebugTabComponent, _super);
     function DebugTabComponent(props) {
@@ -48023,8 +48024,9 @@ var RangeSelectorComponent = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Context", function() { return Context; });
-/* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/core/Misc/observable */ "@babylonjs/core/Misc/observable");
-/* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/core/Animations/animation */ "@babylonjs/core/Misc/observable");
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__);
+
 
 ;
 var Context = /** @class */ (function () {
@@ -48036,43 +48038,43 @@ var Context = /** @class */ (function () {
         this.referenceMinFrame = 0;
         this.referenceMaxFrame = 100;
         this.focusedInput = false;
-        this.onActiveAnimationChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onActiveKeyPointChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onHostWindowResized = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onSelectAllKeys = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onActiveKeyFrameChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onFrameSet = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onFrameManuallyEntered = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onMainKeyPointSet = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onMainKeyPointMoved = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onValueSet = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onValueManuallyEntered = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onFrameRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onCreateOrUpdateKeyPointRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onFlattenTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onLinearTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onBreakTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onUnifyTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onStepTangentRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onDeleteAnimation = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onGraphMoved = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onGraphScaled = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onRangeUpdated = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onMoveToFrameRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onAnimationStateChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onDeleteKeyActiveKeyPoints = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onSelectionRectangleMoved = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onAnimationsLoaded = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onEditAnimationRequired = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onEditAnimationUIClosed = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onClipLengthIncreased = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onClipLengthDecreased = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onInterpolationModeSet = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
-        this.onSelectToActivated = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onActiveAnimationChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onActiveKeyPointChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onHostWindowResized = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onSelectAllKeys = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onActiveKeyFrameChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onFrameSet = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onFrameManuallyEntered = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onMainKeyPointSet = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onMainKeyPointMoved = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onValueSet = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onValueManuallyEntered = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onFrameRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onCreateOrUpdateKeyPointRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onFlattenTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onLinearTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onBreakTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onUnifyTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onStepTangentRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onDeleteAnimation = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onGraphMoved = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onGraphScaled = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onRangeUpdated = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onMoveToFrameRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onAnimationStateChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onDeleteKeyActiveKeyPoints = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onSelectionRectangleMoved = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onAnimationsLoaded = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onEditAnimationRequired = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onEditAnimationUIClosed = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onClipLengthIncreased = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onClipLengthDecreased = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onInterpolationModeSet = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onSelectToActivated = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.lockLastFrameValue = false;
         this.lockLastFrameFrame = false;
         // value frame inTangent outTangent
-        this.onActiveKeyDataChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onActiveKeyDataChanged = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
     }
     Context.prototype.prepare = function () {
         this.isPlaying = false;
@@ -48265,6 +48267,13 @@ var Context = /** @class */ (function () {
         }
         return null;
     };
+    Context.prototype.hasActiveQuaternionAnimationKeyPoints = function () {
+        var _a;
+        var activeAnimData = (_a = this.activeKeyPoints) === null || _a === void 0 ? void 0 : _a.map(function (keyPointComponent) { return keyPointComponent.props.curve.animation.dataType; });
+        var quaternionAnimData = activeAnimData === null || activeAnimData === void 0 ? void 0 : activeAnimData.filter(function (type) { return (type === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Animation"].ANIMATIONTYPE_QUATERNION); });
+        var hasActiveQuaternionAnimation = ((quaternionAnimData === null || quaternionAnimData === void 0 ? void 0 : quaternionAnimData.length) || 0) > 0;
+        return hasActiveQuaternionAnimation;
+    };
     return Context;
 }());
 
@@ -48491,14 +48500,15 @@ var CanvasComponent = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Curve", function() { return Curve; });
-/* harmony import */ var _babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/core/Animations/animationKey */ "@babylonjs/core/Misc/observable");
-/* harmony import */ var _babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/core/Animations/animation */ "@babylonjs/core/Misc/observable");
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__);
+
 
 
 var Curve = /** @class */ (function () {
     function Curve(color, animation, property, tangentBuilder, setDefaultInTangent, setDefaultOutTangent) {
         this.keys = new Array();
-        this.onDataUpdatedObservable = new _babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this.onDataUpdatedObservable = new _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
         this.color = color;
         this.animation = animation;
         this.property = property;
@@ -48512,6 +48522,7 @@ var Curve = /** @class */ (function () {
             return "";
         }
         var pathData = "M".concat(convertX(keys[0].frame), " ").concat(convertY(keys[0].value));
+        var dataType = this.animation.dataType;
         for (var keyIndex = 1; keyIndex < keys.length; keyIndex++) {
             var outTangent = keys[keyIndex - 1].outTangent;
             var inTangent = keys[keyIndex].inTangent;
@@ -48521,12 +48532,12 @@ var Curve = /** @class */ (function () {
             var prevValue = keys[keyIndex - 1].value;
             var frameDist = currentFrame - prevFrame;
             var prevInterpolation = keys[keyIndex - 1].interpolation;
-            if (prevInterpolation === _babylonjs_core_Animations_animationKey__WEBPACK_IMPORTED_MODULE_0__["AnimationKeyInterpolation"].STEP) { // Draw a stepped curve
+            if (prevInterpolation === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["AnimationKeyInterpolation"].STEP) { // Draw a stepped curve
                 pathData += "L ".concat(convertX(currentFrame), " ").concat(convertY(prevValue));
                 pathData += "L ".concat(convertX(currentFrame), " ").concat(convertY(currentValue));
                 continue;
             }
-            if (outTangent === undefined && inTangent === undefined) { // Draw a straight line
+            if (outTangent === undefined && inTangent === undefined && dataType !== _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__["Animation"].ANIMATIONTYPE_QUATERNION) { // Draw a straight line
                 pathData += " L".concat(convertX(currentFrame), " ").concat(convertY(currentValue));
                 continue;
             }
@@ -48722,6 +48733,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
 /* 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 _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babylonjs/core/Animations/animation */ "@babylonjs/core/Misc/observable");
+/* harmony import */ var _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__);
+
 
 
 var CurveComponent = /** @class */ (function (_super) {
@@ -48765,12 +48779,17 @@ var CurveComponent = /** @class */ (function (_super) {
         if (!this.props.context.isChannelEnabled(this.props.curve.animation, this.props.curve.color)) {
             return null;
         }
+        var pathStyle = {
+            stroke: this.props.curve.color,
+            fill: "none",
+            strokeWidth: "1",
+        };
+        if (this.props.curve.animation.dataType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Animation"].ANIMATIONTYPE_QUATERNION) {
+            pathStyle['stroke-dasharray'] = '5';
+            pathStyle['stroke-opacity'] = '0.5';
+        }
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("svg", { style: { cursor: "pointer", overflow: "auto" } },
-            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", { d: this.props.curve.getPathData(this.props.convertX, this.props.convertY), style: {
-                    stroke: this.props.curve.color,
-                    fill: "none",
-                    strokeWidth: "1",
-                } })));
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", { d: this.props.curve.getPathData(this.props.convertX, this.props.convertY), style: pathStyle })));
     };
     return CurveComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -48995,6 +49014,9 @@ var GraphComponent = /** @class */ (function (_super) {
             }
             for (var _i = 0, _a = _this.props.context.activeAnimations; _i < _a.length; _i++) {
                 var currentAnimation = _a[_i];
+                if (currentAnimation.dataType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Animation"].ANIMATIONTYPE_QUATERNION) {
+                    continue;
+                }
                 var keys = currentAnimation.getKeys();
                 var currentFrame = _this.props.context.activeFrame;
                 var indexToAdd = -1;
@@ -49056,10 +49078,6 @@ var GraphComponent = /** @class */ (function (_super) {
                                 derivative = _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Vector3"].Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
                                 break;
                             }
-                            case _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Animation"].ANIMATIONTYPE_QUATERNION: {
-                                derivative = _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Quaternion"].Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
-                                break;
-                            }
                             case _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Animation"].ANIMATIONTYPE_COLOR3:
                                 derivative = _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_2__["Color3"].Hermite1stDerivative(leftKey.value.scale(invFrameDelta), leftKey.outTangent, rightKey.value.scale(invFrameDelta), rightKey.inTangent, cutTime);
                                 break;
@@ -49815,6 +49833,11 @@ var KeyPointComponent = /** @class */ (function (_super) {
             if (!_this._keyPointSVG.current) {
                 return;
             }
+            var animationType = _this.props.curve.animation.dataType;
+            var isQuaternionAnimation = animationType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_QUATERNION;
+            if (isQuaternionAnimation) {
+                return;
+            }
             var rect2 = _this._keyPointSVG.current.getBoundingClientRect();
             var overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
             if (!_this.props.context.activeKeyPoints) {
@@ -50050,6 +50073,10 @@ var KeyPointComponent = /** @class */ (function (_super) {
             this.props.context.activeKeyPoints = [];
         }
         evt.preventDefault();
+        var isQuaternionAnimation = this.props.curve.animation.dataType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_QUATERNION;
+        if (isQuaternionAnimation) {
+            return;
+        }
         this._select(evt.nativeEvent.ctrlKey);
         this.props.context.onActiveKeyPointChanged.notifyObservers();
         this._pointerIsDown = true;
@@ -50057,15 +50084,15 @@ var KeyPointComponent = /** @class */ (function (_super) {
         this._sourcePointerX = evt.nativeEvent.offsetX;
         this._sourcePointerY = evt.nativeEvent.offsetY;
         var target = evt.nativeEvent.target;
-        if (target.tagName === "image") {
+        if (target.tagName === "image" && !isQuaternionAnimation) {
             this._controlMode = ControlMode.Key;
             this.setState({ tangentSelectedIndex: -1 });
         }
-        else if (target.classList.contains("left-tangent")) {
+        else if (target.classList.contains("left-tangent") && !isQuaternionAnimation) {
             this._controlMode = ControlMode.TangentLeft;
             this.setState({ tangentSelectedIndex: 0 });
         }
-        else if (target.classList.contains("right-tangent")) {
+        else if (target.classList.contains("right-tangent") && !isQuaternionAnimation) {
             this._controlMode = ControlMode.TangentRight;
             this.setState({ tangentSelectedIndex: 1 });
         }
@@ -50101,7 +50128,7 @@ var KeyPointComponent = /** @class */ (function (_super) {
     };
     KeyPointComponent.prototype._onPointerMove = function (evt) {
         var _this = this;
-        if (!this._pointerIsDown || this.state.selectedState !== SelectionState.Selected) {
+        if (!this._pointerIsDown || this.state.selectedState !== SelectionState.Selected || this.props.context.hasActiveQuaternionAnimationKeyPoints()) {
             return;
         }
         if (this._controlMode === ControlMode.Key) {
@@ -50218,6 +50245,7 @@ var KeyPointComponent = /** @class */ (function (_super) {
         }
         var animationType = this.props.curve.animation.dataType;
         var isColorAnimation = animationType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_COLOR3 || animationType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_COLOR4;
+        var isQuaternionAnimation = animationType === _babylonjs_core_Animations_animation__WEBPACK_IMPORTED_MODULE_1__["Animation"].ANIMATIONTYPE_QUATERNION;
         var svgImageIcon = this.state.selectedState === SelectionState.Selected ? keySelected : this.state.selectedState === SelectionState.Siblings ? keyActive : keyInactive;
         var keys = this.props.curve.keys;
         var isLockedTangent = (_a = keys[this.props.keyId].lockedTangent) !== null && _a !== void 0 ? _a : true;
@@ -50247,10 +50275,10 @@ var KeyPointComponent = /** @class */ (function (_super) {
         this._inVec.scaleInPlace(100 * this.props.scale);
         this._outVec.normalize();
         this._outVec.scaleInPlace(100 * this.props.scale);
-        return (react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("svg", { ref: this._svgHost, onPointerDown: function (evt) { return _this._onPointerDown(evt); }, onPointerMove: function (evt) { return _this._onPointerMove(evt); }, onPointerUp: function (evt) { return _this._onPointerUp(evt); }, x: this.state.x, y: this.state.y, style: { cursor: "pointer", overflow: "auto" } },
+        return (react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("svg", { ref: this._svgHost, onPointerDown: function (evt) { return _this._onPointerDown(evt); }, onPointerMove: function (evt) { return _this._onPointerMove(evt); }, onPointerUp: function (evt) { return _this._onPointerUp(evt); }, x: this.state.x, y: this.state.y, style: { cursor: isQuaternionAnimation ? "auto" : "pointer", overflow: "auto", opacity: isQuaternionAnimation ? "25%" : "100%" } },
             react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("image", { x: "-".concat(8 * this.props.scale), y: "-".concat(8 * this.props.scale), width: "".concat(16 * this.props.scale), height: "".concat(16 * this.props.scale), ref: this._keyPointSVG, href: svgImageIcon }),
             this.state.selectedState === SelectionState.Selected && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("g", null,
-                this.props.keyId !== 0 && !hasStepTangentIn && !isColorAnimation && hasDefinedInTangent && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"](react__WEBPACK_IMPORTED_MODULE_2__["Fragment"], null,
+                this.props.keyId !== 0 && !hasStepTangentIn && !isColorAnimation && !isQuaternionAnimation && hasDefinedInTangent && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"](react__WEBPACK_IMPORTED_MODULE_2__["Fragment"], null,
                     react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("line", { x1: 0, y1: 0, x2: "".concat(this._inVec.x, "px"), y2: "".concat(this._inVec.y, "px"), style: {
                             stroke: this.state.tangentSelectedIndex === 0 || this.state.tangentSelectedIndex === -1 ? "#F9BF00" : "#AAAAAA",
                             strokeWidth: "".concat(1 * this.props.scale),
@@ -50259,7 +50287,7 @@ var KeyPointComponent = /** @class */ (function (_super) {
                     react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("circle", { className: "left-tangent", cx: "".concat(this._inVec.x, "px"), cy: "".concat(this._inVec.y, "px"), r: "".concat(4 * this.props.scale), style: {
                             fill: this.state.tangentSelectedIndex === 0 || this.state.tangentSelectedIndex === -1 ? "#F9BF00" : "#AAAAAA",
                         } }))),
-                this.props.keyId !== keys.length - 1 && !hasStepTangentOut && !isColorAnimation && hasDefinedOutTangent && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"](react__WEBPACK_IMPORTED_MODULE_2__["Fragment"], null,
+                this.props.keyId !== keys.length - 1 && !hasStepTangentOut && !isColorAnimation && !isQuaternionAnimation && hasDefinedOutTangent && (react__WEBPACK_IMPORTED_MODULE_2__["createElement"](react__WEBPACK_IMPORTED_MODULE_2__["Fragment"], null,
                     react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("line", { x1: 0, y1: 0, x2: "".concat(this._outVec.x, "px"), y2: "".concat(this._outVec.y, "px"), style: {
                             stroke: this.state.tangentSelectedIndex === 1 || this.state.tangentSelectedIndex === -1 ? "#F9BF00" : "#AAAAAA",
                             strokeWidth: "".concat(1 * this.props.scale),
@@ -51794,7 +51822,8 @@ var TopBarComponent = /** @class */ (function (_super) {
             var numAnims = new Set((_b = _this.props.context.activeKeyPoints) === null || _b === void 0 ? void 0 : _b.map(function (keyPointComponent) { return keyPointComponent.props.curve.animation.uniqueId; })).size;
             var frameControlEnabled = (numKeys === 1 && numAnims === 1) || (numKeys > 1 && numAnims > 1);
             var valueControlEnabled = numKeys > 0;
-            _this.setState({ keyFrameValue: "", keyValue: "", frameControlEnabled: frameControlEnabled, valueControlEnabled: valueControlEnabled });
+            var hasActiveQuaternionAnimation = _this.props.context.hasActiveQuaternionAnimationKeyPoints();
+            _this.setState({ keyFrameValue: "", keyValue: "", frameControlEnabled: frameControlEnabled && !hasActiveQuaternionAnimation, valueControlEnabled: valueControlEnabled && !hasActiveQuaternionAnimation });
         });
         return _this;
     }
@@ -53384,6 +53413,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 var PBRMaterialPropertyGridComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(PBRMaterialPropertyGridComponent, _super);
     function PBRMaterialPropertyGridComponent(props) {
@@ -53434,7 +53465,7 @@ var PBRMaterialPropertyGridComponent = /** @class */ (function (_super) {
             { label: "Anisotropic Tangents", value: 12 },
             { label: "Anisotropic Bitangents", value: 13 },
             // Maps
-            { label: "Albdeo Map", value: 20 },
+            { label: "Albedo Map", value: 20 },
             { label: "Ambient Map", value: 21 },
             { label: "Opacity Map", value: 22 },
             { label: "Emissive Map", value: 23 },
@@ -53870,7 +53901,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/optionsLineComponent */ "./sharedUiComponents/lines/optionsLineComponent.tsx");
 /* harmony import */ var _sharedUiComponents_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/fileButtonLineComponent */ "./sharedUiComponents/lines/fileButtonLineComponent.tsx");
 /* harmony import */ var _sharedUiComponents_lines_valueLineComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/valueLineComponent */ "./sharedUiComponents/lines/valueLineComponent.tsx");
-/* harmony import */ var _babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @babylonjs/gui/2D/adtInstrumentation */ "@babylonjs/gui/2D/controls/image");
+/* harmony import */ var _babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @babylonjs/gui/2D/adtInstrumentation */ "@babylonjs/gui/2D/controls/control");
 /* harmony import */ var _babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__);
 /* harmony import */ var _customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../customPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/customPropertyGridComponent.tsx");
 /* harmony import */ var _sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../../../../sharedUiComponents/lines/buttonLineComponent */ "./sharedUiComponents/lines/buttonLineComponent.tsx");
@@ -56227,6 +56258,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 var MeshPropertyGridComponent = /** @class */ (function (_super) {
@@ -58506,6 +58538,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 var ScenePropertyGridComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ScenePropertyGridComponent, _super);
     function ScenePropertyGridComponent(props) {
@@ -59413,14 +59446,20 @@ var GLTFComponent = /** @class */ (function (_super) {
             ];
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "GLTF LOADER", closed: true, selection: this.props.globalState },
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Always compute bounding box", target: loaderState, propertyName: "alwaysComputeBoundingBox" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Always compute skeleton root node", target: loaderState, propertyName: "alwaysComputeSkeletonRootNode" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__["OptionsLineComponent"], { label: "Animation start mode", options: animationStartMode, target: loaderState, propertyName: "animationStartMode" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Capture performance counters", target: loaderState, propertyName: "capturePerformanceCounters" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Compile materials", target: loaderState, propertyName: "compileMaterials" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Compile shadow generators", target: loaderState, propertyName: "compileShadowGenerators" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__["OptionsLineComponent"], { label: "Coordinate system", options: coordinateSystemMode, target: loaderState, propertyName: "coordinateSystemMode" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Create instances", target: loaderState, propertyName: "createInstances" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Enable logging", target: loaderState, propertyName: "loggingEnabled" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Load all materials", target: loaderState, propertyName: "loadAllMaterials" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { label: "Target FPS", target: loaderState, propertyName: "targetFps", isInteger: true }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Transparency as coverage", target: loaderState, propertyName: "transparencyAsCoverage" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Use clip plane", target: loaderState, propertyName: "useClipPlane" }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Use sRGB buffers", target: loaderState, propertyName: "useSRGBBuffers" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Validate", target: loaderState, propertyName: "validate" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__["MessageLineComponent"], { text: "You need to reload your file to see these changes" })),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { title: "GLTF EXTENSIONS", closed: true, selection: this.props.globalState },
@@ -60040,14 +60079,20 @@ var GlobalState = /** @class */ (function () {
             EXT_texture_webp: { enabled: true },
         };
         this.glTFLoaderDefaults = {
+            alwaysComputeBoundingBox: false,
+            alwaysComputeSkeletonRootNode: false,
             animationStartMode: typeof _babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderAnimationStartMode"] !== 'undefined' ? _babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderAnimationStartMode"].FIRST : 1,
             capturePerformanceCounters: false,
             compileMaterials: false,
             compileShadowGenerators: false,
             coordinateSystemMode: typeof _babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderCoordinateSystemMode"] !== 'undefined' ? _babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderCoordinateSystemMode"].AUTO : 0,
+            createInstances: true,
+            loadAllMaterials: false,
             loggingEnabled: false,
+            targetFps: 60,
             transparencyAsCoverage: false,
             useClipPlane: false,
+            useSRGBBuffers: true,
         };
         this.glTFLoaderExtensions = {};
         this.blockMutationUpdates = false;
@@ -61453,6 +61498,11 @@ var PopupComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(PopupComponent, _super);
     function PopupComponent(props) {
         var _this = _super.call(this, props) || this;
+        _this.onBeforeUnloadListener = function () {
+            if (_this._window) {
+                _this._window.close();
+            }
+        };
         _this._container = document.createElement("div");
         _this._container.id = _this.props.id;
         _this._window;
@@ -61478,6 +61528,7 @@ var PopupComponent = /** @class */ (function (_super) {
             this._container.appendChild(this._host);
         }
         this._window = _inspector__WEBPACK_IMPORTED_MODULE_3__["Inspector"][windowVariableName];
+        window.addEventListener("beforeunload", this.onBeforeUnloadListener);
         if (this._window) {
             if (onOpen) {
                 onOpen(this._window);
@@ -61510,6 +61561,7 @@ var PopupComponent = /** @class */ (function (_super) {
         }
     };
     PopupComponent.prototype.componentWillUnmount = function () {
+        window.removeEventListener("beforeunload", this.onBeforeUnloadListener);
         if (this._window) {
             this._window.close();
         }
@@ -62162,6 +62214,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _extensionsComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../extensionsComponent */ "./components/sceneExplorer/extensionsComponent.tsx");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _babylonjs_core_Rendering_boundingBoxRenderer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @babylonjs/core/Rendering/boundingBoxRenderer */ "@babylonjs/core/Misc/observable");
+/* harmony import */ var _babylonjs_core_Rendering_boundingBoxRenderer__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Rendering_boundingBoxRenderer__WEBPACK_IMPORTED_MODULE_7__);
+
 
 
 
@@ -63155,6 +63210,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+// side effects
+
+
 
 __webpack_require__(/*! ./sceneExplorer.scss */ "./components/sceneExplorer/sceneExplorer.scss");
 var SceneExplorerFilterComponent = /** @class */ (function (_super) {
@@ -64607,7 +64666,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'lodPixelShader';
-var shader = "\n#extension GL_EXT_shader_texture_lod : enable\n\nprecision highp float;\n\nvarying vec2 vUV;\nuniform sampler2D textureSampler;\nuniform float lod;\nuniform vec2 texSize;\nvoid main(void)\n{\n    gl_FragColor = textureLod(textureSampler,vUV,lod);\n}";
+var shader = "\n#extension GL_EXT_shader_texture_lod : enable\n\nprecision highp float;\n\nconst float GammaEncodePowerApprox = 1.0 / 2.2;\n\nvarying vec2 vUV;\nuniform sampler2D textureSampler;\nuniform float lod;\nuniform vec2 texSize;\nuniform bool gamma;\nvoid main(void)\n{\n    gl_FragColor = textureLod(textureSampler,vUV,lod);\n    if (!gamma) {\n        gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(GammaEncodePowerApprox));\n    }\n}";
 _babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0__["Effect"].ShadersStore[name] = shader;
 /** @hidden */
 var lodPixelShader = { name: name, shader: shader };
@@ -64629,7 +64688,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'lodCubePixelShader';
-var shader = "\nprecision highp float;\n\nvarying vec2 vUV;\nuniform samplerCube textureSampler;\nuniform float lod;\nvoid main(void)\n{\n    vec2 uv=vUV*2.0-1.0;\n    #ifdef POSITIVEX\n    gl_FragColor=textureCube(textureSampler,vec3(1.001,uv.y,uv.x),lod);\n    #endif\n    #ifdef NEGATIVEX\n    gl_FragColor=textureCube(textureSampler,vec3(-1.001,uv.y,uv.x),lod);\n    #endif\n    #ifdef POSITIVEY\n    gl_FragColor=textureCube(textureSampler,vec3(uv.y,1.001,uv.x),lod);\n    #endif\n    #ifdef NEGATIVEY\n    gl_FragColor=textureCube(textureSampler,vec3(uv.y,-1.001,uv.x),lod);\n    #endif\n    #ifdef POSITIVEZ\n    gl_FragColor=textureCube(textureSampler,vec3(uv,1.001),lod);\n    #endif\n    #ifdef NEGATIVEZ\n    gl_FragColor=textureCube(textureSampler,vec3(uv,-1.001),lod);\n    #endif\n}";
+var shader = "\nprecision highp float;\n\nconst float GammaEncodePowerApprox = 1.0 / 2.2;\n\nvarying vec2 vUV;\nuniform samplerCube textureSampler;\nuniform float lod;\nuniform bool gamma;\nvoid main(void)\n{\n    vec2 uv=vUV*2.0-1.0;\n    #ifdef POSITIVEX\n    gl_FragColor=textureCube(textureSampler,vec3(1.001,uv.y,uv.x),lod);\n    #endif\n    #ifdef NEGATIVEX\n    gl_FragColor=textureCube(textureSampler,vec3(-1.001,uv.y,uv.x),lod);\n    #endif\n    #ifdef POSITIVEY\n    gl_FragColor=textureCube(textureSampler,vec3(uv.y,1.001,uv.x),lod);\n    #endif\n    #ifdef NEGATIVEY\n    gl_FragColor=textureCube(textureSampler,vec3(uv.y,-1.001,uv.x),lod);\n    #endif\n    #ifdef POSITIVEZ\n    gl_FragColor=textureCube(textureSampler,vec3(uv,1.001),lod);\n    #endif\n    #ifdef NEGATIVEZ\n    gl_FragColor=textureCube(textureSampler,vec3(uv,-1.001),lod);\n    #endif\n    if (!gamma) {\n        gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(GammaEncodePowerApprox));\n    }\n}";
 _babylonjs_core_Materials_effect__WEBPACK_IMPORTED_MODULE_0__["Effect"].ShadersStore[name] = shader;
 /** @hidden */
 var lodCubePixelShader = { name: name, shader: shader };
@@ -65393,7 +65452,7 @@ var ColorLineComponent = /** @class */ (function (_super) {
                         _this.setColorFromString(newValue);
                     }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "copy hoverIcon", onClick: function () { return _this.copyToClipboard(); }, title: "Copy to clipboard" },
-                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: copyIcon, alt: "" })),
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: copyIcon, alt: "Copy" })),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "expand hoverIcon", onClick: function () { return _this.switchExpandState(); }, title: "Expand" }, chevron)),
             this.state.isExpanded && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "secondLine" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "r", value: this.state.color.r, onChange: function (value) { return _this.updateStateR(value); } }),
@@ -65967,6 +66026,59 @@ var IndentedTextLineComponent = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./sharedUiComponents/lines/inputArrowsComponent.tsx":
+/*!***********************************************************!*\
+  !*** ./sharedUiComponents/lines/inputArrowsComponent.tsx ***!
+  \***********************************************************/
+/*! exports provided: InputArrowsComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputArrowsComponent", function() { return InputArrowsComponent; });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
+/* 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__);
+
+
+var upArrowIcon = __webpack_require__(/*! ./valueUpArrowIcon.svg */ "./sharedUiComponents/lines/valueUpArrowIcon.svg");
+var downArrowIcon = __webpack_require__(/*! ./valueDownArrowIcon.svg */ "./sharedUiComponents/lines/valueDownArrowIcon.svg");
+var InputArrowsComponent = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(InputArrowsComponent, _super);
+    function InputArrowsComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._arrowsRef = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
+        _this._drag = function (event) {
+            _this.props.incrementValue(event.movementY);
+        };
+        _this._releaseListener = function () {
+            var _a, _b;
+            _this.props.setDragging(false);
+            (_a = _this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.exitPointerLock();
+            window.removeEventListener("pointerup", _this._releaseListener);
+            (_b = _this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener("mousemove", _this._drag);
+        };
+        return _this;
+    }
+    InputArrowsComponent.prototype.render = function () {
+        var _this = this;
+        return react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "arrows", ref: this._arrowsRef, onPointerDown: function (event) {
+                var _a, _b;
+                _this.props.setDragging(true);
+                (_a = _this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.requestPointerLock();
+                window.addEventListener("pointerup", _this._releaseListener);
+                (_b = _this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener("mousemove", _this._drag);
+            }, onDragStart: function (evt) { return evt.preventDefault(); } },
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { className: "upArrowIcon", src: upArrowIcon, alt: "Increase Value" }),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { className: "downArrowIcon", src: downArrowIcon, alt: "Increase Value" }));
+    };
+    return InputArrowsComponent;
+}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
+
+
+
 /***/ }),
 
 /***/ "./sharedUiComponents/lines/lineContainerComponent.tsx":
@@ -66455,7 +66567,7 @@ var SliderLineComponent = /** @class */ (function (_super) {
                 }, onChange: function (evt) {
                     var changed = _this.prepareDataToRead(_this.state.value);
                     _this.onChange(changed);
-                } }),
+                }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "slider" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { className: "range", type: "range", step: this.props.step, min: this.prepareDataToRead(this.props.minimum), max: this.prepareDataToRead(this.props.maximum), value: this.prepareDataToRead(this.state.value), onInput: function (evt) { return _this.onInput(evt.target.value); }, onChange: function (evt) { return _this.onChange(evt.target.value); } }))));
     };
@@ -66541,6 +66653,8 @@ __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 _targetsProxy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
+/* harmony import */ var _inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./inputArrowsComponent */ "./sharedUiComponents/lines/inputArrowsComponent.tsx");
+
 
 
 
@@ -66549,7 +66663,10 @@ var TextInputLineComponent = /** @class */ (function (_super) {
     function TextInputLineComponent(props) {
         var _this = _super.call(this, props) || this;
         _this._localChange = false;
-        _this.state = { value: (_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "" };
+        _this.state = {
+            value: (_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "",
+            dragging: false
+        };
         return _this;
     }
     TextInputLineComponent.prototype.componentWillUnmount = function () {
@@ -66565,6 +66682,8 @@ var TextInputLineComponent = /** @class */ (function (_super) {
             nextState.value = newValue || "";
             return true;
         }
+        if (nextState.dragging != this.state.dragging)
+            return true;
         return false;
     };
     TextInputLineComponent.prototype.raiseOnPropertyChanged = function (newValue, previousValue) {
@@ -66603,6 +66722,29 @@ var TextInputLineComponent = /** @class */ (function (_super) {
         }
         this.raiseOnPropertyChanged(value, store);
     };
+    TextInputLineComponent.prototype.incrementValue = function (amount) {
+        if (this.props.step) {
+            amount *= this.props.step;
+        }
+        if (this.props.arrowsIncrement) {
+            this.props.arrowsIncrement(amount);
+            return;
+        }
+        var currentValue = parseFloat(this.state.value);
+        this.updateValue((currentValue + amount).toFixed(2));
+    };
+    TextInputLineComponent.prototype.onKeyDown = function (event) {
+        if (this.props.arrows) {
+            if (event.key === "ArrowUp") {
+                this.incrementValue(-1);
+                event.preventDefault();
+            }
+            if (event.key === "ArrowDown") {
+                this.incrementValue(1);
+                event.preventDefault();
+            }
+        }
+    };
     TextInputLineComponent.prototype.render = function () {
         var _this = this;
         var value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] ? "" : this.state.value;
@@ -66610,11 +66752,13 @@ var TextInputLineComponent = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine" },
             this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }),
             (!this.props.icon || (this.props.icon && this.props.label != "")) && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label)),
-            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value" + (this.props.noUnderline === true ? " noUnderline" : "") },
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value".concat(this.props.noUnderline === true ? " noUnderline" : "").concat(this.props.arrows ? " hasArrows" : "").concat(this.state.dragging ? " dragging" : "") },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: value, onBlur: function () {
                         _this.props.lockObject.lock = false;
                         _this.updateValue((_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "");
-                    }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); }, placeholder: placeholder })),
+                    }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); }, onKeyDown: function (evt) { return _this.onKeyDown(evt); }, placeholder: placeholder }),
+                this.props.arrows &&
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__["InputArrowsComponent"], { incrementValue: function (amount) { return _this.incrementValue(amount); }, setDragging: function (dragging) { return _this.setState({ dragging: dragging }); } })),
             this.props.unit !== undefined && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("button", { className: this.props.unitLocked ? "unit disabled" : "unit", onClick: function () { if (_this.props.onUnitClicked && !_this.props.unitLocked)
                     _this.props.onUnitClicked(_this.props.unit || ""); } }, this.props.unit)));
     };
@@ -66677,6 +66821,17 @@ var TextLineComponent = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./sharedUiComponents/lines/valueDownArrowIcon.svg":
+/*!*********************************************************!*\
+  !*** ./sharedUiComponents/lines/valueDownArrowIcon.svg ***!
+  \*********************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M4.09,5.55a.61.61,0,0,1,.85,0l2,2V1.79a.6.6,0,1,1,1.2,0V7.52l2-2a.61.61,0,0,1,.85,0,.6.6,0,0,1,0,.84l-3,3a.6.6,0,0,1-.84,0l-3-3A.6.6,0,0,1,4.09,5.55Z'/%3E%3C/svg%3E"
+
 /***/ }),
 
 /***/ "./sharedUiComponents/lines/valueLineComponent.tsx":
@@ -66712,6 +66867,17 @@ var ValueLineComponent = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./sharedUiComponents/lines/valueUpArrowIcon.svg":
+/*!*******************************************************!*\
+  !*** ./sharedUiComponents/lines/valueUpArrowIcon.svg ***!
+  \*******************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M4.09,9.45a.6.6,0,0,1,0-.84l3-3a.6.6,0,0,1,.84,0l3,3a.6.6,0,0,1,0,.84.61.61,0,0,1-.85,0l-2-2v5.73a.6.6,0,0,1-1.2,0V7.48l-2,2A.61.61,0,0,1,4.09,9.45Z'/%3E%3C/svg%3E"
+
 /***/ }),
 
 /***/ "./sharedUiComponents/lines/vector2LineComponent.tsx":
@@ -67236,7 +67402,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../lines/lineContainerComponent */ "./sharedUiComponents/lines/lineContainerComponent.tsx");
 /* harmony import */ var _lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
-/* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/control */ "@babylonjs/gui/2D/controls/image");
+/* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/control */ "@babylonjs/gui/2D/controls/control");
 /* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/sliderLineComponent */ "./sharedUiComponents/lines/sliderLineComponent.tsx");
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
@@ -67552,7 +67718,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent */ "./sharedUiComponents/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
 /* harmony import */ var _lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lines/lineContainerComponent */ "./sharedUiComponents/lines/lineContainerComponent.tsx");
-/* harmony import */ var _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/image */ "@babylonjs/gui/2D/controls/image");
+/* harmony import */ var _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/image */ "@babylonjs/gui/2D/controls/control");
 /* harmony import */ var _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
 /* harmony import */ var _lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
@@ -67971,7 +68137,7 @@ __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 _tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent */ "./sharedUiComponents/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
-/* harmony import */ var _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/textBlock */ "@babylonjs/gui/2D/controls/image");
+/* harmony import */ var _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/textBlock */ "@babylonjs/gui/2D/controls/control");
 /* harmony import */ var _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../lines/lineContainerComponent */ "./sharedUiComponents/lines/lineContainerComponent.tsx");
 /* harmony import */ var _lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
@@ -68091,7 +68257,7 @@ var TextureHelper = /** @class */ (function () {
                         scene = texture.getScene();
                         engine = scene.getEngine();
                         if (!texture.isCube) {
-                            lodPostProcess = new _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["PostProcess"]("lod", "lod", ["lod"], null, 1.0, null, _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_NEAREST_MIPNEAREST, engine);
+                            lodPostProcess = new _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["PostProcess"]("lod", "lod", ["lod", "gamma"], null, 1.0, null, _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_NEAREST_MIPNEAREST, engine);
                         }
                         else {
                             faceDefines = [
@@ -68102,7 +68268,7 @@ var TextureHelper = /** @class */ (function () {
                                 "#define POSITIVEZ",
                                 "#define NEGATIVEZ",
                             ];
-                            lodPostProcess = new _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["PostProcess"]("lodCube", "lodCube", ["lod"], null, 1.0, null, _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_NEAREST_MIPNEAREST, engine, false, faceDefines[face]);
+                            lodPostProcess = new _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["PostProcess"]("lodCube", "lodCube", ["lod", "gamma"], null, 1.0, null, _babylonjs_core_PostProcesses_postProcess__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_NEAREST_MIPNEAREST, engine, false, faceDefines[face]);
                         }
                         if (!lodPostProcess.getEffect().isReady()) {
                             // Try again later
@@ -68119,6 +68285,7 @@ var TextureHelper = /** @class */ (function () {
                         lodPostProcess.onApply = function (effect) {
                             effect.setTexture("textureSampler", texture);
                             effect.setFloat("lod", lod);
+                            effect.setBool("gamma", texture.gammaSpace);
                         };
                         internalTexture = texture.getInternalTexture();
                         if (!(rtt.renderTarget && internalTexture)) return [3 /*break*/, 2];
@@ -68320,14 +68487,14 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__babylonjs_core_Misc_observable__;
 
 /***/ }),
 
-/***/ "@babylonjs/gui/2D/controls/image":
+/***/ "@babylonjs/gui/2D/controls/control":
 /*!***************************************************************************************************************************!*\
   !*** external {"root":["BABYLON","GUI"],"commonjs":"@babylonjs/gui","commonjs2":"@babylonjs/gui","amd":"@babylonjs/gui"} ***!
   \***************************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_image__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__babylonjs_gui_2D_controls_control__;
 
 /***/ }),