Merge pull request #3979 from RaananW/viewer-codestyle-and-doc

Viewer code style and documentation

Viewer/src/configuration/loader.ts

@@ -5,17 +5,30 @@ import { getConfigurationType } from './types';
 import * as deepmerge from '../../assets/deepmerge.min.js';
 import { Tools, IFileRequest } from 'babylonjs';
 
+/**
+ * The configuration loader will load the configuration object from any source and will use the defined mapper to
+ * parse the object and return a conform ViewerConfiguration.
+ * It is a private member of the scene.
+ */
 export class ConfigurationLoader {
 
-    private configurationCache: { [url: string]: any };
+    private _configurationCache: { [url: string]: any };
 
-    private loadRequests: Array<IFileRequest>;
+    private _loadRequests: Array<IFileRequest>;
 
     constructor(private _enableCache: boolean = false) {
-        this.configurationCache = {};
-        this.loadRequests = [];
+        this._configurationCache = {};
+        this._loadRequests = [];
     }
 
+    /**
+     * load a configuration object that is defined in the initial configuration provided.
+     * The viewer configuration can extend different types of configuration objects and have an extra configuration defined.
+     * 
+     * @param initConfig the initial configuration that has the definitions of further configuration to load.
+     * @param callback an optional callback that will be called sync, if noconfiguration needs to be loaded or configuration is payload-only
+     * @returns A promise that delivers the extended viewer configuration, when done.
+     */
     public loadConfiguration(initConfig: ViewerConfiguration = {}, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration> {
 
         let loadedConfig: ViewerConfiguration = deepmerge({}, initConfig);
@@ -47,7 +60,7 @@ export class ConfigurationLoader {
                         }
                         mapperType = type || mapperType;
                     }
-                    return this.loadFile(url);
+                    return this._loadFile(url);
                 } else {
                     if (typeof loadedConfig.configuration === "object") {
                         mapperType = loadedConfig.configuration.mapper || mapperType;
@@ -69,33 +82,36 @@ export class ConfigurationLoader {
         }
     }
 
+    /**
+     * Dispose the configuration loader. This will cancel file requests, if active.
+     */
     public dispose() {
-        this.loadRequests.forEach(request => {
+        this._loadRequests.forEach(request => {
             request.abort();
         });
-        this.loadRequests.length = 0;
+        this._loadRequests.length = 0;
     }
 
-    private loadFile(url: string): Promise<any> {
-        let cacheReference = this.configurationCache;
+    private _loadFile(url: string): Promise<any> {
+        let cacheReference = this._configurationCache;
         if (this._enableCache && cacheReference[url]) {
             return Promise.resolve(cacheReference[url]);
         }
 
         return new Promise((resolve, reject) => {
             let fileRequest = Tools.LoadFile(url, (result) => {
-                let idx = this.loadRequests.indexOf(fileRequest);
+                let idx = this._loadRequests.indexOf(fileRequest);
                 if (idx !== -1)
-                    this.loadRequests.splice(idx, 1);
+                    this._loadRequests.splice(idx, 1);
                 if (this._enableCache) cacheReference[url] = result;
                 resolve(result);
             }, undefined, undefined, false, (request, error: any) => {
-                let idx = this.loadRequests.indexOf(fileRequest);
+                let idx = this._loadRequests.indexOf(fileRequest);
                 if (idx !== -1)
-                    this.loadRequests.splice(idx, 1);
+                    this._loadRequests.splice(idx, 1);
                 reject(error);
             });
-            this.loadRequests.push(fileRequest);
+            this._loadRequests.push(fileRequest);
         });
     }
 

Viewer/src/configuration/mappers.ts

@@ -3,12 +3,36 @@ import { ViewerConfiguration } from './configuration';
 
 import { kebabToCamel } from '../helper';
 
+/**
+ * This is the mapper's interface. Implement this function to create your own mapper and register it at the mapper manager
+ */
 export interface IMapper {
     map(rawSource: any): ViewerConfiguration;
 }
 
+/**
+ * This is a simple HTML mapper. 
+ * This mapper parses a single HTML element and returns the configuration from its attributes.
+ * it parses numbers and boolean values to the corresponding variable types.
+ * The following HTML element: 
+ *  <div test="1" random-flag="true" a.string.object="test"> will result in the following configuration:
+ * 
+ *  {
+ *      test: 1, //a number!
+ *      randomFlag: boolean, //camelCase and boolean
+ *      a: {
+ *          string: {
+ *              object: "test" //dot-separated object levels
+ *          }
+ *      }
+ *  }
+ */
 class HTMLMapper implements IMapper {
 
+    /**
+     * Map a specific element and get configuration from it
+     * @param element the HTML element to analyze. 
+     */
     map(element: HTMLElement): ViewerConfiguration {
 
         let config = {};
@@ -46,15 +70,27 @@ class HTMLMapper implements IMapper {
     }
 }
 
+/**
+ * A simple string-to-JSON mapper.
+ * This is the main mapper, used to analyze downloaded JSON-Configuration or JSON payload
+ */
 class JSONMapper implements IMapper {
-    map(rawSource: any) {
+    map(rawSource: string) {
         return JSON.parse(rawSource);
     }
 }
 
-// TODO - Dom configuration mapper.
+/**
+ * The DOM Mapper will traverse an entire DOM Tree and will load the configuration from the
+ * DOM elements and attributes.
+ */
 class DOMMapper implements IMapper {
 
+    /**
+     * The mapping function that will convert HTML data to a viewer configuration object
+     * @param baseElement the baseElement from which to start traversing
+     * @returns a ViewerCOnfiguration object from the provided HTML Element
+     */
     map(baseElement: HTMLElement): ViewerConfiguration {
         let htmlMapper = new HTMLMapper();
         let config = htmlMapper.map(baseElement);
@@ -64,6 +100,7 @@ class DOMMapper implements IMapper {
             if (children.length) {
                 for (let i = 0; i < children.length; ++i) {
                     let item = <HTMLElement>children.item(i);
+                    // use the HTML Mapper to read configuration from a single element
                     let configMapped = htmlMapper.map(item);
                     let key = kebabToCamel(item.nodeName.toLowerCase());
                     if (item.attributes.getNamedItem('array') && item.attributes.getNamedItem('array').nodeValue === 'true') {
@@ -72,7 +109,7 @@ class DOMMapper implements IMapper {
                         if (element.attributes.getNamedItem('array') && element.attributes.getNamedItem('array').nodeValue === 'true') {
                             partConfig.push(configMapped)
                         } else if (partConfig[key]) {
-                            //exists already! problem... probably an array
+                            //exists already! probably an array
                             element.setAttribute('array', 'true');
                             let oldItem = partConfig[key];
                             partConfig = [oldItem, configMapped]
@@ -94,34 +131,60 @@ class DOMMapper implements IMapper {
 
 }
 
+/**
+ * The MapperManager manages the different implemented mappers.
+ * It allows the user to register new mappers as well and use them to parse their own configuration data
+ */
 export class MapperManager {
 
-    private mappers: { [key: string]: IMapper };
+    private _mappers: { [key: string]: IMapper };
+    /**
+     * The default mapper is the JSON mapper.
+     */
     public static DefaultMapper = 'json';
 
     constructor() {
-        this.mappers = {
+        this._mappers = {
             "html": new HTMLMapper(),
             "json": new JSONMapper(),
             "dom": new DOMMapper()
         }
     }
 
+    /**
+     * Get a specific configuration mapper.
+     * 
+     * @param type the name of the mapper to load
+     */
     public getMapper(type: string) {
-        if (!this.mappers[type]) {
+        if (!this._mappers[type]) {
             Tools.Error("No mapper defined for " + type);
         }
-        return this.mappers[type] || this.mappers[MapperManager.DefaultMapper];
+        return this._mappers[type] || this._mappers[MapperManager.DefaultMapper];
     }
 
+    /**
+     * Use this functio to register your own configuration mapper.
+     * After a mapper is registered, it can be used to parse the specific type fo configuration to the standard ViewerConfiguration.
+     * @param type the name of the mapper. This will be used to define the configuration type and/or to get the mapper
+     * @param mapper The implemented mapper 
+     */
     public registerMapper(type: string, mapper: IMapper) {
-        this.mappers[type] = mapper;
+        this._mappers[type] = mapper;
     }
 
+    /**
+     * Dispose the mapper manager and all of its mappers.
+     */
     public dispose() {
-        this.mappers = {};
+        this._mappers = {};
     }
 
 }
 
+/**
+ * mapperManager is a singleton of the type MapperManager.
+ * The mapperManager can be disposed directly with calling mapperManager.dispose()
+ * or indirectly with using BabylonViewer.disposeAll()
+ */
 export let mapperManager = new MapperManager();

Viewer/src/eventManager.ts

@@ -3,42 +3,42 @@ import { EventCallback, TemplateManager } from "./templateManager";
 
 export class EventManager {
 
-    private callbacksContainer: { [key: string]: Array<{ eventType?: string, selector?: string, callback: (eventData: EventCallback) => void }> }
+    private _callbacksContainer: { [key: string]: Array<{ eventType?: string, selector?: string, callback: (eventData: EventCallback) => void }> }
 
-    constructor(private templateManager: TemplateManager) {
-        this.callbacksContainer = {};
-        this.templateManager.onEventTriggered.add(eventData => {
-            this.eventTriggered(eventData);
+    constructor(private _templateManager: TemplateManager) {
+        this._callbacksContainer = {};
+        this._templateManager.onEventTriggered.add(eventData => {
+            this._eventTriggered(eventData);
         })
     }
 
     public registerCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string) {
-        if (!this.callbacksContainer[templateName]) {
-            this.callbacksContainer[templateName] = [];
+        if (!this._callbacksContainer[templateName]) {
+            this._callbacksContainer[templateName] = [];
         }
-        this.callbacksContainer[templateName].push({
+        this._callbacksContainer[templateName].push({
             eventType: eventType,
             callback: callback
         });
     }
 
     public unregisterCallback(templateName: string, callback?: (eventData: EventCallback) => void, eventType?: string, selector?: string) {
-        let callbackDefs = this.callbacksContainer[templateName] || [];
-        this.callbacksContainer[templateName] = callbackDefs.filter(callbackDef => (!callbackDef.eventType || callbackDef.eventType === eventType) && (!callbackDef.selector || callbackDef.selector === selector));
+        let callbackDefs = this._callbacksContainer[templateName] || [];
+        this._callbacksContainer[templateName] = callbackDefs.filter(callbackDef => (!callbackDef.eventType || callbackDef.eventType === eventType) && (!callbackDef.selector || callbackDef.selector === selector));
     }
 
-    private eventTriggered(data: EventCallback) {
+    private _eventTriggered(data: EventCallback) {
         let templateName = data.template.name;
         let eventType = data.event.type;
         let selector = data.selector;
 
-        let callbackDefs = this.callbacksContainer[templateName] || [];
+        let callbackDefs = this._callbacksContainer[templateName] || [];
         callbackDefs.filter(callbackDef => (!callbackDef.eventType || callbackDef.eventType === eventType) && (!callbackDef.selector || callbackDef.selector === selector)).forEach(callbackDef => {
             callbackDef.callback(data);
         });
     }
 
     public dispose() {
-        this.callbacksContainer = {};
+        this._callbacksContainer = {};
     }
 }

Viewer/src/model/modelAnimation.ts

@@ -1,10 +1,16 @@
 import { AnimationGroup, Animatable, Skeleton } from "babylonjs";
 
+/**
+ * Animation play mode enum - is the animation looping or playing once
+ */
 export enum AnimationPlayMode {
     ONCE,
     LOOP
 }
 
+/**
+ * An enum representing the current state of an animation object
+ */
 export enum AnimationState {
     INIT,
     PLAYING,
@@ -13,28 +19,89 @@ export enum AnimationState {
     ENDED
 }
 
+/**
+ * This interface can be implemented to define new types of ModelAnimation objects.
+ */
 export interface IModelAnimation {
+    /**
+     * Current animation state (playing, stopped etc')
+     */
     readonly state: AnimationState;
+    /**
+     * the name of the animation
+     */
     readonly name: string;
+    /**
+     * Get the max numbers of frame available in the animation group
+     * 
+     * In correlation to an arry, this would be ".length"
+     */
     readonly frames: number;
+    /**
+     * Get the current frame playing right now. 
+     * This can be used to poll the frame currently playing (and, for exmaple, display a progress bar with the data)
+     * 
+     * In correlation to an array, this would be the current index
+     */
     readonly currentFrame: number;
+    /**
+     * Animation's FPS value
+     */
     readonly fps: number;
+    /**
+     * Get or set the animation's speed ration (Frame-to-fps)
+     */
     speedRatio: number;
+    /**
+     * Gets or sets the aimation's play mode.
+     */
     playMode: AnimationPlayMode;
+    /**
+     * Start the animation
+     */
     start();
+    /**
+     * Stop the animation.
+     * This will fail silently if the animation group is already stopped.
+     */
     stop();
+    /**
+     * Pause the animation
+     * This will fail silently if the animation is not currently playing
+     */
     pause();
+    /**
+     * Reset this animation
+     */
     reset();
+    /**
+     * Restart the animation
+     */
     restart();
+    /**
+     * Go to a specific 
+     * @param frameNumber the frame number to go to
+     */
     goToFrame(frameNumber: number);
+    /**
+     * Dispose this animation
+     */
     dispose();
 }
 
+/**
+ * The GroupModelAnimation is an implementation of the IModelAnimation interface using BABYLON's
+ * native GroupAnimation class.
+ */
 export class GroupModelAnimation implements IModelAnimation {
 
     private _playMode: AnimationPlayMode;
     private _state: AnimationState;
 
+    /**
+     * Create a new GroupModelAnimation object using an AnimationGroup object
+     * @param _animationGroup The aniamtion group to base the class on
+     */
     constructor(private _animationGroup: AnimationGroup) {
         this._state = AnimationState.INIT;
         this._playMode = AnimationPlayMode.LOOP;
@@ -42,31 +109,42 @@ export class GroupModelAnimation implements IModelAnimation {
         this._animationGroup.onAnimationEndObservable.add(() => {
             this.stop();
             this._state = AnimationState.ENDED;
-        })
+        });
     }
 
+    /**
+     * Get the animation's name
+     */
     public get name() {
         return this._animationGroup.name;
     }
 
+    /**
+     * Get the current animation's state
+     */
     public get state() {
         return this._state;
     }
 
     /**
-     * Gets or sets the speed ratio to use for all animations
+     * Gets the speed ratio to use for all animations
      */
     public get speedRatio(): number {
         return this._animationGroup.speedRatio;
     }
 
     /**
-     * Gets or sets the speed ratio to use for all animations
+     * Sets the speed ratio to use for all animations
      */
     public set speedRatio(value: number) {
         this._animationGroup.speedRatio = value;
     }
 
+    /**
+     * Get the max numbers of frame available in the animation group
+     * 
+     * In correlation to an arry, this would be ".length"
+     */
     public get frames(): number {
         let animationFrames = this._animationGroup.targetedAnimations.map(ta => {
             let keys = ta.animation.getKeys();
@@ -75,6 +153,12 @@ export class GroupModelAnimation implements IModelAnimation {
         return Math.max.apply(null, animationFrames);
     }
 
+    /**
+     * Get the current frame playing right now. 
+     * This can be used to poll the frame currently playing (and, for exmaple, display a progress bar with the data)
+     * 
+     * In correlation to an array, this would be the current index
+     */
     public get currentFrame(): number {
         // get the first currentFrame found
         for (let i = 0; i < this._animationGroup.animatables.length; ++i) {
@@ -92,6 +176,9 @@ export class GroupModelAnimation implements IModelAnimation {
         return 0;
     }
 
+    /**
+     * Get the FPS value of this animation
+     */
     public get fps(): number {
         // get the first currentFrame found
         for (let i = 0; i < this._animationGroup.animatables.length; ++i) {
@@ -109,10 +196,18 @@ export class GroupModelAnimation implements IModelAnimation {
         return 0;
     }
 
+    /**
+     * What is the animation'S play mode (looping or played once)
+     */
     public get playMode(): AnimationPlayMode {
         return this._playMode;
     }
 
+    /**
+     * Set the play mode.
+     * If the animation is played, it will continue playing at least once more, depending on the new play mode set.
+     * If the animation is not set, the will be initialized and will wait for the user to start playing it.
+     */
     public set playMode(value: AnimationPlayMode) {
         if (value === this._playMode) {
             return;
@@ -128,14 +223,24 @@ export class GroupModelAnimation implements IModelAnimation {
         }
     }
 
+    /**
+     * Reset the animation group
+     */
     reset() {
         this._animationGroup.reset();
     }
 
+    /**
+     * Restart the animation group
+     */
     restart() {
         this._animationGroup.restart();
     }
 
+    /**
+     * 
+     * @param frameNumber Go to a specific frame in the animation
+     */
     goToFrame(frameNumber: number) {
         // this._animationGroup.goToFrame(frameNumber);
         this._animationGroup['_animatables'].forEach(a => {
@@ -143,6 +248,9 @@ export class GroupModelAnimation implements IModelAnimation {
         })
     }
 
+    /**
+     * Start playing the animation.
+     */
     public start() {
         this._animationGroup.start(this.playMode === AnimationPlayMode.LOOP, this.speedRatio);
         if (this._animationGroup.isStarted) {
@@ -150,11 +258,18 @@ export class GroupModelAnimation implements IModelAnimation {
         }
     }
 
+    /**
+     * Pause the animation
+     */
     pause() {
         this._animationGroup.pause();
         this._state = AnimationState.PAUSED;
     }
 
+    /**
+     * Stop the animation.
+     * This will fail silently if the animation group is already stopped.
+     */
     public stop() {
         this._animationGroup.stop();
         if (!this._animationGroup.isStarted) {
@@ -162,6 +277,9 @@ export class GroupModelAnimation implements IModelAnimation {
         }
     }
 
+    /**
+     * Dispose this animation object.
+     */
     public dispose() {
         this._animationGroup.dispose();
     }

Viewer/src/model/modelLoader.ts

@@ -3,6 +3,12 @@ import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, Tools, SceneLoader, Tags,
 import { IModelConfiguration } from "../configuration/configuration";
 import { ViewerModel, ModelState } from "./viewerModel";
 
+/**
+ * An instance of the class is in charge of loading the model correctly.
+ * This class will continously be expended with tasks required from the specific loaders Babylon has.
+ * 
+ * A Model loader is unique per (Abstract)Viewer. It is being generated by the viewer
+ */
 export class ModelLoader {
 
     private _loadId: number;
@@ -10,21 +16,81 @@ export class ModelLoader {
 
     private _loaders: Array<ISceneLoaderPlugin | ISceneLoaderPluginAsync>;
 
+    /**
+     * Create a new Model loader
+     * @param _viewer the viewer using this model loader
+     */
     constructor(private _viewer: AbstractViewer) {
         this._loaders = [];
         this._loadId = 0;
     }
 
+    /**
+     * Load a model using predefined configuration
+     * @param modelConfiguration the modelConfiguration to use to load the model
+     */
     public load(modelConfiguration: IModelConfiguration): ViewerModel {
 
         const model = new ViewerModel(this._viewer.scene, modelConfiguration);
 
+        if (!modelConfiguration.url) {
+            model.state = ModelState.ERROR;
+            Tools.Error("No URL provided");
+            return model;
+        }
+
+        let filename = Tools.GetFilename(modelConfiguration.url) || modelConfiguration.url;
+        let base = modelConfiguration.root || Tools.GetFolderPath(modelConfiguration.url);
+        let plugin = modelConfiguration.loader;
+
+        model.loader = SceneLoader.ImportMesh(undefined, base, filename, this._viewer.scene, (meshes, particleSystems, skeletons) => {
+            meshes.forEach(mesh => {
+                Tags.AddTagsTo(mesh, "viewerMesh");
+            });
+            model.meshes = meshes;
+            model.particleSystems = particleSystems;
+            model.skeletons = skeletons;
+
+            model.initAnimations();
+            model.onLoadedObservable.notifyObserversWithPromise(model);
+        }, (progressEvent) => {
+            model.onLoadProgressObservable.notifyObserversWithPromise(progressEvent);
+        }, (e, m, exception) => {
+            model.state = ModelState.ERROR;
+            Tools.Error("Load Error: There was an error loading the model. " + m);
+            model.onLoadErrorObservable.notifyObserversWithPromise({ message: m, exception: exception });
+        }, plugin)!;
+
+        if (model.loader.name === "gltf") {
+            let gltfLoader = (<GLTFFileLoader>model.loader);
+            gltfLoader.animationStartMode = 0;
+            gltfLoader.onAnimationGroupLoaded = ag => {
+                model.addAnimationGroup(ag);
+            }
+        }
+
         model.loadId = this._loadId++;
         this._loaders.push(model.loader);
 
         return model;
     }
 
+    public cancelLoad(model: ViewerModel) {
+        const loader = model.loader || this._loaders[model.loadId];
+        // ATM only available in the GLTF Loader
+        if (loader && loader.name === "gltf") {
+            let gltfLoader = (<GLTFFileLoader>loader);
+            gltfLoader.dispose();
+            model.state = ModelState.CANCELED;
+        } else {
+            Tools.Warn("This type of loader cannot cancel the request");
+        }
+    }
+
+    /**
+     * dispose the model loader.
+     * If loaders are registered and are in the middle of loading, they will be disposed and the request(s) will be cancelled.
+     */
     public dispose() {
         this._loaders.forEach(loader => {
             if (loader.name === "gltf") {

Viewer/src/model/viewerModel.ts

@@ -4,6 +4,7 @@ import { IModelAnimation, GroupModelAnimation, AnimationPlayMode } from "./model
 
 import * as deepmerge from '../../assets/deepmerge.min.js';
 
+
 export enum ModelState {
     INIT,
     LOADING,
@@ -12,30 +13,72 @@ export enum ModelState {
     ERROR
 }
 
+/**
+ * The viewer model is a container for all assets representing a sngle loaded model.
+ */
 export class ViewerModel implements IDisposable {
 
+    /**
+     * The loader used to load this model.
+     */
     public loader: ISceneLoaderPlugin | ISceneLoaderPluginAsync;
 
     private _animations: Array<IModelAnimation>;
+
+    /**
+     * the list of meshes that are a part of this model
+     */
     public meshes: Array<AbstractMesh> = [];
+    /**
+     * This model's root mesh (the parent of all other meshes).
+     * This mesh also exist in the meshes array.
+     */
     public rootMesh: AbstractMesh;
+    /**
+     * ParticleSystems connected to this model
+     */
     public particleSystems: Array<ParticleSystem> = [];
+    /**
+     * Skeletons defined in this model
+     */
     public skeletons: Array<Skeleton> = [];
+    /**
+     * The current model animation.
+     * On init, this will be undefined.
+     */
     public currentAnimation: IModelAnimation;
 
+    /**
+     * Observers registered here will be executed when the model is done loading
+     */
     public onLoadedObservable: Observable<ViewerModel>;
+    /**
+     * Observers registered here will be executed when the loader notified of a progress event
+     */
     public onLoadProgressObservable: Observable<SceneLoaderProgressEvent>;
+    /**
+     * Observers registered here will be executed when the loader notified of an error.
+     */
     public onLoadErrorObservable: Observable<{ message: string; exception: any }>;
 
+    /**
+     * 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
+     */
     public onAfterConfigure: Observable<ViewerModel>;
 
+    /**
+     * The current model state (loaded, error, etc)
+     */
     public state: ModelState;
+    /**
+     * A loadID provided by the modelLoader, unique to ths (Abstract)Viewer instance.
+     */
     public loadId: number;
-
-    private _loaderDisposed: boolean = false;
     private _loadedUrl: string;
+    private _modelConfiguration: IModelConfiguration;
 
-    constructor(private _scene: Scene, private _modelConfiguration: IModelConfiguration, disableAutoLoad = false) {
+    constructor(private _scene: Scene, modelConfiguration: IModelConfiguration) {
         this.onLoadedObservable = new Observable();
         this.onLoadErrorObservable = new Observable();
         this.onLoadProgressObservable = new Observable();
@@ -44,43 +87,38 @@ export class ViewerModel implements IDisposable {
         this.state = ModelState.INIT;
 
         this._animations = [];
-
-        if (!disableAutoLoad) {
-            this._initLoad();
-        }
-    }
-
-    public load() {
-        if (this.loader) {
-            Tools.Error("Model was already loaded or in the process of loading.");
-        } else {
-            this._initLoad();
-        }
-    }
-
-    public cancelLoad() {
-        // ATM only available in the GLTF Loader
-        if (this.loader && this.loader.name === "gltf") {
-            let gltfLoader = (<GLTFFileLoader>this.loader);
-            gltfLoader.dispose();
-            this.state = ModelState.CANCELED;
-        }
+        //create a copy of the configuration to make sure it doesn't change even after it is changed in the viewer
+        this._modelConfiguration = deepmerge({}, modelConfiguration);
     }
 
+    /**
+     * Get the model's configuration
+     */
     public get configuration(): IModelConfiguration {
         return this._modelConfiguration;
     }
 
+    /**
+     * (Re-)set the model's entire configuration
+     * @param newConfiguration the new configuration to replace the new one
+     */
     public set configuration(newConfiguration: IModelConfiguration) {
         this._modelConfiguration = newConfiguration;
         this._configureModel();
     }
 
+    /**
+     * Update the current configuration with new values.
+     * Configuration will not be overwritten, but merged with the new configuration.
+     * Priority is to the new configuration
+     * @param newConfiguration the configuration to be merged into the current configuration;
+     */
     public updateConfiguration(newConfiguration: Partial<IModelConfiguration>) {
         this._modelConfiguration = deepmerge(this._modelConfiguration, newConfiguration);
         this._configureModel();
     }
 
+
     public initAnimations() {
         this._animations.forEach(a => {
             a.dispose();
@@ -116,18 +154,32 @@ export class ViewerModel implements IDisposable {
         }
     }
 
+    /**
+     * Add a new animation group to this model.
+     * @param animationGroup the new animation group to be added
+     */
     public addAnimationGroup(animationGroup: AnimationGroup) {
         this._animations.push(new GroupModelAnimation(animationGroup));
     }
 
-    public getAnimations() {
+    /**
+     * Get the ModelAnimation array
+     */
+    public getAnimations(): Array<IModelAnimation> {
         return this._animations;
     }
 
-    public getAnimationNames() {
+    /**
+     * Get the animations' names. Using the names you can play a specific animation.
+     */
+    public getAnimationNames(): Array<string> {
         return this._animations.map(a => a.name);
     }
 
+    /**
+     * Get an animation by the provided name. Used mainly when playing n animation.
+     * @param name the name of the animation to find
+     */
     protected _getAnimationByName(name: string): Nullable<IModelAnimation> {
         // can't use .find, noe available on IE
         let filtered = this._animations.filter(a => a.name === name);
@@ -139,6 +191,11 @@ export class ViewerModel implements IDisposable {
         }
     }
 
+    /**
+     * Choose an initialized animation using its name and start playing it
+     * @param name the name of the animation to play
+     * @returns The model aniamtion to be played.
+     */
     public playAnimation(name: string): IModelAnimation {
         let animation = this._getAnimationByName(name);
         if (animation) {
@@ -251,50 +308,9 @@ export class ViewerModel implements IDisposable {
         this.onAfterConfigure.notifyObservers(this);
     }
 
-    private _initLoad() {
-        if (!this._modelConfiguration.url) {
-            this.state = ModelState.ERROR;
-            Tools.Error("No URL provided");
-            return;
-        }
-
-        let filename = Tools.GetFilename(this._modelConfiguration.url) || this._modelConfiguration.url;
-        let base = this._modelConfiguration.root || Tools.GetFolderPath(this._modelConfiguration.url);
-        let plugin = this._modelConfiguration.loader;
-        this._loadedUrl = this._modelConfiguration.url;
-
-
-        this.loader = SceneLoader.ImportMesh(undefined, base, filename, this._scene, (meshes, particleSystems, skeletons) => {
-            meshes.forEach(mesh => {
-                Tags.AddTagsTo(mesh, "viewerMesh");
-            });
-            this.meshes = meshes;
-            this.particleSystems = particleSystems;
-            this.skeletons = skeletons;
-
-            this.initAnimations();
-            this.onLoadedObservable.notifyObserversWithPromise(this);
-        }, (progressEvent) => {
-            this.onLoadProgressObservable.notifyObserversWithPromise(progressEvent);
-        }, (e, m, exception) => {
-            this.state = ModelState.ERROR;
-            Tools.Error("Load Error: There was an error loading the model. " + m);
-            this.onLoadErrorObservable.notifyObserversWithPromise({ message: m, exception: exception });
-        }, plugin)!;
-
-        if (this.loader.name === "gltf") {
-            let gltfLoader = (<GLTFFileLoader>this.loader);
-            gltfLoader.animationStartMode = 0;
-            gltfLoader.onDispose = () => {
-                this._loaderDisposed = true;
-            }
-            gltfLoader.onAnimationGroupLoaded = ag => {
-                this.addAnimationGroup(ag);
-            }
-        }
-
-    }
-
+    /**
+     * Dispose this model, including all of its associated assets.
+     */
     public dispose() {
         this.onAfterConfigure.clear();
         this.onLoadedObservable.clear();

Viewer/src/templateManager.ts

@@ -73,7 +73,7 @@ export class TemplateManager {
             let addToParent = () => {
                 let containingElement = parentTemplate && parentTemplate.parent.querySelector(camelToKebab(name)) || this.containerElement;
                 template.appendTo(containingElement);
-                this.checkLoadedState();
+                this._checkLoadedState();
             }
 
             if (parentTemplate && !parentTemplate.parent) {
@@ -89,11 +89,11 @@ export class TemplateManager {
         }
 
         //build the html tree
-        return this.buildHTMLTree(templates).then(htmlTree => {
+        return this._buildHTMLTree(templates).then(htmlTree => {
             if (this.templates['main']) {
                 internalInit(htmlTree, 'main');
             } else {
-                this.checkLoadedState();
+                this._checkLoadedState();
             }
             return;
         });
@@ -105,11 +105,9 @@ export class TemplateManager {
      * It will compile each template, check if its children exist in the configuration and will add them if they do.
      * It is expected that the main template will be called main!
      * 
-     * @private
-     * @param {{ [key: string]: ITemplateConfiguration }} templates 
-     * @memberof TemplateManager
+     * @param templates
      */
-    private buildHTMLTree(templates: { [key: string]: ITemplateConfiguration }): Promise<object> {
+    private _buildHTMLTree(templates: { [key: string]: ITemplateConfiguration }): Promise<object> {
         let promises: Array<Promise<Template | boolean>> = Object.keys(templates).map(name => {
             // if the template was overridden
             if (!templates[name]) return Promise.resolve(false);
@@ -148,7 +146,7 @@ export class TemplateManager {
         return this.templates[name];
     }
 
-    private checkLoadedState() {
+    private _checkLoadedState() {
         let done = Object.keys(this.templates).length === 0 || Object.keys(this.templates).every((key) => {
             return (this.templates[key].isLoaded && !!this.templates[key].parent) || !this.templates[key].isInHtmlTree;
         });
@@ -214,8 +212,8 @@ export class Template {
 
     public initPromise: Promise<Template>;
 
-    private fragment: DocumentFragment;
-    private htmlTemplate: string;
+    private _fragment: DocumentFragment;
+    private _htmlTemplate: string;
 
     private loadRequests: Array<IFileRequest>;
 
@@ -238,15 +236,15 @@ export class Template {
         */
         this.onInit.notifyObservers(this);
 
-        let htmlContentPromise = this.getTemplateAsHtml(_configuration);
+        let htmlContentPromise = this._getTemplateAsHtml(_configuration);
 
         this.initPromise = htmlContentPromise.then(htmlTemplate => {
             if (htmlTemplate) {
-                this.htmlTemplate = htmlTemplate;
+                this._htmlTemplate = htmlTemplate;
                 let compiledTemplate = Handlebars.compile(htmlTemplate);
                 let config = this._configuration.params || {};
                 let rawHtml = compiledTemplate(config);
-                this.fragment = document.createRange().createContextualFragment(rawHtml);
+                this._fragment = document.createRange().createContextualFragment(rawHtml);
                 this.isLoaded = true;
                 this.isShown = true;
                 this.onLoaded.notifyObservers(this);
@@ -261,10 +259,10 @@ export class Template {
         if (this.isLoaded) {
             this.dispose();
         }
-        let compiledTemplate = Handlebars.compile(this.htmlTemplate);
+        let compiledTemplate = Handlebars.compile(this._htmlTemplate);
         let config = this._configuration.params || {};
         let rawHtml = compiledTemplate(config);
-        this.fragment = document.createRange().createContextualFragment(rawHtml);
+        this._fragment = document.createRange().createContextualFragment(rawHtml);
         if (this.parent) {
             this.appendTo(this.parent, true);
         }
@@ -277,10 +275,10 @@ export class Template {
     public getChildElements(): Array<string> {
         let childrenArray: string[] = [];
         //Edge and IE don't support frage,ent.children
-        let children = this.fragment.children;
+        let children = this._fragment.children;
         if (!children) {
             // casting to HTMLCollection, as both NodeListOf and HTMLCollection have 'item()' and 'length'.
-            children = <HTMLCollection>this.fragment.querySelectorAll('*');
+            children = <HTMLCollection>this._fragment.querySelectorAll('*');
         }
         for (let i = 0; i < children.length; ++i) {
             childrenArray.push(kebabToCamel(children.item(i).nodeName.toLowerCase()));
@@ -291,7 +289,7 @@ export class Template {
     public appendTo(parent: HTMLElement, forceRemove?: boolean) {
         if (this.parent) {
             if (forceRemove) {
-                this.parent.removeChild(this.fragment);
+                this.parent.removeChild(this._fragment);
             } else {
                 return;
             }
@@ -301,20 +299,20 @@ export class Template {
         if (this._configuration.id) {
             this.parent.id = this._configuration.id;
         }
-        this.fragment = this.parent.appendChild(this.fragment);
+        this._fragment = this.parent.appendChild(this._fragment);
         // appended only one frame after.
         setTimeout(() => {
-            this.registerEvents();
+            this._registerEvents();
             this.onAppended.notifyObservers(this);
         });
     }
 
-    private isShowing: boolean;
-    private isHiding: boolean;
+    private _isShowing: boolean;
+    private _isHiding: boolean;
     public show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template> {
-        if (this.isHiding) return Promise.resolve(this);
+        if (this._isHiding) return Promise.resolve(this);
         return Promise.resolve().then(() => {
-            this.isShowing = true;
+            this._isShowing = true;
             if (visibilityFunction) {
                 return visibilityFunction(this);
             } else {
@@ -324,16 +322,16 @@ export class Template {
             }
         }).then(() => {
             this.isShown = true;
-            this.isShowing = false;
+            this._isShowing = false;
             this.onStateChange.notifyObservers(this);
             return this;
         });
     }
 
     public hide(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template> {
-        if (this.isShowing) return Promise.resolve(this);
+        if (this._isShowing) return Promise.resolve(this);
         return Promise.resolve().then(() => {
-            this.isHiding = true;
+            this._isHiding = true;
             if (visibilityFunction) {
                 return visibilityFunction(this);
             } else {
@@ -343,7 +341,7 @@ export class Template {
             }
         }).then(() => {
             this.isShown = false;
-            this.isHiding = false;
+            this._isHiding = false;
             this.onStateChange.notifyObservers(this);
             return this;
         });
@@ -358,7 +356,7 @@ export class Template {
         this.isLoaded = false;
         // remove from parent
         try {
-            this.parent.removeChild(this.fragment);
+            this.parent.removeChild(this._fragment);
         } catch (e) {
             //noop
         }
@@ -367,16 +365,16 @@ export class Template {
             request.abort();
         });
 
-        if (this.registeredEvents) {
-            this.registeredEvents.forEach(evt => {
+        if (this._registeredEvents) {
+            this._registeredEvents.forEach(evt => {
                 evt.htmlElement.removeEventListener(evt.eventName, evt.function);
             });
         }
 
-        delete this.fragment;
+        delete this._fragment;
     }
 
-    private getTemplateAsHtml(templateConfig: ITemplateConfiguration): Promise<string> {
+    private _getTemplateAsHtml(templateConfig: ITemplateConfiguration): Promise<string> {
         if (!templateConfig) {
             return Promise.reject('No templateConfig provided');
         } else if (templateConfig.html !== undefined) {
@@ -404,14 +402,13 @@ export class Template {
         }
     }
 
-    private registeredEvents: Array<{ htmlElement: HTMLElement, eventName: string, function: EventListenerOrEventListenerObject }>;
+    private _registeredEvents: Array<{ htmlElement: HTMLElement, eventName: string, function: EventListenerOrEventListenerObject }>;
 
-    // TODO - Should events be removed as well? when are templates disposed?
-    private registerEvents() {
-        this.registeredEvents = this.registeredEvents || [];
-        if (this.registeredEvents.length) {
+    private _registerEvents() {
+        this._registeredEvents = this._registeredEvents || [];
+        if (this._registeredEvents.length) {
             // first remove the registered events
-            this.registeredEvents.forEach(evt => {
+            this._registeredEvents.forEach(evt => {
                 evt.htmlElement.removeEventListener(evt.eventName, evt.function);
             });
         }
@@ -426,7 +423,7 @@ export class Template {
                     if (typeof this._configuration.events[eventName] === 'boolean') {
                         let binding = functionToFire.bind(this, '#' + this.parent.id);
                         this.parent.addEventListener(eventName, functionToFire.bind(this, '#' + this.parent.id), false);
-                        this.registeredEvents.push({
+                        this._registeredEvents.push({
                             htmlElement: this.parent,
                             eventName: eventName,
                             function: binding
@@ -443,7 +440,7 @@ export class Template {
                             if (htmlElement) {
                                 let binding = functionToFire.bind(this, selector);
                                 htmlElement.addEventListener(eventName, binding, false);
-                                this.registeredEvents.push({
+                                this._registeredEvents.push({
                                     htmlElement: htmlElement,
                                     eventName: eventName,
                                     function: binding

Viewer/src/viewer/defaultViewer.ts

@@ -7,26 +7,40 @@ import { SpotLight, MirrorTexture, Plane, ShadowGenerator, Texture, BackgroundMa
 import { CameraBehavior } from '../interfaces';
 import { ViewerModel } from '../model/viewerModel';
 
+/**
+ * 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 {
 
+    /**
+     * 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(public containerElement: HTMLElement, initialConfiguration: ViewerConfiguration = { extends: 'default' }) {
         super(containerElement, initialConfiguration);
-        this.onModelLoadedObservable.add(this.onModelLoaded);
+        this.onModelLoadedObservable.add(this._onModelLoaded);
     }
 
-    public initScene(): Promise<Scene> {
-        return super.initScene().then(() => {
-            this.extendClassWithConfig(this.scene, this.configuration.scene);
+    /**
+     * Overriding the AbstractViewer's _initScene fcuntion
+     */
+    protected _initScene(): Promise<Scene> {
+        return super._initScene().then(() => {
+            this._extendClassWithConfig(this.scene, this._configuration.scene);
             return this.scene;
         })
     }
 
-    protected onTemplatesLoaded() {
-
+    /**
+     * This will be executed when the templates initialize.
+     */
+    protected _onTemplatesLoaded() {
         this.showLoadingScreen();
 
         // navbar
-        this.initNavbar();
+        this._initNavbar();
 
         // close overlay button
         let closeButton = document.getElementById('close-button');
@@ -36,10 +50,10 @@ export class DefaultViewer extends AbstractViewer {
             })
         }
 
-        return super.onTemplatesLoaded();
+        return super._onTemplatesLoaded();
     }
 
-    private initNavbar() {
+    private _initNavbar() {
         let navbar = this.templateManager.getTemplate('navBar');
         if (navbar) {
             let navbarHeight = navbar.parent.clientHeight + 'px';
@@ -99,12 +113,20 @@ export class DefaultViewer extends AbstractViewer {
         }
     }
 
-    protected prepareContainerElement() {
+    /**
+     * Preparing the container element to present the viewer
+     */
+    protected _prepareContainerElement() {
         this.containerElement.style.position = 'relative';
         this.containerElement.style.display = 'flex';
     }
 
-    protected configureTemplate(model: ViewerModel) {
+    /**
+     * 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) {
         let navbar = this.templateManager.getTemplate('navBar');
         if (!navbar) return;
 
@@ -132,7 +154,13 @@ export class DefaultViewer extends AbstractViewer {
         }
     }
 
-    public loadModel(model: any = this.configuration.model): Promise<ViewerModel> {
+    /**
+     * 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.
+     */
+    public loadModel(model: any = this._configuration.model): Promise<ViewerModel> {
         this.showLoadingScreen();
         return super.loadModel(model, true).catch((error) => {
             console.log(error);
@@ -142,12 +170,12 @@ export class DefaultViewer extends AbstractViewer {
         });
     }
 
-    private onModelLoaded = (model: ViewerModel) => {
-        this.configureTemplate(model);
+    private _onModelLoaded = (model: ViewerModel) => {
+        this._configureTemplate(model);
         // with a short timeout, making sure everything is there already.
         let hideLoadingDelay = 500;
-        if (this.configuration.lab && this.configuration.lab.hideLoadingDelay !== undefined) {
-            hideLoadingDelay = this.configuration.lab.hideLoadingDelay;
+        if (this._configuration.lab && this._configuration.lab.hideLoadingDelay !== undefined) {
+            hideLoadingDelay = this._configuration.lab.hideLoadingDelay;
         }
         setTimeout(() => {
             this.hideLoadingScreen();
@@ -156,6 +184,11 @@ export class DefaultViewer extends AbstractViewer {
         return;
     }
 
+    /**
+     * 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
+     */
     public showOverlayScreen(subScreen: string) {
         let template = this.templateManager.getTemplate('overlay');
         if (!template) return Promise.resolve('Overlay template not found');
@@ -181,6 +214,9 @@ export class DefaultViewer extends AbstractViewer {
         }));
     }
 
+    /**
+     * Hide the overlay screen.
+     */
     public hideOverlayScreen() {
         let template = this.templateManager.getTemplate('overlay');
         if (!template) return Promise.resolve('Overlay template not found');
@@ -200,15 +236,14 @@ export class DefaultViewer extends AbstractViewer {
                     htmlElement.style.display = 'none';
                 }
             }
-
-            /*return this.templateManager.getTemplate(subScreen).show((template => {
-                template.parent.style.display = 'none';
-                return Promise.resolve(template);
-            }));*/
             return Promise.resolve(template);
         }));
     }
 
+    /**
+     * Show the loading screen.
+     * The loading screen can be configured using the configuration object
+     */
     public showLoadingScreen() {
         let template = this.templateManager.getTemplate('loadingScreen');
         if (!template) return Promise.resolve('Loading Screen template not found');
@@ -228,6 +263,9 @@ export class DefaultViewer extends AbstractViewer {
         }));
     }
 
+    /**
+     * Hide the loading screen
+     */
     public hideLoadingScreen() {
         let template = this.templateManager.getTemplate('loadingScreen');
         if (!template) return Promise.resolve('Loading Screen template not found');
@@ -243,31 +281,36 @@ export class DefaultViewer extends AbstractViewer {
         }));
     }
 
-    protected configureLights(lightsConfiguration: { [name: string]: ILightConfiguration | boolean } = {}, model: ViewerModel) {
-        super.configureLights(lightsConfiguration, model);
+    /**
+     * An extension of the light configuration of the abstract viewer.
+     * @param lightsConfiguration the light configuration to use
+     * @param model the model that will be used to configure the lights (if the lights are model-dependant)
+     */
+    protected _configureLights(lightsConfiguration: { [name: string]: ILightConfiguration | boolean } = {}, model: ViewerModel) {
+        super._configureLights(lightsConfiguration, model);
         // labs feature - flashlight
-        if (this.configuration.lab && this.configuration.lab.flashlight) {
+        if (this._configuration.lab && this._configuration.lab.flashlight) {
             let pointerPosition = Vector3.Zero();
             let lightTarget;
             let angle = 0.5;
             let exponent = Math.PI / 2;
-            if (typeof this.configuration.lab.flashlight === "object") {
-                exponent = this.configuration.lab.flashlight.exponent || exponent;
-                angle = this.configuration.lab.flashlight.angle || angle;
+            if (typeof this._configuration.lab.flashlight === "object") {
+                exponent = this._configuration.lab.flashlight.exponent || exponent;
+                angle = this._configuration.lab.flashlight.angle || angle;
             }
             var flashlight = new SpotLight("flashlight", Vector3.Zero(),
                 Vector3.Zero(), exponent, angle, this.scene);
-            if (typeof this.configuration.lab.flashlight === "object") {
-                flashlight.intensity = this.configuration.lab.flashlight.intensity || flashlight.intensity;
-                if (this.configuration.lab.flashlight.diffuse) {
-                    flashlight.diffuse.r = this.configuration.lab.flashlight.diffuse.r;
-                    flashlight.diffuse.g = this.configuration.lab.flashlight.diffuse.g;
-                    flashlight.diffuse.b = this.configuration.lab.flashlight.diffuse.b;
+            if (typeof this._configuration.lab.flashlight === "object") {
+                flashlight.intensity = this._configuration.lab.flashlight.intensity || flashlight.intensity;
+                if (this._configuration.lab.flashlight.diffuse) {
+                    flashlight.diffuse.r = this._configuration.lab.flashlight.diffuse.r;
+                    flashlight.diffuse.g = this._configuration.lab.flashlight.diffuse.g;
+                    flashlight.diffuse.b = this._configuration.lab.flashlight.diffuse.b;
                 }
-                if (this.configuration.lab.flashlight.specular) {
-                    flashlight.specular.r = this.configuration.lab.flashlight.specular.r;
-                    flashlight.specular.g = this.configuration.lab.flashlight.specular.g;
-                    flashlight.specular.b = this.configuration.lab.flashlight.specular.b;
+                if (this._configuration.lab.flashlight.specular) {
+                    flashlight.specular.r = this._configuration.lab.flashlight.specular.r;
+                    flashlight.specular.g = this._configuration.lab.flashlight.specular.g;
+                    flashlight.specular.b = this._configuration.lab.flashlight.specular.b;
                 }
 
             }
@@ -288,7 +331,7 @@ export class DefaultViewer extends AbstractViewer {
                 }
             }
             this.scene.registerBeforeRender(updateFlashlightFunction);
-            this.registeredOnBeforerenderFunctions.push(updateFlashlightFunction);
+            this._registeredOnBeforeRenderFunctions.push(updateFlashlightFunction);
         }
     }
 }

Viewer/src/viewer/viewer.ts

@@ -5,56 +5,140 @@ import { Skeleton, AnimationGroup, ParticleSystem, CubeTexture, Color3, IEnviron
 import { ViewerConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, IObserversConfiguration, IModelConfiguration, ISkyboxConfiguration, IGroundConfiguration, ILightConfiguration, ICameraConfiguration } from '../configuration/configuration';
 
 import * as deepmerge from '../../assets/deepmerge.min.js';
-import { CameraBehavior } from 'src/interfaces';
 import { ViewerModel } from '../model/viewerModel';
 import { GroupModelAnimation } from '../model/modelAnimation';
 import { ModelLoader } from '../model/modelLoader';
+import { CameraBehavior } from '../interfaces';
 
+/**
+ * The AbstractViewr is the center of Babylon's viewer.
+ * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
+ */
 export abstract class AbstractViewer {
 
+    /**
+     * The corresponsing template manager of this viewer.
+     */
     public templateManager: TemplateManager;
 
+    /**
+     * Babylon Engine corresponding with this viewer
+     */
     public engine: Engine;
+    /**
+     * The Babylon Scene of this viewer
+     */
     public scene: Scene;
+    /**
+     * The camera used in this viewer
+     */
     public camera: ArcRotateCamera;
+    /**
+     * Babylon's scene optimizer
+     */
     public sceneOptimizer: SceneOptimizer;
-    public baseId: string;
+    /**
+     * The ID of this viewer. it will be generated randomly or use the HTML Element's ID.
+     */
+    public readonly baseId: string;
+    /**
+     * Models displayed in this viewer.
+     */
     public models: Array<ViewerModel>;
 
     /**
      * The last loader used to load a model. 
      */
     public lastUsedLoader: ISceneLoaderPlugin | ISceneLoaderPluginAsync;
+    /**
+     * The ModelLoader instance connected with this viewer.
+     */
     public modelLoader: ModelLoader;
 
-    protected configuration: ViewerConfiguration;
+    /**
+     * the viewer configuration object
+     */
+    protected _configuration: ViewerConfiguration;
+    /**
+     * Babylon's environment helper of this viewer
+     */
     public environmentHelper: EnvironmentHelper;
 
-    protected defaultHighpTextureType: number;
-    protected shadowGeneratorBias: number;
-    protected defaultPipelineTextureType: number;
-    protected maxShadows: number;
+    //The following are configuration objects, default values.
+    protected _defaultHighpTextureType: number;
+    protected _shadowGeneratorBias: number;
+    protected _defaultPipelineTextureType: number;
+
+    /**
+     * The maximum number of shadows supported by the curent viewer
+     */
+    protected _maxShadows: number;
+    /**
+     * is HDR supported?
+     */
     private _hdrSupport: boolean;
 
+    /**
+     * is this viewer disposed?
+     */
     protected _isDisposed: boolean = false;
 
+    /**
+     * Returns a boolean representing HDR support
+     */
     public get isHdrSupported() {
         return this._hdrSupport;
     }
 
 
     // observables
+    /**
+     * Will notify when the scene was initialized
+     */
     public onSceneInitObservable: Observable<Scene>;
+    /**
+     * will notify when the engine was initialized
+     */
     public onEngineInitObservable: Observable<Engine>;
+    /**
+     * will notify after every model load
+     */
     public onModelLoadedObservable: Observable<ViewerModel>;
+    /**
+     * will notify when any model notify of progress
+     */
     public onModelLoadProgressObservable: Observable<SceneLoaderProgressEvent>;
+    /**
+     * will notify when any model load failed.
+     */
     public onModelLoadErrorObservable: Observable<{ message: string; exception: any }>;
+    /**
+     * will notify when a new loader was initialized.
+     * Used mainly to know when a model starts loading.
+     */
     public onLoaderInitObservable: Observable<ISceneLoaderPlugin | ISceneLoaderPluginAsync>;
+    /**
+     * Observers registered here will be executed when the entire load process has finished.
+     */
     public onInitDoneObservable: Observable<AbstractViewer>;
 
-    public canvas: HTMLCanvasElement;
+    private _canvas: HTMLCanvasElement;
+
+    /**
+     * The (single) canvas of this viewer
+     */
+    public get canvas(): HTMLCanvasElement {
+        return this._canvas;
+    }
 
-    protected registeredOnBeforerenderFunctions: Array<() => void>;
+    /**
+     * registered onBeforeRender functions.
+     * This functions are also registered at the native scene. The reference can be used to unregister them.
+     */
+    protected _registeredOnBeforeRenderFunctions: Array<() => void>;
+    /**
+     * The configuration loader of this viewer
+     */
     protected _configurationLoader: ConfigurationLoader;
 
     constructor(public containerElement: HTMLElement, initialConfiguration: ViewerConfiguration = {}) {
@@ -73,7 +157,7 @@ export abstract class AbstractViewer {
         this.onInitDoneObservable = new Observable();
         this.onLoaderInitObservable = new Observable();
 
-        this.registeredOnBeforerenderFunctions = [];
+        this._registeredOnBeforeRenderFunctions = [];
         this.models = [];
         this.modelLoader = new ModelLoader(this);
 
@@ -83,43 +167,49 @@ export abstract class AbstractViewer {
         // create a new template manager. TODO - singleton?
         this.templateManager = new TemplateManager(containerElement);
 
-        this.prepareContainerElement();
+        this._prepareContainerElement();
 
         // extend the configuration
         this._configurationLoader = new ConfigurationLoader();
         this._configurationLoader.loadConfiguration(initialConfiguration, (configuration) => {
-            this.configuration = deepmerge(this.configuration || {}, configuration);
-            if (this.configuration.observers) {
-                this.configureObservers(this.configuration.observers);
+            this._configuration = deepmerge(this._configuration || {}, configuration);
+            if (this._configuration.observers) {
+                this._configureObservers(this._configuration.observers);
             }
             //this.updateConfiguration(configuration);
 
             // initialize the templates
-            let templateConfiguration = this.configuration.templates || {};
+            let templateConfiguration = this._configuration.templates || {};
             this.templateManager.initTemplate(templateConfiguration);
             // when done, execute onTemplatesLoaded()
             this.templateManager.onAllLoaded.add(() => {
                 let canvas = this.templateManager.getCanvas();
                 if (canvas) {
-                    this.canvas = canvas;
+                    this._canvas = canvas;
                 }
                 this._onTemplateLoaded();
             });
         });
-
-        //this.onModelLoadedObservable.add(this.initEnvironment.bind(this));
-
     }
 
+    /**
+     * get the baseId of this viewer
+     */
     public getBaseId(): string {
         return this.baseId;
     }
 
+    /**
+     * Do we have a canvas to render on, and is it a part of the scene
+     */
     public isCanvasInDOM(): boolean {
-        return !!this.canvas && !!this.canvas.parentElement;
+        return !!this._canvas && !!this._canvas.parentElement;
     }
 
-    protected resize = (): void => {
+    /**
+     * The resize function that will be registered with the window object
+     */
+    protected _resize = (): void => {
         // Only resize if Canvas is in the DOM
         if (!this.isCanvasInDOM()) {
             return;
@@ -132,7 +222,10 @@ export abstract class AbstractViewer {
         this.engine.resize();
     }
 
-    protected render = (): void => {
+    /**
+     * render loop that will be executed by the engine
+     */
+    protected _render = (): void => {
         this.scene && this.scene.activeCamera && this.scene.render();
     }
 
@@ -143,46 +236,46 @@ export abstract class AbstractViewer {
      * and the entire configuration will be updated. 
      * @param newConfiguration 
      */
-    public updateConfiguration(newConfiguration: Partial<ViewerConfiguration> = this.configuration) {
+    public updateConfiguration(newConfiguration: Partial<ViewerConfiguration> = this._configuration) {
         // update this.configuration with the new data
-        this.configuration = deepmerge(this.configuration || {}, newConfiguration);
+        this._configuration = deepmerge(this._configuration || {}, newConfiguration);
 
         // update scene configuration
         if (newConfiguration.scene) {
-            this.configureScene(newConfiguration.scene);
+            this._configureScene(newConfiguration.scene);
         }
         // optimizer
         if (newConfiguration.optimizer) {
-            this.configureOptimizer(newConfiguration.optimizer);
+            this._configureOptimizer(newConfiguration.optimizer);
         }
 
         // observers in configuration
         if (newConfiguration.observers) {
-            this.configureObservers(newConfiguration.observers);
+            this._configureObservers(newConfiguration.observers);
         }
 
         // configure model
         if (newConfiguration.model && typeof newConfiguration.model === 'object') {
-            this.configureModel(newConfiguration.model);
+            this._configureModel(newConfiguration.model);
         }
 
         // lights
         if (newConfiguration.lights) {
-            this.configureLights(newConfiguration.lights);
+            this._configureLights(newConfiguration.lights);
         }
 
         // environment
         if (newConfiguration.skybox !== undefined || newConfiguration.ground !== undefined) {
-            this.configureEnvironment(newConfiguration.skybox, newConfiguration.ground);
+            this._configureEnvironment(newConfiguration.skybox, newConfiguration.ground);
         }
 
         // camera
         if (newConfiguration.camera) {
-            this.configureCamera(newConfiguration.camera);
+            this._configureCamera(newConfiguration.camera);
         }
     }
 
-    protected configureEnvironment(skyboxConifguration?: ISkyboxConfiguration | boolean, groundConfiguration?: IGroundConfiguration | boolean) {
+    protected _configureEnvironment(skyboxConifguration?: ISkyboxConfiguration | boolean, groundConfiguration?: IGroundConfiguration | boolean) {
         if (!skyboxConifguration && !groundConfiguration) {
             if (this.environmentHelper) {
                 this.environmentHelper.dispose();
@@ -235,8 +328,8 @@ export abstract class AbstractViewer {
                         options.groundMirrorFresnelWeight = groundConfig.mirror.fresnelWeight;
                     if (groundConfig.mirror.fallOffDistance !== undefined)
                         options.groundMirrorFallOffDistance = groundConfig.mirror.fallOffDistance;
-                    if (this.defaultPipelineTextureType !== undefined)
-                        options.groundMirrorTextureType = this.defaultPipelineTextureType;
+                    if (this._defaultPipelineTextureType !== undefined)
+                        options.groundMirrorTextureType = this._defaultPipelineTextureType;
                 }
             }
 
@@ -292,13 +385,18 @@ export abstract class AbstractViewer {
             let skyboxMaterial = this.environmentHelper.skyboxMaterial;
             if (skyboxMaterial) {
                 if (typeof skyboxConifguration === 'object' && skyboxConifguration.material && skyboxConifguration.material.imageProcessingConfiguration) {
-                    this.extendClassWithConfig(skyboxMaterial.imageProcessingConfiguration, skyboxConifguration.material.imageProcessingConfiguration);
+                    this._extendClassWithConfig(skyboxMaterial.imageProcessingConfiguration, skyboxConifguration.material.imageProcessingConfiguration);
                 }
             }
         }
     }
 
-    protected configureScene(sceneConfig: ISceneConfiguration, optimizerConfig?: ISceneOptimizerConfiguration) {
+    /**
+     * internally configure the scene using the provided configuration.
+     * The scene will not be recreated, but just updated.
+     * @param sceneConfig the (new) scene configuration
+     */
+    protected _configureScene(sceneConfig: ISceneConfiguration) {
         // sanity check!
         if (!this.scene) {
             return;
@@ -330,7 +428,7 @@ export abstract class AbstractViewer {
 
         // image processing configuration - optional.
         if (sceneConfig.imageProcessingConfiguration) {
-            this.extendClassWithConfig(this.scene.imageProcessingConfiguration, sceneConfig.imageProcessingConfiguration);
+            this._extendClassWithConfig(this.scene.imageProcessingConfiguration, sceneConfig.imageProcessingConfiguration);
         }
         if (sceneConfig.environmentTexture) {
             if (this.scene.environmentTexture) {
@@ -345,7 +443,13 @@ export abstract class AbstractViewer {
         }
     }
 
-    protected configureOptimizer(optimizerConfig: ISceneOptimizerConfiguration | boolean) {
+
+    /**
+     * Configure the scene optimizer.
+     * The existing scene optimizer will be disposed and a new one will be created.
+     * @param optimizerConfig the (new) optimizer configuration
+     */
+    protected _configureOptimizer(optimizerConfig: ISceneOptimizerConfiguration | boolean) {
         if (typeof optimizerConfig === 'boolean') {
             if (this.sceneOptimizer) {
                 this.sceneOptimizer.stop();
@@ -381,31 +485,41 @@ export abstract class AbstractViewer {
         }
     }
 
-    protected configureObservers(observersConfiguration: IObserversConfiguration) {
+    /**
+     * this is used to register native functions using the configuration object.
+     * This will configure the observers.
+     * @param observersConfiguration observers configuration
+     */
+    protected _configureObservers(observersConfiguration: IObserversConfiguration) {
         if (observersConfiguration.onEngineInit) {
             this.onEngineInitObservable.add(window[observersConfiguration.onEngineInit]);
         } else {
-            if (observersConfiguration.onEngineInit === '' && this.configuration.observers && this.configuration.observers!.onEngineInit) {
-                this.onEngineInitObservable.removeCallback(window[this.configuration.observers!.onEngineInit!]);
+            if (observersConfiguration.onEngineInit === '' && this._configuration.observers && this._configuration.observers!.onEngineInit) {
+                this.onEngineInitObservable.removeCallback(window[this._configuration.observers!.onEngineInit!]);
             }
         }
         if (observersConfiguration.onSceneInit) {
             this.onSceneInitObservable.add(window[observersConfiguration.onSceneInit]);
         } else {
-            if (observersConfiguration.onSceneInit === '' && this.configuration.observers && this.configuration.observers!.onSceneInit) {
-                this.onSceneInitObservable.removeCallback(window[this.configuration.observers!.onSceneInit!]);
+            if (observersConfiguration.onSceneInit === '' && this._configuration.observers && this._configuration.observers!.onSceneInit) {
+                this.onSceneInitObservable.removeCallback(window[this._configuration.observers!.onSceneInit!]);
             }
         }
         if (observersConfiguration.onModelLoaded) {
             this.onModelLoadedObservable.add(window[observersConfiguration.onModelLoaded]);
         } else {
-            if (observersConfiguration.onModelLoaded === '' && this.configuration.observers && this.configuration.observers!.onModelLoaded) {
-                this.onModelLoadedObservable.removeCallback(window[this.configuration.observers!.onModelLoaded!]);
+            if (observersConfiguration.onModelLoaded === '' && this._configuration.observers && this._configuration.observers!.onModelLoaded) {
+                this.onModelLoadedObservable.removeCallback(window[this._configuration.observers!.onModelLoaded!]);
             }
         }
     }
 
-    protected configureCamera(cameraConfig: ICameraConfiguration, model?: ViewerModel) {
+    /**
+     * (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.
+     */
+    protected _configureCamera(cameraConfig: ICameraConfiguration, model?: ViewerModel) {
         let focusMeshes = model ? model.meshes : this.scene.meshes;
 
         if (!this.scene.activeCamera) {
@@ -420,14 +534,14 @@ export abstract class AbstractViewer {
             this.camera.rotationQuaternion = new Quaternion(cameraConfig.rotation.x || 0, cameraConfig.rotation.y || 0, cameraConfig.rotation.z || 0, cameraConfig.rotation.w || 0)
         }
 
-        this.extendClassWithConfig(this.camera, cameraConfig);
+        this._extendClassWithConfig(this.camera, cameraConfig);
 
         this.camera.minZ = cameraConfig.minZ || this.camera.minZ;
         this.camera.maxZ = cameraConfig.maxZ || this.camera.maxZ;
 
         if (cameraConfig.behaviors) {
             for (let name in cameraConfig.behaviors) {
-                this.setCameraBehavior(cameraConfig.behaviors[name], focusMeshes);
+                this._setCameraBehavior(cameraConfig.behaviors[name], focusMeshes);
             }
         };
 
@@ -440,14 +554,20 @@ export abstract class AbstractViewer {
             this.camera.upperRadiusLimit = sceneDiagonalLenght * 3;
     }
 
-    protected configureLights(lightsConfiguration: { [name: string]: ILightConfiguration | boolean } = {}, model?: ViewerModel) {
+    /**
+     * configure the lights.
+     * 
+     * @param lightsConfiguration the (new) light(s) configuration
+     * @param model optionally use the model to configure the camera.
+     */
+    protected _configureLights(lightsConfiguration: { [name: string]: ILightConfiguration | boolean } = {}, model?: ViewerModel) {
         let focusMeshes = model ? model.meshes : this.scene.meshes;
         // sanity check!
         if (!Object.keys(lightsConfiguration).length) return;
 
         let lightsAvailable: Array<string> = this.scene.lights.map(light => light.name);
         // compare to the global (!) configuration object and dispose unneeded:
-        let lightsToConfigure = Object.keys(this.configuration.lights || []);
+        let lightsToConfigure = Object.keys(this._configuration.lights || []);
         if (Object.keys(lightsToConfigure).length !== lightsAvailable.length) {
             lightsAvailable.forEach(lName => {
                 if (lightsToConfigure.indexOf(lName) === -1) {
@@ -493,7 +613,7 @@ export abstract class AbstractViewer {
             light.setEnabled(enabled);
 
 
-            this.extendClassWithConfig(light, lightConfig);
+            this._extendClassWithConfig(light, lightConfig);
 
             //position. Some lights don't support shadows
             if (light instanceof ShadowLight) {
@@ -507,12 +627,12 @@ export abstract class AbstractViewer {
                     light.direction = direction;
                 }
                 let shadowGenerator = light.getShadowGenerator();
-                if (lightConfig.shadowEnabled && this.maxShadows) {
+                if (lightConfig.shadowEnabled && this._maxShadows) {
                     if (!shadowGenerator) {
                         shadowGenerator = new ShadowGenerator(512, light);
                         // TODO blur kernel definition
                     }
-                    this.extendClassWithConfig(shadowGenerator, lightConfig.shadowConfig || {});
+                    this._extendClassWithConfig(shadowGenerator, lightConfig.shadowConfig || {});
                     // add the focues meshes to the shadow list
                     let shadownMap = shadowGenerator.getShadowMap();
                     if (!shadownMap) return;
@@ -529,17 +649,24 @@ export abstract class AbstractViewer {
         });
     }
 
-    protected configureModel(modelConfiguration: Partial<IModelConfiguration>, model?: ViewerModel) {
+    /**
+     * configure all models using the configuration.
+     * @param modelConfiguration the configuration to use to reconfigure the models
+     */
+    protected _configureModel(modelConfiguration: Partial<IModelConfiguration>) {
         this.models.forEach(model => {
-            model.configuration = modelConfiguration;
+            model.updateConfiguration(modelConfiguration);
         })
     }
 
+    /**
+     * Dispoe the entire viewer including the scene and the engine
+     */
     public dispose() {
         if (this._isDisposed) {
             return;
         }
-        window.removeEventListener('resize', this.resize);
+        window.removeEventListener('resize', this._resize);
         if (this.sceneOptimizer) {
             this.sceneOptimizer.stop();
             this.sceneOptimizer.dispose();
@@ -589,17 +716,18 @@ export abstract class AbstractViewer {
         this._isDisposed = true;
     }
 
-    protected abstract prepareContainerElement();
+    /**
+     * This will prepare the container element for the viewer
+     */
+    protected abstract _prepareContainerElement();
 
     /**
      * This function will execute when the HTML templates finished initializing.
      * It should initialize the engine and continue execution.
      * 
-     * @protected
      * @returns {Promise<AbstractViewer>} The viewer object will be returned after the object was loaded.
-     * @memberof AbstractViewer
      */
-    protected onTemplatesLoaded(): Promise<AbstractViewer> {
+    protected _onTemplatesLoaded(): Promise<AbstractViewer> {
         return Promise.resolve(this);
     }
 
@@ -609,15 +737,15 @@ export abstract class AbstractViewer {
      * But first - it will load the extendible onTemplateLoaded()!
      */
     private _onTemplateLoaded(): Promise<AbstractViewer> {
-        return this.onTemplatesLoaded().then(() => {
-            let autoLoadModel = this.configuration.model;
-            return this.initEngine().then((engine) => {
+        return this._onTemplatesLoaded().then(() => {
+            let autoLoadModel = this._configuration.model;
+            return this._initEngine().then((engine) => {
                 return this.onEngineInitObservable.notifyObserversWithPromise(engine);
             }).then(() => {
                 if (autoLoadModel) {
                     return this.loadModel().catch(e => { }).then(() => { return this.scene });
                 } else {
-                    return this.scene || this.initScene();
+                    return this.scene || this._initScene();
                 }
             }).then((scene) => {
                 return this.onSceneInitObservable.notifyObserversWithPromise(scene);
@@ -637,16 +765,16 @@ export abstract class AbstractViewer {
      * @returns {Promise<Engine>} 
      * @memberof Viewer
      */
-    protected initEngine(): Promise<Engine> {
+    protected _initEngine(): Promise<Engine> {
 
         // init custom shaders
-        this.injectCustomShaders();
+        this._injectCustomShaders();
 
         let canvasElement = this.templateManager.getCanvas();
         if (!canvasElement) {
             return Promise.reject('Canvas element not found!');
         }
-        let config = this.configuration.engine || {};
+        let config = this._configuration.engine || {};
         // TDO enable further configuration
         this.engine = new Engine(canvasElement, !!config.antialiasing, config.engineOptions);
 
@@ -654,24 +782,27 @@ export abstract class AbstractViewer {
         Database.IDBStorageEnabled = false;
 
         if (!config.disableResize) {
-            window.addEventListener('resize', this.resize);
+            window.addEventListener('resize', this._resize);
         }
 
 
-        this.engine.runRenderLoop(this.render);
+        this.engine.runRenderLoop(this._render);
 
-        if (this.configuration.engine && this.configuration.engine.adaptiveQuality) {
+        if (this._configuration.engine && this._configuration.engine.adaptiveQuality) {
             var scale = Math.max(0.5, 1 / (window.devicePixelRatio || 2));
             this.engine.setHardwareScalingLevel(scale);
         }
 
         // set hardware limitations for scene initialization
-        this.handleHardwareLimitations();
+        this._handleHardwareLimitations();
 
         return Promise.resolve(this.engine);
     }
 
-    protected initScene(): Promise<Scene> {
+    /**
+     * initialize the scene. Calling thsi function again will dispose the old scene, if exists.
+     */
+    protected _initScene(): Promise<Scene> {
 
         // if the scen exists, dispose it.
         if (this.scene) {
@@ -683,22 +814,30 @@ export abstract class AbstractViewer {
         // make sure there is a default camera and light.
         this.scene.createDefaultLight(true);
 
-        if (this.configuration.scene) {
-            this.configureScene(this.configuration.scene);
+        if (this._configuration.scene) {
+            this._configureScene(this._configuration.scene);
 
             // Scene optimizer
-            if (this.configuration.optimizer) {
-                this.configureOptimizer(this.configuration.optimizer);
+            if (this._configuration.optimizer) {
+                this._configureOptimizer(this._configuration.optimizer);
             }
         }
 
         return Promise.resolve(this.scene);
     }
 
-    private isLoading: boolean;
-    private nextLoading: Function;
+    private _isLoading: boolean;
+    private _nextLoading: Function;
 
-    public initModel(modelConfig: any = this.configuration.model, clearScene: boolean = true): ViewerModel {
+    /**
+     * Initialize a model loading. The returns object (a ViewerModel object) will be loaded in the background.
+     * The difference between this and loadModel is that loadModel will fulfill the promise when the model finished loading.
+     * 
+     * @param modelConfig model configuration to use when loading the model.
+     * @param clearScene should the scene be cleared before loading this model
+     * @returns a ViewerModel object that is not yet fully loaded.
+     */
+    public initModel(modelConfig: IModelConfiguration, clearScene: boolean = true): ViewerModel {
         let model = this.modelLoader.load(modelConfig);
 
         if (clearScene) {
@@ -719,14 +858,14 @@ export abstract class AbstractViewer {
         model.onLoadedObservable.add(() => {
             this.onModelLoadedObservable.notifyObserversWithPromise(model)
                 .then(() => {
-                    this.configureLights(this.configuration.lights);
+                    this._configureLights(this._configuration.lights);
 
-                    if (this.configuration.camera) {
-                        this.configureCamera(this.configuration.camera, model);
+                    if (this._configuration.camera) {
+                        this._configureCamera(this._configuration.camera, model);
                     }
-                    return this.initEnvironment(model);
+                    return this._initEnvironment(model);
                 }).then(() => {
-                    this.isLoading = false;
+                    this._isLoading = false;
                     return model;
                 });
         });
@@ -735,31 +874,38 @@ export abstract class AbstractViewer {
         return model;
     }
 
-    public loadModel(modelConfig: any = this.configuration.model, clearScene: boolean = true): Promise<ViewerModel> {
+    /**
+     * load a model using the provided configuration
+     * 
+     * @param modelConfig the model configuration or URL to load.
+     * @param clearScene Should the scene be cleared before loading the model
+     * @returns a Promise the fulfills when the model finished loading successfully. 
+     */
+    public loadModel(modelConfig: any = this._configuration.model, clearScene: boolean = true): Promise<ViewerModel> {
         // no model was provided? Do nothing!
         let modelUrl = (typeof modelConfig === 'string') ? modelConfig : modelConfig.url;
         if (!modelUrl) {
             return Promise.reject("no model configuration found");
         }
-        if (this.isLoading) {
+        if (this._isLoading) {
             // We can decide here whether or not to cancel the lst load, but the developer can do that.
             return Promise.reject("another model is curently being loaded.");
         }
-        this.isLoading = true;
+        this._isLoading = true;
         if ((typeof modelConfig === 'string')) {
-            if (this.configuration.model && typeof this.configuration.model === 'object') {
-                this.configuration.model.url = modelConfig;
+            if (this._configuration.model && typeof this._configuration.model === 'object') {
+                this._configuration.model.url = modelConfig;
             }
         } else {
-            if (this.configuration.model) {
-                deepmerge(this.configuration.model, modelConfig)
+            if (this._configuration.model) {
+                deepmerge(this._configuration.model, modelConfig)
             } else {
-                this.configuration.model = modelConfig;
+                this._configuration.model = modelConfig;
             }
         }
 
         return Promise.resolve(this.scene).then((scene) => {
-            if (!scene) return this.initScene();
+            if (!scene) return this._initScene();
             return scene;
         }).then(() => {
             return new Promise<ViewerModel>((resolve, reject) => {
@@ -769,26 +915,32 @@ export abstract class AbstractViewer {
         })
     }
 
-    protected initEnvironment(model?: ViewerModel): Promise<Scene> {
-        this.configureEnvironment(this.configuration.skybox, this.configuration.ground);
+    /**
+     * 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> {
+        this._configureEnvironment(this._configuration.skybox, this._configuration.ground);
 
         return Promise.resolve(this.scene);
     }
 
     /**
-		 * Alters render settings to reduce features based on hardware feature limitations
-		 * @param options Viewer options to modify
-		 */
-    protected handleHardwareLimitations() {
+     * Alters render settings to reduce features based on hardware feature limitations
+     * @param options Viewer options to modify
+     */
+    protected _handleHardwareLimitations() {
         //flip rendering settings switches based on hardware support
         let maxVaryingRows = this.engine.getCaps().maxVaryingVectors;
         let maxFragmentSamplers = this.engine.getCaps().maxTexturesImageUnits;
 
         //shadows are disabled if there's not enough varyings for a single shadow
         if ((maxVaryingRows < 8) || (maxFragmentSamplers < 8)) {
-            this.maxShadows = 0;
+            this._maxShadows = 0;
         } else {
-            this.maxShadows = 3;
+            this._maxShadows = 3;
         }
 
         //can we render to any >= 16-bit targets (required for HDR)
@@ -799,24 +951,24 @@ export abstract class AbstractViewer {
         this._hdrSupport = !!(linearFloatTargets || linearHalfFloatTargets);
 
         if (linearHalfFloatTargets) {
-            this.defaultHighpTextureType = Engine.TEXTURETYPE_HALF_FLOAT;
-            this.shadowGeneratorBias = 0.002;
+            this._defaultHighpTextureType = Engine.TEXTURETYPE_HALF_FLOAT;
+            this._shadowGeneratorBias = 0.002;
         } else if (linearFloatTargets) {
-            this.defaultHighpTextureType = Engine.TEXTURETYPE_FLOAT;
-            this.shadowGeneratorBias = 0.001;
+            this._defaultHighpTextureType = Engine.TEXTURETYPE_FLOAT;
+            this._shadowGeneratorBias = 0.001;
         } else {
-            this.defaultHighpTextureType = Engine.TEXTURETYPE_UNSIGNED_INT;
-            this.shadowGeneratorBias = 0.001;
+            this._defaultHighpTextureType = Engine.TEXTURETYPE_UNSIGNED_INT;
+            this._shadowGeneratorBias = 0.001;
         }
 
-        this.defaultPipelineTextureType = this._hdrSupport ? this.defaultHighpTextureType : Engine.TEXTURETYPE_UNSIGNED_INT;
+        this._defaultPipelineTextureType = this._hdrSupport ? this._defaultHighpTextureType : Engine.TEXTURETYPE_UNSIGNED_INT;
     }
 
     /**
      * Injects all the spectre shader in the babylon shader store
      */
-    protected injectCustomShaders(): void {
-        let customShaders = this.configuration.customShaders;
+    protected _injectCustomShaders(): void {
+        let customShaders = this._configuration.customShaders;
         // Inject all the spectre shader in the babylon shader store.
         if (!customShaders) {
             return;
@@ -835,14 +987,21 @@ export abstract class AbstractViewer {
         }
     }
 
-    protected extendClassWithConfig(object: any, config: any) {
+    /**
+     * This will extend an object with configuration values.
+     * What it practically does it take the keys from the configuration and set them on the object.
+     * I the configuration is a tree, it will traverse into the tree.
+     * @param object the object to extend
+     * @param config the configuration object that will extend the object
+     */
+    protected _extendClassWithConfig(object: any, config: any) {
         if (!config) return;
         Object.keys(config).forEach(key => {
             if (key in object && typeof object[key] !== 'function') {
                 // if (typeof object[key] === 'function') return;
                 // if it is an object, iterate internally until reaching basic types
                 if (typeof object[key] === 'object') {
-                    this.extendClassWithConfig(object[key], config[key]);
+                    this._extendClassWithConfig(object[key], config[key]);
                 } else {
                     if (config[key] !== undefined) {
                         object[key] = config[key];
@@ -852,7 +1011,7 @@ export abstract class AbstractViewer {
         });
     }
 
-    private setCameraBehavior(behaviorConfig: number | {
+    private _setCameraBehavior(behaviorConfig: number | {
         type: number;
         [propName: string]: any;
     }, payload: any) {
@@ -883,7 +1042,7 @@ export abstract class AbstractViewer {
 
         if (behavior) {
             if (typeof behaviorConfig === "object") {
-                this.extendClassWithConfig(behavior, behaviorConfig);
+                this._extendClassWithConfig(behavior, behaviorConfig);
             }
         }
 

Viewer/src/viewer/viewerManager.ts

@@ -3,36 +3,36 @@ import { AbstractViewer } from './viewer';
 
 export class ViewerManager {
 
-    private viewers: { [key: string]: AbstractViewer };
+    private _viewers: { [key: string]: AbstractViewer };
 
     public onViewerAdded: (viewer: AbstractViewer) => void;
     public onViewerAddedObservable: Observable<AbstractViewer>;
     public onViewerRemovedObservable: Observable<string>;
 
     constructor() {
-        this.viewers = {};
+        this._viewers = {};
         this.onViewerAddedObservable = new Observable();
         this.onViewerRemovedObservable = new Observable();
     }
 
     public addViewer(viewer: AbstractViewer) {
-        this.viewers[viewer.getBaseId()] = viewer;
+        this._viewers[viewer.getBaseId()] = viewer;
         this._onViewerAdded(viewer);
     }
 
     public removeViewer(viewer: AbstractViewer) {
         let id = viewer.getBaseId();
-        delete this.viewers[id];
+        delete this._viewers[id];
         this.onViewerRemovedObservable.notifyObservers(id);
     }
 
     public getViewerById(id: string): AbstractViewer {
-        return this.viewers[id];
+        return this._viewers[id];
     }
 
     public getViewerByHTMLElement(element: HTMLElement) {
-        for (let id in this.viewers) {
-            if (this.viewers[id].containerElement === element) {
+        for (let id in this._viewers) {
+            if (this._viewers[id].containerElement === element) {
                 return this.getViewerById(id);
             }
         }
@@ -60,8 +60,8 @@ export class ViewerManager {
     }
 
     public dispose() {
-        for (let id in this.viewers) {
-            this.viewers[id].dispose();
+        for (let id in this._viewers) {
+            this._viewers[id].dispose();
         }
     }
 }

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

@@ -435,17 +435,19 @@ declare module BabylonViewer {
         INIT,
         LOADING,
         LOADED,
+        CANCELED,
         ERROR
     }
 
     export class ModelLoader {
         constructor(viewer: AbstractViewer);
         load(modelConfiguration: IModelConfiguration): ViewerModel;
+        cancelLoad(model: ViewerModel): void;
         dispose(): void;
     }
 
     export class ViewerModel {
-        constructor(scene: BABYLON.Scene, modelConfiguration: IModelConfiguration, disableAutoLoad: boolean);
+        constructor(scene: BABYLON.Scene, modelConfiguration: IModelConfiguration);
         loader: BABYLON.ISceneLoaderPlugin | BABYLON.ISceneLoaderPluginAsync;
         meshes: Array<BABYLON.AbstractMesh>;
         rootMesh: BABYLON.AbstractMesh;
@@ -461,7 +463,6 @@ declare module BabylonViewer {
         onAfterConfigure: BABYLON.Observable<ViewerModel>;
         state: ModelState;
         loadId: number;
-        load(): void;
         initAnimations(): void;
         addAnimationGroup(animationGroup: BABYLON.AnimationGroup): void;
         getAnimations(): Array<IModelAnimation>;
@@ -482,12 +483,12 @@ declare module BabylonViewer {
         models: Array<ViewerModel>;
         modelLoader: ModelLoader;
         lastUsedLoader: BABYLON.ISceneLoaderPlugin | BABYLON.ISceneLoaderPluginAsync;
-        protected configuration: ViewerConfiguration;
+        protected _configuration: ViewerConfiguration;
         environmentHelper: BABYLON.EnvironmentHelper;
-        protected defaultHighpTextureType: number;
-        protected shadowGeneratorBias: number;
-        protected defaultPipelineTextureType: number;
-        protected maxShadows: number;
+        protected _defaultHighpTextureType: number;
+        protected _shadowGeneratorBias: number;
+        protected _defaultPipelineTextureType: number;
+        protected _maxShadows: number;
         readonly isHdrSupported: boolean;
         protected _isDisposed: boolean;
         onSceneInitObservable: BABYLON.Observable<BABYLON.Scene>;
@@ -501,33 +502,33 @@ declare module BabylonViewer {
         onLoaderInitObservable: BABYLON.Observable<BABYLON.ISceneLoaderPlugin | BABYLON.ISceneLoaderPluginAsync>;
         onInitDoneObservable: BABYLON.Observable<AbstractViewer>;
         canvas: HTMLCanvasElement;
-        protected registeredOnBeforerenderFunctions: Array<() => void>;
+        protected _registeredOnBeforerenderFunctions: Array<() => void>;
         constructor(containerElement: HTMLElement, initialConfiguration?: ViewerConfiguration);
         getBaseId(): string;
         isCanvasInDOM(): boolean;
-        protected resize: () => void;
-        protected render: () => void;
+        protected _resize: () => void;
+        protected _render: () => void;
         updateConfiguration(newConfiguration?: Partial<ViewerConfiguration>): void;
-        protected configureEnvironment(skyboxConifguration?: ISkyboxConfiguration | boolean, groundConfiguration?: IGroundConfiguration | boolean): Promise<BABYLON.Scene> | undefined;
-        protected configureScene(sceneConfig: ISceneConfiguration, optimizerConfig?: ISceneOptimizerConfiguration): void;
-        protected configureOptimizer(optimizerConfig: ISceneOptimizerConfiguration | boolean): void;
-        protected configureObservers(observersConfiguration: IObserversConfiguration): void;
-        protected configureCamera(cameraConfig: ICameraConfiguration, model?: ViewerModel): void;
-        protected configureLights(lightsConfiguration?: {
+        protected _configureEnvironment(skyboxConifguration?: ISkyboxConfiguration | boolean, groundConfiguration?: IGroundConfiguration | boolean): Promise<BABYLON.Scene> | undefined;
+        protected _configureScene(sceneConfig: ISceneConfiguration, optimizerConfig?: ISceneOptimizerConfiguration): void;
+        protected _configureOptimizer(optimizerConfig: ISceneOptimizerConfiguration | boolean): void;
+        protected _configureObservers(observersConfiguration: IObserversConfiguration): void;
+        protected _configureCamera(cameraConfig: ICameraConfiguration, model?: ViewerModel): void;
+        protected _configureLights(lightsConfiguration?: {
             [name: string]: ILightConfiguration | boolean;
         }, model?: ViewerModel): void;
-        protected configureModel(modelConfiguration: Partial<IModelConfiguration>, model?: ViewerModel): void;
+        protected _configureModel(modelConfiguration: Partial<IModelConfiguration>, model?: ViewerModel): void;
         dispose(): void;
         protected abstract prepareContainerElement(): any;
-        protected onTemplatesLoaded(): Promise<AbstractViewer>;
-        protected initEngine(): Promise<BABYLON.Engine>;
-        protected initScene(): Promise<BABYLON.Scene>;
-        initModel(modelConfig?: any, clearScene?: boolean): ViewerModel
+        protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+        protected _initEngine(): Promise<BABYLON.Engine>;
+        protected _initScene(): Promise<BABYLON.Scene>;
+        initModel(modelConfig: IModelConfiguration, clearScene?: boolean): ViewerModel
         loadModel(modelConfig?: any, clearScene?: boolean): Promise<ViewerModel>;
-        protected initEnvironment(viewerModel?: ViewerModel): Promise<BABYLON.Scene>;
-        protected handleHardwareLimitations(): void;
-        protected injectCustomShaders(): void;
-        protected extendClassWithConfig(object: any, config: any): void;
+        protected _initEnvironment(viewerModel?: ViewerModel): Promise<BABYLON.Scene>;
+        protected _handleHardwareLimitations(): void;
+        protected _injectCustomShaders(): void;
+        protected _extendClassWithConfig(object: any, config: any): void;
     }
 
     export class DefaultViewer extends AbstractViewer {
@@ -535,8 +536,8 @@ declare module BabylonViewer {
         camera: BABYLON.ArcRotateCamera;
         constructor(containerElement: HTMLElement, initialConfiguration?: ViewerConfiguration);
         initScene(): Promise<BABYLON.Scene>;
-        protected onTemplatesLoaded(): Promise<AbstractViewer>;
-        protected prepareContainerElement(): void;
+        protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+        protected _prepareContainerElement(): void;
         loadModel(model?: any): Promise<ViewerModel>;
         initEnvironment(viewerModel?: ViewerModel): Promise<BABYLON.Scene>;
         showOverlayScreen(subScreen: string): Promise<Template>;