Merge remote-tracking branch 'upstream/master' into subsurface-scattering

Tools/Config/config.json

@@ -823,4 +823,4 @@
             "legacyPackageOutputDirectory": "../../../Viewer/build/assets/"
         }
     }
-}
+}

azure-pipelines-cd.yml

@@ -33,50 +33,11 @@ jobs:
     env:
       AZURE_PULLREQUESTID: $(System.PullRequest.PullRequestId)
       NETLIFY_AUTH_TOKEN: $(babylon.netlify.authToken)
-  - script: 'npx netlify deploy --prod --dir=sandbox/'
+  - script: 'npx netlify deploy --prod --dir=sandbox/public/'
     displayName: 'netlify deploy babylonjs-sandbox'
     env:
       AZURE_PULLREQUESTID: $(System.PullRequest.PullRequestId)
       NETLIFY_AUTH_TOKEN: $(babylon.netlify.authToken)
-# playground
-#  - script: 'npx netlify unlink'
-#    displayName: 'netlify unlink'
-#  - script: 'npx netlify link --id=9161d5f0-b208-4b86-a281-9300386f6c94'
-#    displayName: 'netlify link babylonjs-playground'
-#    env:
-#      AZURE_PULLREQUESTID: $(System.PullRequest.PullRequestId)
-#      NETLIFY_AUTH_TOKEN: $(babylon.netlify.authToken)
-#  - script: 'npx netlify deploy --prod --dir=Playground/'
-#    displayName: 'netlify deploy babylonjs-playground'
-#    env:
-#      AZURE_PULLREQUESTID: $(System.PullRequest.PullRequestId)
-#      NETLIFY_AUTH_TOKEN: $(babylon.netlify.authToken)
-# babylonjs-preview
-#  - script: 'npx netlify unlink'
-#    displayName: 'netlify unlink'
-#  - script: 'npx netlify link --id=e1c1c520-e3a4-4d5b-91e6-254f1bea1b6b'
-#    displayName: 'netlify link babylonjs-preview'
-#    env:
-#      AZURE_PULLREQUESTID: $(System.PullRequest.PullRequestId)
-#      NETLIFY_AUTH_TOKEN: $(babylon.netlify.authToken)
-#  - script: 'npx netlify deploy --prod --dir="dist/preview release"'
-#    displayName: 'netlify deploy babylonjs-preview'
-#    env:
-#      AZURE_PULLREQUESTID: $(System.PullRequest.PullRequestId)
-#      NETLIFY_AUTH_TOKEN: $(babylon.netlify.authToken)
-# assets-babylonjs
-  - script: 'npx netlify unlink'
-    displayName: 'netlify unlink'
-  - script: 'npx netlify link --id=bd58224a-5f56-42de-afd2-ffa72b85fd71'
-    displayName: 'netlify link assets-babylonjs'
-    env:
-      AZURE_PULLREQUESTID: $(System.PullRequest.PullRequestId)
-      NETLIFY_AUTH_TOKEN: $(babylon.netlify.authToken)
-  - script: 'npx netlify deploy --prod --dir=assets/'
-    displayName: 'netlify deploy assets-babylonjs'
-    env:
-      AZURE_PULLREQUESTID: $(System.PullRequest.PullRequestId)
-      NETLIFY_AUTH_TOKEN: $(babylon.netlify.authToken)
 # nodeeditor
   - script: 'npm install --prefix Tools/Gulp && npx gulp nodeEditor --gulpfile ./Tools/Gulp/gulpfile.js'
     displayName: 'gulp build nodeeditor'
@@ -107,19 +68,19 @@ jobs:
     env:
       AZURE_PULLREQUESTID: $(System.PullRequest.PullRequestId)
       NETLIFY_AUTH_TOKEN: $(babylon.netlify.authToken)
-  - task: AzureFileCopy@2
-    displayName: 'Update Preview Storage'
-    inputs:
-      SourcePath: 'dist/preview release'
-      azureSubscription: 'Visual Studio Enterprise (2bb1afe6-4492-4d3d-9cf8-e658f447d211)'
-      Destination: AzureBlob
-      storage: previewcdn
-      ContainerName: '$web'
+#  - task: AzureFileCopy@2
+#    displayName: 'Update Preview Storage'
+#    inputs:
+#      SourcePath: 'dist/preview release'
+#      azureSubscription: 'Visual Studio Enterprise (2bb1afe6-4492-4d3d-9cf8-e658f447d211)'
+#      Destination: AzureBlob
+#      storage: previewcdn
+#      ContainerName: '$web'
 
-  - task: AzureCLI@2
-    displayName: 'Purge preview CDN'
-    inputs:
-      azureSubscription: 'Visual Studio Enterprise(2bb1afe6-4492-4d3d-9cf8-e658f447d211)'
-      scriptType: 'ps'
-      scriptLocation: 'inlineScript'
-      inlineScript: 'az cdn endpoint purge --resource-group Playground-Resources --profile-name Preview-CDN --name babylonjspreview --content-paths /*'
+#  - task: AzureCLI@2
+#    displayName: 'Purge preview CDN'
+#    inputs:
+#      azureSubscription: 'Visual Studio Enterprise(2bb1afe6-4492-4d3d-9cf8-e658f447d211)'
+#      scriptType: 'ps'
+#      scriptLocation: 'inlineScript'
+#      inlineScript: 'az cdn endpoint purge --resource-group Playground-Resources --profile-name Preview-CDN --name babylonjspreview --content-paths /*'

