adding utility layer support to skeletonViewer

dist/preview release/babylon.max.js

@@ -65919,6 +65919,7 @@ var BABYLON;
              * @param scene defines the hosting scene
              * @param autoUpdateBonesMatrices defines a boolean indicating if bones matrices must be forced to update before rendering (true by default)
              * @param renderingGroupId defines the rendering group id to use with the viewer
+             * @param utilityLayerRenderer defines an optional utility layer to render the helper on
              */
             function SkeletonViewer(
             /** defines the skeleton to render */
@@ -65928,13 +65929,16 @@ var BABYLON;
             /** defines a boolean indicating if bones matrices must be forced to update before rendering (true by default)  */
             autoUpdateBonesMatrices, 
             /** defines the rendering group id to use with the viewer */
-            renderingGroupId) {
+            renderingGroupId, 
+            /** defines an optional utility layer to render the helper on */
+            utilityLayerRenderer) {
                 if (autoUpdateBonesMatrices === void 0) { autoUpdateBonesMatrices = true; }
                 if (renderingGroupId === void 0) { renderingGroupId = 1; }
                 this.skeleton = skeleton;
                 this.mesh = mesh;
                 this.autoUpdateBonesMatrices = autoUpdateBonesMatrices;
                 this.renderingGroupId = renderingGroupId;
+                this.utilityLayerRenderer = utilityLayerRenderer;
                 /** Gets or sets the color used to render the skeleton */
                 this.color = BABYLON.Color3.White();
                 this._debugLines = new Array();
@@ -65943,6 +65947,13 @@ var BABYLON;
                 this.update();
                 this._renderFunction = this.update.bind(this);
             }
+            Object.defineProperty(SkeletonViewer.prototype, "debugMesh", {
+                get: function () {
+                    return this._debugMesh;
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(SkeletonViewer.prototype, "isEnabled", {
                 get: function () {
                     return this._isEnabled;
@@ -66033,12 +66044,13 @@ var BABYLON;
                 else {
                     this._getLinesForBonesWithLength(this.skeleton.bones, this.mesh.getWorldMatrix());
                 }
+                var targetScene = this.utilityLayerRenderer ? this.utilityLayerRenderer.utilityLayerScene : this._scene;
                 if (!this._debugMesh) {
-                    this._debugMesh = BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: null }, this._scene);
+                    this._debugMesh = BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: null }, targetScene);
                     this._debugMesh.renderingGroupId = this.renderingGroupId;
                 }
                 else {
-                    BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: this._debugMesh }, this._scene);
+                    BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: this._debugMesh }, targetScene);
                 }
                 this._debugMesh.position.copyFrom(this.mesh.position);
                 this._debugMesh.color = this.color;

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

@@ -65886,6 +65886,7 @@ var BABYLON;
              * @param scene defines the hosting scene
              * @param autoUpdateBonesMatrices defines a boolean indicating if bones matrices must be forced to update before rendering (true by default)
              * @param renderingGroupId defines the rendering group id to use with the viewer
+             * @param utilityLayerRenderer defines an optional utility layer to render the helper on
              */
             function SkeletonViewer(
             /** defines the skeleton to render */
@@ -65895,13 +65896,16 @@ var BABYLON;
             /** defines a boolean indicating if bones matrices must be forced to update before rendering (true by default)  */
             autoUpdateBonesMatrices, 
             /** defines the rendering group id to use with the viewer */
-            renderingGroupId) {
+            renderingGroupId, 
+            /** defines an optional utility layer to render the helper on */
+            utilityLayerRenderer) {
                 if (autoUpdateBonesMatrices === void 0) { autoUpdateBonesMatrices = true; }
                 if (renderingGroupId === void 0) { renderingGroupId = 1; }
                 this.skeleton = skeleton;
                 this.mesh = mesh;
                 this.autoUpdateBonesMatrices = autoUpdateBonesMatrices;
                 this.renderingGroupId = renderingGroupId;
+                this.utilityLayerRenderer = utilityLayerRenderer;
                 /** Gets or sets the color used to render the skeleton */
                 this.color = BABYLON.Color3.White();
                 this._debugLines = new Array();
@@ -65910,6 +65914,13 @@ var BABYLON;
                 this.update();
                 this._renderFunction = this.update.bind(this);
             }
+            Object.defineProperty(SkeletonViewer.prototype, "debugMesh", {
+                get: function () {
+                    return this._debugMesh;
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(SkeletonViewer.prototype, "isEnabled", {
                 get: function () {
                     return this._isEnabled;
@@ -66000,12 +66011,13 @@ var BABYLON;
                 else {
                     this._getLinesForBonesWithLength(this.skeleton.bones, this.mesh.getWorldMatrix());
                 }
+                var targetScene = this.utilityLayerRenderer ? this.utilityLayerRenderer.utilityLayerScene : this._scene;
                 if (!this._debugMesh) {
-                    this._debugMesh = BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: null }, this._scene);
+                    this._debugMesh = BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: null }, targetScene);
                     this._debugMesh.renderingGroupId = this.renderingGroupId;
                 }
                 else {
-                    BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: this._debugMesh }, this._scene);
+                    BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: this._debugMesh }, targetScene);
                 }
                 this._debugMesh.position.copyFrom(this.mesh.position);
                 this._debugMesh.color = this.color;

dist/preview release/es6.js

@@ -65886,6 +65886,7 @@ var BABYLON;
              * @param scene defines the hosting scene
              * @param autoUpdateBonesMatrices defines a boolean indicating if bones matrices must be forced to update before rendering (true by default)
              * @param renderingGroupId defines the rendering group id to use with the viewer
