Merge remote-tracking branch 'BabylonJS/master' into viewer-extends

Playground/frame.css

@@ -8,6 +8,11 @@
     touch-action: none;
 }
 
+canvas {
+    border:none !important;
+    outline:none !important;
+}
+
 #fpsLabel {
     position: absolute;
     right: 10px;

Playground/frame.html

@@ -24,9 +24,12 @@
     <meta name="theme-color" content="#ffffff">
 
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
     <!-- Babylon.js -->
     <script src="https://preview.babylonjs.com/cannon.js"></script>
     <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
     <script src="https://preview.babylonjs.com/babylon.js"></script>
     <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 

Viewer/assets/templates/default/defaultTemplate.html

@@ -1,3 +1,16 @@
+<style>
+    @font-face {
+        font-family: 'babylon';
+        src: url('{{babylonFont}}') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    .icon {
+        font-family: "babylon";
+    }
+</style>
+
 <viewer></viewer>
 <loading-screen></loading-screen>
 <overlay></overlay>

Viewer/assets/templates/default/navbar.html

@@ -1,79 +1,304 @@
 <style>
     nav-bar {
         position: absolute;
-        height: 160px;
+        height: 48px;
         width: 100%;
-        bottom: 0;
-        background-color: rgba(0, 0, 0, 0.3);
+        bottom: 10px;
+        display: flex;
+        justify-content: center;
+    }
+
+    nav-bar .nav-container {
+        display: flex;
+        flex-direction: row;
+        margin: 0 10px;
+        height: 100%;
+        width: 100%;
+        justify-content: center;
+    }
+
+    nav-bar .animation-control {
+        background-color: rgba(91, 93, 107, .75);
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+        width: 100%;
+        max-width: 1280px;
+        justify-content: center;
+    }
+
+    nav-bar .flex-container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+    }
+
+    nav-bar button {
+        background: none;
+        border: none;
         color: white;
-        transition: 1s;
-        align-items: flex-start;
-        justify-content: space-around;
+        margin: 0;
+        padding: 0;
+
+        height: 100%;
+        min-width: 48px;
+        cursor: pointer;
+    }
+
+    nav-bar button:hover,
+    nav-bar button:active,
+    nav-bar button:focus {
+        background: none;
+        border: none;
+        outline: none;
+    }
+
+    nav-bar button:hover {
+        background-color: rgba(22, 24, 26, .20);
+    }
+
+    nav-bar .control-text {
+        font-family: "Segoe UI";
+        font-size: 12px;
+        font-weight: 400;
+        pointer-events: none;
+    }
+
+    nav-bar img,
+    nav-bar .icon {
+        pointer-events: none;
+    }
+
+    .logo-button {
         display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: center;
+        background-color: rgba(91, 93, 107, .75);
+        height: 48px;
+        min-width: 48px;
+        margin-right: 4px;
+    }
 
+    .logo-button img {
+        height: 20px;
+        width: 20px;
+    }
+
+    .types {
+        display: flex;
         flex-direction: column;
+        width: 48px;
     }
 
-    /* Big screens have room for the entire navbar */
+    .types .flex-container,
+    .speed .flex-container {
+        align-items: center;
+    }
 
