Merge remote-tracking branch 'upstream/master'

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "3.3.0-alpha.14",
+    "version": "3.3.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

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

@@ -1555,6 +1555,15 @@ declare module BABYLON.GUI {
             protected _getTypeName(): string;
             _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+            /**
+                * Utility function to easily create a radio button with a header
+                * @param title defines the label to use for the header
+                * @param group defines the group to use for the radio button
+                * @param isChecked defines the initial state of the radio button
+                * @param onValueChanged defines the callback to call when value changes
+                * @returns a StackPanel containing the radio button and a textBlock
+                */
+            static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, value: boolean) => void): StackPanel;
     }
 }
 declare module BABYLON.GUI {
@@ -2299,6 +2308,7 @@ declare module BABYLON.GUI {
             INNERGLOW: boolean;
             BORDER: boolean;
             HOVERLIGHT: boolean;
+            TEXTURE: boolean;
             constructor();
     }
     /**
@@ -2353,6 +2363,8 @@ declare module BABYLON.GUI {
                 * Gets or sets the hover light position in world space (default is BABYLON.Vector3.Zero())
                 */
             hoverPosition: BABYLON.Vector3;
+            /** Gets or sets the texture to use for albedo color */
+            albedoTexture: BABYLON.Nullable<BABYLON.BaseTexture>;
             /**
                 * Creates a new Fluent material
                 * @param name defines the name of the material
@@ -2446,6 +2458,8 @@ declare module BABYLON.GUI {
             onElementOutObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
             /** User defined callback used to create labels */
             labelCreationFunction: BABYLON.Nullable<(label: string, width: number, includeBackground: boolean) => BABYLON.Mesh>;
+            /** User defined callback used to apply specific setup to hover labels */
+            updateHoverLabel: BABYLON.Nullable<(meshLabel: BABYLON.Mesh) => void>;
             /** Gets or sets the width of each element */
             elementWidth: number;
             /** Gets or sets the rotation of the entire chart */
@@ -2466,6 +2480,10 @@ declare module BABYLON.GUI {
             blockRefresh: boolean;
             /** Gets or sets the material used by element meshes */
             defaultMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** Gets or sets a boolean indicating if labels must be displayed */
+            displayLabels: boolean;
+            /** Gets or sets the dimension used for the labels */
+            labelDimension: string;
             /** Gets or sets a boolean indicating if glow should be used to highlight element hovering */
             glowHover: boolean;
             /** Gets or sets the name of the graph */
@@ -2510,14 +2528,10 @@ declare module BABYLON.GUI {
     export class BarGraph extends Chart {
             /** Gets or sets a boolean indicating if the background must be displayed */
             displayBackground: boolean;
-            /** Gets or sets a boolean indicating if labels must be displayed */
-            displayLabels: boolean;
             /** Gets or sets the margin between bars */
             margin: number;
             /** Gets or sets the maximum height of a bar */
             maxBarHeight: number;
-            /** Gets or sets the dimension used for the labels */
-            labelDimension: string;
             /**
                 * Creates a new BarGraph
                 * @param name defines the name of the graph
@@ -2545,8 +2559,21 @@ declare module BABYLON.GUI {
         * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
         */
     export class MapGraph extends Chart {
+            /** Gets or sets the offset (in world unit) on X axis to apply to all elements */
+            xOffset: number;
+            /** Gets or sets the offset (in world unit) on Y axis to apply to all elements */
+            yOffset: number;
+            /** Gets or sets the tesselation used to build the cylinders */
+            cylinderTesselation: number;
             /** Gets or sets the size of the world map (this will define the width) */
             worldMapSize: number;
+            updateHoverLabel: (meshLabel: BABYLON.Mesh) => void;
+            /**
+                * Gets the material used to render the world map
+                */
+            readonly worldMapMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** Sets the texture url to use for the world map */
+            worldMapUrl: string;
             /**
                 * Creates a new MapGraph
                 * @param name defines the name of the graph
@@ -2556,5 +2583,6 @@ declare module BABYLON.GUI {
             protected _createCylinderMesh(name: string, scene: BABYLON.Scene): BABYLON.Mesh;
             refresh(): MapGraph;
             protected _clean(): void;
+            dispose(): void;
     }
 }

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

@@ -1670,6 +1670,7 @@ declare module 'babylonjs-gui/2D/controls/radioButton' {
     import { Control } from "babylonjs-gui/2D/controls/control";
     import { Observable, Vector2 } from "babylonjs";
     import { Measure } from "babylonjs-gui/2D/measure";
+    import { StackPanel } from "babylonjs-gui/2D/controls";
     /**
         * Class used to create radio button controls
         */
@@ -1695,6 +1696,15 @@ declare module 'babylonjs-gui/2D/controls/radioButton' {
             protected _getTypeName(): string;
             _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
+            /**
+                * Utility function to easily create a radio button with a header
+                * @param title defines the label to use for the header
+                * @param group defines the group to use for the radio button
+                * @param isChecked defines the initial state of the radio button
+                * @param onValueChanged defines the callback to call when value changes
+                * @returns a StackPanel containing the radio button and a textBlock
+                */
+            static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, value: boolean) => void): StackPanel;
     }
 }
 
@@ -2510,6 +2520,7 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
             INNERGLOW: boolean;
             BORDER: boolean;
             HOVERLIGHT: boolean;
+            TEXTURE: boolean;
             constructor();
     }
     /**
@@ -2564,6 +2575,8 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
                 * Gets or sets the hover light position in world space (default is Vector3.Zero())
                 */
             hoverPosition: Vector3;
+            /** Gets or sets the texture to use for albedo color */
+            albedoTexture: Nullable<BaseTexture>;
             /**
                 * Creates a new Fluent material
                 * @param name defines the name of the material
@@ -2662,6 +2675,8 @@ declare module 'babylonjs-gui/3D/charting/chart' {
             onElementOutObservable: Observable<AbstractMesh>;
             /** User defined callback used to create labels */
             labelCreationFunction: Nullable<(label: string, width: number, includeBackground: boolean) => Mesh>;
+            /** User defined callback used to apply specific setup to hover labels */
+            updateHoverLabel: Nullable<(meshLabel: Mesh) => void>;
             /** Gets or sets the width of each element */
             elementWidth: number;
             /** Gets or sets the rotation of the entire chart */
@@ -2682,6 +2697,10 @@ declare module 'babylonjs-gui/3D/charting/chart' {
             blockRefresh: boolean;
             /** Gets or sets the material used by element meshes */
             defaultMaterial: Nullable<Material>;
+            /** Gets or sets a boolean indicating if labels must be displayed */
+            displayLabels: boolean;
+            /** Gets or sets the dimension used for the labels */
+            labelDimension: string;
             /** Gets or sets a boolean indicating if glow should be used to highlight element hovering */
             glowHover: boolean;
             /** Gets or sets the name of the graph */
@@ -2729,14 +2748,10 @@ declare module 'babylonjs-gui/3D/charting/barGraph' {
     export class BarGraph extends Chart {
             /** Gets or sets a boolean indicating if the background must be displayed */
             displayBackground: boolean;
-            /** Gets or sets a boolean indicating if labels must be displayed */
-            displayLabels: boolean;
             /** Gets or sets the margin between bars */
             margin: number;
             /** Gets or sets the maximum height of a bar */
             maxBarHeight: number;
-            /** Gets or sets the dimension used for the labels */
-            labelDimension: string;
             /**
                 * Creates a new BarGraph
                 * @param name defines the name of the graph
@@ -2761,14 +2776,27 @@ declare module 'babylonjs-gui/3D/charting/barGraph' {
 
 declare module 'babylonjs-gui/3D/charting/mapGraph' {
     import { Chart } from "babylonjs-gui/3D/charting";
-    import { Scene, Nullable, Mesh } from "babylonjs";
+    import { Scene, Nullable, Mesh, Material } from "babylonjs";
     /**
         * Class used to render bar graphs
         * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
         */
     export class MapGraph extends Chart {
+            /** Gets or sets the offset (in world unit) on X axis to apply to all elements */
+            xOffset: number;
+            /** Gets or sets the offset (in world unit) on Y axis to apply to all elements */
+            yOffset: number;
+            /** Gets or sets the tesselation used to build the cylinders */
+            cylinderTesselation: number;
             /** Gets or sets the size of the world map (this will define the width) */
             worldMapSize: number;
+            updateHoverLabel: (meshLabel: Mesh) => void;
+            /**
+                * Gets the material used to render the world map
+                */
+            readonly worldMapMaterial: Nullable<Material>;
+            /** Sets the texture url to use for the world map */
+            worldMapUrl: string;
             /**
                 * Creates a new MapGraph
                 * @param name defines the name of the graph
@@ -2778,6 +2806,7 @@ declare module 'babylonjs-gui/3D/charting/mapGraph' {
             protected _createCylinderMesh(name: string, scene: Scene): Mesh;
             refresh(): MapGraph;
             protected _clean(): void;
+            dispose(): void;
     }
 }
 
@@ -4339,6 +4368,15 @@ declare module BABYLON.GUI {
             protected _getTypeName(): string;
             _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+            /**
+                * Utility function to easily create a radio button with a header
+                * @param title defines the label to use for the header
+                * @param group defines the group to use for the radio button
+                * @param isChecked defines the initial state of the radio button
+                * @param onValueChanged defines the callback to call when value changes
+                * @returns a StackPanel containing the radio button and a textBlock
+                */
+            static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, value: boolean) => void): StackPanel;
     }
 }
 declare module BABYLON.GUI {
@@ -5083,6 +5121,7 @@ declare module BABYLON.GUI {
             INNERGLOW: boolean;
             BORDER: boolean;
             HOVERLIGHT: boolean;
+            TEXTURE: boolean;
             constructor();
     }
     /**
@@ -5137,6 +5176,8 @@ declare module BABYLON.GUI {
                 * Gets or sets the hover light position in world space (default is BABYLON.Vector3.Zero())
                 */
             hoverPosition: BABYLON.Vector3;
+            /** Gets or sets the texture to use for albedo color */
+            albedoTexture: BABYLON.Nullable<BABYLON.BaseTexture>;
             /**
                 * Creates a new Fluent material
                 * @param name defines the name of the material
@@ -5230,6 +5271,8 @@ declare module BABYLON.GUI {
             onElementOutObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
             /** User defined callback used to create labels */
             labelCreationFunction: BABYLON.Nullable<(label: string, width: number, includeBackground: boolean) => BABYLON.Mesh>;
+            /** User defined callback used to apply specific setup to hover labels */
+            updateHoverLabel: BABYLON.Nullable<(meshLabel: BABYLON.Mesh) => void>;
             /** Gets or sets the width of each element */
             elementWidth: number;
             /** Gets or sets the rotation of the entire chart */
@@ -5250,6 +5293,10 @@ declare module BABYLON.GUI {
             blockRefresh: boolean;
             /** Gets or sets the material used by element meshes */
             defaultMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** Gets or sets a boolean indicating if labels must be displayed */
+            displayLabels: boolean;
+            /** Gets or sets the dimension used for the labels */
+            labelDimension: string;
             /** Gets or sets a boolean indicating if glow should be used to highlight element hovering */
             glowHover: boolean;
             /** Gets or sets the name of the graph */
@@ -5294,14 +5341,10 @@ declare module BABYLON.GUI {
     export class BarGraph extends Chart {
             /** Gets or sets a boolean indicating if the background must be displayed */
             displayBackground: boolean;
-            /** Gets or sets a boolean indicating if labels must be displayed */
-            displayLabels: boolean;
             /** Gets or sets the margin between bars */
             margin: number;
             /** Gets or sets the maximum height of a bar */
             maxBarHeight: number;
-            /** Gets or sets the dimension used for the labels */
-            labelDimension: string;
             /**
                 * Creates a new BarGraph
                 * @param name defines the name of the graph
@@ -5329,8 +5372,21 @@ declare module BABYLON.GUI {
         * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
         */
     export class MapGraph extends Chart {
+            /** Gets or sets the offset (in world unit) on X axis to apply to all elements */
+            xOffset: number;
+            /** Gets or sets the offset (in world unit) on Y axis to apply to all elements */
+            yOffset: number;
+            /** Gets or sets the tesselation used to build the cylinders */
+            cylinderTesselation: number;
             /** Gets or sets the size of the world map (this will define the width) */
             worldMapSize: number;
+            updateHoverLabel: (meshLabel: BABYLON.Mesh) => void;
+            /**
+                * Gets the material used to render the world map
+                */
+            readonly worldMapMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** Sets the texture url to use for the world map */
+            worldMapUrl: string;
             /**
                 * Creates a new MapGraph
                 * @param name defines the name of the graph
@@ -5340,5 +5396,6 @@ declare module BABYLON.GUI {
             protected _createCylinderMesh(name: string, scene: BABYLON.Scene): BABYLON.Mesh;
             refresh(): MapGraph;
             protected _clean(): void;
+            dispose(): void;
     }
 }

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "3.3.0-alpha.14",
+    "version": "3.3.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "3.3.0-alpha.14",
+    "version": "3.3.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "3.3.0-alpha.14",
+    "version": "3.3.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-alpha.14"
+        "babylonjs-gltf2interface": "3.3.0-alpha.15"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-alpha.14",
+    "version": "3.3.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-alpha.14",
+    "version": "3.3.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-alpha.14",
+    "version": "3.3.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "3.3.0-alpha.14",
+    "version": "3.3.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-alpha.14"
+        "babylonjs-gltf2interface": "3.3.0-alpha.15"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

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

@@ -168,11 +168,11 @@ declare module BabylonViewer {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
+            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<string> | Promise<Template>;
+            hideOverlayScreen(): Promise<Template> | Promise<string>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -189,11 +189,11 @@ declare module BabylonViewer {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<string> | Promise<Template>;
+            showLoadingScreen(): Promise<Template> | Promise<string>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<string> | Promise<Template>;
+            hideLoadingScreen(): Promise<Template> | Promise<string>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -911,6 +911,13 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
+    /**
+      *
+      * @param name the name of the custom optimizer configuration
+      * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
+      */
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
     /**
@@ -1535,6 +1542,20 @@ declare module BabylonViewer {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 declare module BabylonViewer {
+    /**
+        * A custom upgrade-oriented function configuration for the scene optimizer.
+        *
+        * @param viewer the viewer to optimize
+        */
+    export function extendedUpgrade(sceneManager: SceneManager): boolean;
+    /**
+        * A custom degrade-oriented function configuration for the scene optimizer.
+        *
+        * @param viewer the viewer to optimize
+        */
+    export function extendedDegrade(sceneManager: SceneManager): boolean;
+}
+declare module BabylonViewer {
 }
 declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {

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

@@ -200,11 +200,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
+            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<string> | Promise<Template>;
+            hideOverlayScreen(): Promise<Template> | Promise<string>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -221,11 +221,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<string> | Promise<Template>;
+            showLoadingScreen(): Promise<Template> | Promise<string>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<string> | Promise<Template>;
+            hideLoadingScreen(): Promise<Template> | Promise<string>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -977,7 +977,15 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
-    
+    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
+    import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
+    /**
+      *
+      * @param name the name of the custom optimizer configuration
+      * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
+      */
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
 declare module 'babylonjs-viewer/initializer' {
@@ -1639,6 +1647,22 @@ declare module 'babylonjs-viewer/loader/plugins' {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 
+declare module 'babylonjs-viewer/optimizer/custom/extended' {
+    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
+    /**
+        * A custom upgrade-oriented function configuration for the scene optimizer.
+        *
+        * @param viewer the viewer to optimize
+        */
+    export function extendedUpgrade(sceneManager: SceneManager): boolean;
+    /**
+        * A custom degrade-oriented function configuration for the scene optimizer.
+        *
+        * @param viewer the viewer to optimize
+        */
+    export function extendedDegrade(sceneManager: SceneManager): boolean;
+}
+
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';

dist/preview release/what's new.md

@@ -98,6 +98,8 @@
 - Added HDR support to ReflectionProbe ([Deltakosh](https://github.com/deltakosh))
 - Added ACES ToneMapping to the image processing to help getting more parity with other engines ([sebavan](http://www.github.com/sebavan))
 - Added Image Processing to the particle system to allow consistency in one pass forward rendering scenes ([sebavan](http://www.github.com/sebavan))
+- Added Video Recorder [Issue 4708](https://github.com/BabylonJS/Babylon.js/issues/4708) ([sebavan](http://www.github.com/sebavan))
+- Added support for main WebGL2 texture formats ([PeapBoy](https://github.com/NicolasBuecher))
 
 ### glTF Loader
 

gui/src/2D/controls/radioButton.ts

@@ -1,6 +1,7 @@
 import { Control } from "./control";
 import { Observable, Vector2 } from "babylonjs";
 import { Measure } from "../measure";
+import { StackPanel, TextBlock } from ".";
 
 /**
  * Class used to create radio button controls
@@ -169,4 +170,37 @@ export class RadioButton extends Control {
 
         return true;
     }
+
+    /**
+     * Utility function to easily create a radio button with a header
+     * @param title defines the label to use for the header
+     * @param group defines the group to use for the radio button
+     * @param isChecked defines the initial state of the radio button
+     * @param onValueChanged defines the callback to call when value changes
+     * @returns a StackPanel containing the radio button and a textBlock
+     */
+    public static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, value: boolean) => void): StackPanel {
+        var panel = new StackPanel();
+        panel.isVertical = false;
+        panel.height = "30px";
+
+        var radio = new RadioButton();
+        radio.width = "20px";
+        radio.height = "20px";
+        radio.isChecked = isChecked;
+        radio.color = "green";
+        radio.group = group;
+        radio.onIsCheckedChangedObservable.add((value) => onValueChanged(radio, value));
+        panel.addControl(radio);    
+    
+        var header = new TextBlock();
+        header.text = title;
+        header.width = "180px";
+        header.paddingLeft = "5px";
+        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        header.color = "white";
+        panel.addControl(header); 
+
+        return panel;
+    }
 }   

gui/src/3D/charting/barGraph.ts

@@ -13,8 +13,6 @@ export class BarGraph extends Chart {
     private _backgroundMesh: Nullable<Mesh>;
     private _backgroundADT : Nullable<AdvancedDynamicTexture>;
     
-    private _labelDimension: string;
-    private _displayLabels = true;
     private _displayBackground = true;
     private _backgroundResolution = 512;
     private _backgroundTickCount = 5;
@@ -34,21 +32,6 @@ export class BarGraph extends Chart {
         this.refresh();
     }     
 
-    /** Gets or sets a boolean indicating if labels must be displayed */
-    public get displayLabels(): boolean {
-        return this._displayLabels;
-    }
-
-    public set displayLabels(value: boolean) {
-        if (this._displayLabels === value) {
-            return;
-        }
-
-        this._displayLabels = value;
-
-        this.refresh();
-    }    
-
     /** Gets or sets the margin between bars */
     public get margin(): number {
         return this._margin;
@@ -79,21 +62,6 @@ export class BarGraph extends Chart {
         this.refresh();
     }
 
-    /** Gets or sets the dimension used for the labels */
-    public get labelDimension(): string {
-        return this._labelDimension;
-    }
-
-    public set labelDimension(value: string) {
-        if (this._labelDimension === value) {
-            return;
-        }
-
-        this._labelDimension = value;
-
-        this.refresh();
-    }
-
     /**
      * Creates a new BarGraph
      * @param name defines the name of the graph
@@ -234,11 +202,11 @@ export class BarGraph extends Chart {
             left += this._elementWidth + this.margin;
 
             // Label
-            if (!this._labelDimension || !this._displayLabels) {
+            if (!this.labelDimension || !this.displayLabels) {
                 return;
             }
 
-            let label = this._addLabel(entry[this._labelDimension], this._elementWidth);
+            let label = this._addLabel(entry[this.labelDimension], this._elementWidth);
             label.position = barMesh.position.clone();
             label.position.z -= this._elementWidth;
         });

gui/src/3D/charting/chart.ts

@@ -19,6 +19,9 @@ export abstract class Chart {
     protected _elementWidth = 2;    
     private _pickedPointObserver: Nullable<Observer<Vector3>>;      
     protected _defaultMaterial: Nullable<Material>; 
+    private _labelDimension: string;
+    private _displayLabels = true;
+    private _activeBar: Nullable<Mesh>;
 
     private _glowLayer: Nullable<GlowLayer>;
     private _onElementEnterObserver: Nullable<Observer<AbstractMesh>>;
@@ -50,6 +53,9 @@ export abstract class Chart {
     /** User defined callback used to create labels */
     public labelCreationFunction: Nullable<(label: string, width: number, includeBackground: boolean) => Mesh>;
 
+    /** User defined callback used to apply specific setup to hover labels */
+    public updateHoverLabel: Nullable<(meshLabel: Mesh) => void>;
+
     /** Gets or sets the width of each element */
     public get elementWidth(): number {
         return this._elementWidth;
@@ -155,6 +161,36 @@ export abstract class Chart {
         this.refresh();
     }
 
+    /** Gets or sets a boolean indicating if labels must be displayed */
+    public get displayLabels(): boolean {
+        return this._displayLabels;
+    }
+
+    public set displayLabels(value: boolean) {
+        if (this._displayLabels === value) {
+            return;
+        }
+
+        this._displayLabels = value;
+
+        this.refresh();
+    }       
+    
+    /** Gets or sets the dimension used for the labels */
+    public get labelDimension(): string {
+        return this._labelDimension;
+    }
+
+    public set labelDimension(value: string) {
+        if (this._labelDimension === value) {
+            return;
+        }
+
+        this._labelDimension = value;
+
+        this.refresh();
+    }    
+
     /** Gets or sets a boolean indicating if glow should be used to highlight element hovering */
     public get glowHover(): boolean {
         return this._glowLayer !== undefined && this._glowLayer !== null;
@@ -166,16 +202,6 @@ export abstract class Chart {
         }
 
         if (this._glowLayer) {
-            if (this._onElementEnterObserver) {
-                this.onElementEnterObservable.remove(this._onElementEnterObserver);
-                this._onElementEnterObserver = null;
-            }
-    
-            if (this._onElementOutObserver) {
-                this.onElementOutObservable.remove(this._onElementOutObserver);
-                this._onElementOutObserver = null;
-            } 
-
             this._glowLayer.dispose();
             this._glowLayer = null;
             return;
@@ -183,28 +209,8 @@ export abstract class Chart {
 
         this._glowLayer = new GlowLayer("glow", this._scene);
 
-        let activeBar: Nullable<Mesh>;
-        this._onElementEnterObserver = this.onElementEnterObservable.add(mesh => {
-            activeBar = <Mesh>mesh;
-
-            this._hoverLabel = this._addLabel(activeBar.metadata.value.toString(), this._elementWidth);
-
-            this._hoverLabel.position = activeBar.position.clone();
-            this._hoverLabel.position.y = activeBar.scaling.y + 0.5;
-            this._hoverLabel.scaling.x = this._elementWidth;            
-        });
-
-        this._onElementOutObserver = this.onElementOutObservable.add(mesh => {
-            activeBar = null;
-
-            if (this._hoverLabel) {
-                this._removeLabel(this._hoverLabel);
-                this._hoverLabel = null;
-            }
-        });
-
         this._glowLayer.customEmissiveColorSelector = (mesh, subMesh, material, result) => {
-            if (mesh === activeBar) {
+            if (mesh === this._activeBar) {
                 let chartColor = this._dataSource!.color.scale(0.75);
                 result.set(chartColor.r, chartColor.g, chartColor.b, 1.0);
             } else {
@@ -258,6 +264,30 @@ export abstract class Chart {
             this.onPickedPointChangedObservable.notifyObservers(pi.pickInfo.pickedPoint);
         });
 
+        this._onElementEnterObserver = this.onElementEnterObservable.add(mesh => {
+            this._activeBar = <Mesh>mesh;
+
+            this._hoverLabel = this._addLabel(this._activeBar.metadata.value.toString(), this._elementWidth);
+
+            this._hoverLabel.position = this._activeBar.position.clone();
+            this._hoverLabel.position.y = this._activeBar.scaling.y + 1.0;
+            this._hoverLabel.scaling.x = this._elementWidth;     
+            
+            if (this.updateHoverLabel) {
+                this.updateHoverLabel(this._hoverLabel);
+            }
+        });
+
+        this._onElementOutObserver = this.onElementOutObservable.add(mesh => {
+            this._activeBar = null;
+
+            if (this._hoverLabel) {
+                this._removeLabel(this._hoverLabel);
+                this._hoverLabel = null;
+            }
+        });
+
+
         this.glowHover = true;
     }
 
@@ -366,6 +396,16 @@ export abstract class Chart {
 
         this.labelCreationFunction = null;
 
+        if (this._onElementEnterObserver) {
+            this.onElementEnterObservable.remove(this._onElementEnterObserver);
+            this._onElementEnterObserver = null;
+        }
+
+        if (this._onElementOutObserver) {
+            this.onElementOutObservable.remove(this._onElementOutObserver);
+            this._onElementOutObserver = null;
+        }         
+
         if (this._pointerObserver) {
             this._scene.onPointerObservable.remove(this._pointerObserver);
             this._pointerObserver = null;

gui/src/3D/charting/mapGraph.ts

@@ -1,5 +1,6 @@
 import { Chart } from ".";
-import { Engine, Scene, Nullable, Mesh, Animation, StandardMaterial, Texture, Matrix } from "babylonjs";
+import { Engine, Scene, Nullable, Mesh, Animation, Texture, Matrix, Observer, Vector3, Material } from "babylonjs";
+import { FluentMaterial } from "../materials";
 
 /** 
  * Class used to render bar graphs 
@@ -10,8 +11,58 @@ export class MapGraph extends Chart {
     private _cylinderMeshes: Nullable<Array<Mesh>>;
     private _maxCylinderHeight = 10;
     private _worldMap: Nullable<Mesh>;
-    private _mercatorMaterial: Nullable<StandardMaterial>;
+    private _mercatorMaterial: Nullable<FluentMaterial>;
     private _worldMapSize = 40;   
+    private _cylinderTesselation = 16;
+    private _xOffset = 0;
+    private _yOffset = 0;
+    private _worldMapPickedPointObserver: Nullable<Observer<Vector3>>;  
+
+    /** Gets or sets the offset (in world unit) on X axis to apply to all elements */
+    public get xOffset(): number {
+        return this._xOffset;
+    }
+
+    public set xOffset(value: number) {
+        if (this._xOffset === value) {
+            return;
+        }
+
+        this._xOffset = value;
+
+        this.refresh();
+    }    
+    
+    /** Gets or sets the offset (in world unit) on Y axis to apply to all elements */
+    public get yOffset(): number {
+        return this._yOffset;
+    }
+
+    public set yOffset(value: number) {
+        if (this._yOffset === value) {
+            return;
+        }
+
+        this._yOffset = value;
+
+        this.refresh();
+    }       
+
+    /** Gets or sets the tesselation used to build the cylinders */
+    public get cylinderTesselation(): number {
+        return this._cylinderTesselation;
+    }
+
+    public set cylinderTesselation(value: number) {
+        if (this._cylinderTesselation === value) {
+            return;
+        }
+
+        this._cylinderTesselation = value;
+        this._clean();
+
+        this.refresh();
+    }        
 
     
     /** Gets or sets the size of the world map (this will define the width) */
@@ -28,6 +79,52 @@ export class MapGraph extends Chart {
 
         this.refresh();
     }    
+
+    public updateHoverLabel = (meshLabel: Mesh) => {
+        if (!this.labelDimension || !this.displayLabels) {
+            return;
+        }
+
+        meshLabel.position.y += 1.5;
+    }
+
+    /**
+     * Gets the material used to render the world map
+     */
+    public get worldMapMaterial(): Nullable<Material> {
+        return this._mercatorMaterial;
+    }
+
+    /** Sets the texture url to use for the world map */
+    public set worldMapUrl(value: string) {
+        const scene = this._scene;
+        if (!this._mercatorMaterial) {
+            this._mercatorMaterial = new FluentMaterial("WorldMap", scene!);
+    
+            this._mercatorMaterial.backFaceCulling = false;
+    
+            this._mercatorMaterial.renderHoverLight = true;
+            this._mercatorMaterial.hoverRadius = 3;
+    
+            this._worldMapPickedPointObserver = this.onPickedPointChangedObservable.add(pickedPoint => {
+                if (pickedPoint) {
+                    this._mercatorMaterial!.hoverPosition = pickedPoint;
+                    this._mercatorMaterial!.hoverColor.a = 1.0;
+                } else {
+                    this._mercatorMaterial!.hoverColor.a = 0;
+                }
+            });
+        }
+
+        if (this._mercatorMaterial.albedoTexture) {
+            this._mercatorMaterial.albedoTexture.dispose();
+        }
+
+        const texture = new Texture(value, scene, false, true, Texture.LINEAR_LINEAR_MIPLINEAR, () => {
+            this.refresh();
+        });
+        this._mercatorMaterial.albedoTexture = texture;
+    }
     
     /**
      * Creates a new MapGraph
@@ -37,23 +134,18 @@ export class MapGraph extends Chart {
     constructor(name: string, mapUrl: string, scene: Nullable<Scene> = Engine.LastCreatedScene) {
         super(name, scene);
 
-        this._mercatorMaterial = new StandardMaterial("WorldMap", scene!);
-        this._mercatorMaterial.emissiveTexture = new Texture(mapUrl, scene, false, true, Texture.LINEAR_LINEAR_MIPLINEAR, () => {
-            this.refresh();
-        });
-        this._mercatorMaterial.disableLighting = true;
-        this._mercatorMaterial.backFaceCulling = false;
+        this.worldMapUrl = mapUrl;
     }
 
     protected _createCylinderMesh(name: string, scene: Scene): Mesh {
-        var cylinder = Mesh.CreateCylinder(name, 1, 1, 1, 16, 1, scene);
+        var cylinder = Mesh.CreateCylinder(name, 1, 1, 1, this._cylinderTesselation, 1, scene);
         cylinder.setPivotMatrix(Matrix.Translation(0, 0.5, 0), false);
 
         return cylinder;
     }
 
     public refresh(): MapGraph {
-        if (this._blockRefresh || !this._mercatorMaterial || !this._mercatorMaterial.emissiveTexture!.isReady()) {
+        if (this._blockRefresh || !this._mercatorMaterial || !this._mercatorMaterial.albedoTexture!.isReady()) {
             return this;
         }
 
@@ -89,8 +181,10 @@ export class MapGraph extends Chart {
         });
 
         let ratio = this._maxCylinderHeight / (max - min);     
+
+        this._removeLabels();
         
-        const worldMaptextureSize = this._mercatorMaterial.emissiveTexture!.getSize();
+        const worldMaptextureSize = this._mercatorMaterial.albedoTexture!.getSize();
         const worldMapWidth = this._worldMapSize;
         const worldMapHeight = worldMapWidth * worldMaptextureSize.height / worldMaptextureSize.width;
 
@@ -101,6 +195,7 @@ export class MapGraph extends Chart {
         this._worldMap = Mesh.CreateGround("WorldMap", worldMapWidth, worldMapHeight, 1, scene);
         this._worldMap.parent = this._rootNode;
         this._worldMap.material = this._mercatorMaterial;
+        this._worldMap.enablePointerMoveEvents = true;
 
         // Default material
         if (!this._defaultMaterial) {
@@ -133,12 +228,21 @@ export class MapGraph extends Chart {
             const latRad = latitude * Math.PI / 180;
             const mercN = Math.log(Math.tan(Math.PI / 4 + latRad / 2));
             const z = worldMapWidth * mercN / (2 * Math.PI);
-            cylinderMesh.position.set(x, 0, z);
+            cylinderMesh.position.set(x + this._xOffset, 0.01, z + this._yOffset);
 
             var easing = new BABYLON.CircleEase();
             Animation.CreateAndStartAnimation("entryScale", cylinderMesh, "scaling.y", 30, 30, currentScalingYState, entry.value * ratio, 0, easing);
 
             this.onElementCreatedObservable.notifyObservers(cylinderMesh);
+
+            // Label
+            if (!this.labelDimension || !this.displayLabels) {
+                return;
+            }
+
+            let label = this._addLabel(entry[this.labelDimension], this._elementWidth);
+            label.position = cylinderMesh.position.clone();
+            Animation.CreateAndStartAnimation("labelScale", label, "position.y", 30, 30, currentScalingYState + 1.0, entry.value * ratio + 1.0, 0, easing);
         });
 
         this.onRefreshObservable.notifyObservers(this);
@@ -151,4 +255,12 @@ export class MapGraph extends Chart {
         this._worldMap = null;
         this._cylinderMeshes = null;
     }
+
+    public dispose() {
+        super.dispose();
+        if (this._worldMapPickedPointObserver) {
+            this.onPickedPointChangedObservable.remove(this._worldMapPickedPointObserver);
+            this._worldMapPickedPointObserver = null;    
+        }
+    }
 }

gui/src/3D/materials/fluentMaterial.ts

@@ -1,4 +1,4 @@
-import { MaterialDefines, PushMaterial, serialize, expandToProperty, serializeAsColor3, Color3, serializeAsColor4, Color4, serializeAsVector3, Vector3, Scene, Nullable, BaseTexture, AbstractMesh, SubMesh, VertexBuffer, MaterialHelper, EffectCreationOptions, Matrix, Mesh, Tmp, SerializationHelper } from "babylonjs";
+import { MaterialDefines, PushMaterial, serialize, expandToProperty, serializeAsColor3, Color3, serializeAsColor4, Color4, serializeAsVector3, Vector3, Scene, Nullable, BaseTexture, AbstractMesh, SubMesh, VertexBuffer, MaterialHelper, EffectCreationOptions, Matrix, Mesh, Tmp, SerializationHelper, serializeAsTexture } from "babylonjs";
 
 import { registerShader } from "./shaders/fluent";
 
@@ -10,6 +10,7 @@ export class FluentMaterialDefines extends MaterialDefines {
     public INNERGLOW = false;
     public BORDER = false;
     public HOVERLIGHT = false;
+    public TEXTURE = false;
 
     constructor() {
         super();
@@ -97,6 +98,13 @@ export class FluentMaterial extends PushMaterial {
     @serializeAsVector3()
     public hoverPosition = Vector3.Zero();
 
+    @serializeAsTexture("albedoTexture")
+    private _albedoTexture: Nullable<BaseTexture>;
+
+    /** Gets or sets the texture to use for albedo color */
+    @expandToProperty("_markAllSubMeshesAsTexturesAndMiscDirty")
+    public albedoTexture: Nullable<BaseTexture>;    
+
     /**
      * Creates a new Fluent material
      * @param name defines the name of the material
@@ -141,6 +149,16 @@ export class FluentMaterial extends PushMaterial {
             defines.INNERGLOW = this.innerGlowColorIntensity > 0;
             defines.BORDER = this.renderBorders;
             defines.HOVERLIGHT = this.renderHoverLight;
+
+            if (this._albedoTexture) {
+                if (!this._albedoTexture.isReadyOrNotBlocking()) {
+                    return false;
+                } else {
+                    defines.TEXTURE = true;
+                }
+            } else {
+                defines.TEXTURE = false;
+            }
         }
 
         var engine = scene.getEngine();
@@ -160,7 +178,7 @@ export class FluentMaterial extends PushMaterial {
                 "hoverColor", "hoverPosition", "hoverRadius"
             ];
 
-            var samplers = new Array<String>();
+            var samplers = ["albedoSampler"];
             var uniformBuffers = new Array<string>();
 
             MaterialHelper.PrepareUniformsAndSamplersList(<EffectCreationOptions>{
@@ -237,6 +255,10 @@ export class FluentMaterial extends PushMaterial {
                 this._activeEffect.setFloat("hoverRadius", this.hoverRadius);
                 this._activeEffect.setVector3("hoverPosition", this.hoverPosition);
             }
+
+            if (defines.TEXTURE) {
+                this._activeEffect.setTexture("albedoSampler", this._albedoTexture)
+            }
         }
 
         this._afterBind(mesh, this._activeEffect);

gui/src/3D/materials/shaders/fluent.fragment.fx

@@ -22,11 +22,19 @@ uniform vec4 hoverColor;
 uniform float hoverRadius;
 #endif
 
+#ifdef TEXTURE
+uniform sampler2D albedoSampler;
+#endif
+
 void main(void) {
 
 	vec3 albedo = albedoColor.rgb;
 	float alpha = albedoColor.a;
 
+#ifdef TEXTURE
+	albedo = texture(albedoSampler, vUV).rgb;
+#endif
+
 #ifdef HOVERLIGHT
 	float pointToHover = (1.0 - clamp(length(hoverPosition - worldPosition) / hoverRadius, 0., 1.)) * hoverColor.a;
 	albedo = clamp(albedo + hoverColor.rgb * pointToHover, 0., 1.);

package.json

@@ -9,7 +9,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "3.3.0-alpha.14",
+    "version": "3.3.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

src/Engine/babylon.engine.ts

@@ -359,17 +359,57 @@
         public static readonly TEXTUREFORMAT_RGB = 4;
         /** RGBA */
         public static readonly TEXTUREFORMAT_RGBA = 5;
-        /** R */
+        /** RED */
+        public static readonly TEXTUREFORMAT_RED = 6;
+        /** RED (2nd reference) */
         public static readonly TEXTUREFORMAT_R = 6;
         /** RG */
         public static readonly TEXTUREFORMAT_RG = 7;
-
-        /** UNSIGNED_INT */
+        /** RED_INTEGER */
+        public static readonly TEXTUREFORMAT_RED_INTEGER = 8;
+        /** RED_INTEGER (2nd reference) */
+        public static readonly TEXTUREFORMAT_R_INTEGER = 8;
+        /** RG_INTEGER */
+        public static readonly TEXTUREFORMAT_RG_INTEGER = 9;
+        /** RGB_INTEGER */
+        public static readonly TEXTUREFORMAT_RGB_INTEGER = 10;
+        /** RGBA_INTEGER */
+        public static readonly TEXTUREFORMAT_RGBA_INTEGER = 11;
+
+        /** UNSIGNED_BYTE */
+        public static readonly TEXTURETYPE_UNSIGNED_BYTE = 0;
+        /** UNSIGNED_BYTE (2nd reference) */
         public static readonly TEXTURETYPE_UNSIGNED_INT = 0;
         /** FLOAT */
         public static readonly TEXTURETYPE_FLOAT = 1;
         /** HALF_FLOAT */
         public static readonly TEXTURETYPE_HALF_FLOAT = 2;
+        /** BYTE */
+        public static readonly TEXTURETYPE_BYTE = 3;
+        /** SHORT */
+        public static readonly TEXTURETYPE_SHORT = 4;
+        /** UNSIGNED_SHORT */
+        public static readonly TEXTURETYPE_UNSIGNED_SHORT = 5;
+        /** INT */
+        public static readonly TEXTURETYPE_INT = 6;
+        /** UNSIGNED_INT */
+        public static readonly TEXTURETYPE_UNSIGNED_INTEGER = 7;
+        /** UNSIGNED_SHORT_4_4_4_4 */
+        public static readonly TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4 = 8;
+        /** UNSIGNED_SHORT_5_5_5_1 */
+        public static readonly TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1 = 9;
+        /** UNSIGNED_SHORT_5_6_5 */
+        public static readonly TEXTURETYPE_UNSIGNED_SHORT_5_6_5 = 10;
+        /** UNSIGNED_INT_2_10_10_10_REV */
+        public static readonly TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV = 11;
+        /** UNSIGNED_INT_24_8 */
+        public static readonly TEXTURETYPE_UNSIGNED_INT_24_8 = 12;
+        /** UNSIGNED_INT_10F_11F_11F_REV */
+        public static readonly TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV = 13;
+        /** UNSIGNED_INT_5_9_9_9_REV */
+        public static readonly TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV = 14;
+        /** FLOAT_32_UNSIGNED_INT_24_8_REV */
+        public static readonly TEXTURETYPE_FLOAT_32_UNSIGNED_INT_24_8_REV = 15;
 
         /** nearest is mag = nearest and min = nearest and mip = linear */
         public static readonly TEXTURE_NEAREST_SAMPLINGMODE = 1; 
@@ -435,7 +475,7 @@
          * Returns the current version of the framework
          */
         public static get Version(): string {
-            return "3.3.0-alpha.14";
+            return "3.3.0-alpha.15";
         }
 
         // Updatable statics so stick with vars here
@@ -4842,6 +4882,7 @@
             texture.generateMipMaps = fullOptions.generateMipMaps ? true : false;
             texture.samplingMode = fullOptions.samplingMode;
             texture.type = fullOptions.type;
+            texture.format = fullOptions.format;
             texture._generateDepthBuffer = fullOptions.generateDepthBuffer;
             texture._generateStencilBuffer = fullOptions.generateStencilBuffer ? true : false;
 
@@ -5345,6 +5386,7 @@
             texture.generateMipMaps = fullOptions.generateMipMaps;
             texture.samplingMode = fullOptions.samplingMode;
             texture.type = fullOptions.type;
+            texture.format = fullOptions.format;
             texture._generateDepthBuffer = fullOptions.generateDepthBuffer;
             texture._generateStencilBuffer = fullOptions.generateStencilBuffer;
 
@@ -7019,12 +7061,51 @@
 
         /** @hidden */
         public _getWebGLTextureType(type: number): number {
-            if (type === Engine.TEXTURETYPE_FLOAT) {
-                return this._gl.FLOAT;
-            }
-            else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
-                // Add Half Float Constant.
-                return this._gl.HALF_FLOAT_OES;
+            if (this._webGLVersion === 1) {
+                switch (type) {
+                    case Engine.TEXTURETYPE_FLOAT:
+                        return this._gl.FLOAT;
+                    case Engine.TEXTURETYPE_HALF_FLOAT:
+                        return this._gl.HALF_FLOAT_OES;
+                    case Engine.TEXTURETYPE_UNSIGNED_BYTE:
+                        return this._gl.UNSIGNED_BYTE;
+                }
+                return this._gl.UNSIGNED_BYTE;
+            }
+
+            switch (type) {
+                case Engine.TEXTURETYPE_BYTE:
+                    return this._gl.BYTE;
+                case Engine.TEXTURETYPE_UNSIGNED_BYTE:
+                    return this._gl.UNSIGNED_BYTE;
+                case Engine.TEXTURETYPE_SHORT:
+                    return this._gl.SHORT;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT:
+                    return this._gl.UNSIGNED_SHORT;
+                case Engine.TEXTURETYPE_INT:
+                    return this._gl.INT;
+                case Engine.TEXTURETYPE_UNSIGNED_INTEGER: // Refers to UNSIGNED_INT
+                    return this._gl.UNSIGNED_INT;
+                case Engine.TEXTURETYPE_FLOAT:
+                    return this._gl.FLOAT;
+                case Engine.TEXTURETYPE_HALF_FLOAT:
+                    return this._gl.HALF_FLOAT;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4:
+                    return this._gl.UNSIGNED_SHORT_4_4_4_4;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1:
+                    return this._gl.UNSIGNED_SHORT_5_5_5_1;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_5_6_5:
+                    return this._gl.UNSIGNED_SHORT_5_6_5;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV:
+                    return this._gl.UNSIGNED_INT_2_10_10_10_REV;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_24_8:
+                    return this._gl.UNSIGNED_INT_24_8;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV:
+                    return this._gl.UNSIGNED_INT_10F_11F_11F_REV;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV:
+                    return this._gl.UNSIGNED_INT_5_9_9_9_REV;
+                case Engine.TEXTURETYPE_FLOAT_32_UNSIGNED_INT_24_8_REV:
+                    return this._gl.FLOAT_32_UNSIGNED_INT_24_8_REV;
             }
 
             return this._gl.UNSIGNED_BYTE;
@@ -7032,6 +7113,7 @@
 
         private _getInternalFormat(format: number): number {
             var internalFormat = this._gl.RGBA;
+
             switch (format) {
                 case Engine.TEXTUREFORMAT_ALPHA:
                     internalFormat = this._gl.ALPHA;
@@ -7042,18 +7124,35 @@
                 case Engine.TEXTUREFORMAT_LUMINANCE_ALPHA:
                     internalFormat = this._gl.LUMINANCE_ALPHA;
                     break;
+                case Engine.TEXTUREFORMAT_RED:
+                    internalFormat = this._gl.RED;
+                    break;
+                case Engine.TEXTUREFORMAT_RG:
+                    internalFormat = this._gl.RG;
+                    break;
                 case Engine.TEXTUREFORMAT_RGB:
                     internalFormat = this._gl.RGB;
                     break;
                 case Engine.TEXTUREFORMAT_RGBA:
                     internalFormat = this._gl.RGBA;
                     break;
-                case Engine.TEXTUREFORMAT_R:
-                    internalFormat = this._gl.RED;
-                    break;       
-                case Engine.TEXTUREFORMAT_RG:
-                    internalFormat = this._gl.RG;
-                    break;                                    
+            }
+
+            if (this._webGLVersion > 1) {
+                switch (format) {
+                    case Engine.TEXTUREFORMAT_RED_INTEGER:
+                        internalFormat = this._gl.RED_INTEGER;
+                        break;
+                    case Engine.TEXTUREFORMAT_RG_INTEGER:
+                        internalFormat = this._gl.RG_INTEGER;
+                        break;
+                    case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                        internalFormat = this._gl.RGB_INTEGER;
+                        break;
+                    case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                        internalFormat = this._gl.RGBA_INTEGER;
+                        break;
+                }
             }
 
             return internalFormat;
@@ -7064,58 +7163,158 @@
             if (this._webGLVersion === 1) {
                 if (format !== undefined) {
                     switch(format) {
+                        case Engine.TEXTUREFORMAT_ALPHA:
+                            return this._gl.ALPHA; 
                         case Engine.TEXTUREFORMAT_LUMINANCE:
                             return this._gl.LUMINANCE;
-                        case Engine.TEXTUREFORMAT_ALPHA:
-                            return this._gl.ALPHA;     
+                        case Engine.TEXTUREFORMAT_LUMINANCE_ALPHA:
+                            return this._gl.LUMINANCE_ALPHA;
                     }                    
                 }
                 return this._gl.RGBA;
             }
 
-            if (type === Engine.TEXTURETYPE_FLOAT) {
-                if (format !== undefined) {
-                    switch(format) {
-                        case Engine.TEXTUREFORMAT_R:
-                            return this._gl.R32F;
+            switch (type) {
+                case Engine.TEXTURETYPE_BYTE:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED:
+                            return this._gl.R8_SNORM;
                         case Engine.TEXTUREFORMAT_RG:
-                            return this._gl.RG32F;
-                            case Engine.TEXTUREFORMAT_RGB:
-                            return this._gl.RGB32F;
-                    }                    
-                }
-                return this._gl.RGBA32F;
-            }
-
-            if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
-                if (format) {
-                    switch(format) {
-                        case Engine.TEXTUREFORMAT_R:
+                            return this._gl.RG8_SNORM;
+                        case Engine.TEXTUREFORMAT_RGB:
+                            return this._gl.RGB8_SNORM;
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R8I;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG8I;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB8I;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA8I;
+                        default:
+                            return this._gl.RGBA8_SNORM;
+                    }
+                case Engine.TEXTURETYPE_UNSIGNED_BYTE:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED:
+                            return this._gl.R8;
+                        case Engine.TEXTUREFORMAT_RG:
+                            return this._gl.RG8;
+                        case Engine.TEXTUREFORMAT_RGB:
+                            return this._gl.RGB8; // By default. Other possibilities are RGB565, SRGB8.
+                        case Engine.TEXTUREFORMAT_RGBA:
+                            return this._gl.RGBA8; // By default. Other possibilities are RGB5_A1, RGBA4, SRGB8_ALPHA8.
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R8UI;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG8UI;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB8UI;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA8UI;
+                        default:
+                            return this._gl.RGBA8;
+                        }
+                case Engine.TEXTURETYPE_SHORT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R16I;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG16I;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB16I;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA16I;
+                        default:
+                            return this._gl.RGBA16I;
+                    }
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R16UI;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG16UI;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB16UI;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA16UI;
+                        default:
+                            return this._gl.RGBA16UI;
+                    }
+                case Engine.TEXTURETYPE_INT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R32I;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG32I;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB32I;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA32I;
+                        default:
+                            return this._gl.RGBA32I;
+                    }
+                case Engine.TEXTURETYPE_UNSIGNED_INTEGER: // Refers to UNSIGNED_INT
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R32UI;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG32UI;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB32UI;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA32UI;
+                        default:
+                            return this._gl.RGBA32UI;
+                    }
+                case Engine.TEXTURETYPE_FLOAT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED:
+                            return this._gl.R32F; // By default. Other possibility is R16F.
+                        case Engine.TEXTUREFORMAT_RG:
+                            return this._gl.RG32F; // By default. Other possibility is RG16F.
+                        case Engine.TEXTUREFORMAT_RGB:
+                            return this._gl.RGB32F; // By default. Other possibilities are RGB16F, R11F_G11F_B10F, RGB9_E5.
+                        case Engine.TEXTUREFORMAT_RGBA:
+                            return this._gl.RGBA32F; // By default. Other possibility is RGBA16F.
+                        default:
+                            return this._gl.RGBA32F;
+                    }
+                case Engine.TEXTURETYPE_HALF_FLOAT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED:
                             return this._gl.R16F;
                         case Engine.TEXTUREFORMAT_RG:
                             return this._gl.RG16F;
-                            case Engine.TEXTUREFORMAT_RGB:
-                            return this._gl.RGB16F;
-                    }                    
-                }
-                return this._gl.RGBA16F;
+                        case Engine.TEXTUREFORMAT_RGB:
+                            return this._gl.RGB16F; // By default. Other possibilities are R11F_G11F_B10F, RGB9_E5.
+                        case Engine.TEXTUREFORMAT_RGBA:
+                            return this._gl.RGBA16F;
+                        default:
+                            return this._gl.RGBA16F;
+                    }
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_5_6_5:
+                    return this._gl.RGB565;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV:
+                    return this._gl.R11F_G11F_B10F;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV:
+                    return this._gl.RGB9_E5;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4:
+                    return this._gl.RGBA4;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1:
+                    return this._gl.RGB5_A1;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RGBA:
+                            return this._gl.RGB10_A2; // By default. Other possibility is RGB5_A1.
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGB10_A2UI;
+                        default:
+                            return this._gl.RGB10_A2;
+                    }
             }
 
-            if (format !== undefined) {
-                switch(format) {
-                    case Engine.TEXTUREFORMAT_LUMINANCE:
-                        return this._gl.LUMINANCE;
-                    case Engine.TEXTUREFORMAT_RGB:
-                        return this._gl.RGB;
-                    case Engine.TEXTUREFORMAT_R:
-                        return this._gl.R8;
-                    case Engine.TEXTUREFORMAT_RG:
-                        return this._gl.RG8;
-                    case Engine.TEXTUREFORMAT_ALPHA:
-                        return this._gl.ALPHA;
-                }
-            }
-            return this._gl.RGBA;
+            return this._gl.RGBA8;
         };
 
         /** @hidden */

src/Engine/babylon.webgl2.ts

@@ -13,6 +13,47 @@ interface WebGLRenderingContext {
     readonly COMPARE_REF_TO_TEXTURE: number;
     readonly TEXTURE_WRAP_R: number;
     readonly HALF_FLOAT: number;
+    readonly RGB8: number;
+    readonly RED_INTEGER: number;
+    readonly RG_INTEGER: number;
+    readonly RGB_INTEGER: number;
+    readonly RGBA_INTEGER: number;
+    readonly R8_SNORM: number;
+    readonly RG8_SNORM: number;
+    readonly RGB8_SNORM: number;
+    readonly RGBA8_SNORM: number;
+    readonly R8I: number;
+    readonly RG8I: number;
+    readonly RGB8I: number;
+    readonly RGBA8I: number;
+    readonly R8UI: number;
+    readonly RG8UI: number;
+    readonly RGB8UI: number;
+    readonly RGBA8UI: number;
+    readonly R16I: number;
+    readonly RG16I: number;
+    readonly RGB16I: number;
+    readonly RGBA16I: number;
+    readonly R16UI: number;
+    readonly RG16UI: number;
+    readonly RGB16UI: number;
+    readonly RGBA16UI: number;
+    readonly R32I: number;
+    readonly RG32I: number;
+    readonly RGB32I: number;
+    readonly RGBA32I: number;
+    readonly R32UI: number;
+    readonly RG32UI: number;
+    readonly RGB32UI: number;
+    readonly RGBA32UI: number;
+    readonly RGB10_A2UI: number;
+    readonly R11F_G11F_B10F: number;
+    readonly RGB9_E5: number;
+    readonly RGB10_A2: number;
+    readonly UNSIGNED_INT_2_10_10_10_REV: number;
+    readonly UNSIGNED_INT_10F_11F_11F_REV: number;
+    readonly UNSIGNED_INT_5_9_9_9_REV: number;
+    readonly FLOAT_32_UNSIGNED_INT_24_8_REV: number;
 
     texImage3D(target: number, level: number, internalformat: number, width: number, height: number, depth: number, border: number, format: number, type: number, pixels: ArrayBufferView | null): void;
     texImage3D(target: number, level: number, internalformat: number, width: number, height: number, depth: number, border: number, format: number, type: number, pixels: ArrayBufferView, offset: number): void;
@@ -29,6 +70,11 @@ interface WebGLRenderingContext {
     beginTransformFeedback(primitiveMode: number): void;
     endTransformFeedback(): void;
     transformFeedbackVaryings(program: WebGLProgram, varyings: string[], bufferMode: number): void;
+
+    clearBufferfv(buffer: number, drawbuffer: number, values: ArrayBufferView, srcOffset: number | null): void;
+    clearBufferiv(buffer: number, drawbuffer: number, values: ArrayBufferView, srcOffset: number | null): void;
+    clearBufferuiv(buffer: number, drawbuffer: number, values: ArrayBufferView, srcOffset: number | null): void;
+    clearBufferfi(buffer: number, drawbuffer: number, depth: number, stencil: number): void;
 }
 
 interface ImageBitmap {

src/Materials/Textures/Loaders/babylon.ddsTextureLoader.ts

@@ -112,7 +112,7 @@ module BABYLON {
             var info = DDSTools.GetDDSInfo(data);
 
             var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && texture.generateMipMaps && ((info.width >> (info.mipmapCount - 1)) === 1);
-            callback(info.width, info.height, !loadMipmap, info.isFourCC, () => {
+            callback(info.width, info.height, loadMipmap, info.isFourCC, () => {
                 DDSTools.UploadDDSLevels(texture.getEngine(), texture, data, info, loadMipmap, 1);
             });
         }