+             * @param utilityLayerRenderer defines an optional utility layer to render the helper on
              */
             function SkeletonViewer(
             /** defines the skeleton to render */
@@ -65895,13 +65896,16 @@ var BABYLON;
             /** defines a boolean indicating if bones matrices must be forced to update before rendering (true by default)  */
             autoUpdateBonesMatrices, 
             /** defines the rendering group id to use with the viewer */
-            renderingGroupId) {
+            renderingGroupId, 
+            /** defines an optional utility layer to render the helper on */
+            utilityLayerRenderer) {
                 if (autoUpdateBonesMatrices === void 0) { autoUpdateBonesMatrices = true; }
                 if (renderingGroupId === void 0) { renderingGroupId = 1; }
                 this.skeleton = skeleton;
                 this.mesh = mesh;
                 this.autoUpdateBonesMatrices = autoUpdateBonesMatrices;
                 this.renderingGroupId = renderingGroupId;
+                this.utilityLayerRenderer = utilityLayerRenderer;
                 /** Gets or sets the color used to render the skeleton */
                 this.color = BABYLON.Color3.White();
                 this._debugLines = new Array();
@@ -65910,6 +65914,13 @@ var BABYLON;
                 this.update();
                 this._renderFunction = this.update.bind(this);
             }
+            Object.defineProperty(SkeletonViewer.prototype, "debugMesh", {
+                get: function () {
+                    return this._debugMesh;
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(SkeletonViewer.prototype, "isEnabled", {
                 get: function () {
                     return this._isEnabled;
@@ -66000,12 +66011,13 @@ var BABYLON;
                 else {
                     this._getLinesForBonesWithLength(this.skeleton.bones, this.mesh.getWorldMatrix());
                 }
+                var targetScene = this.utilityLayerRenderer ? this.utilityLayerRenderer.utilityLayerScene : this._scene;
                 if (!this._debugMesh) {
-                    this._debugMesh = BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: null }, this._scene);
+                    this._debugMesh = BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: null }, targetScene);
                     this._debugMesh.renderingGroupId = this.renderingGroupId;
                 }
                 else {
-                    BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: this._debugMesh }, this._scene);
+                    BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: this._debugMesh }, targetScene);
                 }
                 this._debugMesh.position.copyFrom(this.mesh.position);
                 this._debugMesh.color = this.color;

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

@@ -2,10 +2,6 @@
 /// <reference path="./babylon.glTF2Interface.d.ts"/>
 /// <reference path="./babylonjs.loaders.d.ts"/>
 declare module "babylonjs-loaders"{ export=BABYLON;}