dist/preview release/babylon.max.js

@@ -29414,6 +29414,9 @@ var SkeletonViewer = /** @class */ (function () {
                 return;
             }
             this._isEnabled = value;
+            if (this._debugMesh) {
+                this._debugMesh.setEnabled(value);
+            }
             if (value) {
                 this._scene.registerBeforeRender(this._renderFunction);
             }

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

@@ -55818,10 +55818,13 @@ var LineContainerComponent = /** @class */ (function (_super) {
     };
     LineContainerComponent.prototype.componentDidMount = function () {
         var _this = this;
-        if (this.props.globalState && this.props.globalState.selectedLineContainerTitles.length === 0) {
+        if (!this.props.globalState) {
             return;
         }
-        if (this.props.globalState && this.props.globalState.selectedLineContainerTitles.indexOf(this.props.title) > -1) {
+        if (this.props.globalState.selectedLineContainerTitles.length === 0 && this.props.globalState.selectedLineContainerTitlesNoFocus.length === 0) {
+            return;
+        }
+        if (this.props.globalState.selectedLineContainerTitles.indexOf(this.props.title) > -1) {
             setTimeout(function () {
                 _this.props.globalState.selectedLineContainerTitles = [];
             });
@@ -55830,6 +55833,9 @@ var LineContainerComponent = /** @class */ (function (_super) {
                 _this.setState({ isHighlighted: false });
             }, 5000);
         }
+        else if (this.props.globalState.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {
+            this.setState({ isExpanded: true, isHighlighted: false });
+        }
         else {
             this.setState({ isExpanded: false });
         }
@@ -68863,8 +68869,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _replayRecorder__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./replayRecorder */ "./components/replayRecorder.ts");
-/* harmony import */ var _inspector__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../inspector */ "./inspector.ts");
-
 
 
 
@@ -68883,6 +68887,7 @@ var GlobalState = /** @class */ (function () {
         this.glTFLoaderDefaults = { "validate": true };
         this.blockMutationUpdates = false;
         this.selectedLineContainerTitles = [];
+        this.selectedLineContainerTitlesNoFocus = [];
         this.recorder = new _replayRecorder__WEBPACK_IMPORTED_MODULE_1__["ReplayRecorder"]();
         this._onlyUseEulers = null;
         this._ignoreBackfacesForPicking = null;
@@ -68954,7 +68959,7 @@ var GlobalState = /** @class */ (function () {
             _this.validationResults = results;
             _this.onValidationResultsUpdatedObservable.notifyObservers(results);
             if (results.issues.numErrors || results.issues.numWarnings) {
-                _inspector__WEBPACK_IMPORTED_MODULE_2__["Inspector"].MarkLineContainerTitleForHighlighting("GLTF VALIDATION");
+                _this.selectedLineContainerTitlesNoFocus.push("GLTF VALIDATION");
                 _this.onTabChangedObservable.notifyObservers(3);
             }
         });

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

@@ -52,6 +52,7 @@ declare module INSPECTOR {
         };
         blockMutationUpdates: boolean;
         selectedLineContainerTitles: Array<string>;
+        selectedLineContainerTitlesNoFocus: Array<string>;
         recorder: ReplayRecorder;
         private _onlyUseEulers;
         get onlyUseEulers(): boolean;

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

@@ -65,6 +65,7 @@ declare module "babylonjs-inspector/components/globalState" {
         };
         blockMutationUpdates: boolean;
         selectedLineContainerTitles: Array<string>;
+        selectedLineContainerTitlesNoFocus: Array<string>;
         recorder: ReplayRecorder;
         private _onlyUseEulers;
         get onlyUseEulers(): boolean;
@@ -3595,6 +3596,7 @@ declare module INSPECTOR {
         };
         blockMutationUpdates: boolean;
         selectedLineContainerTitles: Array<string>;
+        selectedLineContainerTitlesNoFocus: Array<string>;
         recorder: ReplayRecorder;
         private _onlyUseEulers;
         get onlyUseEulers(): boolean;

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

@@ -74,9 +74,10 @@ declare module SANDBOX {
     interface IDropUpButtonProps {
         globalState: GlobalState;
         enabled: boolean;
-        icon: any;
+        icon?: any;
         label: string;
         options: string[];
+        selectedOption?: string;
         onOptionPicked: (option: string) => void;
     }
     export class DropUpButton extends React.Component<IDropUpButtonProps, {
@@ -104,6 +105,28 @@ declare module SANDBOX {
     }
 }
 declare module SANDBOX {
+    interface IAnimationBarProps {
+        globalState: GlobalState;
+        enabled: boolean;
+    }
+    export class AnimationBar extends React.Component<IAnimationBarProps, {
+        groupIndex: number;
+    }> {
+        private _currentScene;
+        private _sliderSyncObserver;
+        private _currentGroup;
+        private _sliderRef;
+        private _currentPlayingState;
+        constructor(props: IAnimationBarProps);
+        getCurrentPosition(): string;
+        registerBeforeRender(newScene: BABYLON.Scene): void;
+        pause(): void;
+        play(): void;
+        sliderInput(evt: React.FormEvent<HTMLInputElement>): void;
+        render(): JSX.Element | null;
+    }
+}
+declare module SANDBOX {
     interface IFooterProps {
         globalState: GlobalState;
     }

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

@@ -88,9 +88,10 @@ declare module "babylonjs-sandbox/components/dropUpButton" {
     interface IDropUpButtonProps {
         globalState: GlobalState;
         enabled: boolean;
-        icon: any;
+        icon?: any;
         label: string;
         options: string[];
+        selectedOption?: string;
         onOptionPicked: (option: string) => void;
     }
     export class DropUpButton extends React.Component<IDropUpButtonProps, {
@@ -119,6 +120,31 @@ declare module "babylonjs-sandbox/components/footerFileButton" {
         render(): JSX.Element | null;
     }
 }
+declare module "babylonjs-sandbox/components/animationBar" {
+    import * as React from "react";
+    import { GlobalState } from "babylonjs-sandbox/globalState";
+    import { Scene } from 'babylonjs/scene';
+    interface IAnimationBarProps {
+        globalState: GlobalState;
+        enabled: boolean;
+    }
+    export class AnimationBar extends React.Component<IAnimationBarProps, {
+        groupIndex: number;
+    }> {
+        private _currentScene;
+        private _sliderSyncObserver;
+        private _currentGroup;
+        private _sliderRef;
+        private _currentPlayingState;
+        constructor(props: IAnimationBarProps);
+        getCurrentPosition(): string;
+        registerBeforeRender(newScene: Scene): void;
+        pause(): void;
+        play(): void;
+        sliderInput(evt: React.FormEvent<HTMLInputElement>): void;
+        render(): JSX.Element | null;
+    }
+}
 declare module "babylonjs-sandbox/components/footer" {
     import * as React from "react";
     import { GlobalState } from "babylonjs-sandbox/globalState";
@@ -237,9 +263,10 @@ declare module SANDBOX {
     interface IDropUpButtonProps {
         globalState: GlobalState;
         enabled: boolean;
-        icon: any;
+        icon?: any;
         label: string;
         options: string[];
+        selectedOption?: string;
         onOptionPicked: (option: string) => void;
     }
     export class DropUpButton extends React.Component<IDropUpButtonProps, {
@@ -267,6 +294,28 @@ declare module SANDBOX {
     }
 }
 declare module SANDBOX {
+    interface IAnimationBarProps {
+        globalState: GlobalState;
+        enabled: boolean;
+    }
+    export class AnimationBar extends React.Component<IAnimationBarProps, {
+        groupIndex: number;
+    }> {
+        private _currentScene;
+        private _sliderSyncObserver;
+        private _currentGroup;
+        private _sliderRef;
+        private _currentPlayingState;
+        constructor(props: IAnimationBarProps);
+        getCurrentPosition(): string;
+        registerBeforeRender(newScene: BABYLON.Scene): void;
+        pause(): void;
+        play(): void;
+        sliderInput(evt: React.FormEvent<HTMLInputElement>): void;
+        render(): JSX.Element | null;
+    }
+}
+declare module SANDBOX {
     interface IFooterProps {
         globalState: GlobalState;
     }

dist/preview release/what's new.md

@@ -235,6 +235,7 @@
 - Fixed MSAA fail on MultiRenderTarget textures ([CraigFeldpsar](https://github.com/craigfeldspar)
 - Fixed wrong display when setting `DefaultRenderingPipeline.imageProcessingEnabled` to `false` ([Popov72](https://github.com/Popov72))
 - Fix crash when loading a .obj file with vertex colors ([Popov72](https://github.com/Popov72))
+- Fix skeleton viewer still visible when `isEnabled = false` ([Popov72](https://github.com/Popov72))
 
 ## Breaking changes
 

inspector/src/components/actionTabs/lineContainerComponent.tsx

@@ -26,11 +26,15 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
     }
 
     componentDidMount() {
-        if (this.props.globalState && this.props.globalState.selectedLineContainerTitles.length === 0) {
+        if (!this.props.globalState) {
             return;
         }
 
-        if (this.props.globalState && this.props.globalState.selectedLineContainerTitles.indexOf(this.props.title) > -1) {
+        if (this.props.globalState.selectedLineContainerTitles.length === 0 && this.props.globalState.selectedLineContainerTitlesNoFocus.length === 0) {
+            return;
+        }
+
+        if (this.props.globalState.selectedLineContainerTitles.indexOf(this.props.title) > -1) {
             setTimeout(() => {
                 this.props.globalState!.selectedLineContainerTitles = [];
             });
@@ -40,6 +44,8 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
             window.setTimeout(() => {
                 this.setState({ isHighlighted: false });
             }, 5000);
+        } else if (this.props.globalState.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {
+            this.setState({ isExpanded: true, isHighlighted: false });
         } else {
             this.setState({isExpanded: false});
         }

inspector/src/components/globalState.ts

@@ -11,7 +11,6 @@ import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { ReplayRecorder } from './replayRecorder';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { CodeChangedEvent } from './codeChangedEvent';
-import { Inspector } from '../inspector';
 
 export class GlobalState {
     public onSelectionChangedObservable: Observable<any>;
@@ -32,7 +31,8 @@ export class GlobalState {
     public glTFLoaderDefaults: { [key: string]: any } = { "validate": true };
 
     public blockMutationUpdates = false;
-    public selectedLineContainerTitles:Array<string> = [];
+    public selectedLineContainerTitles:Array<string> = [];    
+    public selectedLineContainerTitlesNoFocus:Array<string> = [];
 
     public recorder = new ReplayRecorder();
 
@@ -111,7 +111,7 @@ export class GlobalState {
             this.onValidationResultsUpdatedObservable.notifyObservers(results);
 
             if (results.issues.numErrors || results.issues.numWarnings) {
-                Inspector.MarkLineContainerTitleForHighlighting("GLTF VALIDATION");
+                this.selectedLineContainerTitlesNoFocus.push("GLTF VALIDATION");
                 this.onTabChangedObservable.notifyObservers(3);
             }
         });

sandbox/index.css

@@ -212,6 +212,8 @@ a:visited {
     background-color: var(--footer-background);    
     grid-column: 2;
     grid-row: 1;
+    padding: 0px;
+    margin: 0px;
 }
 
 .row {

sandbox/public/index.html

@@ -16,13 +16,13 @@
     <script src="https://preview.babylonjs.com/Oimo.js"></script>
     <script src="https://preview.babylonjs.com/libktx.js"></script>
     <script src="https://preview.babylonjs.com/babylon.js"></script>
-    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
     <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
     <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
 
     
+    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
     <script src="https://preview.babylonjs.com/sandbox/babylon.sandbox.js"></script>
     
     <style>

sandbox/src/components/animationBar.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+import { DropUpButton } from './dropUpButton';
+import { Scene } from 'babylonjs/scene';
+import { Observer } from 'babylonjs/Misc/observable';
+import { Nullable } from 'babylonjs/types';
+import { AnimationGroup } from 'babylonjs/Animations/animationGroup';
+
+var iconPlay = require("../img/icon-play.svg");
+var iconPause = require("../img/icon-pause.svg");
+
+require("../scss/animationBar.scss");
+
+interface IAnimationBarProps {
+    globalState: GlobalState;
+    enabled: boolean;
+}
+
+export class AnimationBar extends React.Component<IAnimationBarProps, {groupIndex: number}> {
+    private _currentScene: Scene;
+    private _sliderSyncObserver: Nullable<Observer<Scene>>;
+    private _currentGroup: Nullable<AnimationGroup>;
+    private _sliderRef: React.RefObject<HTMLInputElement>;
+    private _currentPlayingState: boolean;
+
+    public constructor(props: IAnimationBarProps) {    
+        super(props);
+
+        this._sliderRef = React.createRef();
+
+        this.state = {groupIndex: 0};
+
+        props.globalState.onSceneLoaded.add(info => {
+            this.registerBeforeRender(info.scene);
+        });
+
+        if (this.props.globalState.currentScene) {
+            this.registerBeforeRender(this.props.globalState.currentScene); 
+        }
+    }
+
+    getCurrentPosition() {
+        if (!this._currentGroup) {
+            return "0";
+
+        }
+        let targetedAnimations = this._currentGroup.targetedAnimations;
+        if (targetedAnimations.length > 0) {
+            let runtimeAnimations = this._currentGroup.targetedAnimations[0].animation.runtimeAnimations;
+            if (runtimeAnimations.length > 0) {
+                return runtimeAnimations[0].currentFrame.toString();
+            }
+        }
+
+        return "0";
+    }
+
+    registerBeforeRender(newScene: Scene) {
+        if (this._currentScene) {
+            this._currentScene.onBeforeRenderObservable.remove(this._sliderSyncObserver);
+        }
+
+        this._currentScene = newScene;
+        this._sliderSyncObserver = this._currentScene.onBeforeRenderObservable.add(() => {
+            if (this._currentGroup && this._sliderRef.current) {
+                this._sliderRef.current.value = this.getCurrentPosition();
+
+                if (this._currentPlayingState !== this._currentGroup.isPlaying) {
+                    this.forceUpdate();
+                }
+            }
+        });
+    }
+
+    pause() {
+        if (!this._currentGroup) {
+            return;
+        }
+
+        this._currentGroup.pause();
+        this.forceUpdate();
+    }
+
+    play() {
+        if (!this._currentGroup) {
+            return;
+        }
+
+        this._currentGroup.play();
+        this.forceUpdate();
+    }
+
+    sliderInput(evt: React.FormEvent<HTMLInputElement>) {
+        if (!this._currentGroup) {
+            return;
+        }
+
+        let value = parseFloat((evt.target as HTMLInputElement).value);
+
+        if (!this._currentGroup.isPlaying) {
+            this._currentGroup.play(true);
+            this._currentGroup.goToFrame(value);
+            this._currentGroup.pause();
+        } else {
+            this._currentGroup.goToFrame(value);
+        }
+    }
+
+    public render() {
+        if (!this.props.enabled) {
+            this._currentGroup = null;
+            return null;
+        }
+        let scene = this.props.globalState.currentScene;
+        
+        if (scene.animationGroups.length === 0) {
+            this._currentGroup = null;
+            return null;
+        }
+        
+        let groupNames = scene.animationGroups.map(g => g.name);
+
+        this._currentGroup = scene.animationGroups[this.state.groupIndex];
+        this._currentPlayingState = this._currentGroup.isPlaying;
+
+        return (
+            <div className="animationBar">
+                <div className="row">
+                    <button id="playBtn">
+                        {
+                            this._currentGroup.isPlaying &&
+                            <img id="pauseImg" src={iconPause} onClick={() => this.pause()}/>
+                        }
+                        {
+                            !this._currentGroup.isPlaying &&
+                            <img id="playImg" src={iconPlay} onClick={() => this.play()}/>
+                        }
+                    </button>
+                    <input ref={this._sliderRef} className="slider" type="range" 
+                        onInput={evt => this.sliderInput(evt)}
+                        min={this._currentGroup.from} 
+                        max={this._currentGroup.to} 
+                        onChange={() => {}}
+                        value={this.getCurrentPosition()} step="any"></input>
+                </div>
+                <DropUpButton globalState={this.props.globalState} 
+                                    label="Active animation group"
+                                    options={groupNames}
+                                    selectedOption={this._currentGroup.name}
+                                    onOptionPicked={option => {
+                                        this._currentGroup!.stop();
+
+                                        let newIndex = groupNames.indexOf(option);
+                                        this.setState({groupIndex: newIndex});
+
+                                        scene.animationGroups[newIndex].play(true);
+                                    }}
+                                    enabled={true}/>
+            </div>            
+        )
+    }
+}

sandbox/src/components/dropUpButton.tsx

@@ -3,13 +3,16 @@ import { GlobalState } from '../globalState';
 import { Nullable } from 'babylonjs/types';
 import { Observer } from 'babylonjs/Misc/observable';
 
+var iconUp = require("../img/icon-up.svg");
+var iconDown = require("../img/icon-down.svg");
 
 interface IDropUpButtonProps {
     globalState: GlobalState;
     enabled: boolean;
-    icon: any;
+    icon?: any;
     label: string;
     options: string[];
+    selectedOption?: string;
     onOptionPicked: (option: string) => void;
 }
 
@@ -22,7 +25,7 @@ export class DropUpButton extends React.Component<IDropUpButtonProps, {isOpen: b
         this.state = {isOpen: false};
 
         this._onClickInterceptorClickedObserver = props.globalState.onClickInterceptorClicked.add(() => {
-            this.switchDropUp();
+            this.setState({isOpen: false});
         });
     }
 
@@ -46,13 +49,32 @@ export class DropUpButton extends React.Component<IDropUpButtonProps, {isOpen: b
         }
 
         return (
-            <>
-                <div className="button" onClick={() => this.switchDropUp()}>
-                    <img src={this.props.icon} alt={this.props.label} title={this.props.label}  />
-                </div>
+            <div className="dropup">
+                {
+                    this.props.icon &&
+                    <div className={"button" + (this.state.isOpen ? " active" : "")} onClick={() => this.switchDropUp()}>
+                        <img src={this.props.icon} alt={this.props.label} title={this.props.label}  />
+                    </div>
+                }
+                {
+                    this.props.selectedOption &&
+                    <div className={"button long" + (this.state.isOpen ? " active" : "")} onClick={() => this.switchDropUp()}> 
+                        {
+                            this.state.isOpen &&
+                            <img className="button-icon" src={iconDown} alt="Close the list" title="Close the list"  />
+                        }            
+                        {
+                            !this.state.isOpen &&
+                            <img className="button-icon" src={iconUp} alt="Open the list" title="Open the list"  />
+                        }           
+                        <div className="button-text" title={this.props.selectedOption}>
+                            {this.props.selectedOption}
+                        </div>                           
+                    </div>
+                }
                 {
                     this.state.isOpen &&
-                    <div className="dropup-content">
+                    <div className={"dropup-content" + (this.props.selectedOption ? " long-mode" : "")}>
                     {
                         this.props.options.map(o => {
                             return(
@@ -64,7 +86,7 @@ export class DropUpButton extends React.Component<IDropUpButtonProps, {isOpen: b
                     }
                     </div>
                 }
-            </>
+            </div>
         )
     }
 }

sandbox/src/components/footer.tsx

@@ -4,6 +4,7 @@ import { FooterButton } from './footerButton';
 import { DropUpButton } from './dropUpButton';
 import { EnvironmentTools } from '../tools/environmentTools';
 import { FooterFileButton } from './footerFileButton';
+import { AnimationBar } from './animationBar';
 
 require("../scss/footer.scss");
 var babylonIdentity = require("../img/babylon-identity.svg");
@@ -16,8 +17,7 @@ interface IFooterProps {
 }
 
 export class Footer extends React.Component<IFooterProps> {
-    
-        
+            
     public constructor(props: IFooterProps) {    
         super(props);
         props.globalState.onSceneLoaded.add(info => {
@@ -42,6 +42,8 @@ export class Footer extends React.Component<IFooterProps> {
                 <div className="footerLeft">
                     <img id="logoImg" src={babylonIdentity}/>
                 </div>
+                <AnimationBar globalState={this.props.globalState} 
+                                enabled={!!this.props.globalState.currentScene}/>
                 <div className="footerRight">
                     <FooterFileButton globalState={this.props.globalState} 
                                 enabled={true}

sandbox/src/components/footerButton.tsx

@@ -15,6 +15,7 @@ export class FooterButton extends React.Component<IFooterButtonProps> {
         if (!this.props.enabled) {
             return null;
         }
+        
 
         return (
             <div className="button" onClick={() => this.props.onClick()}>

sandbox/src/img/icon-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;}</style></defs><title>DownArrowIcon</title><g id="Layer_2" data-name="Layer 2"><g id="Redlines"><path class="cls-1" d="M23.14,30.07l1.42-1.42L34.85,38.94,45.14,28.65l1.41,1.42L34.85,41.78Z"/><rect class="cls-2" width="70" height="70"/></g></g></svg>

sandbox/src/img/icon-pause.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><title>PauseIcon</title><g id="Layer_2" data-name="Layer 2"><g id="Redlines"><rect class="cls-1" width="70" height="70"/><path class="cls-2" d="M28.83,44.37v-20h2v20Zm10-20h2v20h-2Z"/></g></g></svg>

sandbox/src/img/icon-play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><title>PlayIcon</title><g id="Layer_2" data-name="Layer 2"><g id="Redlines"><rect class="cls-1" width="70" height="70"/><path class="cls-2" d="M28.83,25.13l16,10-16,10Zm2,3.61V41.52l10.22-6.39Z"/></g></g></svg>

sandbox/src/img/icon-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;}</style></defs><title>UpArrowIcon</title><g id="Layer_2" data-name="Layer 2"><g id="Redlines"><path class="cls-1" d="M34.85,29.78,24.56,40.06l-1.42-1.41L34.85,26.94l11.7,11.71-1.42,1.41Z"/><rect class="cls-2" width="70" height="70"/></g></g></svg>

sandbox/src/sandbox.tsx

@@ -118,7 +118,10 @@ export class Sandbox extends React.Component<ISandboxProps, {isFooterVisible: bo
                     cameraPosition={this._cameraPosition} 
                     expanded={!this.state.isFooterVisible}/>                
                 <div ref={this._clickInterceptorRef} 
-                    onClick={() => this._globalState.onClickInterceptorClicked.notifyObservers()}
+                    onClick={() => {
+                        this._globalState.onClickInterceptorClicked.notifyObservers();
+                        this._clickInterceptorRef.current!.classList.add("hidden");
+                    }}
                     className="clickInterceptor hidden"></div>
                 {
                     this.state.isFooterVisible &&

sandbox/src/scss/animationBar.scss

@@ -0,0 +1,135 @@
+.animationBar {
+    align-items: center;
+    color: white;
+    min-height: 30px;
+    height: var(--footer-height);
+    background-color: var(--footer-background);    
+    grid-column: 2;
+    grid-row: 1;
+    margin-left: 10px;
+    display: flex;
+
+    * {        
+        padding: 0px;
+        margin: 0px;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-grow: 10;
+        align-items: center
+    }
+
+    #playBtn {    
+        display: flex;
+        align-items: center;
+        height: var(--footer-height);
+        width: var(--footer-height);
+        border: none;
+        background-color: inherit;
+        cursor: pointer;
+
+        img {
+            width: var(--footer-height);
+            height: var(--footer-height);
+        }
+
+        &:hover {
+            background-color: var(--button-hover-color);   
+        }
+    
+        &:active {
+            background-color: var(--button-hover-background);
+        }
+    
+        &:focus {
+            outline: none !important;
+            border: none;
+        }    
+    }
+
+    .slider {
+        -webkit-appearance: none;
+        cursor: pointer;
+        width: 100%;
+        max-width: 820px;
+        height: var(--footer-height);
+        outline: none;
+        margin-left: 20px;
+        margin-right: 10px;
+        background-color: transparent;
+    }
+
+    /*Chrome -webkit */
+    .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 20px;
+        height: 20px;
+        border: 2px solid white;
+        border-radius: 50%;
+        background: var(--footer-background);
+        margin-top: -10px;
+    }
+    .slider::-webkit-slider-runnable-track {
+        height: 2px;
+        -webkit-appearance: none;
+        background-color: white;
+    }
+
+
+    /** FireFox -moz */
+    .slider::-moz-range-progress {
+    background-color: white;
+    height: 2px; 
+    }
+    .slider::-moz-range-thumb{
+        width: 20px;
+        height: 20px;
+        border: 2px solid white;
+        border-radius: 50%;
+        background: var(--footer-background);
+    }
+    .slider::-moz-range-track {
+        background: white;
+        height: 2px;
+    }
+
+    /** IE -ms */
+    .slider::-ms-track {
+        height: 2px;
+        
+        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+        background: transparent;
+        
+        /*leave room for the larger thumb to overflow with a transparent border */
+        border-color: transparent;
+        border-width: 10px 0;
+
+        /*remove default tick marks*/
+        color: transparent;
+    }
+    .slider::-ms-fill-lower {
+        background: white;
+        border-radius: 5px;
+    }
+    .slider::-ms-fill-upper {
+        background: white;
+        border-radius: 5px;
+    }
+    .slider::-ms-thumb {
+        width: 16px;
+        height: 16px;
+        border: 2px solid white;
+        border-radius: 50%;
+        background: var(--footer-background);
+        margin-top: 0px;
+    }
+}
+
+@media (max-width: 768px) {
+    .animationBar {       
+        margin-left: 0;
+    }
+}

sandbox/src/scss/footer.scss

@@ -24,43 +24,70 @@
         }
     }
 
-    .footerRight {
-        display: flex;
-        flex-direction: row-reverse;
-        grid-column: 3;
-        grid-row: 1;
+    .button {
+        float: left; /* Float links side by side */
+        width: var(--footer-height);
+        height: var(--footer-height);
+        margin: 0px;
+        padding: 0;
+        transition: all 0.3s ease; /* Add transition for hover effects */
+        display: grid;
+        align-content: center;
+        justify-content: center;
+        cursor: pointer;
 
-        .button {
-            float: left; /* Float links side by side */
-            width: var(--footer-height);
-            height: var(--footer-height);
-            margin: 0px;
-            padding: 0;
-            transition: all 0.3s ease; /* Add transition for hover effects */
-            display: grid;
-            align-content: center;
-            justify-content: center;
-            cursor: pointer;
+        &.long {
+            width: 200px;
+            grid-template-columns: var(--footer-height) calc(200px - var(--footer-height));
 
-            img {
-                width: var(--footer-height);
-                height: var(--footer-height);
-            }
-            
-            &:hover {
-                background-color: var(--button-hover-color);
+            .button-icon {
+                grid-row: 1;
+                grid-column: 1;
             }
-            
-            &:active {
-                background-color: var(--button-hover-background);
+
+            .button-text {
+                grid-row: 1;
+                grid-column: 2;
+                align-self: center;
+                justify-self: left;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-size: var(--font-size)
             }
-        }         
+        }
+
+        &.active {
+            background-color: var(--button-hover-color);
+        }
+
+        img {
+            width: var(--footer-height);
+            height: var(--footer-height);
+        }
+        
+        &:hover {
+            background-color: var(--button-hover-color);
+        }
         
+        &:active {
+            background-color: var(--button-hover-background);
+        }
+    }   
+
+    .dropup {
+        position: relative;        
+
         .dropup-content {
             position: absolute;
             bottom: var(--footer-height);
-            right: 0px;     
-            z-index: 100;
+            left: 0px;     
+            z-index: 100;            
+            width: calc(2 * var(--footer-height));
+
+            &.long-mode {
+                width: 200px;
+            }
 
             div  {
                 background-color: var(--button-hover-color);
@@ -68,7 +95,7 @@
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 font-size: var(--font-size);
-                width: calc(2 * var(--footer-height));
+                width: 100%;
                 color: white;
                 cursor: pointer;
                 height: 40px;
@@ -88,8 +115,15 @@
                     transition: all 0.3s ease;
                 }
             }
-        }    
-        
+        }     
+    }
+
+    .footerRight {
+        display: flex;
+        flex-direction: row-reverse;
+        grid-column: 3;
+        grid-row: 1;
+                     
         .custom-upload {
             position: relative;
             background-position: center right;
@@ -130,4 +164,23 @@
             }
         }
     }
-}
+}
+
+@media (max-width: 768px) {
+    .footer {       
+        grid-template-columns: 0px 1fr 150px;
+
+        .dropup {
+            .dropup-content {    
+                width: 100px;
+            }
+        }
+
+        .button {    
+            &.long {
+                width: 100px;                
+                grid-template-columns: var(--footer-height) calc(100px - var(--footer-height));
+            }
+        }
+    }
+}

sandbox/src/scss/main.scss

@@ -96,3 +96,10 @@ html, body, #root {
             }
         }
 }
+
+@media (max-width: 768px) {
+    html {
+        --footer-height: 50px;
+        --font-size: 16px;
+    }
+}

sandbox/src/tools/environmentTools.ts

@@ -21,7 +21,7 @@ export class EnvironmentTools {
     ];    
 
     public static LoadSkyboxPathTexture(scene: Scene) {                
-        var defaultSkyboxIndex = LocalStorageHelper.ReadLocalStorageValue("defaultSkyboxId", 0);
+        var defaultSkyboxIndex = Math.max(0, LocalStorageHelper.ReadLocalStorageValue("defaultSkyboxId", 0));
         let path = this.SkyboxPath || this.Skyboxes[defaultSkyboxIndex];
         if (path.indexOf(".hdr") === (path.length - 4)) {
             return new HDRCubeTexture(path, scene, 256, false, true, false, true);

src/Debug/skeletonViewer.ts

@@ -70,6 +70,10 @@ export class SkeletonViewer {
 
         this._isEnabled = value;
 
+        if (this._debugMesh) {
+            this._debugMesh.setEnabled(value);
+        }
+
         if (value) {
             this._scene.registerBeforeRender(this._renderFunction);
         } else {

src/Engines/Native/nativeShaderProcessor.ts

@@ -1,142 +0,0 @@
-import { WebGL2ShaderProcessor } from "../WebGL/webGL2ShaderProcessors";
-import { VertexBuffer } from "../../Meshes/buffer";
-
-// These numbers must match the values for bgfx::Attrib::Enum
-const attributeLocations: { [kind: string]: number } = {
-    [VertexBuffer.PositionKind]: 0,
-    [VertexBuffer.NormalKind]: 1,
-    [VertexBuffer.TangentKind]: 2,
-    [VertexBuffer.UVKind]: 10,
-    [VertexBuffer.UV2Kind]: 11,
-    [VertexBuffer.UV3Kind]: 12,
-    [VertexBuffer.UV4Kind]: 13,
-    [VertexBuffer.ColorKind]: 4,
-    [VertexBuffer.MatricesIndicesKind]: 8,
-    [VertexBuffer.MatricesWeightsKind]: 9,
-};
-// Remap BJS names to bgfx names
-const attributeBGFXName: { [kind: string]: string } = {
-    [VertexBuffer.PositionKind]: "a_position",
-    [VertexBuffer.NormalKind]: "a_normal",
-    [VertexBuffer.TangentKind]: "a_tangent",
-    [VertexBuffer.UVKind]: "a_texcoord0",
-    [VertexBuffer.UV2Kind]: "a_texcoord1",
-    [VertexBuffer.UV3Kind]: "a_texcoord2",
-    [VertexBuffer.UV4Kind]: "a_texcoord3",
-    [VertexBuffer.ColorKind]: "a_color0",
-    [VertexBuffer.MatricesIndicesKind]: "a_indices",
-    [VertexBuffer.MatricesWeightsKind]: "a_weight",
-};
-
-// Must match bgfx::Attrib::TexCoord0
-const firstGenericAttributeLocation = 10;
-
-// Must match bgfx::Attrib::TexCoord7
-const lastGenericAttributeLocation = 17;
-
-/** @hidden */
-export class NativeShaderProcessor extends WebGL2ShaderProcessor {
-    private _genericAttributeLocation: number;
-    private _varyingLocationCount: number;
-    private _varyingLocationMap: { [name: string]: number };
-    private _replacements: Array<{ searchValue: RegExp, replaceValue: string }>;
-    private _textureCount: number;
-    private _uniforms: Array<string>;
-
-    public lineProcessor(line: string): string {
-        for (const replacement of this._replacements) {
-            line = line.replace(replacement.searchValue, replacement.replaceValue);
-        }
-
-        return line;
-    }
-
-    public attributeProcessor(attribute: string): string {
-        const match = attribute.match(/attribute\s+[^\s]+\s+([^\s]+)\s*(?:\[.+\])?\s*;/)!;
-        const name = match[1];
-
-        let location = attributeLocations[name];
-        if (location === undefined) {
-            location = this._genericAttributeLocation++;
-            if (location > lastGenericAttributeLocation) {
-                throw new Error("Exceeded maximum custom attributes");
-            }
-        }
-        let newName = attributeBGFXName[name];
-        if (newName === undefined) {
-            throw new Error("Can't find bgfx name mapping");
-        }
-        attribute = attribute.replace(name, newName);
-        this._replacements.push({ searchValue: new RegExp(`\\b${name}\\b`, 'g'), replaceValue: `${newName}` });
-        return `layout(location=${location}) ${super.attributeProcessor(attribute)}`;
-    }
-
-    public varyingProcessor(varying: string, isFragment: boolean): string {
-        let location: number;
-
-        if (isFragment) {
-            location = this._varyingLocationMap[varying];
-        }
-        else {
-            location = this._varyingLocationCount++;
-            this._varyingLocationMap[varying] = location;
-        }
-
-        return `layout(location=${location}) ${super.varyingProcessor(varying, isFragment)}`;
-    }
-
-    public uniformProcessor(uniform: string): string {
-        const match = uniform.match(/uniform\s+([^\s]+)\s+([^\s]+)\s*(?:\[.+\])?\s*;/)!;
-        const type = match[1];
-        const name = match[2];
-
-        switch (type) {
-            case "sampler2D":
-            case "samplerCube": {
-                const suffix = type.substr(7);
-                const binding = this._textureCount++;
-                this._replacements.push({ searchValue: new RegExp(`\\b${name}\\b`), replaceValue: `sampler${suffix}(${name}Texture, ${name})` });
-                return `layout(binding=${binding}) uniform texture${suffix} ${name}Texture;\nlayout(binding=${binding}) uniform sampler ${name};`;
-            }
-            case "float": {
-                this._replacements.push({ searchValue: new RegExp(`\\b${name}\\b`), replaceValue: `${name}.x` });
-                uniform = `uniform vec4 ${name};`;
-                break;
-            }
-            case "vec2": {
-                this._replacements.push({ searchValue: new RegExp(`\\b${name}\\b`), replaceValue: `${name}.xy` });
-                uniform = `uniform vec4 ${name};`;
-                break;
-            }
-            case "vec3": {
-                this._replacements.push({ searchValue: new RegExp(`\\b${name}\\b`), replaceValue: `${name}.xyz` });
-                uniform = `uniform vec4 ${name};`;
-                break;
-            }
-        }
-
-        this._uniforms.push(uniform);
-        return this._uniforms.length === 1 ? "<UNIFORM>" : "";
-    }
-
-    public preProcessor(code: string, defines: string[], isFragment: boolean): string {
-        this._genericAttributeLocation = firstGenericAttributeLocation;
-
-        if (!isFragment) {
-            this._varyingLocationCount = 0;
-            this._varyingLocationMap = {};
-        }
-
-        this._replacements = [];
-        this._textureCount = 0;
-        this._uniforms = [];
-        return code;
-    }
-
-    public postProcessor(code: string, defines: string[], isFragment: boolean): string {
-        code = super.postProcessor(code, defines, isFragment);
-        code = code.replace("<UNIFORM>", `layout(binding=0) uniform Frame {\n${this._uniforms.join("\n")}\n};`);
-        code = code.replace("out vec4 glFragColor", "layout(location=0) out vec4 glFragColor");
-        return code;
-    }
-}