-    @media screen and (min-width: 768px) {
-        nav-bar {
-            align-items: center;
-            flex-direction: row;
-            justify-content: space-between;
-            height: 80px;
-        }
+    .menu-options {
+        position: absolute;
+        bottom: 48px;
+        width: 48px;
+        background-color: rgba(22, 24, 26, .90);
+    }
+
+    .logo-button,
+    .animation-label,
+    .types-icon,
+    .help,
+    .speed {
+        display: none;
+    }
+
+    .types-icon:after {
+        font-size: 16px;
+        content: "\F6BE";
+    }
+
+    .up-icon:after {
+        line-height: 16px;
+        font-size: 12px;
+        content: "\E70E";
+    }
+
+    .play-icon:after {
+        font-size: 16px;
+        content: "\E768";
+    }
+
+    .pause-icon:after {
+        font-size: 16px;
+        content: "\E769";
     }
 
-    div.flex-container {
+    .fullscreen-icon:after {
+        font-size: 16px;
+        content: "\E740";
+    }
+
+    .help-icon:after {
+        /* TODO: wrong Icon, need font update */
+        font-size: 16px;
+        content: "\F70C";
+    }
+
+    .progress-control {
         display: flex;
-        width: 100%;
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
     }
 
-    div.thumbnail {
+    .progress-bar-container {
         position: relative;
         overflow: hidden;
-        display: block;
-        width: 40px;
-        height: 40px;
-        background-size: cover;
-        background-position: center;
-        border-radius: 20px;
-        margin: 0 10px;
     }
 
-    div.title-container {
-        flex-direction: column;
-        display: flex;
-        justify-content: space-between;
+    .progress-bar {
+        align-self: center;
+        flex: 1;
+        background-color: rgb(255, 255, 255);
+        height: 2px;
+        position: absolute;
+        width: 100%;
+        right: 0;
+        pointer-events: none;
     }
 
-    span.model-title {
-        font-size: 125%;
+    .animation-number {
+        margin: 0 6px;
     }
 
-    span.model-subtitle {
-        font-size: 90%;
+    .speed-text {
+        margin-right: 6px;
     }
 
-    div.button-container,
-    div.animation-container {
-        align-items: center;
-        justify-content: flex-end;
+    .progress-wrapper {
+        height: 0px;
+        background-color: rgba(91, 93, 107, .75);
+        width: 100%;
+        border-top: 2px solid rgba(204, 210, 214, .4);
     }
 
-    div.button {
+    .progress-circle {
+        width: 12px;
+        height: 12px;
+        border: 2px solid rgb(255, 255, 255);
+        border-radius: 50%;
+        background-color: rgb(91, 93, 107);
         cursor: pointer;
-        height: 30px;
-        margin: 0 10px;
+        position: relative;
+        bottom: 10px;
+        pointer-events: none;
     }
 
-    div.button img {
+    .default-control {
+        display: flex;
+        flex-direction: row;
         height: 100%;
+        background-color: rgba(91, 93, 107, .75);
+    }
+
+    .menu-options button {
+        width: 100%;
+        height: 48px;
+        color: rgb(142, 147, 155);
+    }
+
+    .menu-options button {
+        width: 100%;
+        height: 48px;
+        color: rgb(142, 147, 155);
+    }
+
+    .menu-options button:hover {
+        background-color: transparent;
+        color: rgb(255, 255, 255);
+    }
+
+    .menu-options .animation-number {
+        margin: 0 18px 0 6px;
+    }
+
+    .menu-options .speed-text {
+        margin-right: 18px;
+    }
+
+    .menu-options {
+        visibility: hidden;
+    }
+
+    .open .menu-options {
+        visibility: visible;
+    }
+
+    @media screen and (min-width: 540px) {
+        .help,
+        .types-icon,
+        .speed {
+            display: inline-block;
+        }
+
+        .logo-button {
+            display: flex;
+        }
+
+        .types {
+            width: 84px;
+        }
+
+        .progress-bar-container {
+            margin: 0 12px;
+        }
+
+        .types .menu-options {
+            width: 84px;
+        }
+        .speed {
+            width: 64px;
+        }
+
+        .speed .menu-options {
+            width: 64px;
+        }
+    }
+
+    @media screen and (min-width: 1024px) {
+        .animation-label {
+            display: block;
+            margin-left: 6px;
+        }
+
+        .progress-bar-container {
+            margin: 0 12px;
+        }
+
+        .types {
+            width: 144px;
+        }
+        .types .menu-options {
+            width: 144px;
+        }
     }
 </style>
 
-{{#if disableOnFullscreen}}
+{{#if (or (not animations) hideAnimations)}} {{#if hideLogo}}
+<style>
+    nav-bar .nav-container {
+        justify-content: flex-end;
+    }
+</style>
+{{else}}
+<style>
+    nav-bar .nav-container {
+        justify-content: space-between;
+    }
+</style>
+{{/if}} {{/if}} {{#if disableOnFullscreen}}
 <style>
     viewer:fullscreen nav-bar {
         display: none;
@@ -89,33 +314,72 @@
 </style>
 {{/if}}
 
-<div class="flex-container" id="model-metadata">
-    <!-- holding the description -->
-    <div class="thumbnail">
-        <!-- holding the thumbnail 
-        <img src="{{thumbnail}}" alt="{{title}}">-->
+<div class="nav-container" id="navbar-control">
+    {{#unless hideLogo}}
+    <div class="logo-button" title="{{logoText}}">
+        <img src="{{logoImg}}">
     </div>
-    <div class="title-container">
-
-        <span class="model-title">{{#if title}}{{title}}{{/if}}</span>
-        <span class="model-subtitle"> {{#if subtitle}}{{subtitle}} {{/if}}</span>
+    {{/unless}} {{#unless (or (not animations) hideAnimations)}}
+    <div class="animation-control">
+        <div class="types">
+            <button class="flex-container" id="types-button">
+                <span class="icon types-icon"></span>
+                <span class="control-text animation-label">Animation</span>
+                <span class="control-text animation-number">{{selectedAnimation}}</span>
+                {{#if (gt (count animations) 1)}}
+                <span class="icon up-icon"></span>
+                {{/if}}
+            </button>
+            <div class="menu-options">
+                {{#each animations}} {{#unless (eq ../selectedAnimation (add @index 1))}}
+                <button class="flex-container" id="label-option-button" data-value="{{this}}">
+                    <span class="icon types-icon"></span>
+                    <span class="control-text animation-label">Animation</span>
+                    <span class="control-text animation-number">{{add @index 1}}</span>
+                </button>
+                {{/unless}} {{/each}}
+            </div>
+        </div>
+        <div class="progress-control" id="progress-control">
+            <button class="play-pause" id="play-pause-button">
+                {{#if paused}}
+                <span class="icon play-icon"></span>
+                {{else}}
+                <span class="icon pause-icon"></span>
+                {{/if}}
+            </button>
+            <div class="progress-bar-container flex-container" id="progress-bar-container">
+                <div class="progress-bar">
+                    <div class="progress-wrapper" id="progress-wrapper">
+                        <div class="progress-circle" id="progress-circle"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="speed">
+            <button class="flex-container" id="speed-button">
+                <span class="control-text speed-text">{{selectedSpeed}}</span>
+                <span class="icon up-icon"></span>
+            </button>
+            <div class="menu-options">
+                {{#eachInMap speedList}} {{#unless (eq ../selectedSpeed id)}}
+                <button class="flex-container" id="speed-option-button" data-value="{{value}}">
+                    <span class="control-text speed-text">{{id}}</span>
+                </button>
+                {{/unless}} {{/eachInMap}}
+            </div>
+        </div>
     </div>
-</div>
-{{#if animations}} {{#if hideAnimations}}{{else}}
-<div class="animation-container flex-container">
-    <select id="animation-selector" name="animations">
-        {{#each animations}}
-        <option value="{{this}}">{{this}}</option>> {{/each}}
-    </select>
-</div>
-{{/if}} {{/if}}
-<div class="button-container flex-container">
-    <!-- holding the buttons -->
-    {{#eachInMap buttons}}
-    <div id="{{id}}" class="button">
-        {{#if text}}
-        <span>{{text}}</span>> {{/if}} {{#if image}}
-        <img src="{{image}}" alt="{{altText}}"> {{/if}}
+    {{/unless}}
+    <div class="default-control">
+        {{#unless hideHelp}}
+        <button class="help" id="help-button" title="Help">
+            <span class="icon help-icon"></span>
+        </button>
+        {{/unless}} {{#unless hideFullScreen}}
+        <button class="fullscreen" id="fullscreen-button" title="Fullscreen">
+            <span class="icon fullscreen-icon"></span>
+        </button>
+        {{/unless}}
     </div>
-    {{/eachInMap}}
 </div>

Viewer/src/configuration/types/default.ts

@@ -4,7 +4,11 @@ export let defaultConfiguration: ViewerConfiguration = {
     version: "3.2.0-alpha4",
     templates: {
         main: {
-            html: require("../../../assets/templates/default/defaultTemplate.html")
+            html: require("../../../assets/templates/default/defaultTemplate.html"),
+            params: {
+                babylonFont: require('../../../assets/babylon.woff'),
+                noEscape: true
+            }
         },
         loadingScreen: {
             html: require("../../../assets/templates/default/loadingScreen.html"),
@@ -24,22 +28,23 @@ export let defaultConfiguration: ViewerConfiguration = {
         navBar: {
             html: require("../../../assets/templates/default/navbar.html"),
             params: {
-                buttons: {
-                    /*"help-button": {
-                        altText: "Help",
-                        image: require('../../../assets/img/help-circle.png')
-                    },*/
-                    "fullscreen-button": {
-                        altText: "Fullscreen",
-                        image: require('../../../assets/img/fullscreen.png')
-                    }
+                speedList: {
+                    "0.5x": "0.5",
+                    "1.0x": "1.0",
+                    "1.5x": "1.5",
+                    "2.0x": "2.0",
                 },
-                visibilityTimeout: 2000
+                logoImg: require('../../../assets/img/BabylonJS_logo_Small.png'),
+                logoText: 'BabylonJS',
+                hideHelp: true,
+                disableOnFullscreen: true,
             },
             events: {
-                pointerdown: { 'fullscreen-button': true/*, '#help-button': true*/ },
+                pointerdown: {
+                    'navbar-control': true,
+                    'help-button': true
+                },
                 pointerover: true,
-                change: { 'animation-selector': true }
             }
         },
         overlay: {

Viewer/src/eventManager.ts

@@ -30,8 +30,9 @@ export class EventManager {
             this._callbacksContainer[templateName] = [];
         }
         this._callbacksContainer[templateName].push({
-            eventType: eventType,
-            callback: callback
+            eventType,
+            callback,
+            selector
         });
     }
 

Viewer/src/model/modelAnimation.ts

@@ -191,11 +191,12 @@ export class GroupModelAnimation implements IModelAnimation {
      * In correlation to an arry, this would be ".length"
      */
     public get frames(): number {
-        let animationFrames = this._animationGroup.targetedAnimations.map(ta => {
+        /*let animationFrames = this._animationGroup.targetedAnimations.map(ta => {
             let keys = ta.animation.getKeys();
             return keys[keys.length - 1].frame;
         });
-        return Math.max.apply(null, animationFrames);
+        return Math.max.apply(null, animationFrames);*/
+        return this._animationGroup.to - this._animationGroup.from;
     }
 
     /**
@@ -206,7 +207,7 @@ export class GroupModelAnimation implements IModelAnimation {
      */
     public get currentFrame(): number {
         // get the first currentFrame found
-        for (let i = 0; i < this._animationGroup.animatables.length; ++i) {
+        /*for (let i = 0; i < this._animationGroup.animatables.length; ++i) {
             let animatable: Animatable = this._animationGroup.animatables[i];
             let animations = animatable.getAnimations();
             if (!animations || !animations.length) {
@@ -217,8 +218,12 @@ export class GroupModelAnimation implements IModelAnimation {
                     return animations[idx].currentFrame;
                 }
             }
+        }*/
+        if (this._animationGroup.targetedAnimations[0] && this._animationGroup.targetedAnimations[0].animation.runtimeAnimations[0]) {
+            return this._animationGroup.targetedAnimations[0].animation.runtimeAnimations[0].currentFrame - this._animationGroup.from;
+        } else {
+            return 0;
         }
-        return 0;
     }
 
     /**
@@ -279,7 +284,10 @@ export class GroupModelAnimation implements IModelAnimation {
      * Restart the animation group
      */
     restart() {
-        this._animationGroup.restart();
+        if (this.state === AnimationState.PAUSED)
+            this._animationGroup.restart();
+        else
+            this.start();
     }
 
     /**
@@ -287,10 +295,7 @@ export class GroupModelAnimation implements IModelAnimation {
      * @param frameNumber Go to a specific frame in the animation
      */
     goToFrame(frameNumber: number) {
-        // this._animationGroup.goToFrame(frameNumber);
-        this._animationGroup['_animatables'].forEach(a => {
-            a.goToFrame(frameNumber);
-        })
+        this._animationGroup.goToFrame(frameNumber + this._animationGroup.from);
     }
 
     /**

Viewer/src/templateManager.ts

@@ -241,6 +241,36 @@ Handlebars.registerHelper('eachInMap', function (map, block) {
     return out;
 });
 
+Handlebars.registerHelper('add', function (a, b) {
+    var out = a + b;
+    return out;
+});
+
+Handlebars.registerHelper('eq', function (a, b) {
+    var out = (a == b);
+    return out;
+});
+
+
+Handlebars.registerHelper('or', function (a, b) {
+    var out = a || b;
+    return out;
+});
+
+Handlebars.registerHelper('not', function (a) {
+    var out = !a;
+    return out;
+});
+
+Handlebars.registerHelper('count', function (map) {
+    return map.length;
+});
+
+Handlebars.registerHelper('gt', function (a, b) {
+    var out = a > b;
+    return out;
+});
+
 /**
  * This class represents a single template in the viewer's template tree.
  * An example for a template is a single canvas, an overlay (containing sub-templates) or the navigation bar.
@@ -318,7 +348,7 @@ export class Template {
         this.initPromise = htmlContentPromise.then(htmlTemplate => {
             if (htmlTemplate) {
                 this._htmlTemplate = htmlTemplate;
-                let compiledTemplate = Handlebars.compile(htmlTemplate);
+                let compiledTemplate = Handlebars.compile(htmlTemplate, { noEscape: (this._configuration.params && this._configuration.params.noEscape) });
                 let config = this._configuration.params || {};
                 this._rawHtml = compiledTemplate(config);
                 try {

Viewer/src/viewer/defaultViewer.ts

@@ -7,6 +7,7 @@ import { SpotLight, MirrorTexture, Plane, ShadowGenerator, Texture, BackgroundMa
 import { CameraBehavior } from '../interfaces';
 import { ViewerModel } from '../model/viewerModel';
 import { extendClassWithConfig } from '../helper';
+import { IModelAnimation } from 'model/modelAnimation';
 
 /**
  * The Default viewer is the default implementation of the AbstractViewer.
@@ -51,48 +52,140 @@ export class DefaultViewer extends AbstractViewer {
     private _initNavbar() {
         let navbar = this.templateManager.getTemplate('navBar');
         if (navbar) {
-            let navbarHeight = navbar.parent.clientHeight + 'px';
-
-            let navbarShown: boolean = true;
-            let timeoutCancel /*: number*/;
-
-            let triggerNavbar = function (show: boolean = false, evt: PointerEvent) {
-                // only left-click on no-button.
-                if (!navbar || evt.button > 0) return;
-                // clear timeout
-                timeoutCancel && clearTimeout(timeoutCancel);
-                // if state is the same, do nothing
-                if (show === navbarShown) return;
-                //showing? simply show it!
-                if (show) {
-                    navbar.parent.style.bottom = show ? '0px' : '-' + navbarHeight;
-                    navbarShown = show;
+            this.onFrameRenderedObservable.add(this._updateProgressBar);
+            this.templateManager.eventManager.registerCallback('navBar', this._handlePointerDown, 'pointerdown');
+            // an example how to trigger the help button. publiclly available
+            this.templateManager.eventManager.registerCallback("navBar", () => {
+                // do your thing
+            }, "pointerdown", "#help-button");
+        }
+    }
+
+    private _animationList: string[];
+    private _currentAnimation: IModelAnimation;
+    private _isAnimationPaused: boolean;
+
+    private _handlePointerDown = (event: EventCallback) => {
+
+        let pointerDown = <PointerEvent>event.event;
+        if (pointerDown.button !== 0) return;
+        var element = (<HTMLElement>event.event.srcElement);
+
+        if (!element) {
+            return;
+        }
+
+        let parentClasses = element.parentElement!.classList;
+
+        switch (element.id) {
+            case "speed-button":
+            case "types-button":
+                if (parentClasses.contains("open")) {
+                    parentClasses.remove("open");
                 } else {
-                    let visibilityTimeout = 2000;
-                    if (navbar.configuration.params && navbar.configuration.params.visibilityTimeout !== undefined) {
-                        visibilityTimeout = <number>navbar.configuration.params.visibilityTimeout;
-                    }
-                    // not showing? set timeout until it is removed.
-                    timeoutCancel = setTimeout(function () {
-                        if (navbar) {
-                            navbar.parent.style.bottom = '-' + navbarHeight;
-                        }
-                        navbarShown = show;
-                    }, visibilityTimeout);
+                    parentClasses.add("open");
+                }
+                break;
+            case "play-pause-button":
+                this._togglePlayPause();
+                break;
+            case "label-option-button":
+                var label = element.dataset["value"];
+                if (label) {
+                    this._updateAnimationType(label);
                 }
+                break;
+            case "speed-option-button":
+                if (!this._currentAnimation) {
+                    return;
+                }
+                var speed = element.dataset["value"];
+                if (speed)
+                    this._updateAnimationSpeed(speed);
+                break;
+            case "progress-bar-container":
+                if (!this._currentAnimation) return;
+                const gotoFrame = (pointerDown.offsetX / element.clientWidth) * this._currentAnimation.frames;
+                if (isNaN(gotoFrame)) return;
+                this._currentAnimation.goToFrame(gotoFrame);
+                break;
+            case "fullscreen-button":
+                this.toggleFullscreen();
+            default:
+                return;
+        }
+    }
+
+    /**
+     * Plays or Pauses animation
+     */
+    private _togglePlayPause = () => {
+        if (!this._currentAnimation) {
+            return;
+        }
+        if (this._isAnimationPaused) {
+            this._currentAnimation.restart();
+        } else {
+            this._currentAnimation.pause();
+        }
+
+        this._isAnimationPaused = !this._isAnimationPaused;
+
+        let navbar = this.templateManager.getTemplate('navBar');
+        if (!navbar) return;
+
+        navbar.updateParams({
+            paused: this._isAnimationPaused,
+        });
+    }
+
+    /**
+     * Control progress bar position based on animation current frame
+     */
+    private _updateProgressBar = () => {
+        var progressWrapper = document.getElementById("progress-wrapper");
+        if (progressWrapper && this._currentAnimation) {
+            const progress = this._currentAnimation.currentFrame / this._currentAnimation.frames * 100;
+            if (isNaN(progress)) return;
+            progressWrapper.style.transform = "translateX(" + progress + "%)";
+        }
+    }
+
+    /** 
+     * Update Current Animation Speed
+     */
+    private _updateAnimationSpeed = (speed: string) => {
+        let navbar = this.templateManager.getTemplate('navBar');
+        if (!navbar) return;
+
+        if (speed && this._currentAnimation) {
+            this._currentAnimation.speedRatio = parseFloat(speed);
+            if (!this._isAnimationPaused) {
+                this._currentAnimation.restart();
             }
+            navbar.updateParams({
+                selectedSpeed: speed + "x",
+            });
+        }
+    }
 
-            this.templateManager.eventManager.registerCallback('viewer', triggerNavbar.bind(this, false), 'pointerout');
-            this.templateManager.eventManager.registerCallback('viewer', triggerNavbar.bind(this, true), 'pointerdown');
-            this.templateManager.eventManager.registerCallback('viewer', triggerNavbar.bind(this, false), 'pointerup');
-            this.templateManager.eventManager.registerCallback('navBar', triggerNavbar.bind(this, true), 'pointerover');
+    /** 
+     * Update Current Animation Type
+     */
+    private _updateAnimationType = (label: string) => {
+        let navbar = this.templateManager.getTemplate('navBar');
+        if (!navbar) return;
 
-            this.templateManager.eventManager.registerCallback('navBar', this.toggleFullscreen, 'pointerdown', '#fullscreen-button');
-            this.templateManager.eventManager.registerCallback('navBar', (data) => {
-                if (data && data.event && data.event.target)
-                    this.sceneManager.models[0].playAnimation(data.event.target['value']);
-            }, 'change', '#animation-selector');
+        if (label) {
+            this._currentAnimation = this.sceneManager.models[0].setCurrentAnimationByName(label);
         }
+
+        navbar.updateParams({
+            selectedAnimation: (this._animationList.indexOf(label) + 1),
+        });
+
+        // reset speed when a new animation is selected
+        this._updateAnimationSpeed("1.0");
     }
 
     /**
@@ -131,32 +224,19 @@ export class DefaultViewer extends AbstractViewer {
         let navbar = this.templateManager.getTemplate('navBar');
         if (!navbar) return;
 
-        if (model.getAnimationNames().length > 1) {
-            navbar.updateParams({ animations: model.getAnimationNames() });
+        if (model.getAnimationNames().length >= 1) {
+            this._isAnimationPaused = (model.configuration.animation && !model.configuration.animation.autoStart) || !model.configuration.animation;
+            this._animationList = model.getAnimationNames(),
+                navbar.updateParams({
+                    animations: this._animationList,
+                    paused: this._isAnimationPaused,
+                });
+
+            // default animation & speed
+            this._updateAnimationSpeed("1.0");
+            this._updateAnimationType(this._animationList[0]);
         }
-
         let modelConfiguration = model.configuration;
-
-        let metadataContainer = navbar.parent.querySelector('#model-metadata');
-        if (metadataContainer) {
-            if (modelConfiguration.title !== undefined) {
-                let element = metadataContainer.querySelector('span.model-title');
-                if (element) {
-                    element.innerHTML = modelConfiguration.title;
-                }
-            }
-
-            if (modelConfiguration.subtitle !== undefined) {
-                let element = metadataContainer.querySelector('span.model-subtitle');
-                if (element) {
-                    element.innerHTML = modelConfiguration.subtitle;
-                }
-            }
-
-            if (modelConfiguration.thumbnail !== undefined) {
-                (<HTMLDivElement>metadataContainer.querySelector('.thumbnail')).style.backgroundImage = `url('${modelConfiguration.thumbnail}')`;
-            }
-        }
     }
 
     /**

Viewer/webpack.config.js

@@ -51,8 +51,12 @@ module.exports = {
             }
         },
         {
-            test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+            test: /\.(jpe?g|png|ttf|eot|svg?)(\?[a-z0-9=&.]+)?$/,
             use: 'base64-image-loader?limit=1000&name=[name].[ext]'
+        },
+        {
+            test: /\.(woff|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+            loader: 'base64-font-loader'
         }]
     },
     devServer: {

dist/preview release/babylon.max.js

@@ -20386,7 +20386,6 @@ var BABYLON;
          */
         AbstractMesh.prototype.isCompletelyInFrustum = function (frustumPlanes) {
             return this._boundingInfo !== null && this._boundingInfo.isCompletelyInFrustum(frustumPlanes);
-            ;
         };
         /**
          * True if the mesh intersects another mesh or a SolidParticle object
@@ -35474,7 +35473,6 @@ var BABYLON;
             }
             var materialType = BABYLON.Tools.Instantiate(parsedMaterial.customType);
             return materialType.Parse(parsedMaterial, scene, rootUrl);
-            ;
         };
         // Triangle views
         Material._TriangleFillMode = 0;
@@ -42921,23 +42919,6 @@ var BABYLON;
             };
             return _this;
         }
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
         Object.defineProperty(StandardMaterial.prototype, "imageProcessingConfiguration", {
             /**
              * Gets the image processing configuration used either in this material.
@@ -50083,7 +50064,6 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
-        ;
         Object.defineProperty(SpotLight.prototype, "projectionTextureLightNear", {
             /**
              * Gets the near clip of the Spotlight for texture projection.
@@ -51552,14 +51532,16 @@ var BABYLON;
         /**
          * This function will normalize every animation in the group to make sure they all go from beginFrame to endFrame
          * It can add constant keys at begin or end
-         * @param beginFrame defines the new begin frame for all animations. It can't be bigger than the smallest begin frame of all animations
-         * @param endFrame defines the new end frame for all animations. It can't be smaller than the largest end frame of all animations
+         * @param beginFrame defines the new begin frame for all animations or the smallest begin frame of all animations if null (defaults to 0)
+         * @param endFrame defines the new end frame for all animations or the largest end frame of all animations if null (defaults to null)
          */
         AnimationGroup.prototype.normalize = function (beginFrame, endFrame) {
-            if (beginFrame === void 0) { beginFrame = -Number.MAX_VALUE; }
-            if (endFrame === void 0) { endFrame = Number.MAX_VALUE; }
-            beginFrame = Math.max(beginFrame, this._from);
-            endFrame = Math.min(endFrame, this._to);
+            if (beginFrame === void 0) { beginFrame = 0; }
+            if (endFrame === void 0) { endFrame = null; }
+            if (beginFrame == null)
+                beginFrame = this._from;
+            if (endFrame == null)
+                endFrame = this._to;
             for (var index = 0; index < this._targetedAnimations.length; index++) {
                 var targetedAnimation = this._targetedAnimations[index];
                 var keys = targetedAnimation.animation.getKeys();
@@ -51586,6 +51568,8 @@ var BABYLON;
                     keys.push(newKey);
                 }
             }
+            this._from = beginFrame;
+            this._to = endFrame;
             return this;
         };
         /**
@@ -56950,13 +56934,9 @@ var BABYLON;
             var serializationObject = {};
             serializationObject.type = this.getClassName();
             serializationObject.direction1 = this.direction1.asArray();
-            ;
             serializationObject.direction2 = this.direction2.asArray();
-            ;
             serializationObject.minEmitBox = this.minEmitBox.asArray();
-            ;
             serializationObject.maxEmitBox = this.maxEmitBox.asArray();
-            ;
             return serializationObject;
         };
         /**
@@ -57324,11 +57304,8 @@ var BABYLON;
          */
         SphereDirectedParticleEmitter.prototype.serialize = function () {
             var serializationObject = _super.prototype.serialize.call(this);
-            ;
             serializationObject.direction1 = this.direction1.asArray();
-            ;
             serializationObject.direction2 = this.direction2.asArray();
-            ;
             return serializationObject;
         };
         /**
@@ -58435,11 +58412,10 @@ var BABYLON;
             vertexData.indices = (this._depthSort) ? this._indices : this._indices32;
             vertexData.set(this._positions32, BABYLON.VertexBuffer.PositionKind);
             vertexData.set(this._normals32, BABYLON.VertexBuffer.NormalKind);
-            if (this._uvs32) {
+            if (this._uvs32.length > 0) {
                 vertexData.set(this._uvs32, BABYLON.VertexBuffer.UVKind);
-                ;
             }
-            if (this._colors32) {
+            if (this._colors32.length > 0) {
                 vertexData.set(this._colors32, BABYLON.VertexBuffer.ColorKind);
             }
             var mesh = new BABYLON.Mesh(this.name, this._scene);
@@ -61312,7 +61288,6 @@ var BABYLON;
             var step = pi2 / tessellation * arc;
             var rotated;
             var path = new Array();
-            ;
             for (i = 0; i <= tessellation; i++) {
                 var path = [];
                 if (cap == BABYLON.Mesh.CAP_START || cap == BABYLON.Mesh.CAP_ALL) {
@@ -64655,7 +64630,6 @@ var BABYLON;
             }
             if (y === null || y === undefined) {
                 var fontSize = parseInt((font.replace(/\D/g, '')));
-                ;
                 y = (size.height / 2) + (fontSize / 3.65);
             }
             this._context.fillStyle = color;
@@ -67401,7 +67375,7 @@ var BABYLON;
                     });
                 }, onProgress, function (scene, message, exception) {
                     reject(exception || new Error(message));
-                });
+                }, pluginExtension);
             });
         };
         /**
@@ -69293,8 +69267,8 @@ var BABYLON;
                     var transaction = this.db.transaction(["versions"]);
                     transaction.oncomplete = function (event) {
                         if (version) {
-                            // If the version in the JSON file is > than the version in DB
-                            if (_this.manifestVersionFound > version.data) {
+                            // If the version in the JSON file is different from the version in DB
+                            if (_this.manifestVersionFound !== version.data) {
                                 _this.mustUpdateRessources = true;
                                 updateInDBCallback();
                             }
@@ -87987,6 +87961,8 @@ var BABYLON;
             this._isActionableMesh = false;
             this._teleportationRequestInitiated = false;
             this._teleportationBackRequestInitiated = false;
+            this._rotationRightAsked = false;
+            this._rotationLeftAsked = false;
             this._dpadPressed = true;
             this._activePointer = false;
             this._id = VRExperienceHelperGazer._idCounter++;
@@ -88028,10 +88004,14 @@ var BABYLON;
             this._activePointer = false;
         };
         VRExperienceHelperGazer.prototype._updatePointerDistance = function (distance) {
+            if (distance === void 0) { distance = 100; }
         };
         VRExperienceHelperGazer.prototype.dispose = function () {
             this._interactionsEnabled = false;
             this._teleportationEnabled = false;
+            if (this._gazeTracker) {
+                this._gazeTracker.dispose();
+            }
         };
         VRExperienceHelperGazer._idCounter = 0;
         return VRExperienceHelperGazer;
@@ -88098,6 +88078,7 @@ var BABYLON;
             this._laserPointer.parent = mesh;
         };
         VRExperienceHelperControllerGazer.prototype._updatePointerDistance = function (distance) {
+            if (distance === void 0) { distance = 100; }
             this._laserPointer.scaling.y = distance;
             this._laserPointer.position.z = -distance / 2;
         };
@@ -88171,8 +88152,6 @@ var BABYLON;
             this._floorMeshesCollection = [];
             this._rotationAllowed = true;
             this._teleportBackwardsVector = new BABYLON.Vector3(0, -1, -1);
-            this._rotationRightAsked = false;
-            this._rotationLeftAsked = false;
             this._isDefaultTeleportationTarget = true;
             this._teleportationFillColor = "#444444";
             this._teleportationBorderColor = "#FFFFFF";
@@ -88606,7 +88585,7 @@ var BABYLON;
                     if (this.rightController) {
                         this.rightController._activatePointer();
                     }
-                    else if (this.leftController) {
+                    if (this.leftController) {
                         this.leftController._activatePointer();
                     }
                 }
@@ -89007,9 +88986,9 @@ var BABYLON;
             if (gazer._teleportationRequestInitiated) {
                 return;
             }
-            if (!this._rotationLeftAsked) {
+            if (!gazer._rotationLeftAsked) {
                 if (stateObject.x < -this._padSensibilityUp && gazer._dpadPressed) {
-                    this._rotationLeftAsked = true;
+                    gazer._rotationLeftAsked = true;
                     if (this._rotationAllowed) {
                         this._rotateCamera(false);
                     }
@@ -89017,12 +88996,12 @@ var BABYLON;
             }
             else {
                 if (stateObject.x > -this._padSensibilityDown) {
-                    this._rotationLeftAsked = false;
+                    gazer._rotationLeftAsked = false;
                 }
             }
-            if (!this._rotationRightAsked) {
+            if (!gazer._rotationRightAsked) {
                 if (stateObject.x > this._padSensibilityUp && gazer._dpadPressed) {
-                    this._rotationRightAsked = true;
+                    gazer._rotationRightAsked = true;
                     if (this._rotationAllowed) {
                         this._rotateCamera(true);
                     }
@@ -89030,7 +89009,7 @@ var BABYLON;
             }
             else {
                 if (stateObject.x < this._padSensibilityDown) {
-                    this._rotationRightAsked = false;
+                    gazer._rotationRightAsked = false;
                 }
             }
         };
@@ -89088,8 +89067,8 @@ var BABYLON;
                     controller.webVRController.onPadStateChangedObservable.add(function (stateObject) {
                         controller._dpadPressed = stateObject.pressed;
                         if (!controller._dpadPressed) {
-                            _this._rotationLeftAsked = false;
-                            _this._rotationRightAsked = false;
+                            controller._rotationLeftAsked = false;
+                            controller._rotationRightAsked = false;
                             controller._teleportationBackRequestInitiated = false;
                         }
                     });
@@ -89395,6 +89374,7 @@ var BABYLON;
                 gazer._updatePointerDistance(hit.distance);
             }
             else {
+                gazer._updatePointerDistance();
                 gazer._gazeTracker.isVisible = false;
             }
             if (hit && hit.pickedMesh) {

dist/preview release/babylon.no-module.max.js

@@ -20353,7 +20353,6 @@ var BABYLON;
          */
         AbstractMesh.prototype.isCompletelyInFrustum = function (frustumPlanes) {
             return this._boundingInfo !== null && this._boundingInfo.isCompletelyInFrustum(frustumPlanes);
-            ;
         };
         /**
          * True if the mesh intersects another mesh or a SolidParticle object
@@ -35441,7 +35440,6 @@ var BABYLON;
             }
             var materialType = BABYLON.Tools.Instantiate(parsedMaterial.customType);
             return materialType.Parse(parsedMaterial, scene, rootUrl);
-            ;
         };
         // Triangle views
         Material._TriangleFillMode = 0;
@@ -42888,23 +42886,6 @@ var BABYLON;
             };
             return _this;
         }
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
         Object.defineProperty(StandardMaterial.prototype, "imageProcessingConfiguration", {
             /**
              * Gets the image processing configuration used either in this material.
@@ -50050,7 +50031,6 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
-        ;
         Object.defineProperty(SpotLight.prototype, "projectionTextureLightNear", {
             /**
              * Gets the near clip of the Spotlight for texture projection.
@@ -51519,14 +51499,16 @@ var BABYLON;
         /**
          * This function will normalize every animation in the group to make sure they all go from beginFrame to endFrame
          * It can add constant keys at begin or end
-         * @param beginFrame defines the new begin frame for all animations. It can't be bigger than the smallest begin frame of all animations
-         * @param endFrame defines the new end frame for all animations. It can't be smaller than the largest end frame of all animations
+         * @param beginFrame defines the new begin frame for all animations or the smallest begin frame of all animations if null (defaults to 0)
+         * @param endFrame defines the new end frame for all animations or the largest end frame of all animations if null (defaults to null)
          */
         AnimationGroup.prototype.normalize = function (beginFrame, endFrame) {
-            if (beginFrame === void 0) { beginFrame = -Number.MAX_VALUE; }
-            if (endFrame === void 0) { endFrame = Number.MAX_VALUE; }
-            beginFrame = Math.max(beginFrame, this._from);
-            endFrame = Math.min(endFrame, this._to);
+            if (beginFrame === void 0) { beginFrame = 0; }
+            if (endFrame === void 0) { endFrame = null; }
+            if (beginFrame == null)
+                beginFrame = this._from;
+            if (endFrame == null)
+                endFrame = this._to;
             for (var index = 0; index < this._targetedAnimations.length; index++) {
                 var targetedAnimation = this._targetedAnimations[index];
                 var keys = targetedAnimation.animation.getKeys();
@@ -51553,6 +51535,8 @@ var BABYLON;
                     keys.push(newKey);
                 }
             }
+            this._from = beginFrame;
+            this._to = endFrame;
             return this;
         };
         /**
@@ -56917,13 +56901,9 @@ var BABYLON;
             var serializationObject = {};
             serializationObject.type = this.getClassName();
             serializationObject.direction1 = this.direction1.asArray();
-            ;
             serializationObject.direction2 = this.direction2.asArray();
-            ;
             serializationObject.minEmitBox = this.minEmitBox.asArray();
-            ;
             serializationObject.maxEmitBox = this.maxEmitBox.asArray();
-            ;
             return serializationObject;
         };
         /**
@@ -57291,11 +57271,8 @@ var BABYLON;
          */
         SphereDirectedParticleEmitter.prototype.serialize = function () {
             var serializationObject = _super.prototype.serialize.call(this);
-            ;
             serializationObject.direction1 = this.direction1.asArray();
-            ;
             serializationObject.direction2 = this.direction2.asArray();
-            ;
             return serializationObject;
         };
         /**
@@ -58402,11 +58379,10 @@ var BABYLON;
             vertexData.indices = (this._depthSort) ? this._indices : this._indices32;
             vertexData.set(this._positions32, BABYLON.VertexBuffer.PositionKind);
             vertexData.set(this._normals32, BABYLON.VertexBuffer.NormalKind);
-            if (this._uvs32) {
+            if (this._uvs32.length > 0) {
                 vertexData.set(this._uvs32, BABYLON.VertexBuffer.UVKind);
-                ;
             }
-            if (this._colors32) {
+            if (this._colors32.length > 0) {
                 vertexData.set(this._colors32, BABYLON.VertexBuffer.ColorKind);
             }
             var mesh = new BABYLON.Mesh(this.name, this._scene);
@@ -61279,7 +61255,6 @@ var BABYLON;
             var step = pi2 / tessellation * arc;
             var rotated;
             var path = new Array();
-            ;
             for (i = 0; i <= tessellation; i++) {
                 var path = [];
                 if (cap == BABYLON.Mesh.CAP_START || cap == BABYLON.Mesh.CAP_ALL) {
@@ -64622,7 +64597,6 @@ var BABYLON;
             }
             if (y === null || y === undefined) {
                 var fontSize = parseInt((font.replace(/\D/g, '')));
-                ;
                 y = (size.height / 2) + (fontSize / 3.65);
             }
             this._context.fillStyle = color;
@@ -67368,7 +67342,7 @@ var BABYLON;
                     });
                 }, onProgress, function (scene, message, exception) {
                     reject(exception || new Error(message));
-                });
+                }, pluginExtension);
             });
         };
         /**
@@ -69260,8 +69234,8 @@ var BABYLON;
                     var transaction = this.db.transaction(["versions"]);
                     transaction.oncomplete = function (event) {
                         if (version) {
-                            // If the version in the JSON file is > than the version in DB
-                            if (_this.manifestVersionFound > version.data) {
+                            // If the version in the JSON file is different from the version in DB
+                            if (_this.manifestVersionFound !== version.data) {
                                 _this.mustUpdateRessources = true;
                                 updateInDBCallback();
                             }
@@ -87954,6 +87928,8 @@ var BABYLON;
             this._isActionableMesh = false;
             this._teleportationRequestInitiated = false;
             this._teleportationBackRequestInitiated = false;
+            this._rotationRightAsked = false;
+            this._rotationLeftAsked = false;
             this._dpadPressed = true;
             this._activePointer = false;
             this._id = VRExperienceHelperGazer._idCounter++;
@@ -87995,10 +87971,14 @@ var BABYLON;
             this._activePointer = false;
         };
         VRExperienceHelperGazer.prototype._updatePointerDistance = function (distance) {
+            if (distance === void 0) { distance = 100; }
         };
         VRExperienceHelperGazer.prototype.dispose = function () {
             this._interactionsEnabled = false;
             this._teleportationEnabled = false;
+            if (this._gazeTracker) {
+                this._gazeTracker.dispose();
+            }
         };
         VRExperienceHelperGazer._idCounter = 0;
         return VRExperienceHelperGazer;
@@ -88065,6 +88045,7 @@ var BABYLON;
             this._laserPointer.parent = mesh;
         };
         VRExperienceHelperControllerGazer.prototype._updatePointerDistance = function (distance) {
+            if (distance === void 0) { distance = 100; }
             this._laserPointer.scaling.y = distance;
             this._laserPointer.position.z = -distance / 2;
         };
@@ -88138,8 +88119,6 @@ var BABYLON;
             this._floorMeshesCollection = [];
             this._rotationAllowed = true;
             this._teleportBackwardsVector = new BABYLON.Vector3(0, -1, -1);
-            this._rotationRightAsked = false;
-            this._rotationLeftAsked = false;
             this._isDefaultTeleportationTarget = true;
             this._teleportationFillColor = "#444444";
             this._teleportationBorderColor = "#FFFFFF";
@@ -88573,7 +88552,7 @@ var BABYLON;
                     if (this.rightController) {
                         this.rightController._activatePointer();
                     }
-                    else if (this.leftController) {
+                    if (this.leftController) {
                         this.leftController._activatePointer();
                     }
                 }
@@ -88974,9 +88953,9 @@ var BABYLON;
             if (gazer._teleportationRequestInitiated) {
                 return;
             }
-            if (!this._rotationLeftAsked) {
+            if (!gazer._rotationLeftAsked) {
                 if (stateObject.x < -this._padSensibilityUp && gazer._dpadPressed) {
-                    this._rotationLeftAsked = true;
+                    gazer._rotationLeftAsked = true;
                     if (this._rotationAllowed) {
                         this._rotateCamera(false);
                     }
@@ -88984,12 +88963,12 @@ var BABYLON;
             }
             else {
                 if (stateObject.x > -this._padSensibilityDown) {
-                    this._rotationLeftAsked = false;
+                    gazer._rotationLeftAsked = false;
                 }
             }
-            if (!this._rotationRightAsked) {
+            if (!gazer._rotationRightAsked) {
                 if (stateObject.x > this._padSensibilityUp && gazer._dpadPressed) {
-                    this._rotationRightAsked = true;
+                    gazer._rotationRightAsked = true;
                     if (this._rotationAllowed) {
                         this._rotateCamera(true);
                     }
@@ -88997,7 +88976,7 @@ var BABYLON;
             }
             else {
                 if (stateObject.x < this._padSensibilityDown) {
-                    this._rotationRightAsked = false;
+                    gazer._rotationRightAsked = false;
                 }
             }
         };
@@ -89055,8 +89034,8 @@ var BABYLON;
                     controller.webVRController.onPadStateChangedObservable.add(function (stateObject) {
                         controller._dpadPressed = stateObject.pressed;
                         if (!controller._dpadPressed) {
-                            _this._rotationLeftAsked = false;
-                            _this._rotationRightAsked = false;
+                            controller._rotationLeftAsked = false;
+                            controller._rotationRightAsked = false;
                             controller._teleportationBackRequestInitiated = false;
                         }
                     });
@@ -89362,6 +89341,7 @@ var BABYLON;
                 gazer._updatePointerDistance(hit.distance);
             }
             else {
+                gazer._updatePointerDistance();
                 gazer._gazeTracker.isVisible = false;
             }
             if (hit && hit.pickedMesh) {

dist/preview release/es6.js

@@ -20353,7 +20353,6 @@ var BABYLON;
          */
         AbstractMesh.prototype.isCompletelyInFrustum = function (frustumPlanes) {
             return this._boundingInfo !== null && this._boundingInfo.isCompletelyInFrustum(frustumPlanes);
-            ;
         };
         /**
          * True if the mesh intersects another mesh or a SolidParticle object
@@ -35441,7 +35440,6 @@ var BABYLON;
             }
             var materialType = BABYLON.Tools.Instantiate(parsedMaterial.customType);
             return materialType.Parse(parsedMaterial, scene, rootUrl);
-            ;
         };
         // Triangle views
         Material._TriangleFillMode = 0;
@@ -42888,23 +42886,6 @@ var BABYLON;
             };
             return _this;
         }
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
-        ;
         Object.defineProperty(StandardMaterial.prototype, "imageProcessingConfiguration", {
             /**
              * Gets the image processing configuration used either in this material.
@@ -50050,7 +50031,6 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
-        ;
         Object.defineProperty(SpotLight.prototype, "projectionTextureLightNear", {
             /**
              * Gets the near clip of the Spotlight for texture projection.
@@ -51519,14 +51499,16 @@ var BABYLON;
         /**
          * This function will normalize every animation in the group to make sure they all go from beginFrame to endFrame
          * It can add constant keys at begin or end
-         * @param beginFrame defines the new begin frame for all animations. It can't be bigger than the smallest begin frame of all animations
-         * @param endFrame defines the new end frame for all animations. It can't be smaller than the largest end frame of all animations
+         * @param beginFrame defines the new begin frame for all animations or the smallest begin frame of all animations if null (defaults to 0)
+         * @param endFrame defines the new end frame for all animations or the largest end frame of all animations if null (defaults to null)
          */
         AnimationGroup.prototype.normalize = function (beginFrame, endFrame) {
-            if (beginFrame === void 0) { beginFrame = -Number.MAX_VALUE; }
-            if (endFrame === void 0) { endFrame = Number.MAX_VALUE; }
-            beginFrame = Math.max(beginFrame, this._from);
-            endFrame = Math.min(endFrame, this._to);
+            if (beginFrame === void 0) { beginFrame = 0; }
+            if (endFrame === void 0) { endFrame = null; }
+            if (beginFrame == null)
+                beginFrame = this._from;
+            if (endFrame == null)
+                endFrame = this._to;
             for (var index = 0; index < this._targetedAnimations.length; index++) {
                 var targetedAnimation = this._targetedAnimations[index];
                 var keys = targetedAnimation.animation.getKeys();
@@ -51553,6 +51535,8 @@ var BABYLON;
                     keys.push(newKey);
                 }
             }
+            this._from = beginFrame;
+            this._to = endFrame;
             return this;
         };
         /**
@@ -56917,13 +56901,9 @@ var BABYLON;
             var serializationObject = {};
             serializationObject.type = this.getClassName();
             serializationObject.direction1 = this.direction1.asArray();
-            ;
             serializationObject.direction2 = this.direction2.asArray();
-            ;
             serializationObject.minEmitBox = this.minEmitBox.asArray();
-            ;
             serializationObject.maxEmitBox = this.maxEmitBox.asArray();
-            ;
             return serializationObject;
         };
         /**
@@ -57291,11 +57271,8 @@ var BABYLON;
          */
         SphereDirectedParticleEmitter.prototype.serialize = function () {
             var serializationObject = _super.prototype.serialize.call(this);
-            ;
             serializationObject.direction1 = this.direction1.asArray();
-            ;
             serializationObject.direction2 = this.direction2.asArray();
-            ;
             return serializationObject;
         };
         /**
@@ -58402,11 +58379,10 @@ var BABYLON;
             vertexData.indices = (this._depthSort) ? this._indices : this._indices32;
             vertexData.set(this._positions32, BABYLON.VertexBuffer.PositionKind);
             vertexData.set(this._normals32, BABYLON.VertexBuffer.NormalKind);
-            if (this._uvs32) {
+            if (this._uvs32.length > 0) {
                 vertexData.set(this._uvs32, BABYLON.VertexBuffer.UVKind);
-                ;
             }
-            if (this._colors32) {
+            if (this._colors32.length > 0) {
                 vertexData.set(this._colors32, BABYLON.VertexBuffer.ColorKind);
             }
             var mesh = new BABYLON.Mesh(this.name, this._scene);
@@ -61279,7 +61255,6 @@ var BABYLON;
             var step = pi2 / tessellation * arc;
             var rotated;
             var path = new Array();
-            ;
             for (i = 0; i <= tessellation; i++) {
                 var path = [];
                 if (cap == BABYLON.Mesh.CAP_START || cap == BABYLON.Mesh.CAP_ALL) {
@@ -64622,7 +64597,6 @@ var BABYLON;
             }
             if (y === null || y === undefined) {
                 var fontSize = parseInt((font.replace(/\D/g, '')));
-                ;
                 y = (size.height / 2) + (fontSize / 3.65);
             }
             this._context.fillStyle = color;
@@ -67368,7 +67342,7 @@ var BABYLON;
                     });
                 }, onProgress, function (scene, message, exception) {
                     reject(exception || new Error(message));
-                });
+                }, pluginExtension);
             });
         };
         /**
@@ -69260,8 +69234,8 @@ var BABYLON;
                     var transaction = this.db.transaction(["versions"]);
                     transaction.oncomplete = function (event) {
                         if (version) {
-                            // If the version in the JSON file is > than the version in DB
-                            if (_this.manifestVersionFound > version.data) {
+                            // If the version in the JSON file is different from the version in DB
+                            if (_this.manifestVersionFound !== version.data) {
                                 _this.mustUpdateRessources = true;
                                 updateInDBCallback();
                             }
@@ -87954,6 +87928,8 @@ var BABYLON;
             this._isActionableMesh = false;
             this._teleportationRequestInitiated = false;
             this._teleportationBackRequestInitiated = false;
+            this._rotationRightAsked = false;
+            this._rotationLeftAsked = false;
             this._dpadPressed = true;
             this._activePointer = false;
             this._id = VRExperienceHelperGazer._idCounter++;
@@ -87995,10 +87971,14 @@ var BABYLON;
             this._activePointer = false;
         };
         VRExperienceHelperGazer.prototype._updatePointerDistance = function (distance) {
+            if (distance === void 0) { distance = 100; }
         };
         VRExperienceHelperGazer.prototype.dispose = function () {
             this._interactionsEnabled = false;
             this._teleportationEnabled = false;
+            if (this._gazeTracker) {
+                this._gazeTracker.dispose();
+            }
         };
         VRExperienceHelperGazer._idCounter = 0;
         return VRExperienceHelperGazer;
@@ -88065,6 +88045,7 @@ var BABYLON;
             this._laserPointer.parent = mesh;
         };
         VRExperienceHelperControllerGazer.prototype._updatePointerDistance = function (distance) {
+            if (distance === void 0) { distance = 100; }
             this._laserPointer.scaling.y = distance;
             this._laserPointer.position.z = -distance / 2;
         };
@@ -88138,8 +88119,6 @@ var BABYLON;
             this._floorMeshesCollection = [];
             this._rotationAllowed = true;
             this._teleportBackwardsVector = new BABYLON.Vector3(0, -1, -1);
-            this._rotationRightAsked = false;
-            this._rotationLeftAsked = false;
             this._isDefaultTeleportationTarget = true;
             this._teleportationFillColor = "#444444";
             this._teleportationBorderColor = "#FFFFFF";
@@ -88573,7 +88552,7 @@ var BABYLON;
                     if (this.rightController) {
                         this.rightController._activatePointer();
                     }
-                    else if (this.leftController) {
+                    if (this.leftController) {
                         this.leftController._activatePointer();
                     }
                 }
@@ -88974,9 +88953,9 @@ var BABYLON;
             if (gazer._teleportationRequestInitiated) {
                 return;
             }
-            if (!this._rotationLeftAsked) {
+            if (!gazer._rotationLeftAsked) {
                 if (stateObject.x < -this._padSensibilityUp && gazer._dpadPressed) {
-                    this._rotationLeftAsked = true;
+                    gazer._rotationLeftAsked = true;
                     if (this._rotationAllowed) {
                         this._rotateCamera(false);
                     }
@@ -88984,12 +88963,12 @@ var BABYLON;
             }
             else {
                 if (stateObject.x > -this._padSensibilityDown) {
-                    this._rotationLeftAsked = false;
+                    gazer._rotationLeftAsked = false;
                 }
             }
-            if (!this._rotationRightAsked) {
+            if (!gazer._rotationRightAsked) {
                 if (stateObject.x > this._padSensibilityUp && gazer._dpadPressed) {
-                    this._rotationRightAsked = true;
+                    gazer._rotationRightAsked = true;
                     if (this._rotationAllowed) {
                         this._rotateCamera(true);
                     }
@@ -88997,7 +88976,7 @@ var BABYLON;
             }
             else {
                 if (stateObject.x < this._padSensibilityDown) {
-                    this._rotationRightAsked = false;
+                    gazer._rotationRightAsked = false;
                 }
             }
         };
@@ -89055,8 +89034,8 @@ var BABYLON;
                     controller.webVRController.onPadStateChangedObservable.add(function (stateObject) {
                         controller._dpadPressed = stateObject.pressed;
                         if (!controller._dpadPressed) {
-                            _this._rotationLeftAsked = false;
-                            _this._rotationRightAsked = false;
+                            controller._rotationLeftAsked = false;
+                            controller._rotationRightAsked = false;
                             controller._teleportationBackRequestInitiated = false;
                         }
                     });
@@ -89362,6 +89341,7 @@ var BABYLON;
                 gazer._updatePointerDistance(hit.distance);
             }
             else {
+                gazer._updatePointerDistance();
                 gazer._gazeTracker.isVisible = false;
             }
             if (hit && hit.pickedMesh) {

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

@@ -406,15 +406,13 @@ var BABYLON;
             loader.onTextureLoadedObservable.add(function (texture) { return _this.onTextureLoadedObservable.notifyObservers(texture); });
             loader.onMaterialLoadedObservable.add(function (material) { return _this.onMaterialLoadedObservable.notifyObservers(material); });
             loader.onCameraLoadedObservable.add(function (camera) { return _this.onCameraLoadedObservable.notifyObservers(camera); });
-            loader.onExtensionLoadedObservable.add(function (extension) {
-                _this.onExtensionLoadedObservable.notifyObservers(extension);
-                _this.onExtensionLoadedObservable.clear();
-            });
+            loader.onExtensionLoadedObservable.add(function (extension) { return _this.onExtensionLoadedObservable.notifyObservers(extension); });
             loader.onCompleteObservable.add(function () {
                 _this.onMeshLoadedObservable.clear();
                 _this.onTextureLoadedObservable.clear();
                 _this.onMaterialLoadedObservable.clear();
                 _this.onCameraLoadedObservable.clear();
+                _this.onExtensionLoadedObservable.clear();
                 _this.onCompleteObservable.notifyObservers(_this);
                 _this.onCompleteObservable.clear();
             });

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

@@ -406,15 +406,13 @@ var BABYLON;
             loader.onTextureLoadedObservable.add(function (texture) { return _this.onTextureLoadedObservable.notifyObservers(texture); });
             loader.onMaterialLoadedObservable.add(function (material) { return _this.onMaterialLoadedObservable.notifyObservers(material); });
             loader.onCameraLoadedObservable.add(function (camera) { return _this.onCameraLoadedObservable.notifyObservers(camera); });
-            loader.onExtensionLoadedObservable.add(function (extension) {
-                _this.onExtensionLoadedObservable.notifyObservers(extension);
-                _this.onExtensionLoadedObservable.clear();
-            });
+            loader.onExtensionLoadedObservable.add(function (extension) { return _this.onExtensionLoadedObservable.notifyObservers(extension); });
             loader.onCompleteObservable.add(function () {
                 _this.onMeshLoadedObservable.clear();
                 _this.onTextureLoadedObservable.clear();
                 _this.onMaterialLoadedObservable.clear();
                 _this.onCameraLoadedObservable.clear();
+                _this.onExtensionLoadedObservable.clear();
                 _this.onCompleteObservable.notifyObservers(_this);
                 _this.onCompleteObservable.clear();
             });

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

@@ -406,15 +406,13 @@ var BABYLON;
             loader.onTextureLoadedObservable.add(function (texture) { return _this.onTextureLoadedObservable.notifyObservers(texture); });
             loader.onMaterialLoadedObservable.add(function (material) { return _this.onMaterialLoadedObservable.notifyObservers(material); });
             loader.onCameraLoadedObservable.add(function (camera) { return _this.onCameraLoadedObservable.notifyObservers(camera); });
-            loader.onExtensionLoadedObservable.add(function (extension) {
-                _this.onExtensionLoadedObservable.notifyObservers(extension);
-                _this.onExtensionLoadedObservable.clear();
-            });
+            loader.onExtensionLoadedObservable.add(function (extension) { return _this.onExtensionLoadedObservable.notifyObservers(extension); });
             loader.onCompleteObservable.add(function () {
                 _this.onMeshLoadedObservable.clear();
                 _this.onTextureLoadedObservable.clear();
                 _this.onMaterialLoadedObservable.clear();
                 _this.onCameraLoadedObservable.clear();
+                _this.onExtensionLoadedObservable.clear();
                 _this.onCompleteObservable.notifyObservers(_this);
                 _this.onCompleteObservable.clear();
             });

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

@@ -1406,15 +1406,13 @@ var BABYLON;
             loader.onTextureLoadedObservable.add(function (texture) { return _this.onTextureLoadedObservable.notifyObservers(texture); });
             loader.onMaterialLoadedObservable.add(function (material) { return _this.onMaterialLoadedObservable.notifyObservers(material); });
             loader.onCameraLoadedObservable.add(function (camera) { return _this.onCameraLoadedObservable.notifyObservers(camera); });
-            loader.onExtensionLoadedObservable.add(function (extension) {
-                _this.onExtensionLoadedObservable.notifyObservers(extension);
-                _this.onExtensionLoadedObservable.clear();
-            });
+            loader.onExtensionLoadedObservable.add(function (extension) { return _this.onExtensionLoadedObservable.notifyObservers(extension); });
             loader.onCompleteObservable.add(function () {
                 _this.onMeshLoadedObservable.clear();
                 _this.onTextureLoadedObservable.clear();
                 _this.onMaterialLoadedObservable.clear();
                 _this.onCameraLoadedObservable.clear();
+                _this.onExtensionLoadedObservable.clear();
                 _this.onCompleteObservable.notifyObservers(_this);
                 _this.onCompleteObservable.clear();
             });

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

@@ -1,11 +1,12 @@
 /// <reference path="./babylon.d.ts"/>
 /// <reference path="./babylon.glTF2Interface.d.ts"/>
 /// <reference path="./babylonjs.loaders.d.ts"/>
+declare module "babylonjs-loaders"{ export=BABYLON;}
 
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
-//   ../../Tools/Gulp/babylonjs
-//   ../../Tools/Gulp/babylonjs-loaders
+//   ../../tools/Gulp/babylonjs
+//   ../../tools/Gulp/babylonjs-loaders
 
 declare module BabylonViewer {
     
@@ -185,7 +186,7 @@ declare module BabylonViewer {
                 * The scene will automatically be cleared of the old models, if exist.
                 * @param model the configuration object (or URL) to load.
                 */
-            loadModel(model?: any): Promise<ViewerModel>;
+            loadModel(model?: string | IModelConfiguration): Promise<ViewerModel>;
             /**
                 * Show the overlay and the defined sub-screen.
                 * Mainly used for help and errors
@@ -526,8 +527,11 @@ declare module BabylonViewer {
             INIT = 0,
             LOADING = 1,
             LOADED = 2,
-            CANCELED = 3,
-            ERROR = 4,
+            ENTRY = 3,
+            ENTRYDONE = 4,
+            COMPLETE = 5,
+            CANCELED = 6,
+            ERROR = 7,
     }
     /**
         * The viewer model is a container for all assets representing a sngle loaded model.
@@ -572,6 +576,10 @@ declare module BabylonViewer {
                     exception: any;
             }>;
             /**
+                * Will be executed after the model finished loading and complete, including entry animation and lod
+                */
+            onCompleteObservable: BABYLON.Observable<ViewerModel>;
+            /**
                 * Observers registered here will be executed every time the model is being configured.
                 * This can be used to extend the model's configuration without extending the class itself
                 */
@@ -590,6 +598,7 @@ declare module BabylonViewer {
                 * Set whether this model is enabled or not.
                 */
             enabled: boolean;
+            loaderDone: boolean;
             /**
                 * Get the viewer showing this model
                 */
@@ -606,7 +615,6 @@ declare module BabylonViewer {
                 * get the list of meshes (excluding the root mesh)
                 */
             readonly meshes: BABYLON.AbstractMesh[];
-            get: any;
             /**
                 * (Re-)set the model's entire configuration
                 * @param newConfiguration the new configuration to replace the new one
@@ -644,6 +652,19 @@ declare module BabylonViewer {
                 */
             playAnimation(name: string): IModelAnimation;
             /**
+             * Begin @animations with the specified @easingFunction
+             * @param animations The BABYLON Animations to begin
+             * @param duration of transition, in seconds
+             * @param easingFunction An easing function to apply
+             * @param easingMode A easing mode to apply to the easingFunction
+             * @param onAnimationEnd Call back trigger at the end of the animation.
+             */
+            transitionTo(animations: BABYLON.Animation[], duration: number, easingFunction: any, easingMode: number | undefined, onAnimationEnd: () => void): void;
+            /**
+                * Stops and removes all animations that have been applied to the model
+                */
+            stopAllAnimations(): void;
+            /**
                 * Will remove this model from the viewer (but NOT dispose it).
                 */
             remove(): void;
@@ -657,16 +678,16 @@ declare module BabylonViewer {
 declare module BabylonViewer {
     
     /**
-        * Animation play mode enum - is the animation looping or playing once
+        * BABYLON.Animation play mode enum - is the animation looping or playing once
         */
-    export enum AnimationPlayMode {
+    export const enum AnimationPlayMode {
             ONCE = 0,
             LOOP = 1,
     }
     /**
         * An enum representing the current state of an animation object
         */
-    export enum AnimationState {
+    export const enum AnimationState {
             INIT = 0,
             PLAYING = 1,
             PAUSED = 2,
@@ -674,6 +695,46 @@ declare module BabylonViewer {
             ENDED = 4,
     }
     /**
+        * The different type of easing functions available
+        */
+    export const enum EasingFunction {
+            Linear = 0,
+            CircleEase = 1,
+            BackEase = 2,
+            BounceEase = 3,
+            CubicEase = 4,
+            ElasticEase = 5,
+            ExponentialEase = 6,
+            PowerEase = 7,
+            QuadraticEase = 8,
+            QuarticEase = 9,
+            QuinticEase = 10,
+            SineEase = 11,
+    }
+    /**
+        * Defines a simple animation to be applied to a model (scale).
+        */
+    export interface ModelAnimationConfiguration {
+            /**
+                * Time of animation, in seconds
+                */
+            time: number;
+            /**
+                * Scale to apply
+                */
+            scaling?: BABYLON.Vector3;
+            /**
+                * Easing function to apply
+                * See SPECTRE.EasingFunction
+                */
+            easingFunction?: number;
+            /**
+                * An Easing mode to apply to the easing function
+                * See BABYLON.EasingFunction
+                */
+            easingMode?: number;
+    }
+    /**
         * This interface can be implemented to define new types of ModelAnimation objects.
         */
     export interface IModelAnimation {
@@ -699,7 +760,7 @@ declare module BabylonViewer {
                 */
             readonly currentFrame: number;
             /**
-                * Animation's FPS value
+                * BABYLON.Animation's FPS value
                 */
             readonly fps: number;
             /**
@@ -855,6 +916,7 @@ declare module BabylonViewer {
 declare module BabylonViewer {
     
     
+    export function getConfigurationKey(key: string, configObject: any): any;
     export interface ViewerConfiguration {
             version?: string;
             extends?: string;
@@ -876,6 +938,7 @@ declare module BabylonViewer {
                     [name: string]: boolean | ILightConfiguration;
             };
             engine?: {
+                    renderInBackground?: boolean;
                     antialiasing?: boolean;
                     disableResize?: boolean;
                     engineOptions?: BABYLON.EngineOptions;
@@ -917,7 +980,12 @@ declare module BabylonViewer {
                             };
                     };
                     hideLoadingDelay?: number;
-                    environmentAssetsRootURL?: string;
+                    assetsRootURL?: string;
+                    environmentMainColor?: {
+                            r: number;
+                            g: number;
+                            b: number;
+                    };
                     environmentMap?: {
                             /**
                                 * Environment map texture path in relative to the asset folder.
@@ -932,26 +1000,60 @@ declare module BabylonViewer {
                                 */
                             tintLevel: number;
                     };
-                    renderingPipelines?: {
-                            default?: boolean | {
-                                    [propName: string]: any;
-                            };
-                            standard?: boolean | {
-                                    [propName: string]: any;
-                            };
-                            ssao?: boolean | {
-                                    [propName: string]: any;
-                            };
-                            ssao2?: boolean | {
-                                    [propName: string]: any;
-                            };
-                    };
+                    defaultRenderingPipelines?: boolean | IDefaultRenderingPipelineConfiguration;
+            };
+    }
+    /**
+        * Defines an animation to be applied to a model (translation, scale or rotation).
+        */
+    export interface IModelAnimationConfiguration {
+            /**
+                * Time of animation, in seconds
+                */
+            time?: number;
+            /**
+                * Scale to apply
+                */
+            scaling?: {
+                    x: number;
+                    y: number;
+                    z: number;
             };
+            /**
+                * Easing function to apply
+                * See SPECTRE.EasingFunction
+                */
+            easingFunction?: number;
+            /**
+                * An Easing mode to apply to the easing function
+                * See BABYLON.EasingFunction
+                */
+            easingMode?: number;
+    }
+    export interface IDefaultRenderingPipelineConfiguration {
+            sharpenEnabled?: boolean;
+            bloomEnabled?: boolean;
+            bloomThreshold?: number;
+            depthOfFieldEnabled?: boolean;
+            depthOfFieldBlurLevel?: BABYLON.DepthOfFieldEffectBlurLevel;
+            fxaaEnabled?: boolean;
+            imageProcessingEnabled?: boolean;
+            defaultPipelineTextureType?: number;
+            bloomScale?: number;
+            chromaticAberrationEnabled?: boolean;
+            grainEnabled?: boolean;
+            bloomKernel?: number;
+            hardwareScaleLevel?: number;
+            bloomWeight?: number;
+            bllomThreshold?: number;
+            hdr?: boolean;
+            samples?: number;
     }
     export interface IModelConfiguration {
             id?: string;
             url?: string;
             root?: string;
+            file?: string;
             loader?: string;
             position?: {
                     x: number;
@@ -984,6 +1086,8 @@ declare module BabylonViewer {
                     autoStart?: boolean | string;
                     playOnce?: boolean;
             };
+            entryAnimation?: IModelAnimationConfiguration;
+            exitAnimation?: IModelAnimationConfiguration;
             material?: {
                     directEnabled?: boolean;
                     directIntensity?: number;
@@ -1191,6 +1295,7 @@ declare module BabylonViewer {
                     renderTarget?: ISceneOptimizerParameters;
                     mergeMeshes?: ISceneOptimizerParameters;
             };
+            custom?: string;
     }
     export interface IObserversConfiguration {
             onEngineInit?: string;
@@ -1632,6 +1737,7 @@ declare module BabylonViewer {
                 * Please be careful when using labs in production.
                 */
             labs: ViewerLabs;
+            readonly defaultRenderingPipeline: BABYLON.Nullable<BABYLON.DefaultRenderingPipeline>;
             constructor(_viewer: AbstractViewer);
             /**
                 * Returns a boolean representing HDR support
@@ -1641,6 +1747,8 @@ declare module BabylonViewer {
                 * Return the main color defined in the configuration.
                 */
             readonly mainColor: BABYLON.Color3;
+            readonly reflectionColor: BABYLON.Color3;
+            animationBlendingEnabled: boolean;
             /**
                 * Should shadows be rendered every frame, or only once and stop.
                 * This can be used to optimize a scene.
@@ -1649,19 +1757,18 @@ declare module BabylonViewer {
                 * @param process if true shadows will be updated once every frame. if false they will stop being updated.
                 */
             processShadows: boolean;
+            groundEnabled: boolean;
+            /**
+                * sets wether the reflection is disabled.
+                */
+            groundMirrorEnabled: boolean;
+            defaultRenderingPipelineEnabled: boolean;
             /**
                 * Sets the engine flags to unlock all babylon features.
                 * Can also be configured using the scene.flags configuration object
                 */
             unlockBabylonFeatures(): void;
             /**
-                * initialize the environment for a specific model.
-                * Per default it will use the viewer's configuration.
-                * @param model the model to use to configure the environment.
-                * @returns a Promise that will resolve when the configuration is done.
-                */
-            protected _initEnvironment(model?: ViewerModel): Promise<BABYLON.Scene>;
-            /**
                 * initialize the scene. Calling this function again will dispose the old scene, if exists.
                 */
             initScene(sceneConfiguration?: ISceneConfiguration, optimizerConfiguration?: boolean | ISceneOptimizerConfiguration): Promise<BABYLON.Scene>;
@@ -1672,6 +1779,8 @@ declare module BabylonViewer {
                 * @param globalConfiguration The global configuration object, after the new configuration was merged into it
                 */
             updateConfiguration(newConfiguration: Partial<ViewerConfiguration>, globalConfiguration: ViewerConfiguration, model?: ViewerModel): void;
+            bloomEnabled: boolean;
+            fxaaEnabled: boolean;
             /**
                 * internally configure the scene using the provided configuration.
                 * The scene will not be recreated, but just updated.
@@ -1685,11 +1794,6 @@ declare module BabylonViewer {
                 */
             protected _configureOptimizer(optimizerConfig: ISceneOptimizerConfiguration | boolean): void;
             /**
-                * configure all models using the configuration.
-                * @param modelConfiguration the configuration to use to reconfigure the models
-                */
-            protected _configureModel(modelConfiguration: Partial<IModelConfiguration>): void;
-            /**
                 * (Re) configure the camera. The camera will only be created once and from this point will only be reconfigured.
                 * @param cameraConfig the new camera configuration
                 * @param model optionally use the model to configure the camera.
@@ -1790,7 +1894,7 @@ declare module BabylonViewer {
     
     export class ViewerLabs {
             constructor(_sceneManager: SceneManager);
-            environmentAssetsRootURL: string;
+            assetsRootURL: string;
             environment: PBREnvironment;
             /**
                         * Loads an environment map from a given URL
@@ -1826,7 +1930,7 @@ declare module BabylonViewer {
                 * @param url Asset url
                 * @returns The Asset url using the `environmentAssetsRootURL` if the url is not an absolute path.
                 */
-            getEnvironmentAssetUrl(url: string): string;
+            getAssetUrl(url: string): string;
     }
 }
 

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

@@ -1,11 +1,12 @@
 /// <reference path="./babylon.d.ts"/>
 /// <reference path="./babylon.glTF2Interface.d.ts"/>
 /// <reference path="./babylonjs.loaders.d.ts"/>
+declare module "babylonjs-loaders"{ export=BABYLON;}
 
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
-//   ../../Tools/Gulp/babylonjs
-//   ../../Tools/Gulp/babylonjs-loaders
+//   ../../tools/Gulp/babylonjs
+//   ../../tools/Gulp/babylonjs-loaders
 
 declare module 'babylonjs-viewer' {
     import { mapperManager } from 'babylonjs-viewer/configuration/mappers';
@@ -145,7 +146,7 @@ declare module 'babylonjs-viewer/viewer/viewerManager' {
 }
 
 declare module 'babylonjs-viewer/viewer/defaultViewer' {
-    import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
+    import { ViewerConfiguration, IModelConfiguration } from 'babylonjs-viewer/configuration/configuration';
     import { Template } from 'babylonjs-viewer/templateManager';
     import { AbstractViewer } from 'babylonjs-viewer/viewer/viewer';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
@@ -185,7 +186,7 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * The scene will automatically be cleared of the old models, if exist.
                 * @param model the configuration object (or URL) to load.
                 */
-            loadModel(model?: any): Promise<ViewerModel>;
+            loadModel(model?: string | IModelConfiguration): Promise<ViewerModel>;
             /**
                 * Show the overlay and the defined sub-screen.
                 * Mainly used for help and errors
@@ -517,7 +518,7 @@ declare module 'babylonjs-viewer/loader/modelLoader' {
 }
 
 declare module 'babylonjs-viewer/model/viewerModel' {
-    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, AnimationGroup, AbstractMesh, Observable, SceneLoaderProgressEvent, ParticleSystem, Skeleton, IDisposable, Nullable } from "babylonjs";
+    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, AnimationGroup, AbstractMesh, Observable, SceneLoaderProgressEvent, ParticleSystem, Skeleton, IDisposable, Nullable, Animation } from "babylonjs";
     import { GLTF2 } from "babylonjs-loaders";
     import { IModelConfiguration } from "babylonjs-viewer/configuration/configuration";
     import { IModelAnimation } from "babylonjs-viewer/model/modelAnimation";
@@ -526,8 +527,11 @@ declare module 'babylonjs-viewer/model/viewerModel' {
             INIT = 0,
             LOADING = 1,
             LOADED = 2,
-            CANCELED = 3,
-            ERROR = 4,
+            ENTRY = 3,
+            ENTRYDONE = 4,
+            COMPLETE = 5,
+            CANCELED = 6,
+            ERROR = 7,
     }
     /**
         * The viewer model is a container for all assets representing a sngle loaded model.
@@ -572,6 +576,10 @@ declare module 'babylonjs-viewer/model/viewerModel' {
                     exception: any;
             }>;
             /**
+                * Will be executed after the model finished loading and complete, including entry animation and lod
+                */
+            onCompleteObservable: Observable<ViewerModel>;
+            /**
                 * Observers registered here will be executed every time the model is being configured.
                 * This can be used to extend the model's configuration without extending the class itself
                 */
@@ -590,6 +598,7 @@ declare module 'babylonjs-viewer/model/viewerModel' {
                 * Set whether this model is enabled or not.
                 */
             enabled: boolean;
+            loaderDone: boolean;
             /**
                 * Get the viewer showing this model
                 */
@@ -606,7 +615,6 @@ declare module 'babylonjs-viewer/model/viewerModel' {
                 * get the list of meshes (excluding the root mesh)
                 */
             readonly meshes: AbstractMesh[];
-            get: any;
             /**
                 * (Re-)set the model's entire configuration
                 * @param newConfiguration the new configuration to replace the new one
@@ -644,6 +652,19 @@ declare module 'babylonjs-viewer/model/viewerModel' {
                 */
             playAnimation(name: string): IModelAnimation;
             /**
+             * Begin @animations with the specified @easingFunction
+             * @param animations The BABYLON Animations to begin
+             * @param duration of transition, in seconds
+             * @param easingFunction An easing function to apply
+             * @param easingMode A easing mode to apply to the easingFunction
+             * @param onAnimationEnd Call back trigger at the end of the animation.
+             */
+            transitionTo(animations: Animation[], duration: number, easingFunction: any, easingMode: number | undefined, onAnimationEnd: () => void): void;
+            /**
+                * Stops and removes all animations that have been applied to the model
+                */
+            stopAllAnimations(): void;
+            /**
                 * Will remove this model from the viewer (but NOT dispose it).
                 */
             remove(): void;
@@ -655,18 +676,18 @@ declare module 'babylonjs-viewer/model/viewerModel' {
 }
 
 declare module 'babylonjs-viewer/model/modelAnimation' {
-    import { AnimationGroup } from "babylonjs";
+    import { AnimationGroup, Vector3 } from "babylonjs";
     /**
         * Animation play mode enum - is the animation looping or playing once
         */
-    export enum AnimationPlayMode {
+    export const enum AnimationPlayMode {
             ONCE = 0,
             LOOP = 1,
     }
     /**
         * An enum representing the current state of an animation object
         */
-    export enum AnimationState {
+    export const enum AnimationState {
             INIT = 0,
             PLAYING = 1,
             PAUSED = 2,
@@ -674,6 +695,46 @@ declare module 'babylonjs-viewer/model/modelAnimation' {
             ENDED = 4,
     }
     /**
+        * The different type of easing functions available
+        */
+    export const enum EasingFunction {
+            Linear = 0,
+            CircleEase = 1,
+            BackEase = 2,
+            BounceEase = 3,
+            CubicEase = 4,
+            ElasticEase = 5,
+            ExponentialEase = 6,
+            PowerEase = 7,
+            QuadraticEase = 8,
+            QuarticEase = 9,
+            QuinticEase = 10,
+            SineEase = 11,
+    }
+    /**
+        * Defines a simple animation to be applied to a model (scale).
+        */
+    export interface ModelAnimationConfiguration {
+            /**
+                * Time of animation, in seconds
+                */
+            time: number;
+            /**
+                * Scale to apply
+                */
+            scaling?: Vector3;
+            /**
+                * Easing function to apply
+                * See SPECTRE.EasingFunction
+                */
+            easingFunction?: number;
+            /**
+                * An Easing mode to apply to the easing function
+                * See BABYLON.EasingFunction
+                */
+            easingMode?: number;
+    }
+    /**
         * This interface can be implemented to define new types of ModelAnimation objects.
         */
     export interface IModelAnimation {
@@ -854,7 +915,8 @@ declare module 'babylonjs-viewer/initializer' {
 
 declare module 'babylonjs-viewer/configuration/configuration' {
     import { ITemplateConfiguration } from 'babylonjs-viewer/templateManager';
-    import { EngineOptions, IGlowLayerOptions } from 'babylonjs';
+    import { EngineOptions, IGlowLayerOptions, DepthOfFieldEffectBlurLevel } from 'babylonjs';
+    export function getConfigurationKey(key: string, configObject: any): any;
     export interface ViewerConfiguration {
             version?: string;
             extends?: string;
@@ -876,6 +938,7 @@ declare module 'babylonjs-viewer/configuration/configuration' {
                     [name: string]: boolean | ILightConfiguration;
             };
             engine?: {
+                    renderInBackground?: boolean;
                     antialiasing?: boolean;
                     disableResize?: boolean;
                     engineOptions?: EngineOptions;
@@ -917,7 +980,12 @@ declare module 'babylonjs-viewer/configuration/configuration' {
                             };
                     };
                     hideLoadingDelay?: number;
-                    environmentAssetsRootURL?: string;
+                    assetsRootURL?: string;
+                    environmentMainColor?: {
+                            r: number;
+                            g: number;
+                            b: number;
+                    };
                     environmentMap?: {
                             /**
                                 * Environment map texture path in relative to the asset folder.
@@ -932,26 +1000,60 @@ declare module 'babylonjs-viewer/configuration/configuration' {
                                 */
                             tintLevel: number;
                     };
-                    renderingPipelines?: {
-                            default?: boolean | {
-                                    [propName: string]: any;
-                            };
-                            standard?: boolean | {
-                                    [propName: string]: any;
-                            };
-                            ssao?: boolean | {
-                                    [propName: string]: any;
-                            };
-                            ssao2?: boolean | {
-                                    [propName: string]: any;
-                            };
-                    };
+                    defaultRenderingPipelines?: boolean | IDefaultRenderingPipelineConfiguration;
             };
     }
+    /**
+        * Defines an animation to be applied to a model (translation, scale or rotation).
+        */
+    export interface IModelAnimationConfiguration {
+            /**
+                * Time of animation, in seconds
+                */
+            time?: number;
+            /**
+                * Scale to apply
+                */
+            scaling?: {
+                    x: number;
+                    y: number;
+                    z: number;
+            };
+            /**
+                * Easing function to apply
+                * See SPECTRE.EasingFunction
+                */
+            easingFunction?: number;
+            /**
+                * An Easing mode to apply to the easing function
+                * See BABYLON.EasingFunction
+                */
+            easingMode?: number;
+    }
+    export interface IDefaultRenderingPipelineConfiguration {
+            sharpenEnabled?: boolean;
+            bloomEnabled?: boolean;
+            bloomThreshold?: number;
+            depthOfFieldEnabled?: boolean;
+            depthOfFieldBlurLevel?: DepthOfFieldEffectBlurLevel;
+            fxaaEnabled?: boolean;
+            imageProcessingEnabled?: boolean;
+            defaultPipelineTextureType?: number;
+            bloomScale?: number;
+            chromaticAberrationEnabled?: boolean;
+            grainEnabled?: boolean;
+            bloomKernel?: number;
+            hardwareScaleLevel?: number;
+            bloomWeight?: number;
+            bllomThreshold?: number;
+            hdr?: boolean;
+            samples?: number;
+    }
     export interface IModelConfiguration {
             id?: string;
             url?: string;
             root?: string;
+            file?: string;
             loader?: string;
             position?: {
                     x: number;
@@ -984,6 +1086,8 @@ declare module 'babylonjs-viewer/configuration/configuration' {
                     autoStart?: boolean | string;
                     playOnce?: boolean;
             };
+            entryAnimation?: IModelAnimationConfiguration;
+            exitAnimation?: IModelAnimationConfiguration;
             material?: {
                     directEnabled?: boolean;
                     directIntensity?: number;
@@ -1191,6 +1295,7 @@ declare module 'babylonjs-viewer/configuration/configuration' {
                     renderTarget?: ISceneOptimizerParameters;
                     mergeMeshes?: ISceneOptimizerParameters;
             };
+            custom?: string;
     }
     export interface IObserversConfiguration {
             onEngineInit?: string;
@@ -1550,7 +1655,7 @@ declare module 'babylonjs-viewer/templateManager' {
 }
 
 declare module 'babylonjs-viewer/viewer/sceneManager' {
-    import { Scene, ArcRotateCamera, Light, SceneOptimizer, EnvironmentHelper, Color3, Observable } from 'babylonjs';
+    import { Scene, ArcRotateCamera, Light, SceneOptimizer, EnvironmentHelper, Color3, Observable, DefaultRenderingPipeline, Nullable } from 'babylonjs';
     import { AbstractViewer } from 'babylonjs-viewer/viewer/viewer';
     import { ILightConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ICameraConfiguration, ISkyboxConfiguration, ViewerConfiguration, IGroundConfiguration, IModelConfiguration } from 'babylonjs-viewer/configuration/configuration';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
@@ -1632,6 +1737,7 @@ declare module 'babylonjs-viewer/viewer/sceneManager' {
                 * Please be careful when using labs in production.
                 */
             labs: ViewerLabs;
+            readonly defaultRenderingPipeline: Nullable<DefaultRenderingPipeline>;
             constructor(_viewer: AbstractViewer);
             /**
                 * Returns a boolean representing HDR support
@@ -1641,6 +1747,8 @@ declare module 'babylonjs-viewer/viewer/sceneManager' {
                 * Return the main color defined in the configuration.
                 */
             readonly mainColor: Color3;
+            readonly reflectionColor: Color3;
+            animationBlendingEnabled: boolean;
             /**
                 * Should shadows be rendered every frame, or only once and stop.
                 * This can be used to optimize a scene.
@@ -1649,19 +1757,18 @@ declare module 'babylonjs-viewer/viewer/sceneManager' {
                 * @param process if true shadows will be updated once every frame. if false they will stop being updated.
                 */
             processShadows: boolean;
+            groundEnabled: boolean;
+            /**
+                * sets wether the reflection is disabled.
+                */
+            groundMirrorEnabled: boolean;
+            defaultRenderingPipelineEnabled: boolean;
             /**
                 * Sets the engine flags to unlock all babylon features.
                 * Can also be configured using the scene.flags configuration object
                 */
             unlockBabylonFeatures(): void;
             /**
-                * initialize the environment for a specific model.
-                * Per default it will use the viewer's configuration.
-                * @param model the model to use to configure the environment.
-                * @returns a Promise that will resolve when the configuration is done.
-                */
-            protected _initEnvironment(model?: ViewerModel): Promise<Scene>;
-            /**
                 * initialize the scene. Calling this function again will dispose the old scene, if exists.
                 */
             initScene(sceneConfiguration?: ISceneConfiguration, optimizerConfiguration?: boolean | ISceneOptimizerConfiguration): Promise<Scene>;
@@ -1672,6 +1779,8 @@ declare module 'babylonjs-viewer/viewer/sceneManager' {
                 * @param globalConfiguration The global configuration object, after the new configuration was merged into it
                 */
             updateConfiguration(newConfiguration: Partial<ViewerConfiguration>, globalConfiguration: ViewerConfiguration, model?: ViewerModel): void;
+            bloomEnabled: boolean;
+            fxaaEnabled: boolean;
             /**
                 * internally configure the scene using the provided configuration.
                 * The scene will not be recreated, but just updated.
@@ -1685,11 +1794,6 @@ declare module 'babylonjs-viewer/viewer/sceneManager' {
                 */
             protected _configureOptimizer(optimizerConfig: ISceneOptimizerConfiguration | boolean): void;
             /**
-                * configure all models using the configuration.
-                * @param modelConfiguration the configuration to use to reconfigure the models
-                */
-            protected _configureModel(modelConfiguration: Partial<IModelConfiguration>): void;
-            /**
                 * (Re) configure the camera. The camera will only be created once and from this point will only be reconfigured.
                 * @param cameraConfig the new camera configuration
                 * @param model optionally use the model to configure the camera.
@@ -1818,7 +1922,7 @@ declare module 'babylonjs-viewer/labs/viewerLabs' {
     import { SceneManager } from 'babylonjs-viewer/viewer/sceneManager';
     export class ViewerLabs {
             constructor(_sceneManager: SceneManager);
-            environmentAssetsRootURL: string;
+            assetsRootURL: string;
             environment: PBREnvironment;
             /**
                         * Loads an environment map from a given URL
@@ -1854,7 +1958,7 @@ declare module 'babylonjs-viewer/labs/viewerLabs' {
                 * @param url Asset url
                 * @returns The Asset url using the `environmentAssetsRootURL` if the url is not an absolute path.
                 */
-            getEnvironmentAssetUrl(url: string): string;
+            getAssetUrl(url: string): string;
     }
 }
 

loaders/src/glTF/babylon.glTFFileLoader.ts

@@ -592,17 +592,14 @@ module BABYLON {
             loader.onTextureLoadedObservable.add(texture => this.onTextureLoadedObservable.notifyObservers(texture));
             loader.onMaterialLoadedObservable.add(material => this.onMaterialLoadedObservable.notifyObservers(material));
             loader.onCameraLoadedObservable.add(camera => this.onCameraLoadedObservable.notifyObservers(camera));
-
-            loader.onExtensionLoadedObservable.add(extension => {
-                this.onExtensionLoadedObservable.notifyObservers(extension);
-                this.onExtensionLoadedObservable.clear();
-            });
+            loader.onExtensionLoadedObservable.add(extension => this.onExtensionLoadedObservable.notifyObservers(extension));
 
             loader.onCompleteObservable.add(() => {
                 this.onMeshLoadedObservable.clear();
                 this.onTextureLoadedObservable.clear();
                 this.onMaterialLoadedObservable.clear();
                 this.onCameraLoadedObservable.clear();
+                this.onExtensionLoadedObservable.clear();
 
                 this.onCompleteObservable.notifyObservers(this);
                 this.onCompleteObservable.clear();

package.json

@@ -40,6 +40,7 @@
     "readmeFilename": "README.md",
     "dependencies": {},
     "devDependencies": {
+        "base64-font-loader": "0.0.4",
         "typescript": "^2.8.1"
     }
 }

src/Animations/babylon.animationGroup.ts

@@ -115,12 +115,12 @@ module BABYLON {
         /**
          * This function will normalize every animation in the group to make sure they all go from beginFrame to endFrame
          * It can add constant keys at begin or end
-         * @param beginFrame defines the new begin frame for all animations. It can't be bigger than the smallest begin frame of all animations
-         * @param endFrame defines the new end frame for all animations. It can't be smaller than the largest end frame of all animations
+         * @param beginFrame defines the new begin frame for all animations or the smallest begin frame of all animations if null (defaults to 0)
+         * @param endFrame defines the new end frame for all animations or the largest end frame of all animations if null (defaults to null)
          */
-        public normalize(beginFrame = -Number.MAX_VALUE, endFrame = Number.MAX_VALUE): AnimationGroup {
-            beginFrame = Math.max(beginFrame, this._from);
-            endFrame = Math.min(endFrame, this._to);
+        public normalize(beginFrame: Nullable<number> = 0, endFrame: Nullable<number> = null): AnimationGroup {
+            if (beginFrame == null) beginFrame = this._from;
+            if (endFrame == null) endFrame = this._to;
 
             for (var index = 0; index < this._targetedAnimations.length; index++) {
                 let targetedAnimation = this._targetedAnimations[index];
@@ -151,6 +151,9 @@ module BABYLON {
                 }
             }
 
+            this._from = beginFrame;
+            this._to = endFrame;
+
             return this;
         }
 

src/Cameras/VR/babylon.vrExperienceHelper.ts

@@ -43,6 +43,8 @@ module BABYLON {
         public _teleportationEnabled: boolean;
         public _teleportationRequestInitiated = false;
         public _teleportationBackRequestInitiated = false;
+        public _rotationRightAsked = false;
+        public _rotationLeftAsked = false;
         public _dpadPressed = true;
 
         public _activePointer = false;
@@ -93,12 +95,15 @@ module BABYLON {
             this._activePointer = false;
         }
 
-        public _updatePointerDistance(distance:number) {
+        public _updatePointerDistance(distance:number = 100) {
         }
 
         public dispose(){
             this._interactionsEnabled = false;
             this._teleportationEnabled = false;
+            if(this._gazeTracker){
+                this._gazeTracker.dispose()
+            }
         }
     }
 
@@ -172,7 +177,7 @@ module BABYLON {
             this._laserPointer.parent = mesh;
         }
 
-        public _updatePointerDistance(distance:number) {
+        public _updatePointerDistance(distance:number = 100) {
             this._laserPointer.scaling.y = distance;
             this._laserPointer.position.z = -distance / 2;  
         }
@@ -280,8 +285,6 @@ module BABYLON {
         private _floorMeshesCollection: Mesh[] = [];
         private _rotationAllowed: boolean = true;
         private _teleportBackwardsVector = new Vector3(0, -1, -1);
-        private _rotationRightAsked = false;
-        private _rotationLeftAsked = false;
         private _teleportationTarget: Mesh;
         private _isDefaultTeleportationTarget = true;
         private _postProcessMove: ImageProcessingPostProcess;
@@ -443,7 +446,7 @@ module BABYLON {
                 if (this.rightController) {
                     this.rightController._activatePointer();
                 }
-                else if (this.leftController) {
+                if (this.leftController) {
                     this.leftController._activatePointer();
                 }
             }
@@ -1157,29 +1160,29 @@ module BABYLON {
                 return;
             }
 
-            if (!this._rotationLeftAsked) {
+            if (!gazer._rotationLeftAsked) {
                 if (stateObject.x < -this._padSensibilityUp && gazer._dpadPressed) {
-                    this._rotationLeftAsked = true;
+                    gazer._rotationLeftAsked = true;
                     if (this._rotationAllowed) {
                         this._rotateCamera(false);
                     }
                 }
             } else {
                 if (stateObject.x > -this._padSensibilityDown) {
-                    this._rotationLeftAsked = false;
+                    gazer._rotationLeftAsked = false;
                 }
             }
 
-            if (!this._rotationRightAsked) {
+            if (!gazer._rotationRightAsked) {
                 if (stateObject.x > this._padSensibilityUp && gazer._dpadPressed) {
-                    this._rotationRightAsked = true;
+                    gazer._rotationRightAsked = true;
                     if (this._rotationAllowed) {
                         this._rotateCamera(true);
                     }
                 }
             } else {
                 if (stateObject.x < this._padSensibilityDown) {
-                    this._rotationRightAsked = false;
+                    gazer._rotationRightAsked = false;
                 }
             }
         }
@@ -1243,8 +1246,8 @@ module BABYLON {
                     controller.webVRController.onPadStateChangedObservable.add((stateObject) => {
                         controller._dpadPressed = stateObject.pressed;
                         if (!controller._dpadPressed) {
-                            this._rotationLeftAsked = false;
-                            this._rotationRightAsked = false;
+                            controller._rotationLeftAsked = false;
+                            controller._rotationRightAsked = false;
                             controller._teleportationBackRequestInitiated = false;
                         }
                     });
@@ -1611,6 +1614,7 @@ module BABYLON {
                 gazer._updatePointerDistance(hit.distance);        
             }
             else {
+                gazer._updatePointerDistance();   
                 gazer._gazeTracker.isVisible = false;
             }
 

src/Loading/babylon.sceneLoader.ts

@@ -494,7 +494,8 @@
                     });
                 }, onProgress, (scene, message, exception) => {
                     reject(exception || new Error(message));
-                });
+                },
+                pluginExtension);
             });
         }
 

src/Tools/babylon.database.ts

@@ -398,8 +398,8 @@ module BABYLON {
 
                     transaction.oncomplete = event => {
                         if (version) {
-                            // If the version in the JSON file is > than the version in DB
-                            if (this.manifestVersionFound > version.data) {
+                            // If the version in the JSON file is different from the version in DB
+                            if (this.manifestVersionFound !== version.data) {
                                 this.mustUpdateRessources = true;
                                 updateInDBCallback();
                             }