-/// <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
@@ -127,6 +123,80 @@ declare module BabylonViewer {
     export let viewerManager: ViewerManager;
 }
 declare module BabylonViewer {
+    /**
+        * The Default viewer is the default implementation of the AbstractViewer.
+        * It uses the templating system to render a new canvas and controls.
+        */
+    export class DefaultViewer extends AbstractViewer {
+            containerElement: Element;
+            fullscreenElement?: Element;
+            /**
+                * Create a new default viewer
+                * @param containerElement the element in which the templates will be rendered
+                * @param initialConfiguration the initial configuration. Defaults to extending the default configuration
+                */
+            constructor(containerElement: Element, initialConfiguration?: ViewerConfiguration);
+            registerTemplatePlugin(plugin: IViewerTemplatePlugin): void;
+            /**
+                * This will be executed when the templates initialize.
+                */
+            protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            protected _initVR(): void;
+            /**
+                * Toggle fullscreen of the entire viewer
+                */
+            toggleFullscreen: () => void;
+            /**
+                * Preparing the container element to present the viewer
+                */
+            protected _prepareContainerElement(): void;
+            /**
+                * This function will configure the templates and update them after a model was loaded
+                * It is mainly responsible to changing the title and subtitle etc'.
+                * @param model the model to be used to configure the templates by
+                */
+            protected _configureTemplate(model?: ViewerModel): void;
+            /**
+                * This will load a new model to the default viewer
+                * overriding the AbstractViewer's loadModel.
+                * The scene will automatically be cleared of the old models, if exist.
+                * @param model the configuration object (or URL) to load.
+                */
+            loadModel(model?: string | File | IModelConfiguration): Promise<ViewerModel>;
+            /**
+                * Show the overlay and the defined sub-screen.
+                * Mainly used for help and errors
+                * @param subScreen the name of the subScreen. Those can be defined in the configuration object
+                */
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
+            /**
+                * Hide the overlay screen.
+                */
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
+            /**
+                * show the viewer (in case it was hidden)
+                *
+                * @param visibilityFunction an optional function to execute in order to show the container
+                */
+            show(visibilityFunction?: ((template: Template) => Promise<Template>)): Promise<Template>;
+            /**
+                * hide the viewer (in case it is visible)
+                *
+                * @param visibilityFunction an optional function to execute in order to hide the container
+                */
+            hide(visibilityFunction?: ((template: Template) => Promise<Template>)): Promise<Template>;
+            /**
+                * Show the loading screen.
+                * The loading screen can be configured using the configuration object
+                */
+            showLoadingScreen(): Promise<string> | Promise<Template>;
+            /**
+                * Hide the loading screen
+                */
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
+            dispose(): void;
+            protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
+    }
 }
 declare module BabylonViewer {
     /**
@@ -827,26 +897,6 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
-    export interface IViewerTemplatePlugin {
-        readonly templateName: string;
-        readonly eventsToAttach?: Array<string>;
-        interactionPredicate(event: EventCallback): boolean;
-        onEvent?(event: EventCallback): void;
-        addHTMLTemplate?(template: Template): void;
-    }
-    export abstract class AbstractViewerNavbarButton implements IViewerTemplatePlugin {
-        readonly templateName: string;
-        readonly eventsToAttach: Array<string>;
-        protected _prepend: boolean;
-        protected _buttonName: string;
-        protected _buttonClass: string;
-        protected _htmlTemplate: string;
-        constructor(buttonName: string, buttonClass?: string, htmlTemplate?: string);
-        interactionPredicate(event: EventCallback): boolean;
-        abstract onEvent(event: EventCallback): void;
-        addHTMLTemplate(template: Template): void;
-        protected _generateHTMLElement(template: Template): Element | DocumentFragment;
-    }
 }
 declare module BabylonViewer {
     /**
@@ -968,6 +1018,171 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
+    /**
+        * The object sent when an event is triggered
+        */
+    export interface EventCallback {
+            event: Event;
+            template: Template;
+            selector: string;
+            payload?: any;
+    }
+    /**
+        * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
+        * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
+        */
+    export class TemplateManager {
+            containerElement: Element;
+            /**
+                * Will be triggered when any template is initialized
+                */
+            onTemplateInit: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when any template is fully loaded
+                */
+            onTemplateLoaded: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when a template state changes
+                */
+            onTemplateStateChange: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when all templates finished loading
+                */
+            onAllLoaded: BABYLON.Observable<TemplateManager>;
+            /**
+                * Will be triggered when any event on any template is triggered.
+                */
+            onEventTriggered: BABYLON.Observable<EventCallback>;
+            /**
+                * This template manager's event manager. In charge of callback registrations to native event types
+                */
+            eventManager: EventManager;
+            constructor(containerElement: Element);
+            /**
+                * Initialize the template(s) for the viewer. Called bay the Viewer class
+                * @param templates the templates to be used to initialize the main template
+                */
+            initTemplate(templates: {
+                    [key: string]: ITemplateConfiguration;
+            }): Promise<void>;
+            /**
+                * Get the canvas in the template tree.
+                * There must be one and only one canvas inthe template.
+                */
+            getCanvas(): HTMLCanvasElement | null;
+            /**
+                * Get a specific template from the template tree
+                * @param name the name of the template to load
+                */
+            getTemplate(name: string): Template | undefined;
+            /**
+                * Dispose the template manager
+                */
+            dispose(): void;
+    }
+    /**
+        * 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.
+        * A template is injected using the template manager in the correct position.
+        * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
+        *
+        * For further information please refer to the documentation page, https://doc.babylonjs.com
+        */
+    export class Template {
+            name: string;
+            /**
+                * Will be triggered when the template is loaded
+                */
+            onLoaded: BABYLON.Observable<Template>;
+            /**
+                * will be triggered when the template is appended to the tree
+                */
+            onAppended: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when the template's state changed (shown, hidden)
+                */
+            onStateChange: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when an event is triggered on ths template.
+                * The event is a native browser event (like mouse or pointer events)
+                */
+            onEventTriggered: BABYLON.Observable<EventCallback>;
+            onParamsUpdated: BABYLON.Observable<Template>;
+            onHTMLRendered: BABYLON.Observable<Template>;
+            /**
+                * is the template loaded?
+                */
+            isLoaded: boolean;
+            /**
+                * This is meant to be used to track the show and hide functions.
+                * This is NOT (!!) a flag to check if the element is actually visible to the user.
+                */
+            isShown: boolean;
+            /**
+                * Is this template a part of the HTML tree (the template manager injected it)
+                */
+            isInHtmlTree: boolean;
+            /**
+                * The HTML element containing this template
+                */
+            parent: HTMLElement;
+            /**
+                * A promise that is fulfilled when the template finished loading.
+                */
+            initPromise: Promise<Template>;
+            constructor(name: string, _configuration: ITemplateConfiguration);
+            /**
+                * Some templates have parameters (like background color for example).
+                * The parameters are provided to Handlebars which in turn generates the template.
+                * This function will update the template with the new parameters
+                *
+                * Note that when updating parameters the events will be registered again (after being cleared).
+                *
+                * @param params the new template parameters
+                */
+            updateParams(params: {
+                    [key: string]: string | number | boolean | object;
+            }, append?: boolean): void;
+            redraw(): void;
+            /**
+                * Get the template'S configuration
+                */
+            readonly configuration: ITemplateConfiguration;
+            /**
+                * A template can be a parent element for other templates or HTML elements.
+                * This function will deliver all child HTML elements of this template.
+                */
+            getChildElements(): Array<string>;
+            /**
+                * Appending the template to a parent HTML element.
+                * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
+                * @param parent the parent to which the template is added
+                * @param forceRemove if the parent already exists, shoud the template be removed from it?
+                */
+            appendTo(parent: HTMLElement, forceRemove?: boolean): void;
+            /**
+                * Show the template using the provided visibilityFunction, or natively using display: flex.
+                * The provided function returns a promise that should be fullfilled when the element is shown.
+                * Since it is a promise async operations are more than possible.
+                * See the default viewer for an opacity example.
+                * @param visibilityFunction The function to execute to show the template.
+                */
+            show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
+            /**
+                * Hide the template using the provided visibilityFunction, or natively using display: none.
+                * The provided function returns a promise that should be fullfilled when the element is hidden.
+                * Since it is a promise async operations are more than possible.
+                * See the default viewer for an opacity example.
+                * @param visibilityFunction The function to execute to show the template.
+                */
+            hide(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
+            /**
+                * Dispose this template
+                */
+            dispose(): void;
+    }
+}
+declare module BabylonViewer {
     export class ConfigurationContainer {
         configuration: ViewerConfiguration;
         viewerId: string;
@@ -1244,171 +1459,6 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
-    /**
-        * The object sent when an event is triggered
-        */
-    export interface EventCallback {
-            event: Event;
-            template: Template;
-            selector: string;
-            payload?: any;
-    }
-    /**
-        * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
-        * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
-        */
-    export class TemplateManager {
-            containerElement: Element;
-            /**
-                * Will be triggered when any template is initialized
-                */
-            onTemplateInit: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when any template is fully loaded
-                */
-            onTemplateLoaded: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when a template state changes
-                */
-            onTemplateStateChange: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when all templates finished loading
-                */
-            onAllLoaded: BABYLON.Observable<TemplateManager>;
-            /**
-                * Will be triggered when any event on any template is triggered.
-                */
-            onEventTriggered: BABYLON.Observable<EventCallback>;
-            /**
-                * This template manager's event manager. In charge of callback registrations to native event types
-                */
-            eventManager: EventManager;
-            constructor(containerElement: Element);
-            /**
-                * Initialize the template(s) for the viewer. Called bay the Viewer class
-                * @param templates the templates to be used to initialize the main template
-                */
-            initTemplate(templates: {
-                    [key: string]: ITemplateConfiguration;
-            }): Promise<void>;
-            /**
-                * Get the canvas in the template tree.
-                * There must be one and only one canvas inthe template.
-                */
-            getCanvas(): HTMLCanvasElement | null;
-            /**
-                * Get a specific template from the template tree
-                * @param name the name of the template to load
-                */
-            getTemplate(name: string): Template | undefined;
-            /**
-                * Dispose the template manager
-                */
-            dispose(): void;
-    }
-    /**
-        * 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.
-        * A template is injected using the template manager in the correct position.
-        * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
-        *
-        * For further information please refer to the documentation page, https://doc.babylonjs.com
-        */
-    export class Template {
-            name: string;
-            /**
-                * Will be triggered when the template is loaded
-                */
-            onLoaded: BABYLON.Observable<Template>;
-            /**
-                * will be triggered when the template is appended to the tree
-                */
-            onAppended: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when the template's state changed (shown, hidden)
-                */
-            onStateChange: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when an event is triggered on ths template.
-                * The event is a native browser event (like mouse or pointer events)
-                */
-            onEventTriggered: BABYLON.Observable<EventCallback>;
-            onParamsUpdated: BABYLON.Observable<Template>;
-            onHTMLRendered: BABYLON.Observable<Template>;
-            /**
-                * is the template loaded?
-                */
-            isLoaded: boolean;
-            /**
-                * This is meant to be used to track the show and hide functions.
-                * This is NOT (!!) a flag to check if the element is actually visible to the user.
-                */
-            isShown: boolean;
-            /**
-                * Is this template a part of the HTML tree (the template manager injected it)
-                */
-            isInHtmlTree: boolean;
-            /**
-                * The HTML element containing this template
-                */
-            parent: HTMLElement;
-            /**
-                * A promise that is fulfilled when the template finished loading.
-                */
-            initPromise: Promise<Template>;
-            constructor(name: string, _configuration: ITemplateConfiguration);
-            /**
-                * Some templates have parameters (like background color for example).
-                * The parameters are provided to Handlebars which in turn generates the template.
-                * This function will update the template with the new parameters
-                *
-                * Note that when updating parameters the events will be registered again (after being cleared).
-                *
-                * @param params the new template parameters
-                */
-            updateParams(params: {
-                    [key: string]: string | number | boolean | object;
-            }, append?: boolean): void;
-            redraw(): void;
-            /**
-                * Get the template'S configuration
-                */
-            readonly configuration: ITemplateConfiguration;
-            /**
-                * A template can be a parent element for other templates or HTML elements.
-                * This function will deliver all child HTML elements of this template.
-                */
-            getChildElements(): Array<string>;
-            /**
-                * Appending the template to a parent HTML element.
-                * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
-                * @param parent the parent to which the template is added
-                * @param forceRemove if the parent already exists, shoud the template be removed from it?
-                */
-            appendTo(parent: HTMLElement, forceRemove?: boolean): void;
-            /**
-                * Show the template using the provided visibilityFunction, or natively using display: flex.
-                * The provided function returns a promise that should be fullfilled when the element is shown.
-                * Since it is a promise async operations are more than possible.
-                * See the default viewer for an opacity example.
-                * @param visibilityFunction The function to execute to show the template.
-                */
-            show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
-            /**
-                * Hide the template using the provided visibilityFunction, or natively using display: none.
-                * The provided function returns a promise that should be fullfilled when the element is hidden.
-                * Since it is a promise async operations are more than possible.
-                * See the default viewer for an opacity example.
-                * @param visibilityFunction The function to execute to show the template.
-                */
-            hide(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
-            /**
-                * Dispose this template
-                */
-            dispose(): void;
-    }
-}
-declare module BabylonViewer {
     export interface IModelConfiguration {
             id?: string;
             url?: string;
@@ -1529,6 +1579,39 @@ declare module BabylonViewer {
 }
 declare module BabylonViewer {
     /**
+        * The EventManager is in charge of registering user interctions with the viewer.
+        * It is used in the TemplateManager
+        */
+    export class EventManager {
+            constructor(_templateManager: TemplateManager);
+            /**
+                * Register a new callback to a specific template.
+                * The best example for the usage can be found in the DefaultViewer
+                *
+                * @param templateName the templateName to register the event to
+                * @param callback The callback to be executed
+                * @param eventType the type of event to register
+                * @param selector an optional selector. if not defined the parent object in the template will be selected
+                */
+            registerCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
+            /**
+                * This will remove a registered event from the defined template.
+                * Each one of the variables apart from the template name are optional, but one must be provided.
+                *
+                * @param templateName the templateName
+                * @param callback the callback to remove (optional)
+                * @param eventType the event type to remove (optional)
+                * @param selector the selector from which to remove the event (optional)
+                */
+            unregisterCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
+            /**
+                * Dispose the event manager
+                */
+            dispose(): void;
+    }
+}
+declare module BabylonViewer {
+    /**
         * The ViewerLabs class will hold functions that are not (!) backwards compatible.
         * The APIs in all labs-related classes and configuration  might change.
         * Once stable, lab features will be moved to the publis API and configuration object.
@@ -1577,39 +1660,6 @@ declare module BabylonViewer {
 }
 declare module BabylonViewer {
     /**
-        * The EventManager is in charge of registering user interctions with the viewer.
-        * It is used in the TemplateManager
-        */
-    export class EventManager {
-            constructor(_templateManager: TemplateManager);
-            /**
-                * Register a new callback to a specific template.
-                * The best example for the usage can be found in the DefaultViewer
-                *
-                * @param templateName the templateName to register the event to
-                * @param callback The callback to be executed
-                * @param eventType the type of event to register
-                * @param selector an optional selector. if not defined the parent object in the template will be selected
-                */
-            registerCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
-            /**
-                * This will remove a registered event from the defined template.
-                * Each one of the variables apart from the template name are optional, but one must be provided.
-                *
-                * @param templateName the templateName
-                * @param callback the callback to remove (optional)
-                * @param eventType the event type to remove (optional)
-                * @param selector the selector from which to remove the event (optional)
-                */
-            unregisterCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
-            /**
-                * Dispose the event manager
-                */
-            dispose(): void;
-    }
-}
-declare module BabylonViewer {
-    /**
         * Defines an animation to be applied to a model (translation, scale or rotation).
         */
     export interface IModelAnimationConfiguration {
@@ -2409,4 +2459,11 @@ declare module BabylonViewer {
             static ApplySamplingParameters(babylonTexture: BABYLON.BaseTexture, parameters: SamplingParameters): void;
             /**
                 * Environment preprocessing dedicated value (Internal Use or Advanced only).
-                */
+                */
+            static EnvironmentLODScale: number;
+            /**
+                * Environment preprocessing dedicated value (Internal Use or Advanced only)..
+                */
+            static EnvironmentLODOffset: number;
+    }
+}

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

@@ -3,11 +3,6 @@
 /// <reference path="./babylonjs.loaders.d.ts"/>
 declare module "babylonjs-loaders"{ export=BABYLON;}
 
-/// <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
@@ -155,7 +150,85 @@ declare module 'babylonjs-viewer/viewer/viewerManager' {
 }
 
 declare module 'babylonjs-viewer/viewer/defaultViewer' {
-    
+    import { ViewerConfiguration, IModelConfiguration } from 'babylonjs-viewer/configuration';
+    import { Template } from 'babylonjs-viewer/templating/templateManager';
+    import { AbstractViewer } from 'babylonjs-viewer/viewer/viewer';
+    import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
+    import { IViewerTemplatePlugin } from 'babylonjs-viewer/templating/viewerTemplatePlugin';
+    /**
+        * The Default viewer is the default implementation of the AbstractViewer.
+        * It uses the templating system to render a new canvas and controls.
+        */
+    export class DefaultViewer extends AbstractViewer {
+            containerElement: Element;
+            fullscreenElement?: Element;
+            /**
+                * Create a new default viewer
+                * @param containerElement the element in which the templates will be rendered
+                * @param initialConfiguration the initial configuration. Defaults to extending the default configuration
+                */
+            constructor(containerElement: Element, initialConfiguration?: ViewerConfiguration);
+            registerTemplatePlugin(plugin: IViewerTemplatePlugin): void;
+            /**
+                * This will be executed when the templates initialize.
+                */
+            protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            protected _initVR(): void;
+            /**
+                * Toggle fullscreen of the entire viewer
+                */
+            toggleFullscreen: () => void;
+            /**
+                * Preparing the container element to present the viewer
+                */
+            protected _prepareContainerElement(): void;
+            /**
+                * This function will configure the templates and update them after a model was loaded
+                * It is mainly responsible to changing the title and subtitle etc'.
+                * @param model the model to be used to configure the templates by
+                */
+            protected _configureTemplate(model?: ViewerModel): void;
+            /**
+                * This will load a new model to the default viewer
+                * overriding the AbstractViewer's loadModel.
+                * The scene will automatically be cleared of the old models, if exist.
+                * @param model the configuration object (or URL) to load.
+                */
+            loadModel(model?: string | File | IModelConfiguration): Promise<ViewerModel>;
+            /**
+                * Show the overlay and the defined sub-screen.
+                * Mainly used for help and errors
+                * @param subScreen the name of the subScreen. Those can be defined in the configuration object
+                */
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
+            /**
+                * Hide the overlay screen.
+                */
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
+            /**
+                * show the viewer (in case it was hidden)
+                *
+                * @param visibilityFunction an optional function to execute in order to show the container
+                */
+            show(visibilityFunction?: ((template: Template) => Promise<Template>)): Promise<Template>;
+            /**
+                * hide the viewer (in case it is visible)
+                *
+                * @param visibilityFunction an optional function to execute in order to hide the container
+                */
+            hide(visibilityFunction?: ((template: Template) => Promise<Template>)): Promise<Template>;
+            /**
+                * Show the loading screen.
+                * The loading screen can be configured using the configuration object
+                */
+            showLoadingScreen(): Promise<string> | Promise<Template>;
+            /**
+                * Hide the loading screen
+                */
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
+            dispose(): void;
+            protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
+    }
 }
 
 declare module 'babylonjs-viewer/viewer/viewer' {
@@ -888,27 +961,7 @@ declare module 'babylonjs-viewer/loader/plugins/loaderPlugin' {
 }
 
 declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
-    import { EventCallback, Template } from "babylonjs-viewer/templating/templateManager";
-    export interface IViewerTemplatePlugin {
-        readonly templateName: string;
-        readonly eventsToAttach?: Array<string>;
-        interactionPredicate(event: EventCallback): boolean;
-        onEvent?(event: EventCallback): void;
-        addHTMLTemplate?(template: Template): void;
-    }
-    export abstract class AbstractViewerNavbarButton implements IViewerTemplatePlugin {
-        readonly templateName: string;
-        readonly eventsToAttach: Array<string>;
-        protected _prepend: boolean;
-        protected _buttonName: string;
-        protected _buttonClass: string;
-        protected _htmlTemplate: string;
-        constructor(buttonName: string, buttonClass?: string, htmlTemplate?: string);
-        interactionPredicate(event: EventCallback): boolean;
-        abstract onEvent(event: EventCallback): void;
-        addHTMLTemplate(template: Template): void;
-        protected _generateHTMLElement(template: Template): Element | DocumentFragment;
-    }
+    
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
@@ -1041,6 +1094,175 @@ declare module 'babylonjs-viewer/configuration/configuration' {
     }
 }
 
+declare module 'babylonjs-viewer/templating/templateManager' {
+    import { Observable } from 'babylonjs';
+    import { EventManager } from 'babylonjs-viewer/templating/eventManager';
+    import { ITemplateConfiguration } from 'babylonjs-viewer/configuration/interfaces';
+    /**
+        * The object sent when an event is triggered
+        */
+    export interface EventCallback {
+            event: Event;
+            template: Template;
+            selector: string;
+            payload?: any;
+    }
+    /**
+        * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
+        * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
+        */
+    export class TemplateManager {
+            containerElement: Element;
+            /**
+                * Will be triggered when any template is initialized
+                */
+            onTemplateInit: Observable<Template>;
+            /**
+                * Will be triggered when any template is fully loaded
+                */
+            onTemplateLoaded: Observable<Template>;
+            /**
+                * Will be triggered when a template state changes
+                */
+            onTemplateStateChange: Observable<Template>;
+            /**
+                * Will be triggered when all templates finished loading
+                */
+            onAllLoaded: Observable<TemplateManager>;
+            /**
+                * Will be triggered when any event on any template is triggered.
+                */
+            onEventTriggered: Observable<EventCallback>;
+            /**
+                * This template manager's event manager. In charge of callback registrations to native event types
+                */
+            eventManager: EventManager;
+            constructor(containerElement: Element);
+            /**
+                * Initialize the template(s) for the viewer. Called bay the Viewer class
+                * @param templates the templates to be used to initialize the main template
+                */
+            initTemplate(templates: {
+                    [key: string]: ITemplateConfiguration;
+            }): Promise<void>;
+            /**
+                * Get the canvas in the template tree.
+                * There must be one and only one canvas inthe template.
+                */
+            getCanvas(): HTMLCanvasElement | null;
+            /**
+                * Get a specific template from the template tree
+                * @param name the name of the template to load
+                */
+            getTemplate(name: string): Template | undefined;
+            /**
+                * Dispose the template manager
+                */
+            dispose(): void;
+    }
+    /**
+        * 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.
+        * A template is injected using the template manager in the correct position.
+        * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
+        *
+        * For further information please refer to the documentation page, https://doc.babylonjs.com
+        */
+    export class Template {
+            name: string;
+            /**
+                * Will be triggered when the template is loaded
+                */
+            onLoaded: Observable<Template>;
+            /**
+                * will be triggered when the template is appended to the tree
+                */
+            onAppended: Observable<Template>;
+            /**
+                * Will be triggered when the template's state changed (shown, hidden)
+                */
+            onStateChange: Observable<Template>;
+            /**
+                * Will be triggered when an event is triggered on ths template.
+                * The event is a native browser event (like mouse or pointer events)
+                */
+            onEventTriggered: Observable<EventCallback>;
+            onParamsUpdated: Observable<Template>;
+            onHTMLRendered: Observable<Template>;
+            /**
+                * is the template loaded?
+                */
+            isLoaded: boolean;
+            /**
+                * This is meant to be used to track the show and hide functions.
+                * This is NOT (!!) a flag to check if the element is actually visible to the user.
+                */
+            isShown: boolean;
+            /**
+                * Is this template a part of the HTML tree (the template manager injected it)
+                */
+            isInHtmlTree: boolean;
+            /**
+                * The HTML element containing this template
+                */
+            parent: HTMLElement;
+            /**
+                * A promise that is fulfilled when the template finished loading.
+                */
+            initPromise: Promise<Template>;
+            constructor(name: string, _configuration: ITemplateConfiguration);
+            /**
+                * Some templates have parameters (like background color for example).
+                * The parameters are provided to Handlebars which in turn generates the template.
+                * This function will update the template with the new parameters
+                *
+                * Note that when updating parameters the events will be registered again (after being cleared).
+                *
+                * @param params the new template parameters
+                */
+            updateParams(params: {
+                    [key: string]: string | number | boolean | object;
+            }, append?: boolean): void;
+            redraw(): void;
+            /**
+                * Get the template'S configuration
+                */
+            readonly configuration: ITemplateConfiguration;
+            /**
+                * A template can be a parent element for other templates or HTML elements.
+                * This function will deliver all child HTML elements of this template.
+                */
+            getChildElements(): Array<string>;
+            /**
+                * Appending the template to a parent HTML element.
+                * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
+                * @param parent the parent to which the template is added
+                * @param forceRemove if the parent already exists, shoud the template be removed from it?
+                */
+            appendTo(parent: HTMLElement, forceRemove?: boolean): void;
+            /**
+                * Show the template using the provided visibilityFunction, or natively using display: flex.
+                * The provided function returns a promise that should be fullfilled when the element is shown.
+                * Since it is a promise async operations are more than possible.
+                * See the default viewer for an opacity example.
+                * @param visibilityFunction The function to execute to show the template.
+                */
+            show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
+            /**
+                * Hide the template using the provided visibilityFunction, or natively using display: none.
+                * The provided function returns a promise that should be fullfilled when the element is hidden.
+                * Since it is a promise async operations are more than possible.
+                * See the default viewer for an opacity example.
+                * @param visibilityFunction The function to execute to show the template.
+                */
+            hide(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
+            /**
+                * Dispose this template
+                */
+            dispose(): void;
+    }
+}
+
 declare module 'babylonjs-viewer/configuration/configurationContainer' {
     import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
     import { Color3, Scene } from 'babylonjs';
@@ -1333,175 +1555,6 @@ declare module 'babylonjs-viewer/managers/sceneManager' {
     }
 }
 
-declare module 'babylonjs-viewer/templating/templateManager' {
-    import { Observable } from 'babylonjs';
-    import { EventManager } from 'babylonjs-viewer/templating/eventManager';
-    import { ITemplateConfiguration } from 'babylonjs-viewer/configuration/interfaces';
-    /**
-        * The object sent when an event is triggered
-        */
-    export interface EventCallback {
-            event: Event;
-            template: Template;
-            selector: string;
-            payload?: any;
-    }
-    /**
-        * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
-        * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
-        */
-    export class TemplateManager {
-            containerElement: Element;
-            /**
-                * Will be triggered when any template is initialized
-                */
-            onTemplateInit: Observable<Template>;
-            /**
-                * Will be triggered when any template is fully loaded
-                */
-            onTemplateLoaded: Observable<Template>;
-            /**
-                * Will be triggered when a template state changes
-                */
-            onTemplateStateChange: Observable<Template>;
-            /**
-                * Will be triggered when all templates finished loading
-                */
-            onAllLoaded: Observable<TemplateManager>;
-            /**
-                * Will be triggered when any event on any template is triggered.
-                */
-            onEventTriggered: Observable<EventCallback>;
-            /**
-                * This template manager's event manager. In charge of callback registrations to native event types
-                */
-            eventManager: EventManager;
-            constructor(containerElement: Element);
-            /**
-                * Initialize the template(s) for the viewer. Called bay the Viewer class
-                * @param templates the templates to be used to initialize the main template
-                */
-            initTemplate(templates: {
-                    [key: string]: ITemplateConfiguration;
-            }): Promise<void>;
-            /**
-                * Get the canvas in the template tree.
-                * There must be one and only one canvas inthe template.
-                */
-            getCanvas(): HTMLCanvasElement | null;
-            /**
-                * Get a specific template from the template tree
-                * @param name the name of the template to load
-                */
-            getTemplate(name: string): Template | undefined;
-            /**
-                * Dispose the template manager
-                */
-            dispose(): void;
-    }
-    /**
-        * 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.
-        * A template is injected using the template manager in the correct position.
-        * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
-        *
-        * For further information please refer to the documentation page, https://doc.babylonjs.com
-        */
-    export class Template {
-            name: string;
-            /**
-                * Will be triggered when the template is loaded
-                */
-            onLoaded: Observable<Template>;
-            /**
-                * will be triggered when the template is appended to the tree
-                */
-            onAppended: Observable<Template>;
-            /**
-                * Will be triggered when the template's state changed (shown, hidden)
-                */
-            onStateChange: Observable<Template>;
-            /**
-                * Will be triggered when an event is triggered on ths template.
-                * The event is a native browser event (like mouse or pointer events)
-                */
-            onEventTriggered: Observable<EventCallback>;
-            onParamsUpdated: Observable<Template>;
-            onHTMLRendered: Observable<Template>;
-            /**
-                * is the template loaded?
-                */
-            isLoaded: boolean;
-            /**
-                * This is meant to be used to track the show and hide functions.
-                * This is NOT (!!) a flag to check if the element is actually visible to the user.
-                */
-            isShown: boolean;
-            /**
-                * Is this template a part of the HTML tree (the template manager injected it)
-                */
-            isInHtmlTree: boolean;
-            /**
-                * The HTML element containing this template
-                */
-            parent: HTMLElement;
-            /**
-                * A promise that is fulfilled when the template finished loading.
-                */
-            initPromise: Promise<Template>;
-            constructor(name: string, _configuration: ITemplateConfiguration);
-            /**
-                * Some templates have parameters (like background color for example).
-                * The parameters are provided to Handlebars which in turn generates the template.
-                * This function will update the template with the new parameters
-                *
-                * Note that when updating parameters the events will be registered again (after being cleared).
-                *
-                * @param params the new template parameters
-                */
-            updateParams(params: {
-                    [key: string]: string | number | boolean | object;
-            }, append?: boolean): void;
-            redraw(): void;
-            /**
-                * Get the template'S configuration
-                */
-            readonly configuration: ITemplateConfiguration;
-            /**
-                * A template can be a parent element for other templates or HTML elements.
-                * This function will deliver all child HTML elements of this template.
-                */
-            getChildElements(): Array<string>;
-            /**
-                * Appending the template to a parent HTML element.
-                * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
-                * @param parent the parent to which the template is added
-                * @param forceRemove if the parent already exists, shoud the template be removed from it?
-                */
-            appendTo(parent: HTMLElement, forceRemove?: boolean): void;
-            /**
-                * Show the template using the provided visibilityFunction, or natively using display: flex.
-                * The provided function returns a promise that should be fullfilled when the element is shown.
-                * Since it is a promise async operations are more than possible.
-                * See the default viewer for an opacity example.
-                * @param visibilityFunction The function to execute to show the template.
-                */
-            show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
-            /**
-                * Hide the template using the provided visibilityFunction, or natively using display: none.
-                * The provided function returns a promise that should be fullfilled when the element is hidden.
-                * Since it is a promise async operations are more than possible.
-                * See the default viewer for an opacity example.
-                * @param visibilityFunction The function to execute to show the template.
-                */
-            hide(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
-            /**
-                * Dispose this template
-                */
-            dispose(): void;
-    }
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces/modelConfiguration' {
     import { IModelAnimationConfiguration } from "babylonjs-viewer/configuration/interfaces/modelAnimationConfiguration";
     export interface IModelConfiguration {
@@ -1649,6 +1702,41 @@ declare module 'babylonjs-viewer/configuration/interfaces/environmentMapConfigur
     }
 }
 
+declare module 'babylonjs-viewer/templating/eventManager' {
+    import { EventCallback, TemplateManager } from "babylonjs-viewer/templating/templateManager";
+    /**
+        * The EventManager is in charge of registering user interctions with the viewer.
+        * It is used in the TemplateManager
+        */
+    export class EventManager {
+            constructor(_templateManager: TemplateManager);
+            /**
+                * Register a new callback to a specific template.
+                * The best example for the usage can be found in the DefaultViewer
+                *
+                * @param templateName the templateName to register the event to
+                * @param callback The callback to be executed
+                * @param eventType the type of event to register
+                * @param selector an optional selector. if not defined the parent object in the template will be selected
+                */
+            registerCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
+            /**
+                * This will remove a registered event from the defined template.
+                * Each one of the variables apart from the template name are optional, but one must be provided.
+                *
+                * @param templateName the templateName
+                * @param callback the callback to remove (optional)
+                * @param eventType the event type to remove (optional)
+                * @param selector the selector from which to remove the event (optional)
+                */
+            unregisterCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
+            /**
+                * Dispose the event manager
+                */
+            dispose(): void;
+    }
+}
+
 declare module 'babylonjs-viewer/labs/viewerLabs' {
     import { PBREnvironment } from "babylonjs-viewer/labs/environmentSerializer";
     import { ShadowLight, Vector3, Scene } from 'babylonjs';
@@ -1700,41 +1788,6 @@ declare module 'babylonjs-viewer/labs/viewerLabs' {
     }
 }
 
-declare module 'babylonjs-viewer/templating/eventManager' {
-    import { EventCallback, TemplateManager } from "babylonjs-viewer/templating/templateManager";
-    /**
-        * The EventManager is in charge of registering user interctions with the viewer.
-        * It is used in the TemplateManager
-        */
-    export class EventManager {
-            constructor(_templateManager: TemplateManager);
-            /**
-                * Register a new callback to a specific template.
-                * The best example for the usage can be found in the DefaultViewer
-                *
-                * @param templateName the templateName to register the event to
-                * @param callback The callback to be executed
-                * @param eventType the type of event to register
-                * @param selector an optional selector. if not defined the parent object in the template will be selected
-                */
-            registerCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
-            /**
-                * This will remove a registered event from the defined template.
-                * Each one of the variables apart from the template name are optional, but one must be provided.
-                *
-                * @param templateName the templateName
-                * @param callback the callback to remove (optional)
-                * @param eventType the event type to remove (optional)
-                * @param selector the selector from which to remove the event (optional)
-                */
-            unregisterCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
-            /**
-                * Dispose the event manager
-                */
-            dispose(): void;
-    }
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces/modelAnimationConfiguration' {
     /**
         * Defines an animation to be applied to a model (translation, scale or rotation).
@@ -2576,4 +2629,11 @@ declare module 'babylonjs-viewer/labs/texture' {
             /**
                 * Environment preprocessing dedicated value (Internal Use or Advanced only).
                 */
-            static EnvironmentLODScale: number;
+            static EnvironmentLODScale: number;
+            /**
+                * Environment preprocessing dedicated value (Internal Use or Advanced only)..
+                */
+            static EnvironmentLODOffset: number;
+    }
+}
+

dist/preview release/what's new.md

@@ -27,6 +27,7 @@
 
 ### Core Engine
 
+- Added support for utility layer for SkeletonViewer ([Deltakosh](https://github.com/deltakosh))
 - Improved shader precision detection ([Deltakosh](https://github.com/deltakosh))
 - Added support for bone matrix texture. Now skeletons will use a texture instead of uniforms when possible ([Deltakosh](https://github.com/deltakosh))
 - Refactored of the SolidParticleSystem code for performance and code quality improvement ([barroij](https://github.com/barroij))

src/Debug/babylon.skeletonViewer.ts

@@ -13,6 +13,10 @@ module BABYLON.Debug {
         private _isEnabled = false;
         private _renderFunction: () => void;
 
+        public get debugMesh(): Nullable<LinesMesh> {
+            return this._debugMesh;
+        }
+
         /**
          * Creates a new SkeletonViewer
          * @param skeleton defines the skeleton to render
@@ -20,6 +24,7 @@ module BABYLON.Debug {
          * @param scene defines the hosting scene
          * @param autoUpdateBonesMatrices defines a boolean indicating if bones matrices must be forced to update before rendering (true by default)
          * @param renderingGroupId defines the rendering group id to use with the viewer
+         * @param utilityLayerRenderer defines an optional utility layer to render the helper on
          */
         constructor(
             /** defines the skeleton to render */
@@ -30,7 +35,10 @@ module BABYLON.Debug {
             /** defines a boolean indicating if bones matrices must be forced to update before rendering (true by default)  */
             public autoUpdateBonesMatrices = true,
             /** defines the rendering group id to use with the viewer */
-            public renderingGroupId = 1) {
+            public renderingGroupId = 1,
+            /** defines an optional utility layer to render the helper on */
+            public utilityLayerRenderer?: UtilityLayerRenderer
+        ) {
             this._scene = scene;
 
             this.update();
@@ -131,12 +139,13 @@ module BABYLON.Debug {
             } else {
                 this._getLinesForBonesWithLength(this.skeleton.bones, this.mesh.getWorldMatrix());
             }
+            const targetScene = this.utilityLayerRenderer ? this.utilityLayerRenderer.utilityLayerScene : this._scene;
 
             if (!this._debugMesh) {
-                this._debugMesh = BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: null }, this._scene);
+                this._debugMesh = BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: null }, targetScene);
                 this._debugMesh.renderingGroupId = this.renderingGroupId;
             } else {
-                BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: this._debugMesh }, this._scene);
+                BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: this._debugMesh }, targetScene);
             }
             this._debugMesh.position.copyFrom(this.mesh.position);
             this._debugMesh.color = this.color;