Merge remote-tracking branch 'upstream/master' into gltf-logging

Playground/css/index.css

@@ -64,7 +64,7 @@ body {
 }
 .wrapper {
     height: calc(100% - 40px - 30px); /* nvabar top and bottom*/
-    width: 100%;
+    width: calc(100%);
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: row;
@@ -118,6 +118,116 @@ body {
     width:5px;
 }      
 
+#exampleList {
+    padding-top: 5px;
+
+    display: none;
+    position: absolute;
+    top: 40px;
+    right: 0;
+    width: 400px;
+    height: calc(100% - 75px);
+    overflow-y: auto;
+
+    border-right: 1px solid #efefef;
+}
+#exampleList #exampleBanner {
+    background-image: url("../css/pattern_ban_1.png");
+    background-repeat: repeat;
+    text-align: center;
+    padding: 10px 0;
+    margin-left: 2px;
+}
+#exampleList #exampleBanner h1 {
+    text-align: center;
+    font-weight: 700;
+    color: #00aeef;
+    font-size: 2em;
+    margin: .67em 0;
+}
+#exampleList .horizontalSeparator {
+    width: 80%;
+    height: 0;
+    display: block;
+    border-top: 1px solid #00aeef;
+    margin: 0 auto 20px auto;
+}
+#exampleList #filterBar {
+    width: 80%;
+    margin-left: 10%;
+}
+#exampleList #filterBarClear {
+    display: none;
+    height: 10px;
+    margin-left: -19px;
+    cursor: pointer;
+}
+#exampleList #noResultsContainer p {
+    width: 100%;
+    text-align: center;
+    font-weight: 300;
+}
+#exampleList .categoryContainer p {
+    margin-left: 5px;
+    font-size: 20px;
+    font-weight: 200;
+    word-wrap: break-word;
+}
+#exampleList .categoryContainer .itemLine {
+    cursor: pointer;
+    background-color: #ebebeb;
+    height: 120px;
+    overflow: hidden;
+    clear: both;
+    margin: 5px;
+    margin-bottom: 10px;
+}
+#exampleList .categoryContainer .itemLine img {
+    display: inline-block;
+    max-height: 100%;
+    max-width: 120px;
+    border: 0;
+}
+#exampleList .categoryContainer .itemLine .itemContent {
+    display: inline-block;
+    width: calc(100% - 125px);
+    height: 100%;
+    vertical-align: top;
+    padding: 5px;
+    box-sizing: border-box;
+}
+#exampleList .categoryContainer .itemLine .itemContent .itemContentLink {
+    height: 100%;
+}
+#exampleList .categoryContainer .itemLine .itemContent .itemContentLink h3 {
+    margin: 0;
+    font-size: 18px;
+    margin-bottom: 5px;
+    text-decoration: none;
+}
+#exampleList .categoryContainer .itemLine .itemContent .itemContentLink p {
+    margin: 0;
+    font-size: 15px;
+    margin-bottom: 3px;
+}
+#exampleList .categoryContainer .itemLine .itemContent .itemLineDocLink {
+    position: relative;
+    bottom: 20px;
+    font-size: 15px;
+    text-decoration: underline;
+    color: #00aeef;
+}
+#exampleList .categoryContainer .itemLine .itemContent .itemLinePGLink {
+    display: none;
+    position: relative;
+    float: right;
+    bottom: 20px;
+    text-align: right;
+    font-size: 15px;
+    text-decoration: underline;
+    color: #00aeef;
+}
+
 .wrapper #jsEditor {
     padding-top:5px;
     height: calc(100% - 10px);

Playground/debug.html

@@ -169,11 +169,7 @@
                 </div>
             </div>
             <div class="button select">
-                <span id="currentScript1600">Scenes</span>
-                <div class="toDisplayBig">
-                    <ul id="scriptsList1600">
-                    </ul>
-                </div>
+                <span class="examplesButton">Examples</span>
             </div>
         </div>
     </div>
@@ -263,11 +259,7 @@
 
         <div class="category right">
             <div class="button select">
-                <span id="currentScript1475">Scenes</span>
-                <div class="toDisplayBig">
-                    <ul id="scriptsList1475">
-                    </ul>
-                </div>
+                <span class="examplesButton">Examples</span>
             </div>
         </div>
     </div>
@@ -350,11 +342,7 @@
 
         <div class="category right">
             <div class="button select">
-                <span id="currentScript1030">Scenes</span>
-                <div class="toDisplayBig">
-                    <ul id="scriptsList1030">
-                    </ul>
-                </div>
+                <span class="examplesButton">Examples</span>
             </div>
         </div>
     </div>
@@ -434,11 +422,7 @@
 
         <div class="category right">
             <div class="button select">
-                <span id="currentScript750">Scenes</span>
-                <div class="toDisplayBig">
-                    <ul id="scriptsList750">
-                    </ul>
-                </div>
+                <span class="examplesButton">Examples</span>
             </div>
         </div>
     </div>
@@ -449,6 +433,14 @@
             <canvas touch-action="none" id="renderCanvas"></canvas>
         </div>
     </div>
+    <div id="exampleList">
+        <div id="exampleBanner">
+            <h1>Examples</h1>
+        </div>
+        <div class="horizontalSeparator"></div>
+        <input id="filterBar" type="text" placeholder="Filter examples...">
+        <img id="filterBarClear" src="http://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+    </div>
 
     <span class="label" id="fpsLabel">FPS</span>
 

Playground/examples/list.json

@@ -0,0 +1,892 @@
+{
+    "examples": [
+        {
+            "title": "Animations",
+            "samples": [
+                {
+                    "title": "Bones 101",
+                    "doc": "https://doc.babylonjs.com/How_To/How_to_use_Bones_and_Skeletons",
+                    "icon": "icons/bones.jpg",
+                    "description": "Create complex animations by using skeletons and bones",
+                    "PGID": "#QY1WYT#0"
+                },                
+                {
+                    "title": "Animation blending",
+                    "doc": "https://doc.babylonjs.com/babylon101/Animations#animation-blending",
+                    "icon": "icons/animation_blending.jpg",
+                    "description": "Blend multiple animations together to move from on animation clip to another",
+                    "PGID": "#BCU1XR#0"
+                },
+                {
+                    "title": "Animation weights",
+                    "doc": "https://doc.babylonjs.com/babylon101/animations#animation-weights",
+                    "icon": "icons/animation_weight.jpg",
+                    "description": "Use weights to blend multiple animations together",
+                    "PGID": "#LL5BIQ#0"
+                },                
+                {
+                    "title": "Animation 101",
+                    "doc": "https://doc.babylonjs.com/babylon101/animations",
+                    "icon": "icons/animations.png", 
+                    "description": "How to add animations",
+                    "PGID": "#QYFDDP#1"
+                },
+                {
+                    "title": "Easing functions",
+                    "doc": "https://doc.babylonjs.com/babylon101/animations#easing-functions",
+                    "icon": "icons/easing_functions.png", 
+                    "description": "Create animations with different easing functions",
+                    "PGID": "#8ZNVGR#0"
+                },
+                {
+                    "title": "Instanced bones",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons",
+                    "icon": "icons/instanced_bones.png", 
+                    "description": "Animated skeletons of people walking",
+                    "PGID": "#0K8EYN#0"
+                },
+                {
+                    "title": "Morph targets",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_morphtargets",
+                    "icon": "icons/morph_targets.jpg", 
+                    "description": "Morph a mesh between multiple targets",
+                    "PGID": "#2JDN66#0"
+                }                         
+            ]
+        },
+        {
+            "title": "Cameras",
+            "samples": [
+                {
+                    "title": "Cameras 101",
+                    "doc": "https://doc.babylonjs.com/babylon101/cameras",
+                    "icon": "icons/cameras.png", 
+                    "description": "Types of cameras in babylonjs",
+                    "PGID": "#1A3M5C#0"
+                },
+                {
+                    "title": "Device orientation camera",
+                    "doc": "https://doc.babylonjs.com/babylon101/cameras#device-orientation-camera",
+                    "icon": "icons/deviceOrientationCamera.jpg",
+                    "description": "Camera that reacts to events such as a mobile device being tilted forward or back",
+                    "PGID": "#12WBC#185"
+                }
+            ]
+        },
+        {
+            "title": "GUI",
+            "samples": [
+                {
+                    "title": "GUI",
+                    "doc": "https://doc.babylonjs.com/how_to/gui",
+                    "icon": "icons/gui.png", 
+                    "description": "Babylons graphical user interface provides sliders, buttons, etc.",
+                    "PGID": "#3VMTI9#0"
+                }
+            ]
+        },
+        {
+            "title": "Interactions & events",
+            "samples": [
+                {
+                    "title": "Picking",
+                    "doc": "https://doc.babylonjs.com/babylon101/picking_collisions",
+                    "icon": "icons/picking.png", 
+                    "description": "Use mouse or touch to pick meshes on the screen",
+                    "PGID": "#NU4F6Y#0"
+                },
+                {
+                    "title": "Actions",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_actions",
+                    "icon": "icons/actions.png", 
+                    "description": "Actions are a simple way to add interactions in your scenes",
+                    "PGID": "#J19GYK#0"
+                },
+                {
+                    "title": "Drag and drop",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_actions",
+                    "icon": "icons/drag_and_drop.png", 
+                    "description": "Move meshes around a scene with a mouse",
+                    "PGID": "#UZ23UH#0"
+                },
+                {
+                    "title": "Pointer events handling",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_actions",
+                    "icon": "icons/pointer_events_handling.png", 
+                    "description": "Handle pointer input",
+                    "PGID": "#C245A1#0"
+                }
+            ]
+        },
+        {
+            "title": "Lights",
+            "samples": [
+                {
+                    "title": "Light projected texture",
+                    "doc": "https://doc.babylonjs.com/babylon101/lights#projection-texture",
+                    "icon": "icons/projected_texture.jpg",
+                    "description": "Project a texture from a spot light",
+                    "PGID": "#CQNGRK#0"
+                }, 
+                {
+                    "title": "Lights 101",
+                    "doc": "https://doc.babylonjs.com/babylon101/lights",
+                    "icon": "icons/lights.png", 
+                    "description": "Add lights to a scene",
+                    "PGID": "#AQRDKW#0"
+                }, 
+                {
+                    "title": "Simultaneous lights",
+                    "doc": "https://doc.babylonjs.com/babylon101/lights",
+                    "icon": "icons/sim_lights.jpg", 
+                    "description": "Use multiple lights on a single mesh",
+                    "PGID": "#ZU5TKG#0"
+                },
+                {
+                    "title": "Point light",
+                    "doc": "https://doc.babylonjs.com/babylon101/lights#the-point-light",
+                    "icon": "icons/pointLight.jpg",
+                    "description": "Light emitting from a single point",
+                    "PGID": "#20OAV9#0"
+                },
+                {
+                    "title": "Directional light",
+                    "doc": "https://doc.babylonjs.com/babylon101/lights#the-directional-light",
+                    "icon": "icons/directionalLight.jpg",
+                    "description": "The light is emitted from everywhere in the specified direction, and has an infinite range",
+                    "PGID": "#20OAV9#1"
+                },
+                {
+                    "title": "Spot lgiht",
+                    "doc": "https://doc.babylonjs.com/babylon101/lights#the-spot-light",
+                    "icon": "icons/spotLight.jpg",
+                    "description": "Defines a cone of light pointing in a direction",
+                    "PGID": "#20OAV9#3"
+                },
+                {
+                    "title": "Hemispheric light",
+                    "doc": "https://doc.babylonjs.com/babylon101/lights#the-hemispheric-light",
+                    "icon": "icons/hemLight.jpg",
+                    "description": "Simulate an ambient environment light",
+                    "PGID": "#20OAV9#5"
+                }      
+            ]
+        },
+        {
+            "title": "Loaders",
+            "samples": [
+                {
+                    "title": "Cornell box",
+                    "doc": "https://doc.babylonjs.com/how_to/load_from_any_file_type",
+                    "icon": "icons/cornell.jpg",
+                    "description": "Load a glTF file and setup the environment",
+                    "PGID": "#J5E230#54"
+                },
+                {
+                    "title": "Import meshes",
+                    "doc": "https://doc.babylonjs.com/how_to/load_from_any_file_type",
+                    "icon": "icons/import_meshes.png", 
+                    "description": "Load a mesh from a file and add it to the scene",
+                    "PGID": "#UKNERM#0"
+                },
+                {
+                    "title": "Load glTF model",
+                    "doc": "https://doc.babylonjs.com/how_to/load_from_any_file_type",
+                    "icon": "icons/load_gltf.jpg", 
+                    "description": "Show how to easily load a glTF model",
+                    "PGID": "#PN1NNI#0"
+                },
+                {
+                    "title": "Assets manager",
+                    "doc": "http://localhost:8080/How_To/How_to_use_AssetsManager",
+                    "icon": "icons/assets_manager.jpg", 
+                    "description": "Use AssetsManager to load multiple assets in a centralized way",
+                    "PGID": "#Y7XMAR#0"
+                },
+                {
+                    "title": "Asset container",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_assetcontainer",
+                    "icon": "icons/assetContainer.jpg",
+                    "description": "To add and remove assets from a scene an AssetContainer can be used.",
+                    "PGID": "#17MXFZ#0"
+                }                 
+            ]
+        },         
+        {
+            "title": "Materials",
+            "samples": [   
+                {
+                    "title": "MultiMaterial",
+                    "doc": "https://doc.babylonjs.com/how_to/multi_materials",
+                    "icon": "icons/multi_material.jpg",
+                    "description": "Apply multiple materials to a single mesh using MultiMaterial class",
+                    "PGID": "#2Q4S2S#0"
+                },                   
+                {
+                    "title": "ShaderMaterial",
+                    "doc": "https://doc.babylonjs.com/how_to/shader_material",
+                    "icon": "icons/custom_shader.jpg",
+                    "description": "Use ShaderMaterial to create advanced effects",
+                    "PGID": "#ATDL99#0"
+                },                 
+                {
+                    "title": "X-ray material with Fresnel",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_fresnelparameters",
+                    "icon": "icons/xRayFresnel.jpg",
+                    "description": "Use fresnel parameters to simulate an x-ray effect",
+                    "PGID": "#GK7FK#0"
+                },                         
+                {
+                    "title": "Materials",
+                    "doc": "https://doc.babylonjs.com/babylon101/materials",
+                    "icon": "icons/materials.png", 
+                    "description": "Create and add materials to a mesh",
+                    "PGID": "#DXARSP#0"
+                },
+                {
+                    "title": "PBR",
+                    "doc": "https://doc.babylonjs.com/how_to/physically_based_rendering",
+                    "icon": "icons/pbr.png", 
+                    "description": "Physically based rendering materials",
+                    "PGID": "#8MGKWK#0"
+                },
+                {
+                    "title": "Glossiness and roughness",
+                    "doc": "https://doc.babylonjs.com/api/classes/babylon.standardmaterial",
+                    "icon": "icons/glossinessAndRoughness.jpg",
+                    "description": "Demonstration of glossiness and rouphness features of standard material",
+                    "PGID": "#RNBKQ#8"
+                },
+                {
+                    "title": "Cell Shading",
+                    "doc": "https://doc.babylonjs.com/extensions/cell",
+                    "icon": "icons/cell_shading.jpg", 
+                    "description": "Cell shading material",
+                    "PGID": "#0ZB1A3#1"
+                },
+                {
+                    "title": "Fur",
+                    "doc": "https://doc.babylonjs.com/extensions/fur",
+                    "icon": "icons/fur.jpg", 
+                    "description": "Fur material",
+                    "PGID": "#VABI8A#0"
+                },
+                {
+                    "title": "Fire",
+                    "doc": "https://doc.babylonjs.com/extensions/Fire",
+                    "icon": "icons/fire.jpg", 
+                    "description": "Fire material",
+                    "PGID": "#LR4YHT#0"
+                },
+                {
+                    "title": "Water",
+                    "doc": "https://doc.babylonjs.com/extensions/water",
+                    "icon": "icons/water.jpg", 
+                    "description": "Water material",
+                    "PGID": "#L76FB1#0"
+                }                      
+            ]
+        },         
+        {
+            "title": "Meshes",
+            "samples": [   
+                {
+                    "title": "Render lines",
+                    "doc": "http://localhost:8080/babylon101/Parametric_Shapes#lines",
+                    "icon": "icons/lines.jpg",
+                    "description": "Use LinesMesh to render lines in 3D",
+                    "PGID": "#SVZL1I#0"
+                },                 
+                {
+                    "title": "Displacement map (CPU)",
+                    "doc": "https://doc.babylonjs.com/api/classes/babylon.mesh.html#applydisplacementmap",
+                    "icon": "icons/displacement.jpg",
+                    "description": "Update mesh geometry using a displacement map (CPU)",
+                    "PGID": "#04JDPF#0"
+                },                   
+                {
+                    "title": "Constructive solid geometries",
+                    "doc": "https://doc.babylonjs.com/api/classes/babylon.csg.html",
+                    "icon": "icons/csg.jpg",
+                    "description": "Use boolean operations on meshes using CSG",
+                    "PGID": "#T6NP3F#0"
+                },                  
+                {
+                    "title": "Raycast on height map",
+                    "doc": "https://doc.babylonjs.com/babylon101/raycasts",
+                    "icon": "icons/heightMapRaycast.jpg",
+                    "description": "Raycast to find positions on a heightmap",
+                    "PGID": "#QM57B#0"
+                },                  
+                {
+                    "title": "Basic scene",
+                    "doc": "https://doc.babylonjs.com/features/scene",
+                    "icon": "icons/basic_scene.png", 
+                    "description": "Ball and plane",
+                    "PGID": "#TAZ2CB#0"
+                },
+                {
+                    "title": "Basic elements",
+                    "doc": "https://doc.babylonjs.com/how_to/set_shapes",
+                    "icon": "icons/basic_elements.png", 
+                    "description": "Ball, box, plane, line, etc",
+                    "PGID": "#A1210C#0"
+                },
+                {
+                    "title": "Rotation and scaling",
+                    "doc": "https://doc.babylonjs.com/how_to/rotate",
+                    "icon": "icons/rotation_and_scaling.png", 
+                    "description": "Position mesh layout in space",
+                    "PGID": "#CURCZC#0"
+                },
+                {
+                    "title": "Curved lines",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_path3d",
+                    "icon": "icons/path3D.jpg",
+                    "description": "Use Path3D to create a curved line",
+                    "PGID": "#7SQDY#1"
+                },
+                {
+                    "title": "Rotating mesh to look at a target",
+                    "doc": "https://doc.babylonjs.com/babylon101/position",
+                    "icon": "icons/meshLook.jpg",
+                    "description": "Make a mesh face towards where the pointer hit a plane",
+                    "PGID": "#23M0G6#1"
+                },        
+                {
+                    "title": "Height map",
+                    "doc": "https://doc.babylonjs.com/babylon101/height_map",
+                    "icon": "icons/height_map.png", 
+                    "description": "Use a height map to extrude a plane to create mountains",
+                    "PGID": "#95PXRY#0"
+                },        
+                {
+                    "title": "Extrude polygon",
+                    "doc": "https://doc.babylonjs.com/api/classes/babylon.meshbuilder#extrudepolygon",
+                    "icon": "icons/extrude_polygon.jpg", 
+                    "description": "Use MeshBuilder to generate geometry from extruded data",
+                    "PGID": "#TFLTJJ#0"
+                },        
+                {
+                    "title": "Polygon mesh",
+                    "doc": "https://doc.babylonjs.com/how_to/polygonmeshbuilder",
+                    "icon": "icons/polygon_mesh.jpg", 
+                    "description": "Use PolygonMeshBuilder to create meshes from polygon data",
+                    "PGID": "#0TQAQU#0"
+                },                     
+                {
+                    "title": "Look at",
+                    "doc": "https://doc.babylonjs.com/api/classes/babylon.abstractmesh#lookat",
+                    "icon": "icons/look_at.jpg", 
+                    "description": "Use lookAt() function to align meshes on a specific target",
+                    "PGID": "#N2K3ZN#0"
+                },        
+                {
+                    "title": "Ribbons",
+                    "doc": "https://doc.babylonjs.com/how_to/ribbon_tutorial",
+                    "icon": "icons/ribbons.jpg", 
+                    "description": "Use ribbons to create complex meshes",
+                    "PGID": "#29BR2V#1"
+                },        
+                {
+                    "title": "Decals",
+                    "doc": "https://doc.babylonjs.com/how_to/decals",
+                    "icon": "icons/decals.jpg", 
+                    "description": "Create decals to apply additional textures to a portion of a mesh",
+                    "PGID": "#EEUVTY#0"
+                }                                    
+            ]
+        },
+        {
+            "title": "Optimizations",
+            "samples": [
+                {
+                    "title": "Level of detail",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_lod",
+                    "icon": "icons/lod.jpg",
+                    "description": "Use various meshes based on distance to optimize rendering speed",
+                    "PGID": "#7HMHAU#0"
+                },
+                {
+                    "title": "Hardware instancing",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_instances",
+                    "icon": "icons/instances.jpg",
+                    "description": "Use hardware instancing to duplicate meshes at no cost",
+                    "PGID": "#YB006J#0"
+                },
+                {
+                    "title": "Octrees",
+                    "doc": "https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees",
+                    "icon": "icons/octree.jpg",
+                    "description": "Use octrees to boost mesh selections when dealing with thousands of objects",
+                    "PGID": "#3YFJ5R#0"
+                }
+            ]
+        },        
+        {
+            "title": "Particles",
+            "samples": [
+                {
+                    "title": "Particles and mirrors",
+                    "doc": "https://doc.babylonjs.com/babylon101/particles",
+                    "icon": "icons/particle_mirror.jpg",
+                    "description": "Use particles with a mirror",
+                    "PGID": "#65MUMZ#1"
+                },                  
+                {
+                    "title": "Particles with custom shader",
+                    "doc": "https://doc.babylonjs.com/how_to/customise#custom-effects",
+                    "icon": "icons/custom_particles.jpg",
+                    "description": "Use custom shader to display CPU particles",
+                    "PGID": "#807QEP#0"
+                },                
+                {
+                    "title": "GPU particles",
+                    "doc": "https://doc.babylonjs.com/babylon101/particles#gpu-particles",
+                    "icon": "icons/gpu_particles.jpg",
+                    "description": "Use GPU only to create a massive number of particles",
+                    "PGID": "#PU4WYI#14"
+                },
+                {
+                    "title": "Particles 101",
+                    "doc": "https://doc.babylonjs.com/babylon101/particles",
+                    "icon": "icons/particles.png", 
+                    "description": "Create a particle system and attach it to a moving object",
+                    "PGID": "#EF9X5R#0"
+                },                           
+                {
+                    "title": "Low lying fog",
+                    "doc": "https://doc.babylonjs.com/babylon101/particles",
+                    "icon": "icons/lying_fog.jpg",
+                    "description": "Use particle to simulate volumetric fog",
+                    "PGID": "#BHNVUE#1"
+                },                           
+                {
+                    "title": "Particle editor",
+                    "doc": "https://doc.babylonjs.com/babylon101/particles",
+                    "icon": "icons/particle_editor.jpg",
+                    "description": "Online editor to play with particle parameters",
+                    "PGID": "#NNL67B#1"
+                },
+                {
+                    "title": "A lot of triangles with SPS",
+                    "doc": "https://doc.babylonjs.com/how_to/solid_particle_system",
+                    "icon": "icons/solidParticleSystem.jpg",
+                    "description": "Use solid particle system to create a colorful cube",
+                    "PGID": "#2FPT1A#5"
+                },
+                {
+                    "title": "Solid Particle System facet collision",
+                    "doc": "https://doc.babylonjs.com/how_to/solid_particle_system",
+                    "icon": "icons/facets.jpg", 
+                    "description": "Use SPS facets to simulate complex mesh collisions",
+                    "PGID": "#6UZDJ9#0"
+                },
+                {
+                    "title": "Solid Particle System collisions",
+                    "doc": "https://doc.babylonjs.com/how_to/solid_particle_system",
+                    "icon": "icons/sps_collisions.jpg", 
+                    "description": "Use basic geometry to simulate SPS collisions",
+                    "PGID": "#2V1C4Z#0"
+                },
+                {
+                    "title": "Solid Particle System and shadows",
+                    "doc": "https://doc.babylonjs.com/how_to/solid_particle_system",
+                    "icon": "icons/sps_shadows.jpg", 
+                    "description": "Animate SPS with realtime shadows",
+                    "PGID": "#ML2LR9#0"
+                }                        
+            ]
+        },        
+        {
+            "title": "Collisions & intersections",
+            "samples": [
+                {
+                    "title": "Collisions",
+                    "doc": "https://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity",
+                    "icon": "icons/collisions.png", 
+                    "description": "Handle basic collisions to avoid a camera going through a box",
+                    "PGID": "#U8MEB0#0"
+                },
+                {
+                    "title": "Intersections",
+                    "doc": "https://doc.babylonjs.com/babylon101/intersect_collisions_-_mesh",
+                    "icon": "icons/intersections.png", 
+                    "description": "Detect when meshes intersect each other",
+                    "PGID": "#KQV9SA#0"
+                }
+            ]
+        },              
+        {
+            "title": "Physics",
+            "samples": [
+                {
+                    "title": "Physics",
+                    "doc": "https://doc.babylonjs.com/how_to/using_the_physics_engine",
+                    "icon": "icons/physics.png", 
+                    "description": "How to use physic engines within Babylon",
+                    "PGID": "#7149G4#0"
+                },
+                {
+                    "title": "Cloth",
+                    "doc": "https://doc.babylonjs.com/how_to/using_the_physics_engine",
+                    "icon": "icons/cloth.jpg", 
+                    "description": "Use physic engine to simulate cloth",
+                    "PGID": "#7N1BRU#0"
+                }
+            ]
+        },                
+        {
+            "title": "Shadows",
+            "samples": [
+                {
+                    "title": "Contact hardening",
+                    "doc": "https://doc.babylonjs.com/babylon101/shadows#contact-hardening-shadow-webgl2-only",
+                    "icon": "icons/pcss.jpg",
+                    "description": "Shadows will get softer when they are further away from the object casting them",
+                    "PGID": "#EYEPRI#3"
+                },
+                {
+                    "title": "Self shadowing #1",
+                    "doc": "https://doc.babylonjs.com/babylon101/shadows#exponential-shadow-map",
+                    "icon": "icons/self_shadows1.jpg",
+                    "description": "Use shadow exponential mode to enable self shadowing on a rotating object",
+                    "PGID": "#F4XWU2#0"
+                },                
+                {
+                    "title": "Self shadowing #2",
+                    "doc": "https://doc.babylonjs.com/babylon101/shadows#close-exponential-shadow-map",
+                    "icon": "icons/self_shadows2.jpg",
+                    "description": "Use shadow close exponential mode to enable self shadowing on animated object",
+                    "PGID": "#4GAHX6#1"
+                },
+                {
+                    "title": "Shadows 101",
+                    "doc": "https://doc.babylonjs.com/babylon101/shadows",
+                    "icon": "icons/shadows.png", 
+                    "description": "Setup a scene with lights and meshes to cast different types of shadows",
+                    "PGID": "#IFYDRS#0"
+                },
+                {
+                    "title": "Shadow on transparent textures",
+                    "doc": "https://doc.babylonjs.com/babylon101/shadows",
+                    "icon": "icons/trasnparent_shadow.jpg",
+                    "description": "Create realistic shadows from a transparent texture",
+                    "PGID": "#2DT16W#2"
+                },
+                {
+                    "title": "Point light shadows",
+                    "doc": "https://doc.babylonjs.com/babylon101/shadows",
+                    "icon": "icons/point_shadows.jpg", 
+                    "description": "Use point light to cast shadows",
+                    "PGID": "#4MC650#0"
+                },
+                {
+                    "title": "Multi directional lights with soft shadows",
+                    "doc": "https://doc.babylonjs.com/babylon101/shadows",
+                    "icon": "icons/multi_shadows.jpg", 
+                    "description": "Use multiple directional lights to cast soft shadows",
+                    "PGID": "#KWS7KD#0"
+                },
+                {
+                    "title": "Different shadow filters",
+                    "doc": "https://doc.babylonjs.com/babylon101/shadows",
+                    "icon": "icons/shadow_filters.jpg", 
+                    "description": "Demonstrate different kind of shadows",
+                    "PGID": "#43T193#0"
+                }                                  
+            ]
+        },            
+        {            
+            "title": "Audio",
+            "samples": [
+                {
+                    "title": "Basic sounds",
+                    "doc": "https://doc.babylonjs.com/how_to/playing_sounds_and_music",
+                    "icon": "icons/basic_sounds.png", 
+                    "description": "Playing sounds with babylon",
+                    "PGID": "#DXAEUY#0"
+                },
+                {
+                    "title": "Sound on mesh",
+                    "doc": "https://doc.babylonjs.com/how_to/playing_sounds_and_music",
+                    "icon": "icons/sound_on_mesh.png", 
+                    "description": "Attach a sound to a mesh which will be modified by the objects position",
+                    "PGID": "#EDVU95#0"
+                },
+                {
+                    "title": "Audio analyzer #1",
+                    "doc": "https://doc.babylonjs.com/how_to/playing_sounds_and_music#using-the-analyser",
+                    "icon": "icons/analyzer.jpg", 
+                    "description": "Analyze audio frequencies in realtime",
+                    "PGID": "#TUR5GH#0"
+                },
+                {
+                    "title": "PBR with music analyzer #2",
+                    "doc": "https://doc.babylonjs.com/how_to/playing_sounds_and_music#using-the-analyser",
+                    "icon": "icons/musicAnalyzer.jpg",
+                    "description": "Visualize audio frequencies in realtime",
+                    "PGID": "#2JOSXE#21"
+                }
+            ]
+        },    
+        {
+            "title": "Special FX",
+            "samples": [
+                {
+                    "title": "Fog",
+                    "doc": "https://doc.babylonjs.com/babylon101/Environment#fog",
+                    "icon": "icons/fog.jpg",
+                    "description": "Simulate fog in your scene",
+                    "PGID": "#LR6389#0"
+                },                    
+                {
+                    "title": "Convolution post-process",
+                    "doc": "https://doc.babylonjs.com/api/classes/babylon.convolutionpostprocess",
+                    "icon": "icons/convolution.jpg",
+                    "description": "Apply emboss filter to the scene using the ConvolutionPostProcess",
+                    "PGID": "#B0RH9H#0"
+                },                  
+                {
+                    "title": "Lens flares",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_lens_flares",
+                    "icon": "icons/lens_flares.jpg",
+                    "description": "Simulate lens flares on the camera",
+                    "PGID": "#ZEB7H6#0"
+                },                 
+                {
+                    "title": "Glass wubble ball",
+                    "doc": "https://doc.babylonjs.com/api/classes/babylon.abstractmesh#getverticesdata",
+                    "icon": "icons/glassWubbleBall.jpg",
+                    "description": "Warped ball effect",
+                    "PGID": "#CXOLW#3"
+                },                
+                {
+                    "title": "Color curves",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_postprocesses#imageprocessing",
+                    "icon": "icons/color_curves.jpg",
+                    "description": "Apply color curves to your rendering",
+                    "PGID": "#HI65FJ#0"
+                },     
+                {
+                    "title": "Default rendering pipeline",
+                    "doc": "https://doc.babylonjs.com/how_to/using_default_rendering_pipeline",
+                    "icon": "icons/default_pipeline.jpg",
+                    "description": "Bloom, FXAA, sharpen, grain, vignette, chromatic aberration and DoF with one single object",
+                    "PGID": "#Y3C0HQ#146"
+                },                      
+                {
+                    "title": "Depth of field",
+                    "doc": "https://doc.babylonjs.com/how_to/using_default_rendering_pipeline#depth-of-field",
+                    "icon": "icons/dof.jpg",
+                    "description": "Apply depth of field effect",
+                    "PGID": "#8F5HYV#9"
+                },                           
+                {
+                    "title": "Glow layer",
+                    "doc": "https://doc.babylonjs.com/how_to/glow_layer",
+                    "icon": "icons/glow.jpg",
+                    "description": "Generates glow around emissive objects",
+                    "PGID": "#6ZVKE3#0"
+                },
+                {
+                    "title": "Sprites",
+                    "doc": "https://doc.babylonjs.com/babylon101/sprites",
+                    "icon": "icons/sprites.png", 
+                    "description": "Load and display sprites",
+                    "PGID": "#9RI8CG#0"
+                },
+                {
+                    "title": "Environment",
+                    "doc": "https://doc.babylonjs.com/babylon101/environment",
+                    "icon": "icons/environment.png", 
+                    "description": "Adding a skybox and fog",
+                    "PGID": "#7G0IQW#0"
+                },
+                {
+                    "title": "Fresnel",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_fresnelparameters",
+                    "icon": "icons/fresnel.png", 
+                    "description": "Renders spheres to simulate a fresnel lens",
+                    "PGID": "#AQZJ4C#0"
+                },
+                {
+                    "title": "SSAO rendering pipeline",
+                    "doc": "https://doc.babylonjs.com/how_to/using_the_ssao_rendering_pipeline",
+                    "icon": "icons/ssao_1.png", 
+                    "description": "Screen space ambient occlusion",
+                    "PGID": "#N96NXC#0"
+                },
+                {
+                    "title": "SSAO rendering pipeline (WebGL2)",
+                    "doc": "https://doc.babylonjs.com/api/classes/babylon.ssao2renderingpipeline",
+                    "icon": "icons/ssao_2.png", 
+                    "description": "Screen space ambient occlusion with WebGL2",
+                    "PGID": "#7D2QDD#0"
+                },
+                {
+                    "title": "Volumetric Light Scattering",
+                    "doc": "https://doc.babylonjs.com/how_to/using_the_volumetric_lightscattering_post-process",
+                    "icon": "icons/volumetric_light_scattering.png", 
+                    "description": "Simulates light scattering due to light hitting the atmosphere",
+                    "PGID": "#V2DAKC#0"
+                },
+                {
+                    "title": "Refraction and Reflection",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_fresnelparameters",
+                    "icon": "icons/refraction_and_reflection.png", 
+                    "description": "Simulate how light would reflect and refract with a sphere",
+                    "PGID": "#XH85A9#0"
+                },
+                {
+                    "title": "Portals",
+                    "doc": "https://doc.babylonjs.com/resources/shaderintro",
+                    "icon": "icons/portals.jpg",
+                    "description": "Portal effect created using custom shaders",
+                    "PGID": "#EEOWP#7"
+                },
+                {
+                    "title": "Warp speed !",
+                    "doc": "https://doc.babylonjs.com/how_to/shader_material",
+                    "icon": "icons/warpSpeed.jpg",
+                    "description": "Fly though stars using a custom shader texture",
+                    "PGID": "#1WBBW0#1"
+                },
+                {
+                    "title": "Hypnotizing infinite loader",
+                    "doc": "https://doc.babylonjs.com/babylon101/position",
+                    "icon": "icons/infiniteLoader.jpg",
+                    "description": "Visually apealing loading animation",
+                    "PGID": "#VUJG1#1"
+                },            
+                {
+                    "title": "Realtime refraction",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_reflection_probes",
+                    "icon": "icons/refraction.jpg", 
+                    "description": "use reflection probes to simulate realtime refraction",
+                    "PGID": "#RRYXWN#0"
+                },
+                {
+                    "title": "Realtime reflection",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_reflection_probes",
+                    "icon": "icons/reflection.jpg", 
+                    "description": "use reflection probes to simulate realtime reflection",
+                    "PGID": "#SF5RCN#0"
+                },                
+                {
+                    "title": "Motion blur",
+                    "doc": "https://doc.babylonjs.com/how_to/using_standard_rendering_pipeline#setting-up-the-motion-blur",
+                    "icon": "icons/motion_blur.jpg", 
+                    "description": "Use the standard rendering pipeline to simulate motion blur",
+                    "PGID": "#ZMAJZB#0"
+                },
+                {
+                    "title": "Highlight layer",
+                    "doc": "https://doc.babylonjs.com/how_to/highlight_layer",
+                    "icon": "icons/highlights.jpg", 
+                    "description": "Highlight a mesh",
+                    "PGID": "#7EESGZ#0"
+                },
+                {
+                    "title": "Lens effects",
+                    "doc": "https://doc.babylonjs.com/how_to/using_depth-of-field_and_other_lens_effects",
+                    "icon": "icons/lens_effect.jpg", 
+                    "description": "Create photographic effect with the LensRenderingPipeline",
+                    "PGID": "#B7JHWD#0"
+                }                           
+            ]
+        },
+        {
+            "title": "Textures",
+            "samples": [   
+                {
+                    "title": "Saving dynamic texture on disk",
+                    "doc": "https://doc.babylonjs.com/how_to/dynamictexture",
+                    "icon": "icons/savingDynamicTexture.jpg",
+                    "description": "Save a texture generated at runtime using DynamicTexture",
+                    "PGID": "#CA4SM#1"
+                },                
+                {
+                    "title": "360 videos",
+                    "doc": "https://doc.babylonjs.com/how_to/360videodome",
+                    "icon": "icons/360.jpg",
+                    "description": "Easily display and control 360 videos",
+                    "PGID": "#1E9JQ8#7"
+                },                
+                {
+                    "title": "ProceduralTexture",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_procedural_textures",
+                    "icon": "icons/procedural_texture.png", 
+                    "description": "Use procedual textures for wood, grass, marble, fire, etc.",
+                    "PGID": "#B2ZXG6#0"
+                },
+                {
+                    "title": "Local cubemaps",
+                    "doc": "https://doc.babylonjs.com/how_to/reflect#cubetexture",
+                    "icon": "icons/local_cubemap.jpg",
+                    "description": "Improve cubemaps with local mode",
+                    "PGID": "#RNASML#4"
+                },                 
+                {
+                    "title": "Starfield procedural texture",
+                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_procedural_textures",
+                    "icon": "icons/starfield.jpg", 
+                    "description": "Use the starfield procedual texture to simulate space",
+                    "PGID": "#ZQWE4G#0"
+                },
+                {
+                    "title": "Equirectangular map as reflection texture",
+                    "doc": "https://doc.babylonjs.com/how_to/reflect",
+                    "icon": "icons/equMapOnReflectionTexture.jpg",
+                    "description": "Using Equirectangular maps as a reflection texture",
+                    "PGID": "#23IQHK#2"
+                },
+                {
+                    "title": "Mirrors",
+                    "doc": "https://doc.babylonjs.com/how_to/reflect",
+                    "icon": "icons/mirrors.jpg",
+                    "description": "Shows how to use mirrors in babylon",
+                    "PGID": "#2EP7UB#0"
+                },
+                {
+                    "title": "Custom render targets",
+                    "doc": "https://doc.babylonjs.com/api/classes/babylon.rendertargettexture",
+                    "icon": "icons/custom_rendertarget.jpg",
+                    "description": "Use render target textures to generate procedural data",
+                    "PGID": "#CJWDJR#0"
+                },
+                {
+                    "title": "Bump texture",
+                    "doc": "https://doc.babylonjs.com/how_to/more_materials#bump-map",
+                    "icon": "icons/bump.jpg",
+                    "description": "Use normal map to simulate bump",
+                    "PGID": "#RK0W5S#0"
+                }                              
+            ]
+        },
+        {
+            "title": "VR",
+            "samples": [
+                {
+                    "title": "WebVR",
+                    "doc": "https://doc.babylonjs.com/how_to/webvr_helper",
+                    "icon": "icons/webvr.png", 
+                    "description": "View a basic mesh and interact with a gui in WebVR",
+                    "PGID": "#TAFSN0#2"
+                } 
+            ]
+        },
+        {
+            "title": "Misc.",
+            "samples": [
+                {
+                    "title": "Charting",
+                    "doc": "https://doc.babylonjs.com/babylon101/",
+                    "icon": "icons/charting.jpg", 
+                    "description": "Creates a 3D charting presentation",
+                    "PGID": "#8PY6X5#1"
+                } 
+            ]
+        }         
+    ]
+}

Playground/index-local.html

@@ -112,11 +112,7 @@
                     </div>
                 </div>
                 <div class="button select">
-                    <span id="currentScript1600">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList1600">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -205,11 +201,7 @@
 
             <div class="category right">
                 <div class="button select">
-                    <span id="currentScript1475">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList1475">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -292,11 +284,7 @@
 
             <div class="category right">
                 <div class="button select">
-                    <span id="currentScript1030">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList1030">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -376,11 +364,7 @@
 
             <div class="category right">
                 <div class="button select">
-                    <span id="currentScript750">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList750">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -391,6 +375,14 @@
                 <canvas touch-action="none" id="renderCanvas"></canvas>
             </div>
         </div>
+        <div id="exampleList">
+            <div id="exampleBanner">
+                <h1>Examples</h1>
+            </div>
+            <div class="horizontalSeparator"></div>
+            <input id="filterBar" type="text" placeholder="Filter examples...">
+            <img id="filterBarClear" src="http://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        </div>
 
         <span class="label" id="fpsLabel">FPS</span>
 

Playground/index.html

@@ -147,11 +147,7 @@
                     </div>
                 </div>
                 <div class="button select">
-                    <span id="currentScript1600">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList1600">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -240,11 +236,7 @@
 
             <div class="category right">
                 <div class="button select">
-                    <span id="currentScript1475">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList1475">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -327,11 +319,7 @@
 
             <div class="category right">
                 <div class="button select">
-                    <span id="currentScript1030">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList1030">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -411,11 +399,7 @@
 
             <div class="category right">
                 <div class="button select">
-                    <span id="currentScript750">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList750">
-                        </ul>
-                    </div>
+                    <span id="currentScript750">Examples</span>
                 </div>
             </div>
         </div>
@@ -426,6 +410,14 @@
                 <canvas touch-action="none" id="renderCanvas"></canvas>
             </div>
         </div>
+        <div id="exampleList">
+            <div id="exampleBanner">
+                <h1>Examples</h1>
+            </div>
+            <div class="horizontalSeparator"></div>
+            <input id="filterBar" type="text" placeholder="Filter examples...">
+            <img id="filterBarClear" src="http://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        </div>
 
         <span class="label" id="fpsLabel">FPS</span>
 

Playground/indexStable.html

@@ -138,11 +138,7 @@
                     </div>
                 </div>
                 <div class="button select">
-                    <span id="currentScript1600">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList1600">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -231,11 +227,7 @@
 
             <div class="category right">
                 <div class="button select">
-                    <span id="currentScript1475">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList1475">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -318,11 +310,7 @@
 
             <div class="category right">
                 <div class="button select">
-                    <span id="currentScript1030">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList1030">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -402,11 +390,7 @@
 
             <div class="category right">
                 <div class="button select">
-                    <span id="currentScript750">Scenes</span>
-                    <div class="toDisplayBig">
-                        <ul id="scriptsList750">
-                        </ul>
-                    </div>
+                    <span class="examplesButton">Examples</span>
                 </div>
             </div>
         </div>
@@ -417,6 +401,14 @@
                 <canvas touch-action="none" id="renderCanvas"></canvas>
             </div>
         </div>
+        <div id="exampleList">
+            <div id="exampleBanner">
+                <h1>Examples</h1>
+            </div>
+            <div class="horizontalSeparator"></div>
+            <input id="filterBar" type="text" placeholder="Filter examples...">
+            <img id="filterBarClear" src="http://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        </div>
 
         <span class="label" id="fpsLabel">FPS</span>
 

Playground/js/index.js

@@ -56,6 +56,66 @@
         '.navbarBottom .links .link'];
 
     var run = function () {
+
+        // #region - Examples playgrounds
+        var examplesButton = document.getElementsByClassName("examplesButton");
+        var isExamplesDisplayed = false;
+        for(var i = 0; i < examplesButton.length; i++) {
+           examplesButton[i].parentElement.onclick = function () {
+            isExamplesDisplayed = !isExamplesDisplayed;
+            if (isExamplesDisplayed) {
+                document.getElementById("exampleList").style.display = "block";
+                document.getElementsByClassName("wrapper")[0].style.width = "calc(100% - 400px)";
+            }
+            else {
+                document.getElementById("exampleList").style.display = "none";
+                document.getElementsByClassName("wrapper")[0].style.width = "100%";
+            }
+        } 
+        }
+        
+
+        var filterBarClear = document.getElementById("filterBarClear");
+        var filterBar = document.getElementById("filterBar");
+        var filter = function () {
+            var filterText = filterBar.value.toLowerCase();
+            if (filterText == "") filterBarClear.style.display = "none";
+            else filterBarClear.style.display = "inline-block";
+
+            var lines = document.getElementsByClassName("itemLine");
+            for (var lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+                var line = lines[lineIndex];
+                if (line.innerText.toLowerCase().indexOf(filterText) > -1) {
+                    line.style.display = "";
+                } else {
+                    line.style.display = "none";
+                }
+            }
+
+            var categories = document.getElementsByClassName("categoryContainer");
+            var displayCount = categories.length;
+
+            for (var categoryIndex = 0; categoryIndex < categories.length; categoryIndex++) {
+                var category = categories[categoryIndex];
+                category.style.display = "block";
+                if (category.clientHeight < 25) {
+                    category.style.display = "none";
+                    displayCount--;
+                }
+            }
+
+            if (displayCount == 0) document.getElementById("noResultsContainer").style.display = "block";
+            else document.getElementById("noResultsContainer").style.display = "none";
+        }
+        filterBar.oninput = function () {
+            filter();
+        }
+        filterBarClear.onclick = function () {
+            filterBar.value = "";
+            filter();
+        }
+        // #endregion
+
         var blockEditorChange = false;
 
         var markDirty = function () {
@@ -63,11 +123,9 @@
                 return;
             }
 
-
-            setToMultipleID("currentScript", "innerHTML", "Custom");
+            // setToMultipleID("currentScript", "innerHTML", "Custom");
             setToMultipleID("safemodeToggle", "addClass", "checked");
             setToMultipleID("minimapToggle", "addClass", "checked");
-
             setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
         }
 
@@ -107,7 +165,7 @@
                         blockEditorChange = false;
                         compileAndRun();
 
-                        setToMultipleID("currentScript", "innerHTML", title);
+                        // setToMultipleID("currentScript", "innerHTML", title);
 
                         currentSnippetToken = null;
                     }
@@ -133,33 +191,89 @@
         var loadScriptsList = function () {
             var xhr = new XMLHttpRequest();
 
-            xhr.open('GET', 'scripts/scripts.txt', true);
+            xhr.open('GET', 'examples/list.json', true);
 
             xhr.onreadystatechange = function () {
                 if (xhr.readyState === 4) {
                     if (xhr.status === 200) {
-                        scripts = xhr.responseText.split("\n");
+                        scripts = JSON.parse(xhr.response)["examples"];
+
+                        function sortScriptsList(a, b) {
+                            if (a.title < b.title) return -1;
+                            else return 1;
+                            return 0;
+                        }
+                        scripts.sort(sortScriptsList);
+
+                        var exampleList = document.getElementById("exampleList");
+
+                        for (var i = 0; i < scripts.length; i++) {
+                            scripts[i].samples.sort(sortScriptsList);
+
+                            var exampleCategory = document.createElement("div");
+                            exampleCategory.classList.add("categoryContainer");
+
+                            var exampleCategoryTitle = document.createElement("p");
+                            exampleCategoryTitle.innerText = scripts[i].title;
+                            exampleCategory.appendChild(exampleCategoryTitle);
 
-                        for (var i = 0; i < multipleSize.length; i++) {
-                            var ul = document.getElementById("scriptsList" + multipleSize[i]);
+                            for (var ii = 0; ii < scripts[i].samples.length; ii++) {
+                                var example = document.createElement("div");
+                                example.classList.add("itemLine");
+                                example.id = ii;
 
-                            var index;
-                            for (index = 0; index < scripts.length; index++) {
-                                var option = document.createElement("li");
-                                var a = document.createElement("a");
-                                a.href = "#";
-                                a.innerHTML = (index + 1) + " - " + scripts[index];
-                                a.scriptLinkIndex = index + 1;
-                                //a.onclick = onScriptClick;
-                                option.scriptLinkIndex = index + 1;
-                                option.onclick = onScriptClick;
+                                var exampleImg = document.createElement("img");
+                                exampleImg.src = scripts[i].samples[ii].icon.replace("icons", "http://doc.babylonjs.com/examples/icons");
+                                exampleImg.setAttribute("onClick", "document.getElementById('PGLink_" + scripts[i].samples[ii].PGID + "').click();");
 
-                                option.appendChild(a);
+                                var exampleContent = document.createElement("div");
+                                exampleContent.classList.add("itemContent");
+                                exampleContent.setAttribute("onClick", "document.getElementById('PGLink_" + scripts[i].samples[ii].PGID + "').click();");
 
-                                ul.appendChild(option);
+                                var exampleContentLink = document.createElement("div");
+                                exampleContentLink.classList.add("itemContentLink");
+
+                                var exampleTitle = document.createElement("h3");
+                                exampleTitle.classList.add("exampleCategoryTitle");
+                                exampleTitle.innerText = scripts[i].samples[ii].title;
+                                var exampleDescr = document.createElement("div");
+                                exampleDescr.classList.add("itemLineChild");
+                                exampleDescr.innerText = scripts[i].samples[ii].description;
+
+                                var exampleDocLink = document.createElement("a");
+                                exampleDocLink.classList.add("itemLineDocLink");
+                                exampleDocLink.innerText = "Documentation";
+                                exampleDocLink.href = scripts[i].samples[ii].doc;
+                                exampleDocLink.target = "_blank";
+
+                                var examplePGLink = document.createElement("a");
+                                examplePGLink.id = "PGLink_" + scripts[i].samples[ii].PGID;
+                                examplePGLink.classList.add("itemLinePGLink");
+                                examplePGLink.innerText = "Display";
+                                examplePGLink.href = scripts[i].samples[ii].PGID;
+
+                                exampleContentLink.appendChild(exampleTitle);
+                                exampleContentLink.appendChild(exampleDescr);
+                                exampleContent.appendChild(exampleContentLink);
+                                exampleContent.appendChild(exampleDocLink);
+                                exampleContent.appendChild(examplePGLink);
+
+                                example.appendChild(exampleImg);
+                                example.appendChild(exampleContent);
+
+                                exampleCategory.appendChild(example);
                             }
+
+                            exampleList.appendChild(exampleCategory);
                         }
 
+                        var noResultContainer = document.createElement("div");
+                        noResultContainer.id = "noResultsContainer";
+                        noResultContainer.classList.add("categoryContainer");
+                        noResultContainer.style.display = "none";
+                        noResultContainer.innerHTML = "<p id='noResults'>No results found.</p>";
+                        exampleList.appendChild(noResultContainer);
+
                         if (!location.hash) {
                             // Query string
                             var queryString = window.location.search;
@@ -932,7 +1046,7 @@
                                     blockEditorChange = false;
                                     compileAndRun();
 
-                                    setToMultipleID("currentScript", "innerHTML", "Custom");
+                                    // setToMultipleID("currentScript", "innerHTML", "Custom");
                                 } else if (firstTime) {
                                     location.href = location.href.replace(location.hash, "");
                                     if (scripts) {
@@ -1026,4 +1140,4 @@
         }
     };
     xhr.send(null);
-})();
+})();

Tools/DevLoader/BabylonLoader.js

@@ -2,8 +2,8 @@
 
 var BABYLONDEVTOOLS;
 (function (BABYLONDEVTOOLS) {
-    
-    var getJson = function(url, callback, errorCallback) {
+
+    var getJson = function (url, callback, errorCallback) {
         var xhr = new XMLHttpRequest();
         xhr.open('GET', url);
         xhr.onload = function () {
@@ -12,8 +12,8 @@ var BABYLONDEVTOOLS;
                 callback(data)
             } else {
                 errorCallback({
-                status: this.status,
-                statusText: xhr.statusText
+                    status: this.status,
+                    statusText: xhr.statusText
                 });
             }
         };
@@ -39,19 +39,19 @@ var BABYLONDEVTOOLS;
             dependencies = [];
             callback = null;
             min = (document.location.href.toLowerCase().indexOf('dist=min') > 0);
-            useDist = (min || useDist || document.location.href.toLowerCase().indexOf('dist=true') > 0);            
+            useDist = (min || useDist || document.location.href.toLowerCase().indexOf('dist=true') > 0);
             babylonJSPath = '';
         }
 
-        Loader.prototype.debugShortcut = function(engine) {
+        Loader.prototype.debugShortcut = function (engine) {
             // Add inspector shortcut
             var map = {};
-            var onkey = function(e){
+            var onkey = function (e) {
                 e = e || event; // to deal with IE
                 map[e.keyCode] = e.type == 'keydown';
-                if(map[17] && map[16] && map[18] && map[73]) {
+                if (map[17] && map[16] && map[18] && map[73]) {
                     if (engine.scenes && engine.scenes.length > 0) {
-                        for (var i = 0; i < engine.scenes.length; i ++) {
+                        for (var i = 0; i < engine.scenes.length; i++) {
                             if (engine.scenes[0].debugLayer.isVisible()) {
                                 engine.scenes[0].debugLayer.hide();
                             }
@@ -91,7 +91,7 @@ var BABYLONDEVTOOLS;
             return this;
         }
 
-        Loader.prototype.useDist = function() {
+        Loader.prototype.useDist = function () {
             useDist = true;
             return this;
         }
@@ -99,22 +99,22 @@ var BABYLONDEVTOOLS;
         Loader.prototype.dequeue = function () {
             if (queue.length == 0) {
                 console.log('Scripts loaded');
-                BABYLON.Engine.ShadersRepository = "/src/Shaders/"; 
-                if (callback) {                    
+                BABYLON.Engine.ShadersRepository = "/src/Shaders/";
+                if (callback) {
                     callback();
                 }
-                return;                
+                return;
             }
 
             var url = queue.shift();
-            
+
             var head = document.getElementsByTagName('head')[0];
             var script = document.createElement('script');
             script.type = 'text/javascript';
             script.src = url;
 
             var self = this;
-            script.onload = function() {
+            script.onload = function () {
                 self.dequeue();
             };
             head.appendChild(script);
@@ -135,7 +135,7 @@ var BABYLONDEVTOOLS;
         }
 
         Loader.prototype.loadScripts = function (urls) {
-            for (var i = 0; i< urls.length; i++) {
+            for (var i = 0; i < urls.length; i++) {
                 this.loadScript(urls[i]);
             }
         }
@@ -147,7 +147,7 @@ var BABYLONDEVTOOLS;
                     var file = library.files[i];
                     if (file.indexOf('lib.d.ts') > 0) {
                         continue;
-                    } 
+                    }
 
                     file = file.replace('.ts', '.js');
                     file = file.replace('../', '');
@@ -169,39 +169,41 @@ var BABYLONDEVTOOLS;
             }
             else if (min) {
                 if (library.webpack) {
-                    this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output.replace('.js', '.bundle.js'));
+                    if (module.build.distOutputDirectory)
+                        this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output.replace('.js', '.bundle.js'));
                 }
                 else {
                     this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output.replace('.js', '.min.js'));
                 }
             }
             else {
-                this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output);
+                if (module.build.distOutputDirectory)
+                    this.loadScript(babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + library.output);
             }
 
             if (!min && library.sassFiles && library.sassFiles.length > 0) {
                 var cssFile = library.output.replace('.js', '.css');
-                cssFile = babylonJSPath + '/dist/preview release' +  module.build.distOutputDirectory + cssFile;
+                cssFile = babylonJSPath + '/dist/preview release' + module.build.distOutputDirectory + cssFile;
                 this.loadCss(cssFile);
             }
         }
 
         Loader.prototype.loadModule = function (module) {
-            for (var i = 0; i< module.libraries.length; i++) {
+            for (var i = 0; i < module.libraries.length; i++) {
                 this.loadLibrary(module.libraries[i], module);
             }
         }
 
-        Loader.prototype.processDependency = function(settings, dependency, filesToLoad) {
+        Loader.prototype.processDependency = function (settings, dependency, filesToLoad) {
             if (dependency.dependUpon) {
-                for (var i = 0; i < dependency.dependUpon.length; i++ ) {
+                for (var i = 0; i < dependency.dependUpon.length; i++) {
                     var dependencyName = dependency.dependUpon[i];
                     var parent = settings.workloads[dependencyName];
                     this.processDependency(settings, parent, filesToLoad);
                 }
             }
 
-            for (var i = 0; i< dependency.files.length; i++) {
+            for (var i = 0; i < dependency.files.length; i++) {
                 var file = dependency.files[i];
 
                 if (filesToLoad.indexOf(file) === -1) {
@@ -240,7 +242,7 @@ var BABYLONDEVTOOLS;
 
             // Modules
             if (loadModules) {
-                for (var i = 0; i< settings.modules.length; i++) {
+                for (var i = 0; i < settings.modules.length; i++) {
                     if (settings.modules[i] === "viewer") {
                         continue;
                     }
@@ -255,7 +257,7 @@ var BABYLONDEVTOOLS;
                 callback = newCallback;
             }
             getJson('/Tools/Gulp/config.json',
-                function(data) {
+                function (data) {
                     if (!min) {
                         self.loadScript('/dist/preview release/split.js');
                     }
@@ -267,14 +269,14 @@ var BABYLONDEVTOOLS;
 
                     self.dequeue();
                 },
-                function(reason) { 
+                function (reason) {
                     console.error(reason);
                 }
             );
         };
 
         return Loader;
-    }());    
+    }());
 
     var loader = new Loader();
     BABYLONDEVTOOLS.Loader = loader;

Tools/Gulp/config.json

@@ -116,17 +116,22 @@
             "environmentHelper",
             "particleHelper",
             "videoDome",
-            "photoDome"
+            "photoDome",
+            "behaviors",
+            "imageProcessing"            
         ],
         "minimal": [
+            "meshBuilder",
             "freeCamera",
             "hemisphericLight"
         ],
-        "minimalWithBuilder": [
+        "360Viewer": [
+            "arcRotateCamera",
             "meshBuilder",
-            "freeCamera",
-            "hemisphericLight"
-        ]
+            "picking",
+            "backgroundMaterial",
+            "videoDome"
+        ]      
     },
     "workloads": {
         "core": {
@@ -174,12 +179,7 @@
                 "../../src/Materials/babylon.uniformBuffer.js",
                 "../../src/Mesh/babylon.mesh.vertexData.js",
                 "../../src/Mesh/babylon.geometry.js",
-                "../../src/PostProcess/babylon.postProcessManager.js",
                 "../../src/Tools/babylon.performanceMonitor.js",
-                "../../src/Materials/babylon.imageProcessingConfiguration.js",
-                "../../src/Materials/Textures/babylon.colorGradingTexture.js",
-                "../../src/Materials/babylon.colorCurves.js",
-                "../../src/Behaviors/babylon.behavior.js",
                 "../../src/Materials/babylon.materialHelper.js",
                 "../../src/Materials/babylon.pushMaterial.js",
                 "../../src/Materials/babylon.standardMaterial.js"
@@ -219,7 +219,7 @@
                 "fresnelFunction",
                 "reflectionFunction",
                 "imageProcessingDeclaration",
-                "imageProcessingFunctions",
+                "imageProcessingFunctions",                
                 "bumpFragmentFunctions",
                 "clipPlaneFragmentDeclaration",
                 "fogFragmentDeclaration",
@@ -230,6 +230,24 @@
                 "fogFragment"
             ]
         },
+        "behaviors": {
+            "files": [
+                "../../src/Behaviors/babylon.behavior.js"
+            ],
+            "dependUpon": [
+                "core"
+            ]
+        },   
+        "imageProcessing": {
+            "files": [
+                "../../src/Materials/babylon.imageProcessingConfiguration.js",
+                "../../src/Materials/Textures/babylon.colorGradingTexture.js",
+                "../../src/Materials/babylon.colorCurves.js"
+            ],
+            "dependUpon": [
+                "core"
+            ]
+        },        
         "particles": {
             "files": [
                 "../../src/Particles/babylon.particle.js",
@@ -290,7 +308,7 @@
                 "../../src/Behaviors/Cameras/babylon.autoRotationBehavior.js"
             ],
             "dependUpon": [
-                "core"
+                "behaviors"
             ]
         },
         "meshBehaviors": {
@@ -298,7 +316,7 @@
                 "../../src/Behaviors/Mesh/babylon.pointerDragBehavior.js"
             ],
             "dependUpon": [
-                "core"
+                "behaviors"
             ]
         },
         "textureTools": {
@@ -680,6 +698,7 @@
         },
         "postProcesses": {
             "files": [
+                "../../src/PostProcess/babylon.postProcessManager.js",
                 "../../src/PostProcess/babylon.postProcess.js",
                 "../../src/PostProcess/babylon.passPostProcess.js"
             ],
@@ -853,7 +872,8 @@
                 "../../src/PostProcess/babylon.imageProcessingPostProcess.js"
             ],
             "dependUpon": [
-                "postProcesses"
+                "postProcesses",
+                "imageProcessing"
             ],
             "shaders": [
                 "imageProcessing.fragment"
@@ -879,7 +899,8 @@
                 "../../src/PostProcess/babylon.imageProcessingPostProcess.js"
             ],
             "dependUpon": [
-                "postProcesses"
+                "postProcesses",
+                "imageProcessing"
             ],
             "shaders": [
                 "refraction.fragment",
@@ -1054,6 +1075,7 @@
                 "../../src/Gizmos/babylon.positionGizmo.js",
                 "../../src/Gizmos/babylon.rotationGizmo.js",
                 "../../src/Gizmos/babylon.scaleGizmo.js",
+                "../../src/Gizmos/babylon.boundingBoxGizmo.js",
                 "../../src/Gizmos/babylon.gizmoManager.js"
             ],
             "dependUpon": [
@@ -1263,7 +1285,8 @@
         "serializers",
         "inspector",
         "gui",
-        "viewer"
+        "viewer",
+        "viewer-assets"
     ],
     "materialsLibrary": {
         "libraries": [
@@ -1719,16 +1742,19 @@
                     "../../gui/src/2D/controls/inputText.ts",
                     "../../gui/src/2D/controls/virtualKeyboard.ts",
                     "../../gui/src/2D/controls/multiLine.ts",
+                    "../../gui/src/2D/controls/grid.ts",                    
                     "../../gui/src/3D/gui3DManager.ts",
                     "../../gui/src/3D/materials/fluentMaterial.ts",
                     "../../gui/src/3D/vector3WithInfo.ts",
                     "../../gui/src/3D/controls/control3D.ts",
                     "../../gui/src/3D/controls/container3D.ts",
+                    "../../gui/src/3D/controls/abstractButton3D.ts",
                     "../../gui/src/3D/controls/button3D.ts",
                     "../../gui/src/3D/controls/holographicButton.ts",
                     "../../gui/src/3D/controls/stackPanel3D.ts",
                     "../../gui/src/3D/controls/volumeBasedPanel.ts",
-                    "../../gui/src/3D/controls/spherePanel.ts"
+                    "../../gui/src/3D/controls/spherePanel.ts",
+                    "../../gui/src/3D/controls/cylinderPanel.ts"
                 ],
                 "shaderFiles": [
                     "../../gui/src/3D/materials/shaders/fluent.vertex.fx",
@@ -1852,6 +1878,7 @@
                 "name": "babylonjs-viewer",
                 "main": "../../Viewer/dist/build/src/index.d.ts",
                 "out": "../../../../dist/preview release/viewer/babylon.viewer.module.d.ts",
+                "legacyDeclaration": true,
                 "prependText": "/// <reference path=\"./babylon.d.ts\"/>\n/// <reference path=\"./babylon.glTF2Interface.d.ts\"/>\n/// <reference path=\"./babylonjs.loaders.d.ts\"/>\ndeclare module \"babylonjs-loaders\"{ export=BABYLON;}\n"
             },
             "outputs": [
@@ -1887,5 +1914,41 @@
                 }
             ]
         }
+    },
+    "viewer-assets": {
+        "libraries": [
+            {
+                "files": [],
+                "noBundleInName": true,
+                "output": "babylon.viewer.assets.js",
+                "webpack": "../../Viewer/webpack.assets.config.js",
+                "bundle": "true",
+                "moduleDeclaration": {
+                    "name": "BabylonViewerAssets",
+                    "module": "babylonjs-viewer-assets"
+                },
+                "babylonIncluded": true
+            }
+        ],
+        "build": {
+            "srcOutputDirectory": "../../Viewer/",
+            "dtsBundle": {
+                "name": "babylonjs-viewer-assets",
+                "baseDir": "../../Viewer/dist/build/src/assets/",
+                "main": "../../Viewer/dist/build/src/assets/index.d.ts",
+                "out": "../../../build/assets/babylon.viewer.assets.module.d.ts"
+            },
+            "outputs": [
+                {
+                    "destination": [
+                        {
+                            "filename": "babylon.viewer.assets.js",
+                            "outputDirectory": "/../../Viewer/dist/build/assets/"
+                        }
+                    ],
+                    "minified": true
+                }
+            ]
+        }
     }
 }

Tools/Gulp/gulpfile.js

@@ -469,10 +469,12 @@ var buildExternalLibrary = function (library, settings, watch) {
                         let fileLocation = path.join(path.dirname(settings.build.dtsBundle.main), settings.build.dtsBundle.out);
                         fs.readFile(fileLocation, function (err, data) {
                             if (err) throw err;
-                            data = settings.build.dtsBundle.prependText + '\n' + data.toString();
+                            data = (settings.build.dtsBundle.prependText || "") + '\n' + data.toString();
                             fs.writeFile(fileLocation, data);
-                            var newData = processViewerDeclaration(data);
-                            fs.writeFile(fileLocation.replace('.module', ''), newData);
+                            if (settings.build.dtsBundle.legacyDeclaration) {
+                                var newData = processViewerDeclaration(data);
+                                fs.writeFile(fileLocation.replace('.module', ''), newData);
+                            }
                         });
                     });
                 }

Tools/Publisher/index.js

@@ -1,6 +1,7 @@
 let prompt = require('prompt');
 let shelljs = require('shelljs');
 let fs = require('fs-extra');
+let path = require('path');
 
 let basePath = '../../dist/preview release';
 
@@ -46,7 +47,20 @@ let packages = [
     },
     {
         name: 'viewer',
-        path: basePath + '/viewer/'
+        path: basePath + '/../../Viewer/',
+        required: [
+            basePath + '/viewer/readme.md',
+            basePath + '/viewer/package.json',
+            basePath + '/viewer/babylon.viewer.js'
+        ]
+    },
+    {
+        name: 'viewer-assets',
+        path: basePath + '/../../Viewer/dist/build/assets/',
+        required: [
+            basePath + '/../../Viewer/assets/readme.md',
+            basePath + '/../../Viewer/assets/package.json',
+        ]
     }
 ];
 
@@ -71,7 +85,16 @@ function processPackages(version) {
     packages.forEach((package) => {
         if (package.name === "core") {
             processCore(package, version);
+        } else if (package.name === "viewer") {
+            processViewer(package, version);
         } else {
+
+            if (package.required) {
+                package.required.forEach(file => {
+                    fs.copySync(file, package.path + '/' + path.basename(file));
+                });
+            }
+
             let packageJson = require(package.path + 'package.json');
             packageJson.version = version;
             if (packageJson.dependencies) {
@@ -83,14 +106,8 @@ function processPackages(version) {
             }
             if (packageJson.peerDependencies) packageJson.peerDependencies.babylonjs = minimumDependency;
             fs.writeFileSync(package.path + 'package.json', JSON.stringify(packageJson, null, 4));
-            console.log('Publishing ' + package.name + " from " + package.path);
-            let tagDef = "";
-            // check for alpha or beta
-            if (version.indexOf('alpha') !== -1 || version.indexOf('beta') !== -1) {
-                tagDef = '--tag preview';
-            }
-            //publish the respected package
-            shelljs.exec('npm publish \"' + package.path + "\"" + ' ' + tagDef);
+
+            publish(version, package.name, package.path);
         }
 
     });
@@ -153,18 +170,6 @@ function processCore(package, version) {
         }
     ];
 
-    // remove the modules for now
-    /*fs.readdirSync(basePath + '/modules/').forEach(object => {
-        console.log(object);
-        if (fs.statSync(basePath + '/modules/' + object).isDirectory) {
-            files.push({
-                path: basePath + '/modules/' + object,
-                objectName: object,
-                isDir: true
-            });
-        }
-    })*/
-
     //copy them to the package path
     files.forEach(file => {
         fs.copySync(file.path, basePath + '/package/' + file.objectName);
@@ -189,16 +194,7 @@ function processCore(package, version) {
 
     fs.writeFileSync(basePath + '/package/' + 'package.json', JSON.stringify(packageJson, null, 4));
 
-    console.log('Publishing ' + package.name + " from " + basePath + '/package/');
-
-    let tagDef = "";
-    // check for alpha or beta
-    if (version.indexOf('alpha') !== -1 || version.indexOf('beta') !== -1) {
-        tagDef = '--tag preview';
-    }
-
-    //publish the respected package
-    shelljs.exec('npm publish \"' + basePath + '/package/' + "\"" + ' ' + tagDef);
+    publish(version, package.name, basePath + '/package/');
 
     // remove package directory
     fs.removeSync(basePath + '/package/');
@@ -217,3 +213,63 @@ function processCore(package, version) {
     fs.writeFileSync(package.path + 'package.json', JSON.stringify(packageJson, null, 4));
 }
 
+function processViewer(package, version) {
+
+    let buildPath = package.path + "dist/build/src/";
+    let projectPath = '../../Viewer';
+
+    if (package.required) {
+        package.required.forEach(file => {
+
+            fs.copySync(file, buildPath + '/' + path.basename(file));
+        });
+    }
+    // the viewer needs to be built using tsc on the viewer's main repository
+
+    // build the viewer
+    console.log("executing " + 'tsc -p ' + projectPath);
+    shelljs.exec('tsc -p ' + projectPath);
+
+    let packageJson = require(buildPath + '/package.json');
+
+    let files = getFiles(buildPath).map(f => f.replace(buildPath + "/", "")).filter(f => f.indexOf("assets/") === -1);
+
+    packageJson.files = files;
+    packageJson.version = version;
+    packageJson.module = "index.js";
+    packageJson.main = "babylon.viewer.js";
+    packageJson.typings = "index.d.ts";
+
+    fs.writeFileSync(buildPath + '/package.json', JSON.stringify(packageJson, null, 4));
+
+    publish(version, package.name, buildPath);
+
+}
+
+function publish(version, packageName, basePath) {
+    console.log('Publishing ' + packageName + " from " + basePath);
+
+    let tagDef = "";
+    // check for alpha or beta
+    if (version.indexOf('alpha') !== -1 || version.indexOf('beta') !== -1) {
+        tagDef = '--tag preview';
+    }
+
+    //publish the respected package
+    console.log("executing " + 'npm publish \"' + basePath + "\"" + ' ' + tagDef);
+    shelljs.exec('npm publish \"' + basePath + "\"" + ' ' + tagDef);
+}
+
+function getFiles(dir, files_) {
+    files_ = files_ || [];
+    var files = fs.readdirSync(dir);
+    for (var i in files) {
+        var name = dir + '/' + files[i];
+        if (fs.statSync(name).isDirectory()) {
+            getFiles(name, files_);
+        } else {
+            files_.push(name);
+        }
+    }
+    return files_;
+}

Viewer/assets/package.json

@@ -0,0 +1,31 @@
+{
+    "author": {
+        "name": "Raanan Weber"
+    },
+    "name": "babylonjs-viewer-assets",
+    "description": "Compiled resources for the Babylon viewer.",
+    "version": "3.3.0-alpha.3",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/BabylonJS/Babylon.js.git"
+    },
+    "main": "babylon.viewer.assets.js",
+    "files": [
+        "babylon.viewer.assets.js",
+        "babylon.viewer.assets.module.d.ts",
+        "readme.md",
+        "package.json"
+    ],
+    "typings": "babylon.viewer.assets.module.d.ts",
+    "keywords": [
+        "3D",
+        "javascript",
+        "html5",
+        "webgl",
+        "viewer"
+    ],
+    "license": "Apache-2.0",
+    "engines": {
+        "node": "*"
+    }
+}

Viewer/assets/readme.md

@@ -0,0 +1,19 @@
+# Babylon.js Viewer Assets
+
+Babylon's viewer assets package contains all needed binsry assets neeed for the proper operation of the viewer's templating system.
+
+This packes is only needed when intalling the viewer's npm package and is installed  and used automatically.
+
+For basic and advanced viewer usage instructions please read the doc at https://doc.babylonjs.com/extensions/the_babylon_viewer
+
+The source code can be found at https://github.com/BabylonJS/Babylon.js/tree/master/Viewer
+
+## Overriding the package
+
+To override the package when (for example) using webpack, define the package `babylonjs-viewer-assets` in "externals":
+
+```javascript
+externals: {
+    "babylonjs-viewer-assets": true
+}
+```

Viewer/src/index.ts

@@ -3,7 +3,7 @@ import { viewerGlobals } from './configuration/globals';
 import { viewerManager } from './viewer/viewerManager';
 import { DefaultViewer } from './viewer/defaultViewer';
 import { AbstractViewer } from './viewer/viewer';
-import { telemetryManager } from './telemetryManager';
+import { telemetryManager } from './managers/telemetryManager';
 import { ModelLoader } from './loader/modelLoader';
 import { ViewerModel, ModelState } from './model/viewerModel';
 import { AnimationPlayMode, AnimationState } from './model/modelAnimation';

Viewer/src/initializer.ts

@@ -1,6 +1,6 @@
 import { DefaultViewer } from './viewer/defaultViewer';
 import { mapperManager } from './configuration/mappers';
-import { viewerGlobals, disableInit } from './';
+import { viewerGlobals } from './configuration/globals';
 
 
 /**
@@ -11,7 +11,7 @@ export function initListeners() {
     document.addEventListener("DOMContentLoaded", init);
     function init(event) {
         document.removeEventListener("DOMContentLoaded", init);
-        if (viewerGlobals.disableInit || disableInit) return;
+        if (viewerGlobals.disableInit) return;
         InitTags();
     }
 }

Viewer/src/loader/plugins/applyMaterialConfig.ts

@@ -1,5 +1,4 @@
 import { ILoaderPlugin } from "./loaderPlugin";
-import { telemetryManager } from "../../telemetryManager";
 import { ViewerModel } from "../../model/viewerModel";
 import { Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Material } from "babylonjs";
 import { IGLTFLoaderData, GLTF2 } from "babylonjs-loaders";

Viewer/src/loader/plugins/extendedMaterialLoaderPlugin.ts

@@ -1,5 +1,4 @@
 import { ILoaderPlugin } from "./loaderPlugin";
-import { telemetryManager } from "../../telemetryManager";
 import { ViewerModel } from "../../model/viewerModel";
 import { Color3, Texture, BaseTexture, Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Material, PBRMaterial, Engine } from "babylonjs";
 

Viewer/src/loader/plugins/msftLodLoaderPlugin.ts

@@ -1,5 +1,4 @@
 import { ILoaderPlugin } from "./loaderPlugin";
-import { telemetryManager } from "../../telemetryManager";
 import { ViewerModel } from "../../model/viewerModel";
 import { Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs";
 import { IGLTFLoaderExtension, GLTF2 } from "babylonjs-loaders";

Viewer/src/loader/plugins/telemetryLoaderPlugin.ts

@@ -1,5 +1,5 @@
 import { ILoaderPlugin } from "./loaderPlugin";
-import { telemetryManager } from "../../telemetryManager";
+import { telemetryManager } from "../../managers/telemetryManager";
 import { ViewerModel } from "../../model/viewerModel";
 import { Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs";
 

Viewer/src/viewer/defaultViewer.ts

@@ -26,6 +26,9 @@ export class DefaultViewer extends AbstractViewer {
         super(containerElement, initialConfiguration);
 
         this.onModelLoadedObservable.add(this._onModelLoaded);
+        this.onModelRemovedObservable.add(() => {
+            this._configureTemplate();
+        })
 
         this.onEngineInitObservable.add(() => {
             this.sceneManager.onLightsConfiguredObservable.add((data) => {
@@ -294,32 +297,39 @@ export class DefaultViewer extends AbstractViewer {
      * 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) {
+    protected _configureTemplate(model?: ViewerModel) {
         let navbar = this.templateManager.getTemplate('navBar');
         if (!navbar) return;
 
-        let newParams: any = {};
-
-        let animationNames = model.getAnimationNames();
-        if (animationNames.length >= 1) {
-            this._isAnimationPaused = (model.configuration.animation && !model.configuration.animation.autoStart) || !model.configuration.animation;
-            this._animationList = animationNames;
-            newParams.animations = this._animationList;
-            newParams.paused = this._isAnimationPaused;
-            let animationIndex = 0;
-            if (model.configuration.animation && typeof model.configuration.animation.autoStart === 'string') {
-                animationIndex = animationNames.indexOf(model.configuration.animation.autoStart);
-                if (animationIndex === -1) {
-                    animationIndex = 0;
+        let newParams: any = navbar.configuration.params || {};
+
+        if (!model) {
+            newParams.animations = null;
+        } else {
+
+            let animationNames = model.getAnimationNames();
+            newParams.animations = animationNames;
+            if (animationNames.length) {
+                this._isAnimationPaused = (model.configuration.animation && !model.configuration.animation.autoStart) || !model.configuration.animation;
+                this._animationList = animationNames;
+                newParams.paused = this._isAnimationPaused;
+                let animationIndex = 0;
+                if (model.configuration.animation && typeof model.configuration.animation.autoStart === 'string') {
+                    animationIndex = animationNames.indexOf(model.configuration.animation.autoStart);
+                    if (animationIndex === -1) {
+                        animationIndex = 0;
+                    }
                 }
+                this._updateAnimationType(animationNames[animationIndex], newParams);
+            } else {
+                newParams.animations = null;
             }
-            this._updateAnimationType(animationNames[animationIndex], newParams);
-        }
 
-        if (model.configuration.thumbnail) {
-            newParams.logoImage = model.configuration.thumbnail
+            if (model.configuration.thumbnail) {
+                newParams.logoImage = model.configuration.thumbnail
+            }
         }
-        navbar.updateParams(newParams);
+        navbar.updateParams(newParams, false);
     }
 
     /**

Viewer/src/viewer/viewer.ts

@@ -10,7 +10,7 @@ import { ModelLoader } from '../loader/modelLoader';
 import { CameraBehavior } from '../interfaces';
 import { viewerGlobals } from '../configuration/globals';
 import { extendClassWithConfig } from '../helper';
-import { telemetryManager } from '../telemetryManager';
+import { telemetryManager } from '../managers/telemetryManager';
 import { deepmerge } from '../helper/';
 import { ObservablesManager } from '../managers/observablesManager';
 import { ConfigurationContainer } from '../configuration/configurationContainer';

Viewer/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "target": "es2015",
-        "module": "es2015",
+        "module": "commonjs",
         "declaration": true,
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,

Viewer/webpack.assets.config.js

@@ -0,0 +1,42 @@
+module.exports = {
+    entry: [
+        __dirname + '/src/assets/index.ts'
+    ],
+    output: {
+        libraryTarget: 'var',
+        library: 'BabylonViewerAssets',
+        umdNamedDefine: true
+    },
+    resolve: {
+        extensions: ['.ts']
+    },
+    module: {
+        loaders: [{
+            test: /\.tsx?$/,
+            use: {
+                loader: 'ts-loader',
+                options: {
+                    configFile: 'tsconfig-gulp.json'
+                }
+            },
+            exclude: /node_modules/
+        },
+        {
+            test: /\.(html)$/,
+            use: {
+                loader: 'html-loader',
+                options: {
+                    minimize: true
+                }
+            }
+        },
+        {
+            test: /\.(jpe?g|png|ttf|eot|svg?)(\?[a-z0-9=&.]+)?$/,
+            use: 'base64-image-loader?limit=1000&name=[name].[ext]'
+        },
+        {
+            test: /\.(woff|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+            loader: 'base64-font-loader'
+        }]
+    }
+}

Viewer/webpack.gulp.config.js

@@ -2,8 +2,7 @@ module.exports = {
     //context: __dirname,
     entry: [
         __dirname + '/src/index.ts'
-    ]
-    ,
+    ],
     output: {
         libraryTarget: 'var',
         library: 'BabylonViewer',

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.3",
+    "version": "3.3.0-alpha.6",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

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

@@ -607,6 +607,8 @@ declare module BABYLON.GUI {
         private _enterCount;
         private _doNotRender;
         private _downPointerIds;
+        /** @hidden */
+        _tag: any;
         /** Gets or sets a boolean indicating if the control can be hit with pointer events */
         isHitTestVisible: boolean;
         /** Gets or sets a boolean indicating if the control can block pointer events */
@@ -1867,6 +1869,89 @@ declare module BABYLON.GUI {
 
 declare module BABYLON.GUI {
     /**
+     * Class used to create a 2D grid container
+     */
+    class Grid extends Container {
+        name: string | undefined;
+        private _rowDefinitions;
+        private _columnDefinitions;
+        private _cells;
+        private _childControls;
+        /** Gets the list of children */
+        readonly children: Control[];
+        /**
+         * Adds a new row to the grid
+         * @param height defines the height of the row (either in pixel or a value between 0 and 1)
+         * @param isPixel defines if the height is expressed in pixel (or in percentage)
+         * @returns the current grid
+         */
+        addRowDefinition(height: number, isPixel?: boolean): Grid;
+        /**
+         * Adds a new column to the grid
+         * @param width defines the width of the column (either in pixel or a value between 0 and 1)
+         * @param isPixel defines if the width is expressed in pixel (or in percentage)
+         * @returns the current grid
+         */
+        addColumnDefinition(width: number, isPixel?: boolean): Grid;
+        /**
+         * Update a row definition
+         * @param index defines the index of the row to update
+         * @param height defines the height of the row (either in pixel or a value between 0 and 1)
+         * @param isPixel defines if the weight is expressed in pixel (or in percentage)
+         * @returns the current grid
+         */
+        setRowDefinition(index: number, height: number, isPixel?: boolean): Grid;
+        /**
+         * Update a column definition
+         * @param index defines the index of the column to update
+         * @param width defines the width of the column (either in pixel or a value between 0 and 1)
+         * @param isPixel defines if the width is expressed in pixel (or in percentage)
+         * @returns the current grid
+         */
+        setColumnDefinition(index: number, width: number, isPixel?: boolean): Grid;
+        private _removeCell(cell, key);
+        private _offsetCell(previousKey, key);
+        /**
+         * Remove a column definition at specified index
+         * @param index defines the index of the column to remove
+         * @returns the current grid
+         */
+        removeColumnDefinition(index: number): Grid;
+        /**
+         * Remove a row definition at specified index
+         * @param index defines the index of the row to remove
+         * @returns the current grid
+         */
+        removeRowDefinition(index: number): Grid;
+        /**
+         * Adds a new control to the current grid
+         * @param control defines the control to add
+         * @param row defines the row where to add the control (0 by default)
+         * @param column defines the column where to add the control (0 by default)
+         * @returns the current grid
+         */
+        addControl(control: Control, row?: number, column?: number): Grid;
+        /**
+         * Removes a control from the current container
+         * @param control defines the control to remove
+         * @returns the current container
+         */
+        removeControl(control: Control): Container;
+        /**
+         * Creates a new Grid
+         * @param name defines control name
+         */
+        constructor(name?: string | undefined);
+        protected _getTypeName(): string;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        /** Releases associated resources */
+        dispose(): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
      * Class used to manage 3D user interface
      * @see http://doc.babylonjs.com/how_to/gui3d
      */
@@ -2252,9 +2337,25 @@ declare module BABYLON.GUI {
 
 declare module BABYLON.GUI {
     /**
+     * Class used as a root to all buttons
+     */
+    class AbstractButton3D extends Control3D {
+        /**
+         * Creates a new button
+         * @param name defines the control name
+         */
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        protected _createNode(scene: Scene): TransformNode;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
      * Class used to create a button in 3D
      */
-    class Button3D extends Control3D {
+    class Button3D extends AbstractButton3D {
         /** @hidden */
         protected _currentMaterial: Material;
         private _facadeTexture;
@@ -2440,3 +2541,19 @@ declare module BABYLON.GUI {
         private _sphericalMapping(source);
     }
 }
+
+
+declare module BABYLON.GUI {
+    /**
+     * Class used to create a container panel deployed on the surface of a cylinder
+     */
+    class CylinderPanel extends VolumeBasedPanel {
+        private _radius;
+        /**
+         * Gets or sets the radius of the cylinder where to project controls (5 by default)
+         */
+        radius: float;
+        protected _mapGridNode(control: Control3D, nodePosition: Vector3): void;
+        private _cylindricalMapping(source);
+    }
+}

dist/preview release/gui/babylon.gui.js

@@ -2888,7 +2888,7 @@ var BABYLON;
              * @returns the child control if found
              */
             Container.prototype.getChildByName = function (name) {
-                for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
+                for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
                     var child = _a[_i];
                     if (child.name === name) {
                         return child;
@@ -2903,7 +2903,7 @@ var BABYLON;
              * @returns the child control if found
              */
             Container.prototype.getChildByType = function (name, type) {
-                for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
+                for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
                     var child = _a[_i];
                     if (child.typeName === type) {
                         return child;
@@ -2917,7 +2917,7 @@ var BABYLON;
              * @returns true if the control is in child list
              */
             Container.prototype.containsControl = function (control) {
-                return this._children.indexOf(control) !== -1;
+                return this.children.indexOf(control) !== -1;
             };
             /**
              * Adds a new control to the current container
@@ -6477,6 +6477,321 @@ var BABYLON;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
 
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
+
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        /**
+         * Class used to create a 2D grid container
+         */
+        var Grid = /** @class */ (function (_super) {
+            __extends(Grid, _super);
+            /**
+             * Creates a new Grid
+             * @param name defines control name
+             */
+            function Grid(name) {
+                var _this = _super.call(this, name) || this;
+                _this.name = name;
+                _this._rowDefinitions = new Array();
+                _this._columnDefinitions = new Array();
+                _this._cells = {};
+                _this._childControls = new Array();
+                return _this;
+            }
+            Object.defineProperty(Grid.prototype, "children", {
+                /** Gets the list of children */
+                get: function () {
+                    return this._childControls;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            /**
+             * Adds a new row to the grid
+             * @param height defines the height of the row (either in pixel or a value between 0 and 1)
+             * @param isPixel defines if the height is expressed in pixel (or in percentage)
+             * @returns the current grid
+             */
+            Grid.prototype.addRowDefinition = function (height, isPixel) {
+                if (isPixel === void 0) { isPixel = false; }
+                this._rowDefinitions.push(new GUI.ValueAndUnit(height, isPixel ? GUI.ValueAndUnit.UNITMODE_PIXEL : GUI.ValueAndUnit.UNITMODE_PERCENTAGE));
+                this._markAsDirty();
+                return this;
+            };
+            /**
+             * Adds a new column to the grid
+             * @param width defines the width of the column (either in pixel or a value between 0 and 1)
+             * @param isPixel defines if the width is expressed in pixel (or in percentage)
+             * @returns the current grid
+             */
+            Grid.prototype.addColumnDefinition = function (width, isPixel) {
+                if (isPixel === void 0) { isPixel = false; }
+                this._columnDefinitions.push(new GUI.ValueAndUnit(width, isPixel ? GUI.ValueAndUnit.UNITMODE_PIXEL : GUI.ValueAndUnit.UNITMODE_PERCENTAGE));
+                this._markAsDirty();
+                return this;
+            };
+            /**
+             * Update a row definition
+             * @param index defines the index of the row to update
+             * @param height defines the height of the row (either in pixel or a value between 0 and 1)
+             * @param isPixel defines if the weight is expressed in pixel (or in percentage)
+             * @returns the current grid
+             */
+            Grid.prototype.setRowDefinition = function (index, height, isPixel) {
+                if (isPixel === void 0) { isPixel = false; }
+                if (index < 0 || index >= this._rowDefinitions.length) {
+                    return this;
+                }
+                this._rowDefinitions[index] = new GUI.ValueAndUnit(height, isPixel ? GUI.ValueAndUnit.UNITMODE_PIXEL : GUI.ValueAndUnit.UNITMODE_PERCENTAGE);
+                this._markAsDirty();
+                return this;
+            };
+            /**
+             * Update a column definition
+             * @param index defines the index of the column to update
+             * @param width defines the width of the column (either in pixel or a value between 0 and 1)
+             * @param isPixel defines if the width is expressed in pixel (or in percentage)
+             * @returns the current grid
+             */
+            Grid.prototype.setColumnDefinition = function (index, width, isPixel) {
+                if (isPixel === void 0) { isPixel = false; }
+                if (index < 0 || index >= this._columnDefinitions.length) {
+                    return this;
+                }
+                this._columnDefinitions[index] = new GUI.ValueAndUnit(width, isPixel ? GUI.ValueAndUnit.UNITMODE_PIXEL : GUI.ValueAndUnit.UNITMODE_PERCENTAGE);
+                this._markAsDirty();
+                return this;
+            };
+            Grid.prototype._removeCell = function (cell, key) {
+                if (!cell) {
+                    return;
+                }
+                _super.prototype.removeControl.call(this, cell);
+                for (var _i = 0, _a = cell.children; _i < _a.length; _i++) {
+                    var control = _a[_i];
+                    var childIndex = this._childControls.indexOf(control);
+                    if (childIndex !== -1) {
+                        this._childControls.splice(childIndex, 1);
+                    }
+                }
+                delete this._cells[key];
+            };
+            Grid.prototype._offsetCell = function (previousKey, key) {
+                if (!this._cells[key]) {
+                    return;
+                }
+                this._cells[previousKey] = this._cells[key];
+                for (var _i = 0, _a = this._cells[previousKey].children; _i < _a.length; _i++) {
+                    var control = _a[_i];
+                    control._tag = previousKey;
+                }
+                delete this._cells[key];
+            };
+            /**
+             * Remove a column definition at specified index
+             * @param index defines the index of the column to remove
+             * @returns the current grid
+             */
+            Grid.prototype.removeColumnDefinition = function (index) {
+                if (index < 0 || index >= this._columnDefinitions.length) {
+                    return this;
+                }
+                for (var x = 0; x < this._rowDefinitions.length; x++) {
+                    var key = x + ":" + index;
+                    var cell = this._cells[key];
+                    this._removeCell(cell, key);
+                }
+                for (var x = 0; x < this._rowDefinitions.length; x++) {
+                    for (var y = index + 1; y < this._columnDefinitions.length; y++) {
+                        var previousKey = x + ":" + (y - 1);
+                        var key = x + ":" + y;
+                        this._offsetCell(previousKey, key);
+                    }
+                }
+                this._columnDefinitions.splice(index, 1);
+                this._markAsDirty();
+                return this;
+            };
+            /**
+             * Remove a row definition at specified index
+             * @param index defines the index of the row to remove
+             * @returns the current grid
+             */
+            Grid.prototype.removeRowDefinition = function (index) {
+                if (index < 0 || index >= this._rowDefinitions.length) {
+                    return this;
+                }
+                for (var y = 0; y < this._columnDefinitions.length; y++) {
+                    var key = index + ":" + y;
+                    var cell = this._cells[key];
+                    this._removeCell(cell, key);
+                }
+                for (var y = 0; y < this._columnDefinitions.length; y++) {
+                    for (var x = index + 1; x < this._rowDefinitions.length; x++) {
+                        var previousKey = x - 1 + ":" + y;
+                        var key = x + ":" + y;
+                        this._offsetCell(previousKey, key);
+                    }
+                }
+                this._rowDefinitions.splice(index, 1);
+                this._markAsDirty();
+                return this;
+            };
+            /**
+             * Adds a new control to the current grid
+             * @param control defines the control to add
+             * @param row defines the row where to add the control (0 by default)
+             * @param column defines the column where to add the control (0 by default)
+             * @returns the current grid
+             */
+            Grid.prototype.addControl = function (control, row, column) {
+                if (row === void 0) { row = 0; }
+                if (column === void 0) { column = 0; }
+                if (this._rowDefinitions.length === 0) {
+                    // Add default row definition
+                    this.addRowDefinition(1, false);
+                }
+                if (this._columnDefinitions.length === 0) {
+                    // Add default column definition
+                    this.addColumnDefinition(1, false);
+                }
+                var x = Math.min(row, this._rowDefinitions.length - 1);
+                var y = Math.min(column, this._columnDefinitions.length - 1);
+                var key = x + ":" + y;
+                var goodContainer = this._cells[key];
+                if (!goodContainer) {
+                    goodContainer = new GUI.Container(key);
+                    this._cells[key] = goodContainer;
+                    goodContainer.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+                    goodContainer.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
+                    _super.prototype.addControl.call(this, goodContainer);
+                }
+                goodContainer.addControl(control);
+                this._childControls.push(control);
+                control._tag = key;
+                this._markAsDirty();
+                return this;
+            };
+            /**
+             * Removes a control from the current container
+             * @param control defines the control to remove
+             * @returns the current container
+             */
+            Grid.prototype.removeControl = function (control) {
+                var index = this._childControls.indexOf(control);
+                if (index !== -1) {
+                    this._childControls.splice(index, 1);
+                }
+                var cell = this._cells[control._tag];
+                if (cell) {
+                    cell.removeControl(control);
+                }
+                this._markAsDirty();
+                return this;
+            };
+            Grid.prototype._getTypeName = function () {
+                return "Grid";
+            };
+            Grid.prototype._additionalProcessing = function (parentMeasure, context) {
+                var widths = [];
+                var heights = [];
+                var lefts = [];
+                var tops = [];
+                var availableWidth = this._currentMeasure.width;
+                var globalWidthPercentage = 0;
+                var availableHeight = this._currentMeasure.height;
+                var globalHeightPercentage = 0;
+                // Heights
+                var index = 0;
+                for (var _i = 0, _a = this._rowDefinitions; _i < _a.length; _i++) {
+                    var value = _a[_i];
+                    if (value.isPixel) {
+                        var height = value.getValue(this._host);
+                        availableHeight -= height;
+                        heights[index] = height;
+                    }
+                    else {
+                        globalHeightPercentage += value.internalValue;
+                    }
+                    index++;
+                }
+                var top = 0;
+                index = 0;
+                for (var _b = 0, _c = this._rowDefinitions; _b < _c.length; _b++) {
+                    var value = _c[_b];
+                    tops.push(top);
+                    if (!value.isPixel) {
+                        var height = (value.internalValue / globalHeightPercentage) * availableHeight;
+                        top += height;
+                        heights[index] = height;
+                    }
+                    else {
+                        top += value.getValue(this._host);
+                    }
+                    index++;
+                }
+                // Widths
+                index = 0;
+                for (var _d = 0, _e = this._columnDefinitions; _d < _e.length; _d++) {
+                    var value = _e[_d];
+                    if (value.isPixel) {
+                        var width = value.getValue(this._host);
+                        availableWidth -= width;
+                        widths[index] = width;
+                    }
+                    else {
+                        globalWidthPercentage += value.internalValue;
+                    }
+                    index++;
+                }
+                var left = 0;
+                index = 0;
+                for (var _f = 0, _g = this._columnDefinitions; _f < _g.length; _f++) {
+                    var value = _g[_f];
+                    lefts.push(left);
+                    if (!value.isPixel) {
+                        var width = (value.internalValue / globalWidthPercentage) * availableWidth;
+                        left += width;
+                        widths[index] = width;
+                    }
+                    else {
+                        left += value.getValue(this._host);
+                    }
+                    index++;
+                }
+                // Setting child sizes
+                for (var key in this._cells) {
+                    if (!this._cells.hasOwnProperty(key)) {
+                        continue;
+                    }
+                    var split = key.split(":");
+                    var x = parseInt(split[0]);
+                    var y = parseInt(split[1]);
+                    var cell = this._cells[key];
+                    cell.left = lefts[y] + "px";
+                    cell.top = tops[x] + "px";
+                    cell.width = widths[y] + "px";
+                    cell.height = heights[x] + "px";
+                }
+                _super.prototype._additionalProcessing.call(this, parentMeasure, context);
+            };
+            /** Releases associated resources */
+            Grid.prototype.dispose = function () {
+                _super.prototype.dispose.call(this);
+                for (var _i = 0, _a = this._childControls; _i < _a.length; _i++) {
+                    var control = _a[_i];
+                    control.dispose();
+                }
+            };
+            return Grid;
+        }(GUI.Container));
+        GUI.Grid = Grid;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
 /// <reference path="../../../dist/preview release/babylon.d.ts"/>
 var BABYLON;
 (function (BABYLON) {
@@ -6587,6 +6902,9 @@ var BABYLON;
                         this._lastControlDown[pointerEvent.pointerId].forcePointerUp();
                         delete this._lastControlDown[pointerEvent.pointerId];
                     }
+                    if (pointerEvent.pointerType === "touch") {
+                        this._handlePointerOut(pointerId, false);
+                    }
                 }
                 return true;
             };
@@ -7122,7 +7440,7 @@ var BABYLON;
                     this._isVisible = value;
                     var mesh = this.mesh;
                     if (mesh) {
-                        mesh.isVisible = value;
+                        mesh.setEnabled(value);
                     }
                 },
                 enumerable: true,
@@ -7478,6 +7796,37 @@ var BABYLON;
     var GUI;
     (function (GUI) {
         /**
+         * Class used as a root to all buttons
+         */
+        var AbstractButton3D = /** @class */ (function (_super) {
+            __extends(AbstractButton3D, _super);
+            /**
+             * Creates a new button
+             * @param name defines the control name
+             */
+            function AbstractButton3D(name) {
+                return _super.call(this, name) || this;
+            }
+            AbstractButton3D.prototype._getTypeName = function () {
+                return "AbstractButton3D";
+            };
+            // Mesh association
+            AbstractButton3D.prototype._createNode = function (scene) {
+                return new BABYLON.TransformNode("button" + this.name);
+            };
+            return AbstractButton3D;
+        }(GUI.Control3D));
+        GUI.AbstractButton3D = AbstractButton3D;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
+
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        /**
          * Class used to create a button in 3D
          */
         var Button3D = /** @class */ (function (_super) {
@@ -7626,7 +7975,7 @@ var BABYLON;
                 }
             };
             return Button3D;
-        }(GUI.Control3D));
+        }(GUI.AbstractButton3D));
         GUI.Button3D = Button3D;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
@@ -8164,7 +8513,7 @@ var BABYLON;
             __extends(SpherePanel, _super);
             function SpherePanel() {
                 var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this._radius = 4.0;
+                _this._radius = 5.0;
                 return _this;
             }
             Object.defineProperty(SpherePanel.prototype, "radius", {
@@ -8222,6 +8571,76 @@ var BABYLON;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
 
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
+
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        /**
+         * Class used to create a container panel deployed on the surface of a cylinder
+         */
+        var CylinderPanel = /** @class */ (function (_super) {
+            __extends(CylinderPanel, _super);
+            function CylinderPanel() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this._radius = 5.0;
+                return _this;
+            }
+            Object.defineProperty(CylinderPanel.prototype, "radius", {
+                /**
+                 * Gets or sets the radius of the cylinder where to project controls (5 by default)
+                 */
+                get: function () {
+                    return this._radius;
+                },
+                set: function (value) {
+                    var _this = this;
+                    if (this._radius === value) {
+                        return;
+                    }
+                    this._radius = value;
+                    BABYLON.Tools.SetImmediate(function () {
+                        _this._arrangeChildren();
+                    });
+                },
+                enumerable: true,
+                configurable: true
+            });
+            CylinderPanel.prototype._mapGridNode = function (control, nodePosition) {
+                var newPos = this._cylindricalMapping(nodePosition);
+                var mesh = control.mesh;
+                if (!mesh) {
+                    return;
+                }
+                switch (this.orientation) {
+                    case GUI.Container3D.FACEORIGIN_ORIENTATION:
+                        mesh.lookAt(new BABYLON.Vector3(-newPos.x, 0, -newPos.z));
+                        break;
+                    case GUI.Container3D.FACEORIGINREVERSED_ORIENTATION:
+                        mesh.lookAt(new BABYLON.Vector3(newPos.x, 0, newPos.z));
+                        break;
+                    case GUI.Container3D.FACEFORWARD_ORIENTATION:
+                        mesh.lookAt(new BABYLON.Vector3(0, 0, 1));
+                        break;
+                    case GUI.Container3D.FACEFORWARDREVERSED_ORIENTATION:
+                        mesh.lookAt(new BABYLON.Vector3(0, 0, -1));
+                        break;
+                }
+                control.position = newPos;
+            };
+            CylinderPanel.prototype._cylindricalMapping = function (source) {
+                var newPos = new BABYLON.Vector3(0, source.y, this._radius);
+                var yAngle = (source.x / this._radius);
+                BABYLON.Matrix.RotationYawPitchRollToRef(yAngle, 0, 0, BABYLON.Tmp.Matrix[0]);
+                return BABYLON.Vector3.TransformNormal(newPos, BABYLON.Tmp.Matrix[0]);
+            };
+            return CylinderPanel;
+        }(GUI.VolumeBasedPanel));
+        GUI.CylinderPanel = CylinderPanel;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
     
 
     return BABYLON.GUI;

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

@@ -612,6 +612,8 @@ declare module BABYLON.GUI {
         private _enterCount;
         private _doNotRender;
         private _downPointerIds;
+        /** @hidden */
+        _tag: any;
         /** Gets or sets a boolean indicating if the control can be hit with pointer events */
         isHitTestVisible: boolean;
         /** Gets or sets a boolean indicating if the control can block pointer events */
@@ -1872,6 +1874,89 @@ declare module BABYLON.GUI {
 
 declare module BABYLON.GUI {
     /**
+     * Class used to create a 2D grid container
+     */
+    class Grid extends Container {
+        name: string | undefined;
+        private _rowDefinitions;
+        private _columnDefinitions;
+        private _cells;
+        private _childControls;
+        /** Gets the list of children */
+        readonly children: Control[];
+        /**
+         * Adds a new row to the grid
+         * @param height defines the height of the row (either in pixel or a value between 0 and 1)
+         * @param isPixel defines if the height is expressed in pixel (or in percentage)
+         * @returns the current grid
+         */
+        addRowDefinition(height: number, isPixel?: boolean): Grid;
+        /**
+         * Adds a new column to the grid
+         * @param width defines the width of the column (either in pixel or a value between 0 and 1)
+         * @param isPixel defines if the width is expressed in pixel (or in percentage)
+         * @returns the current grid
+         */
+        addColumnDefinition(width: number, isPixel?: boolean): Grid;
+        /**
+         * Update a row definition
+         * @param index defines the index of the row to update
+         * @param height defines the height of the row (either in pixel or a value between 0 and 1)
+         * @param isPixel defines if the weight is expressed in pixel (or in percentage)
+         * @returns the current grid
+         */
+        setRowDefinition(index: number, height: number, isPixel?: boolean): Grid;
+        /**
+         * Update a column definition
+         * @param index defines the index of the column to update
+         * @param width defines the width of the column (either in pixel or a value between 0 and 1)
+         * @param isPixel defines if the width is expressed in pixel (or in percentage)
+         * @returns the current grid
+         */
+        setColumnDefinition(index: number, width: number, isPixel?: boolean): Grid;
+        private _removeCell(cell, key);
+        private _offsetCell(previousKey, key);
+        /**
+         * Remove a column definition at specified index
+         * @param index defines the index of the column to remove
+         * @returns the current grid
+         */
+        removeColumnDefinition(index: number): Grid;
+        /**
+         * Remove a row definition at specified index
+         * @param index defines the index of the row to remove
+         * @returns the current grid
+         */
+        removeRowDefinition(index: number): Grid;
+        /**
+         * Adds a new control to the current grid
+         * @param control defines the control to add
+         * @param row defines the row where to add the control (0 by default)
+         * @param column defines the column where to add the control (0 by default)
+         * @returns the current grid
+         */
+        addControl(control: Control, row?: number, column?: number): Grid;
+        /**
+         * Removes a control from the current container
+         * @param control defines the control to remove
+         * @returns the current container
+         */
+        removeControl(control: Control): Container;
+        /**
+         * Creates a new Grid
+         * @param name defines control name
+         */
+        constructor(name?: string | undefined);
+        protected _getTypeName(): string;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        /** Releases associated resources */
+        dispose(): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
      * Class used to manage 3D user interface
      * @see http://doc.babylonjs.com/how_to/gui3d
      */
@@ -2257,9 +2342,25 @@ declare module BABYLON.GUI {
 
 declare module BABYLON.GUI {
     /**
+     * Class used as a root to all buttons
+     */
+    class AbstractButton3D extends Control3D {
+        /**
+         * Creates a new button
+         * @param name defines the control name
+         */
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        protected _createNode(scene: Scene): TransformNode;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
      * Class used to create a button in 3D
      */
-    class Button3D extends Control3D {
+    class Button3D extends AbstractButton3D {
         /** @hidden */
         protected _currentMaterial: Material;
         private _facadeTexture;
@@ -2445,3 +2546,19 @@ declare module BABYLON.GUI {
         private _sphericalMapping(source);
     }
 }
+
+
+declare module BABYLON.GUI {
+    /**
+     * Class used to create a container panel deployed on the surface of a cylinder
+     */
+    class CylinderPanel extends VolumeBasedPanel {
+        private _radius;
+        /**
+         * Gets or sets the radius of the cylinder where to project controls (5 by default)
+         */
+        radius: float;
+        protected _mapGridNode(control: Control3D, nodePosition: Vector3): void;
+        private _cylindricalMapping(source);
+    }
+}

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.3",
+    "version": "3.3.0-alpha.6",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/inspector/babylon.inspector.css

@@ -308,15 +308,13 @@
     border-bottom: 1px solid #5db0d7;
     box-sizing: border-box; }
   .insp-wrapper .tab-panel .tool-label, .insp-wrapper .tab-panel .tool-label-line, .insp-wrapper .tab-panel .tool-label-error {
-    display: inline-block;
-    width: 75%;
-    padding: 2px;
     background-color: #2c2c2c;
-    border-bottom: 1px solid #242424;
-    border-top: 1px solid #242424;
-    height: 30px;
-    line-height: 30px;
-    box-sizing: border-box; }
+    border: none;
+    outline: none;
+    font-family: "Inconsolata", sans-serif;
+    color: #b3b3b3;
+    padding: 5px;
+    margin: 0px 6px 0px 0; }
   .insp-wrapper .tab-panel .tool-label-line {
     width: 100%; }
   .insp-wrapper .tab-panel .tool-label-error {
@@ -336,6 +334,23 @@
   .insp-wrapper .tab-panel .tool-infos {
     width: 100%;
     padding: 4px; }
+  .insp-wrapper .tab-panel .tool-input {
+    background-color: #2c2c2c;
+    border: none;
+    outline: none;
+    font-family: "Inconsolata", sans-serif;
+    color: #ccc;
+    padding: 5px 10px;
+    margin: 0px 6px 0px 0;
+    width: 100%;
+    border-top: 1px solid #242424;
+    border-bottom: 1px solid #242424;
+    text-align: left; }
+    .insp-wrapper .tab-panel .tool-input:hover {
+      background-color: #383838;
+      cursor: pointer; }
+    .insp-wrapper .tab-panel .tool-input:active {
+      background-color: #454545; }
   .insp-wrapper .property-type {
     color: #5db0d7; }
   .insp-wrapper .property-name, .insp-wrapper .insp-details .base-row .prop-name, .insp-wrapper .insp-details .row .prop-name, .insp-wrapper .insp-details .header-row .prop-name {

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

@@ -471,7 +471,9 @@ declare module INSPECTOR {
         private _property;
         /** The obj this property refers to */
         private _obj;
-        constructor(prop: string, obj: any);
+        /** The obj parent  */
+        private _parentObj;
+        constructor(prop: string, obj: any, parentObj?: PropertyLine);
         readonly name: string;
         value: any;
         readonly type: string;
@@ -1056,7 +1058,6 @@ declare module INSPECTOR {
         private _inspector;
         private _scene;
         constructor(tabbar: TabBar, insp: Inspector);
-        private _createToolLabel(content, parent);
         dispose(): void;
     }
 }

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

@@ -304,10 +304,10 @@ var INSPECTOR;
             // Create popup
             var popup = window.open('', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');
             if (!popup) {
+                alert("Please update your browser to open the Babylon.js inspector in an external view.");
                 return;
             }
             popup.document.title = "Babylon.js INSPECTOR";
-            popup.document.body.innerHTML = "Coucou!";
             // Get the inspector style      
             var styles = Inspector.DOCUMENT.querySelectorAll('style');
             for (var s = 0; s < styles.length; s++) {
@@ -1362,9 +1362,10 @@ var INSPECTOR;
      * A property is a link between a data (string) and an object.
      */
     var Property = /** @class */ (function () {
-        function Property(prop, obj) {
+        function Property(prop, obj, parentObj) {
             this._property = prop;
             this._obj = obj;
+            this._parentObj = parentObj || null;
         }
         Object.defineProperty(Property.prototype, "name", {
             get: function () {
@@ -1378,6 +1379,45 @@ var INSPECTOR;
                 return this._obj[this._property];
             },
             set: function (newValue) {
+                if (newValue != undefined && this._obj[this._property] != undefined) {
+                    if (this._obj instanceof BABYLON.Scene) {
+                        this._obj.debugLayer.onGlobalPropertyChangeCallback({
+                            object: this._obj,
+                            property: this._property,
+                            value: newValue,
+                            initialValue: this._obj[this._property]
+                        });
+                    }
+                    else {
+                        if (this._parentObj != null) {
+                            // Object that have "children" properties : Color, Vector, imageProcessingConfiguration
+                            if (this._parentObj instanceof BABYLON.Scene) {
+                                this._parentObj.debugLayer.onGlobalPropertyChangeCallback({
+                                    object: this._parentObj,
+                                    property: this._property,
+                                    value: newValue,
+                                    initialValue: this._obj[this._property]
+                                });
+                            }
+                            else {
+                                this._parentObj.getScene().debugLayer.onGlobalPropertyChangeCallback({
+                                    object: this._parentObj,
+                                    property: this._property,
+                                    value: newValue,
+                                    initialValue: this._obj[this._property]
+                                });
+                            }
+                        }
+                        else {
+                            this._obj.getScene().debugLayer.onGlobalPropertyChangeCallback({
+                                object: this._obj,
+                                property: this._property,
+                                value: newValue,
+                                initialValue: this._obj[this._property]
+                            });
+                        }
+                    }
+                }
                 this._obj[this._property] = newValue;
             },
             enumerable: true,
@@ -1515,8 +1555,7 @@ var INSPECTOR;
                 e.preventDefault();
                 this.validateInput(this._input.value);
             }
-            else if (e.keyCode == 27) {
-                // Esc : remove input
+            else if (e.keyCode == 27) { // Esc : remove input
                 this.update();
             }
         };
@@ -1825,20 +1864,20 @@ var INSPECTOR;
                     }
                     for (var _b = 0, propToDisplay_1 = propToDisplay; _b < propToDisplay_1.length; _b++) {
                         var prop = propToDisplay_1[_b];
-                        var infos = new INSPECTOR.Property(prop, this._property.value);
+                        var infos = new INSPECTOR.Property(prop, this._property.value, this._property.obj);
                         var child = new PropertyLine(infos, this, this._level + PropertyLine._MARGIN_LEFT);
                         this._children.push(child);
                     }
                     //Add the Hexa converter
                     if ((propToDisplay.indexOf('r') && propToDisplay.indexOf('g') && propToDisplay.indexOf('b') && propToDisplay.indexOf('a')) == 0) {
                         var hexLineInfos = [];
-                        var hexLinePropCheck = new INSPECTOR.Property("hexEnable", this._property.value);
+                        var hexLinePropCheck = new INSPECTOR.Property("hexEnable", this._property.value, this._property.obj);
                         hexLinePropCheck.value = false;
                         var hexLineCheck = new PropertyLine(hexLinePropCheck, this, this._level + PropertyLine._MARGIN_LEFT);
                         this._children.unshift(hexLineCheck);
                         for (var _c = 0, propToDisplay_2 = propToDisplay; _c < propToDisplay_2.length; _c++) {
                             var prop = propToDisplay_2[_c];
-                            var infos = new INSPECTOR.Property(prop, this._property.value);
+                            var infos = new INSPECTOR.Property(prop, this._property.value, this._property.obj);
                             var valHex = ((infos.value * 255) | 0).toString(16);
                             hexLineInfos.push(valHex);
                             if (valHex == "0") {
@@ -1848,7 +1887,7 @@ var INSPECTOR;
                         hexLineInfos.push("#");
                         hexLineInfos.reverse();
                         var hexLineString = hexLineInfos.join("");
-                        var hexLineProp = new INSPECTOR.Property("hex", this._property.value);
+                        var hexLineProp = new INSPECTOR.Property("hex", this._property.value, this._property.obj);
                         hexLineProp.value = hexLineString;
                         var hexLine = new PropertyLine(hexLineProp, this, this._level + PropertyLine._MARGIN_LEFT);
                         this._children.unshift(hexLine);
@@ -2424,7 +2463,6 @@ var INSPECTOR;
          * Returns true if the user browser is edge.
          */
         Helpers.IsBrowserEdge = function () {
-            //Detect if we are running on a faulty buggy OS.
             var regexp = /Edge/;
             return regexp.test(navigator.userAgent);
         };
@@ -2432,7 +2470,6 @@ var INSPECTOR;
          * Returns true if the user browser is IE.
          */
         Helpers.IsBrowserIE = function () {
-            //Detect if we are running on a faulty buggy OS.
             var regexp = /Trident.*rv\:11\./;
             return regexp.test(navigator.userAgent);
         };
@@ -4268,16 +4305,16 @@ var INSPECTOR;
             title.appendChild(versionSpan);
             // Environment block
             title = INSPECTOR.Helpers.CreateDiv('tool-title2', _this._panel);
-            title.textContent = "Environment";
+            title.textContent = "Environment Texture (.dds, .env)";
             {
-                var elemLabel = _this._createToolLabel("Load Environment Texture (.dds, .env) ", _this._panel);
-                elemLabel.className = "tool-label-line";
                 var errorElemm_1 = INSPECTOR.Inspector.DOCUMENT.createElement('div');
                 errorElemm_1.className = "tool-label-error";
                 errorElemm_1.style.display = "none";
+                var elemValue = INSPECTOR.Helpers.CreateDiv(null, _this._panel);
                 var inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
-                inputElement.className = "tool-label-line";
+                inputElement.className = "tool-input";
                 inputElement.type = "file";
+                inputElement.accept = ".dds, .env";
                 inputElement.onchange = function (event) {
                     var files = event.target.files;
                     var file = null;
@@ -4315,46 +4352,48 @@ var INSPECTOR;
                         }
                     }, undefined, true);
                 };
-                _this._panel.appendChild(inputElement);
-                _this._createToolLabel("Compress to .env", _this._panel);
-                var elemValue = INSPECTOR.Helpers.CreateDiv('tool-value', _this._panel);
-                inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
-                inputElement.value = "Save";
-                inputElement.type = "button";
-                inputElement.onclick = function () {
-                    if (!_this._scene.environmentTexture) {
-                        errorElemm_1.style.display = "block";
-                        errorElemm_1.textContent = "You must load an environment texture first.";
-                        return;
-                    }
-                    if (_this._scene.activeCamera) {
-                        BABYLON.EnvironmentTextureTools.CreateEnvTextureAsync(_this._scene.environmentTexture)
-                            .then(function (buffer) {
-                            var blob = new Blob([buffer], { type: "octet/stream" });
-                            BABYLON.Tools.Download(blob, "environment.env");
-                            errorElemm_1.style.display = "none";
-                        })
-                            .catch(function (error) {
-                            errorElemm_1.style.display = "block";
-                            errorElemm_1.textContent = error;
-                        });
-                    }
-                    else {
-                        errorElemm_1.style.display = "block";
-                        errorElemm_1.textContent = "An active camera is required.";
-                    }
-                };
                 elemValue.appendChild(inputElement);
+                if (!_this._scene.getEngine().premultipliedAlpha) {
+                    elemValue = INSPECTOR.Helpers.CreateDiv(null, _this._panel);
+                    inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
+                    inputElement.value = "Compress current texture to .env";
+                    inputElement.className = "tool-input";
+                    inputElement.type = "button";
+                    inputElement.onclick = function () {
+                        if (!_this._scene.environmentTexture) {
+                            errorElemm_1.style.display = "block";
+                            errorElemm_1.textContent = "You must load an environment texture first.";
+                            return;
+                        }
+                        if (_this._scene.activeCamera) {
+                            BABYLON.EnvironmentTextureTools.CreateEnvTextureAsync(_this._scene.environmentTexture)
+                                .then(function (buffer) {
+                                var blob = new Blob([buffer], { type: "octet/stream" });
+                                BABYLON.Tools.Download(blob, "environment.env");
+                                errorElemm_1.style.display = "none";
+                            })
+                                .catch(function (error) {
+                                errorElemm_1.style.display = "block";
+                                errorElemm_1.textContent = error;
+                            });
+                        }
+                        else {
+                            errorElemm_1.style.display = "block";
+                            errorElemm_1.textContent = "An active camera is required.";
+                        }
+                    };
+                    elemValue.appendChild(inputElement);
+                }
                 _this._panel.appendChild(errorElemm_1);
             }
             title = INSPECTOR.Helpers.CreateDiv('tool-title2', _this._panel);
             title.textContent = "Capture";
             {
-                _this._createToolLabel("Screenshot", _this._panel);
-                var elemValue = INSPECTOR.Helpers.CreateDiv('tool-value', _this._panel);
+                var elemValue = INSPECTOR.Helpers.CreateDiv(null, _this._panel);
                 var inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
-                inputElement.value = "Capture";
+                inputElement.value = "Take Screenshot";
                 inputElement.type = "button";
+                inputElement.className = "tool-input";
                 inputElement.onclick = function () {
                     if (_this._scene.activeCamera) {
                         BABYLON.Tools.CreateScreenshot(_this._scene.getEngine(), _this._scene.activeCamera, { precision: 0.5 });
@@ -4364,11 +4403,6 @@ var INSPECTOR;
             }
             return _this;
         }
-        ToolsTab.prototype._createToolLabel = function (content, parent) {
-            var elem = INSPECTOR.Helpers.CreateDiv('tool-label', parent);
-            elem.textContent = content;
-            return elem;
-        };
         ToolsTab.prototype.dispose = function () {
             // Nothing to dispose
         };

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "3.3.0-alpha.3",
+    "version": "3.3.0-alpha.6",
     "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.3",
+    "version": "3.3.0-alpha.6",
     "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.3"
+        "babylonjs-gltf2interface": "3.3.0-alpha.6"
     },
     "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.3",
+    "version": "3.3.0-alpha.6",
     "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.3",
+    "version": "3.3.0-alpha.6",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/proceduralTexturesLibrary/babylon.brickProceduralTexture.d.ts

@@ -11,5 +11,18 @@ declare module BABYLON {
         numberOfBricksWidth: number;
         jointColor: Color3;
         brickColor: Color3;
+        /**
+         * Serializes this brick procedural texture
+         * @returns a serialized brick procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Brick Procedural Texture from parsed brick procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing brick procedural texture information
+         * @returns a parsed Brick Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): BrickProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.brickProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var BrickProceduralTexture = /** @class */ (function (_super) {
@@ -72,6 +78,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this brick procedural texture
+         * @returns a serialized brick procedural texture object
+         */
+        BrickProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.BrickProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Brick Procedural Texture from parsed brick procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing brick procedural texture information
+         * @returns a parsed Brick Procedural Texture
+         */
+        BrickProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new BrickProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], BrickProceduralTexture.prototype, "numberOfBricksHeight", null);
+        __decorate([
+            BABYLON.serialize()
+        ], BrickProceduralTexture.prototype, "numberOfBricksWidth", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], BrickProceduralTexture.prototype, "jointColor", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], BrickProceduralTexture.prototype, "brickColor", null);
         return BrickProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.BrickProceduralTexture = BrickProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.cloudProceduralTexture.d.ts

@@ -7,5 +7,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         skyColor: Color4;
         cloudColor: Color4;
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.cloudProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var CloudProceduralTexture = /** @class */ (function (_super) {
@@ -46,6 +52,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        CloudProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.CloudProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        CloudProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new CloudProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor4()
+        ], CloudProceduralTexture.prototype, "skyColor", null);
+        __decorate([
+            BABYLON.serializeAsColor4()
+        ], CloudProceduralTexture.prototype, "cloudColor", null);
         return CloudProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.CloudProceduralTexture = CloudProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.fireProceduralTexture.d.ts

@@ -17,5 +17,18 @@ declare module BABYLON {
         time: number;
         speed: Vector2;
         alphaThreshold: number;
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.fireProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var FireProceduralTexture = /** @class */ (function (_super) {
@@ -142,6 +148,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        FireProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.FireProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        FireProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new FireProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], FireProceduralTexture.prototype, "fireColors", null);
+        __decorate([
+            BABYLON.serialize()
+        ], FireProceduralTexture.prototype, "time", null);
+        __decorate([
+            BABYLON.serializeAsVector2()
+        ], FireProceduralTexture.prototype, "speed", null);
+        __decorate([
+            BABYLON.serialize()
+        ], FireProceduralTexture.prototype, "alphaThreshold", null);
         return FireProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.FireProceduralTexture = FireProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.grassProceduralTexture.d.ts

@@ -7,5 +7,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         grassColors: Color3[];
         groundColor: Color3;
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.grassProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var GrassProceduralTexture = /** @class */ (function (_super) {
@@ -52,6 +58,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        GrassProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.GrassProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        GrassProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new GrassProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], GrassProceduralTexture.prototype, "grassColors", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], GrassProceduralTexture.prototype, "groundColor", null);
         return GrassProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.GrassProceduralTexture = GrassProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.marbleProceduralTexture.d.ts

@@ -11,5 +11,18 @@ declare module BABYLON {
         amplitude: number;
         numberOfTilesWidth: number;
         jointColor: Color3;
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.marbleProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var MarbleProceduralTexture = /** @class */ (function (_super) {
@@ -72,6 +78,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        MarbleProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.MarbleProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        MarbleProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new MarbleProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "numberOfTilesHeight", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "amplitude", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "numberOfTilesWidth", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "jointColor", null);
         return MarbleProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.MarbleProceduralTexture = MarbleProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.normalMapProceduralTexture.d.ts

@@ -7,5 +7,18 @@ declare module BABYLON {
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
         baseTexture: Texture;
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.normalMapProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var NormalMapProceduralTexture = /** @class */ (function (_super) {
@@ -41,6 +47,29 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        NormalMapProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.NormalMapProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        NormalMapProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new NormalMapProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsTexture()
+        ], NormalMapProceduralTexture.prototype, "baseTexture", null);
         return NormalMapProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.NormalMapProceduralTexture = NormalMapProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.perlinNoiseProceduralTexture.d.ts

@@ -9,5 +9,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.perlinNoiseProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var PerlinNoiseProceduralTexture = /** @class */ (function (_super) {
@@ -41,6 +47,35 @@ var BABYLON;
         PerlinNoiseProceduralTexture.prototype.resize = function (size, generateMipMaps) {
             _super.prototype.resize.call(this, size, generateMipMaps);
         };
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        PerlinNoiseProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.PerlinNoiseProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        PerlinNoiseProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new PerlinNoiseProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "time", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "speed", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "translationSpeed", void 0);
         return PerlinNoiseProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.PerlinNoiseProceduralTexture = PerlinNoiseProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.roadProceduralTexture.d.ts

@@ -5,5 +5,18 @@ declare module BABYLON {
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
         updateShaderUniforms(): void;
         roadColor: Color3;
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.roadProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var RoadProceduralTexture = /** @class */ (function (_super) {
@@ -33,6 +39,29 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        RoadProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.RoadProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        RoadProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new RoadProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], RoadProceduralTexture.prototype, "roadColor", null);
         return RoadProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.RoadProceduralTexture = RoadProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.d.ts

@@ -25,5 +25,18 @@ declare module BABYLON {
         darkmatter: number;
         distfading: number;
         saturation: number;
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var StarfieldProceduralTexture = /** @class */ (function (_super) {
@@ -163,6 +169,59 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        StarfieldProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.StarfieldProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        StarfieldProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new StarfieldProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "time", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "alpha", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "beta", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "formuparam", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "stepsize", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "zoom", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "tile", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "brightness", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "darkmatter", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "distfading", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "saturation", null);
         return StarfieldProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.StarfieldProceduralTexture = StarfieldProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.woodProceduralTexture.d.ts

@@ -7,5 +7,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         ampScale: number;
         woodColor: Color3;
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.woodProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var WoodProceduralTexture = /** @class */ (function (_super) {
@@ -46,6 +52,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        WoodProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.WoodProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        WoodProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new WoodProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], WoodProceduralTexture.prototype, "ampScale", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], WoodProceduralTexture.prototype, "woodColor", null);
         return WoodProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.WoodProceduralTexture = WoodProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylonjs.proceduralTextures.d.ts

@@ -7,6 +7,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         ampScale: number;
         woodColor: Color3;
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture;
     }
 }
 
@@ -29,6 +42,19 @@ declare module BABYLON {
         time: number;
         speed: Vector2;
         alphaThreshold: number;
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture;
     }
 }
 
@@ -41,6 +67,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         skyColor: Color4;
         cloudColor: Color4;
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture;
     }
 }
 
@@ -53,6 +92,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         grassColors: Color3[];
         groundColor: Color3;
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture;
     }
 }
 
@@ -63,6 +115,19 @@ declare module BABYLON {
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
         updateShaderUniforms(): void;
         roadColor: Color3;
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture;
     }
 }
 
@@ -79,6 +144,19 @@ declare module BABYLON {
         numberOfBricksWidth: number;
         jointColor: Color3;
         brickColor: Color3;
+        /**
+         * Serializes this brick procedural texture
+         * @returns a serialized brick procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Brick Procedural Texture from parsed brick procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing brick procedural texture information
+         * @returns a parsed Brick Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): BrickProceduralTexture;
     }
 }
 
@@ -95,6 +173,19 @@ declare module BABYLON {
         amplitude: number;
         numberOfTilesWidth: number;
         jointColor: Color3;
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture;
     }
 }
 
@@ -125,6 +216,19 @@ declare module BABYLON {
         darkmatter: number;
         distfading: number;
         saturation: number;
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture;
     }
 }
 
@@ -137,6 +241,19 @@ declare module BABYLON {
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
         baseTexture: Texture;
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture;
     }
 }
 
@@ -151,5 +268,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylonjs.proceduralTextures.js

@@ -25,6 +25,7 @@ var __decorate=this&&this.__decorate||function(e,t,r,c){var o,f=arguments.length
 var __extends=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,o){t.__proto__=o}||function(t,o){for(var n in o)o.hasOwnProperty(n)&&(t[n]=o[n])};return function(o,n){function r(){this.constructor=o}t(o,n),o.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}();
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var WoodProceduralTexture = /** @class */ (function (_super) {
@@ -62,6 +63,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        WoodProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.WoodProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        WoodProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new WoodProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], WoodProceduralTexture.prototype, "ampScale", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], WoodProceduralTexture.prototype, "woodColor", null);
         return WoodProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.WoodProceduralTexture = WoodProceduralTexture;
@@ -73,6 +100,7 @@ BABYLON.Effect.ShadersStore['woodProceduralTexturePixelShader'] = "precision hig
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var FireProceduralTexture = /** @class */ (function (_super) {
@@ -206,6 +234,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        FireProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.FireProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        FireProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new FireProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], FireProceduralTexture.prototype, "fireColors", null);
+        __decorate([
+            BABYLON.serialize()
+        ], FireProceduralTexture.prototype, "time", null);
+        __decorate([
+            BABYLON.serializeAsVector2()
+        ], FireProceduralTexture.prototype, "speed", null);
+        __decorate([
+            BABYLON.serialize()
+        ], FireProceduralTexture.prototype, "alphaThreshold", null);
         return FireProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.FireProceduralTexture = FireProceduralTexture;
@@ -217,6 +277,7 @@ BABYLON.Effect.ShadersStore['fireProceduralTexturePixelShader'] = "precision hig
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var CloudProceduralTexture = /** @class */ (function (_super) {
@@ -254,6 +315,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        CloudProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.CloudProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        CloudProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new CloudProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor4()
+        ], CloudProceduralTexture.prototype, "skyColor", null);
+        __decorate([
+            BABYLON.serializeAsColor4()
+        ], CloudProceduralTexture.prototype, "cloudColor", null);
         return CloudProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.CloudProceduralTexture = CloudProceduralTexture;
@@ -265,6 +352,7 @@ BABYLON.Effect.ShadersStore['cloudProceduralTexturePixelShader'] = "precision hi
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var GrassProceduralTexture = /** @class */ (function (_super) {
@@ -308,6 +396,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        GrassProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.GrassProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        GrassProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new GrassProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], GrassProceduralTexture.prototype, "grassColors", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], GrassProceduralTexture.prototype, "groundColor", null);
         return GrassProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.GrassProceduralTexture = GrassProceduralTexture;
@@ -319,6 +433,7 @@ BABYLON.Effect.ShadersStore['grassProceduralTexturePixelShader'] = "precision hi
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var RoadProceduralTexture = /** @class */ (function (_super) {
@@ -343,6 +458,29 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        RoadProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.RoadProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        RoadProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new RoadProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], RoadProceduralTexture.prototype, "roadColor", null);
         return RoadProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.RoadProceduralTexture = RoadProceduralTexture;
@@ -354,6 +492,7 @@ BABYLON.Effect.ShadersStore['roadProceduralTexturePixelShader'] = "precision hig
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var BrickProceduralTexture = /** @class */ (function (_super) {
@@ -417,6 +556,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this brick procedural texture
+         * @returns a serialized brick procedural texture object
+         */
+        BrickProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.BrickProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Brick Procedural Texture from parsed brick procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing brick procedural texture information
+         * @returns a parsed Brick Procedural Texture
+         */
+        BrickProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new BrickProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], BrickProceduralTexture.prototype, "numberOfBricksHeight", null);
+        __decorate([
+            BABYLON.serialize()
+        ], BrickProceduralTexture.prototype, "numberOfBricksWidth", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], BrickProceduralTexture.prototype, "jointColor", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], BrickProceduralTexture.prototype, "brickColor", null);
         return BrickProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.BrickProceduralTexture = BrickProceduralTexture;
@@ -428,6 +599,7 @@ BABYLON.Effect.ShadersStore['brickProceduralTexturePixelShader'] = "precision hi
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var MarbleProceduralTexture = /** @class */ (function (_super) {
@@ -491,6 +663,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        MarbleProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.MarbleProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        MarbleProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new MarbleProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "numberOfTilesHeight", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "amplitude", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "numberOfTilesWidth", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "jointColor", null);
         return MarbleProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.MarbleProceduralTexture = MarbleProceduralTexture;
@@ -502,6 +706,7 @@ BABYLON.Effect.ShadersStore['marbleProceduralTexturePixelShader'] = "precision h
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var StarfieldProceduralTexture = /** @class */ (function (_super) {
@@ -656,6 +861,59 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        StarfieldProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.StarfieldProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        StarfieldProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new StarfieldProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "time", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "alpha", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "beta", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "formuparam", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "stepsize", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "zoom", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "tile", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "brightness", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "darkmatter", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "distfading", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "saturation", null);
         return StarfieldProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.StarfieldProceduralTexture = StarfieldProceduralTexture;
@@ -667,6 +925,7 @@ BABYLON.Effect.ShadersStore['starfieldProceduralTexturePixelShader'] = "precisio
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var NormalMapProceduralTexture = /** @class */ (function (_super) {
@@ -699,6 +958,29 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        NormalMapProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.NormalMapProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        NormalMapProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new NormalMapProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsTexture()
+        ], NormalMapProceduralTexture.prototype, "baseTexture", null);
         return NormalMapProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.NormalMapProceduralTexture = NormalMapProceduralTexture;
@@ -710,6 +992,7 @@ BABYLON.Effect.ShadersStore['normalMapProceduralTexturePixelShader'] = "precisio
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var PerlinNoiseProceduralTexture = /** @class */ (function (_super) {
@@ -742,6 +1025,35 @@ var BABYLON;
         PerlinNoiseProceduralTexture.prototype.resize = function (size, generateMipMaps) {
             _super.prototype.resize.call(this, size, generateMipMaps);
         };
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        PerlinNoiseProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.PerlinNoiseProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        PerlinNoiseProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new PerlinNoiseProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "time", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "speed", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "translationSpeed", void 0);
         return PerlinNoiseProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.PerlinNoiseProceduralTexture = PerlinNoiseProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylonjs.proceduralTextures.module.d.ts

@@ -12,6 +12,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         ampScale: number;
         woodColor: Color3;
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture;
     }
 }
 
@@ -34,6 +47,19 @@ declare module BABYLON {
         time: number;
         speed: Vector2;
         alphaThreshold: number;
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture;
     }
 }
 
@@ -46,6 +72,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         skyColor: Color4;
         cloudColor: Color4;
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture;
     }
 }
 
@@ -58,6 +97,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         grassColors: Color3[];
         groundColor: Color3;
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture;
     }
 }
 
@@ -68,6 +120,19 @@ declare module BABYLON {
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
         updateShaderUniforms(): void;
         roadColor: Color3;
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture;
     }
 }
 
@@ -84,6 +149,19 @@ declare module BABYLON {
         numberOfBricksWidth: number;
         jointColor: Color3;
         brickColor: Color3;
+        /**
+         * Serializes this brick procedural texture
+         * @returns a serialized brick procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Brick Procedural Texture from parsed brick procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing brick procedural texture information
+         * @returns a parsed Brick Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): BrickProceduralTexture;
     }
 }
 
@@ -100,6 +178,19 @@ declare module BABYLON {
         amplitude: number;
         numberOfTilesWidth: number;
         jointColor: Color3;
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture;
     }
 }
 
@@ -130,6 +221,19 @@ declare module BABYLON {
         darkmatter: number;
         distfading: number;
         saturation: number;
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture;
     }
 }
 
@@ -142,6 +246,19 @@ declare module BABYLON {
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
         baseTexture: Texture;
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture;
     }
 }
 
@@ -156,5 +273,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture;
     }
 }

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.3",
+    "version": "3.3.0-alpha.6",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/serializers/babylon.glTF2Serializer.d.ts

@@ -615,14 +615,14 @@ declare module BABYLON.GLTF2 {
         /**
          * Builds a texture from base64 string
          * @param base64Texture base64 texture string
-         * @param textureName Name to use for the texture
+         * @param baseTextureName Name to use for the texture
          * @param mimeType image mime type for the texture
          * @param images array of images
          * @param textures array of textures
          * @param imageData map of image data
          * @returns glTF texture info, or null if the texture format is not supported
          */
-        private static _GetTextureInfoFromBase64(base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
+        private static _GetTextureInfoFromBase64(base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
     }
 }
 

dist/preview release/serializers/babylon.glTF2Serializer.js

@@ -2153,13 +2153,13 @@ var BABYLON;
                 if (metallicRoughnessFactors) {
                     if (hasTextureCoords) {
                         if (metallicRoughnessFactors.baseColorTextureBase64) {
-                            var glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
+                            var glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
                             if (glTFBaseColorTexture != null) {
                                 glTFPbrMetallicRoughness.baseColorTexture = glTFBaseColorTexture;
                             }
                         }
                         if (metallicRoughnessFactors.metallicRoughnessTextureBase64) {
-                            var glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
+                            var glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
                             if (glTFMRColorTexture != null) {
                                 glTFPbrMetallicRoughness.metallicRoughnessTexture = glTFMRColorTexture;
                             }
@@ -2318,47 +2318,29 @@ var BABYLON;
                 else {
                     samplerIndex = foundSamplerIndex;
                 }
-                var textureName = BABYLON.Tools.RandomId();
-                var textureData = babylonTexture.getInternalTexture();
-                if (textureData != null) {
-                    textureName = textureData.url || textureName;
-                }
-                textureName = BABYLON.Tools.GetFilename(textureName);
-                var baseFile = textureName.split('.')[0];
-                var extension = "";
-                if (mimeType === "image/jpeg" /* JPEG */) {
-                    extension = ".jpg";
-                }
-                else if (mimeType === "image/png" /* PNG */) {
-                    extension = ".png";
-                }
-                else {
-                    return Promise.reject("Unsupported mime type " + mimeType);
-                }
-                textureName = baseFile + extension;
                 return this._SetAlphaToOneAsync(babylonTexture, useAlpha).then(function (texture) {
                     var pixels = _GLTFMaterial.GetPixelsFromTexture(texture);
                     var size = babylonTexture.getSize();
                     var base64Data = _this._CreateBase64FromCanvas(pixels, size.width, size.height, mimeType);
-                    var textureInfo = _this._GetTextureInfoFromBase64(base64Data, textureName, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
+                    var textureInfo = _this._GetTextureInfoFromBase64(base64Data, babylonTexture.name, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
                     return textureInfo;
                 });
             };
             /**
              * Builds a texture from base64 string
              * @param base64Texture base64 texture string
-             * @param textureName Name to use for the texture
+             * @param baseTextureName Name to use for the texture
              * @param mimeType image mime type for the texture
              * @param images array of images
              * @param textures array of textures
              * @param imageData map of image data
              * @returns glTF texture info, or null if the texture format is not supported
              */
-            _GLTFMaterial._GetTextureInfoFromBase64 = function (base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData) {
+            _GLTFMaterial._GetTextureInfoFromBase64 = function (base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData) {
                 var textureInfo = null;
                 var glTFTexture = {
                     source: images.length,
-                    name: textureName
+                    name: baseTextureName
                 };
                 if (samplerIndex != null) {
                     glTFTexture.sampler = samplerIndex;
@@ -2370,9 +2352,15 @@ var BABYLON;
                     arr[i] = binStr.charCodeAt(i);
                 }
                 var imageValues = { data: arr, mimeType: mimeType };
+                var extension = mimeType === "image/jpeg" /* JPEG */ ? '.jpeg' : '.png';
+                var textureName = baseTextureName + extension;
+                if (textureName in imageData) {
+                    textureName = baseTextureName + "_" + BABYLON.Tools.RandomId() + extension;
+                }
                 imageData[textureName] = imageValues;
                 if (mimeType === "image/jpeg" /* JPEG */ || mimeType === "image/png" /* PNG */) {
                     var glTFImage = {
+                        name: baseTextureName,
                         uri: textureName
                     };
                     var foundIndex = null;
@@ -2397,6 +2385,9 @@ var BABYLON;
                         textureInfo.texCoord = texCoordIndex;
                     }
                 }
+                else {
+                    BABYLON.Tools.Error("Unsupported texture mime type " + mimeType);
+                }
                 return textureInfo;
             };
             /**

dist/preview release/serializers/babylonjs.serializers.d.ts

@@ -623,14 +623,14 @@ declare module BABYLON.GLTF2 {
         /**
          * Builds a texture from base64 string
          * @param base64Texture base64 texture string
-         * @param textureName Name to use for the texture
+         * @param baseTextureName Name to use for the texture
          * @param mimeType image mime type for the texture
          * @param images array of images
          * @param textures array of textures
          * @param imageData map of image data
          * @returns glTF texture info, or null if the texture format is not supported
          */
-        private static _GetTextureInfoFromBase64(base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
+        private static _GetTextureInfoFromBase64(base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
     }
 }
 

dist/preview release/serializers/babylonjs.serializers.js

@@ -2303,13 +2303,13 @@ var BABYLON;
                 if (metallicRoughnessFactors) {
                     if (hasTextureCoords) {
                         if (metallicRoughnessFactors.baseColorTextureBase64) {
-                            var glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
+                            var glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
                             if (glTFBaseColorTexture != null) {
                                 glTFPbrMetallicRoughness.baseColorTexture = glTFBaseColorTexture;
                             }
                         }
                         if (metallicRoughnessFactors.metallicRoughnessTextureBase64) {
-                            var glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
+                            var glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
                             if (glTFMRColorTexture != null) {
                                 glTFPbrMetallicRoughness.metallicRoughnessTexture = glTFMRColorTexture;
                             }
@@ -2468,47 +2468,29 @@ var BABYLON;
                 else {
                     samplerIndex = foundSamplerIndex;
                 }
-                var textureName = BABYLON.Tools.RandomId();
-                var textureData = babylonTexture.getInternalTexture();
-                if (textureData != null) {
-                    textureName = textureData.url || textureName;
-                }
-                textureName = BABYLON.Tools.GetFilename(textureName);
-                var baseFile = textureName.split('.')[0];
-                var extension = "";
-                if (mimeType === "image/jpeg" /* JPEG */) {
-                    extension = ".jpg";
-                }
-                else if (mimeType === "image/png" /* PNG */) {
-                    extension = ".png";
-                }
-                else {
-                    return Promise.reject("Unsupported mime type " + mimeType);
-                }
-                textureName = baseFile + extension;
                 return this._SetAlphaToOneAsync(babylonTexture, useAlpha).then(function (texture) {
                     var pixels = _GLTFMaterial.GetPixelsFromTexture(texture);
                     var size = babylonTexture.getSize();
                     var base64Data = _this._CreateBase64FromCanvas(pixels, size.width, size.height, mimeType);
-                    var textureInfo = _this._GetTextureInfoFromBase64(base64Data, textureName, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
+                    var textureInfo = _this._GetTextureInfoFromBase64(base64Data, babylonTexture.name, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
                     return textureInfo;
                 });
             };
             /**
              * Builds a texture from base64 string
              * @param base64Texture base64 texture string
-             * @param textureName Name to use for the texture
+             * @param baseTextureName Name to use for the texture
              * @param mimeType image mime type for the texture
              * @param images array of images
              * @param textures array of textures
              * @param imageData map of image data
              * @returns glTF texture info, or null if the texture format is not supported
              */
-            _GLTFMaterial._GetTextureInfoFromBase64 = function (base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData) {
+            _GLTFMaterial._GetTextureInfoFromBase64 = function (base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData) {
                 var textureInfo = null;
                 var glTFTexture = {
                     source: images.length,
-                    name: textureName
+                    name: baseTextureName
                 };
                 if (samplerIndex != null) {
                     glTFTexture.sampler = samplerIndex;
@@ -2520,9 +2502,15 @@ var BABYLON;
                     arr[i] = binStr.charCodeAt(i);
                 }
                 var imageValues = { data: arr, mimeType: mimeType };
+                var extension = mimeType === "image/jpeg" /* JPEG */ ? '.jpeg' : '.png';
+                var textureName = baseTextureName + extension;
+                if (textureName in imageData) {
+                    textureName = baseTextureName + "_" + BABYLON.Tools.RandomId() + extension;
+                }
                 imageData[textureName] = imageValues;
                 if (mimeType === "image/jpeg" /* JPEG */ || mimeType === "image/png" /* PNG */) {
                     var glTFImage = {
+                        name: baseTextureName,
                         uri: textureName
                     };
                     var foundIndex = null;
@@ -2547,6 +2535,9 @@ var BABYLON;
                         textureInfo.texCoord = texCoordIndex;
                     }
                 }
+                else {
+                    BABYLON.Tools.Error("Unsupported texture mime type " + mimeType);
+                }
                 return textureInfo;
             };
             /**

dist/preview release/serializers/babylonjs.serializers.module.d.ts

@@ -630,14 +630,14 @@ declare module BABYLON.GLTF2 {
         /**
          * Builds a texture from base64 string
          * @param base64Texture base64 texture string
-         * @param textureName Name to use for the texture
+         * @param baseTextureName Name to use for the texture
          * @param mimeType image mime type for the texture
          * @param images array of images
          * @param textures array of textures
          * @param imageData map of image data
          * @returns glTF texture info, or null if the texture format is not supported
          */
-        private static _GetTextureInfoFromBase64(base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
+        private static _GetTextureInfoFromBase64(base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
     }
 }
 

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.3",
+    "version": "3.3.0-alpha.6",
     "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.3"
+        "babylonjs-gltf2interface": "3.3.0-alpha.6"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

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

@@ -181,7 +181,7 @@ declare module BabylonViewer {
                 * It is mainly responsible to changing the title and subtitle etc'.
                 * @param model the model to be used to configure the templates by
                 */
-            protected _configureTemplate(model: ViewerModel): void;
+            protected _configureTemplate(model?: ViewerModel): void;
             /**
                 * This will load a new model to the default viewer
                 * overriding the AbstractViewer's loadModel.

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

@@ -14,7 +14,7 @@ declare module 'babylonjs-viewer' {
     import { viewerManager } from 'babylonjs-viewer/viewer/viewerManager';
     import { DefaultViewer } from 'babylonjs-viewer/viewer/defaultViewer';
     import { AbstractViewer } from 'babylonjs-viewer/viewer/viewer';
-    import { telemetryManager } from 'babylonjs-viewer/telemetryManager';
+    import { telemetryManager } from 'babylonjs-viewer/managers/telemetryManager';
     import { ModelLoader } from 'babylonjs-viewer/loader/modelLoader';
     import { ViewerModel, ModelState } from 'babylonjs-viewer/model/viewerModel';
     import { AnimationPlayMode, AnimationState } from 'babylonjs-viewer/model/modelAnimation';
@@ -181,7 +181,7 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * It is mainly responsible to changing the title and subtitle etc'.
                 * @param model the model to be used to configure the templates by
                 */
-            protected _configureTemplate(model: ViewerModel): void;
+            protected _configureTemplate(model?: ViewerModel): void;
             /**
                 * This will load a new model to the default viewer
                 * overriding the AbstractViewer's loadModel.
@@ -458,7 +458,7 @@ declare module 'babylonjs-viewer/viewer/viewer' {
     }
 }
 
-declare module 'babylonjs-viewer/telemetryManager' {
+declare module 'babylonjs-viewer/managers/telemetryManager' {
     import { Engine, Observable } from "babylonjs";
     /**
         * The data structure of a telemetry event.

dist/preview release/viewer/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-viewer",
     "description": "A simple-to-use viewer based on BabylonJS to display 3D elements natively",
-    "version": "3.3.0-alpha.3",
+    "version": "3.3.0-alpha.4",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -31,5 +31,16 @@
     "license": "Apache-2.0",
     "engines": {
         "node": "*"
+    },
+    "dependencies": {
+        "deepmerge": "~2.1.1",
+        "handlebars": "~4.0.11",
+        "pepjs": "~0.4.3"
+    },
+    "peerDependencies": {
+        "babylonjs": ">3.3.0-alpha",
+        "babylonjs-loaders": ">3.3.0-alpha",
+        "babylonjs-gltf2interface": ">3.3.0-alpha",
+        "babylonjs-viewer-assets": ">3.3.0-alpha"
     }
 }

dist/preview release/what's new.md

@@ -6,16 +6,19 @@
 - Added new `MixMaterial` to the Materials Library allowing to mix up to 8 textures ([julien-moreau](https://github.com/julien-moreau))
 - Added new `PhotoDome` object to display 360 photos. [Demo](https://www.babylonjs-playground.com/#14KRGG#0) ([SzeyinLee](https://github.com/SzeyinLee))
 - New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
-- Added Environmnent Texture Tools to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
+- Added [Environment Texture Tools](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture) to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
+- New GUI control: the [Grid](http://doc.babylonjs.com/how_to/gui#grid) ([Deltakosh](https://github.com/deltakosh))
+- New `serialize` and `Parse` functions to serialize and parse all procedural textures from the Procedural Textures Library ([julien-moreau](https://github.com/julien-moreau))
 
 ## Updates
 
 - All NPM packages have `latest`and `preview` streams [#3055](https://github.com/BabylonJS/Babylon.js/issues/3055) ([RaananW](https://github.com/RaananW))
+- Added New Tools Tab in the inspector (env texture and screenshot tools so far) ([sebavan](http://www.github.com/sebavan))
 
 ### Core Engine
 
 - Added new `Animatable.waitAsync` function to use Promises with animations. Demo [Here](https://www.babylonjs-playground.com/#HZBCXR) ([Deltakosh](https://github.com/deltakosh))
-- Added the choice of [forming a closed loop](http://doc.babylonjs.com/how_to/how_to_use_curve3#catmull-rom-spline) to the catamull-rom-spline curve3 ([johnk](https://github.com/babylonjsguide))
+- Added the choice of [forming a closed loop](http://doc.babylonjs.com/how_to/how_to_use_curve3#catmull-rom-spline) to the catmull-rom-spline curve3 ([johnk](https://github.com/babylonjsguide))
 - Added support for specifying the center of rotation to textures ([bghgary](http://www.github.com/bghgary))
 - Added webVR support for Oculus Go ([TrevorDev](https://github.com/TrevorDev))
 - Added ability to not generate polynomials harmonics upon prefiltered texture creation ([sebavan](http://www.github.com/sebavan))
@@ -25,9 +28,11 @@
 - UtilityLayer class to render another scene as a layer on top of an existing scene ([TrevorDev](https://github.com/TrevorDev))
 - AnimationGroup has now onAnimationGroupEnd observable ([RaananW](https://github.com/RaananW))
 - Pointer drag behavior to enable drag and drop with mouse or 6dof controller on a mesh ([TrevorDev](https://github.com/TrevorDev))
-- Gizmo and gizmoManager class used to manipulate meshes in a scene, position, rotation, scale gizmos ([TrevorDev](https://github.com/TrevorDev))
+- Gizmo and GizmoManager classes used to manipulate meshes in a scene. Position, rotation, scale, and bounding box gizmos ([TrevorDev](https://github.com/TrevorDev))
 - Added a new `mesh.ignoreNonUniformScaling` to turn off non uniform scaling compensation ([Deltakosh](https://github.com/deltakosh))
 - AssetsManager tasks will only run when their state is INIT. It is now possible to remove a task from the assets manager ([RaananW](https://github.com/RaananW))
+- Sprite isVisible field ([TrevorDev](https://github.com/TrevorDev))
+- Added support for `minScaleX`, `minScaleY`, `maxScaleX`, `maxScaleY` for particles ([Deltakosh](https://github.com/deltakosh))
 
 ### glTF Loader
 
@@ -39,12 +44,12 @@
 ### Viewer
 
 - No fullscreen button on small devices ([RaananW](https://github.com/RaananW))
-- Nav-Bar is now disaplayed on fullscreen per default ([RaananW](https://github.com/RaananW))
+- Nav-Bar is now displayed on fullscreen per default ([RaananW](https://github.com/RaananW))
 - Viewer configuration supports deprecated values using the new configurationCompatibility processor  ([RaananW](https://github.com/RaananW))
 - Shadows will only render while models are entering the scene or animating ([RaananW](https://github.com/RaananW))
 - Support for model drag and drop onto the canvas ([RaananW](https://github.com/RaananW))
 - New lab feature - global light rotation [#4347](https://github.com/BabylonJS/Babylon.js/issues/4347) ([RaananW](https://github.com/RaananW))
-- New package - babylonjs-viewer-assets, to separate the binary assets and the code of the viewer ([RaananW](https://github.com/RaananW))
+- New NPM package - babylonjs-viewer-assets, to separate the binary assets and the code of the viewer ([RaananW](https://github.com/RaananW))
 
 ### Documentation
 
@@ -55,16 +60,19 @@
 - VR experience helper will now fire pointer events even when no mesh is currently hit ([TrevorDev](https://github.com/TrevorDev))
 - RawTexture.CreateAlphaTexture no longer fails to create a usable texture ([TrevorDev](https://github.com/TrevorDev))
 - SceneSerializer.SerializeMesh now serializes all materials kinds (not only StandardMaterial) ([julien-moreau](https://github.com/julien-moreau))
+- WindowsMotionController's trackpad field will be updated prior to it's onTrackpadChangedObservable event ([TrevorDev](https://github.com/TrevorDev))
 
 ### Core Engine
 
-- Fixed ```shadowEnabled``` property on lights. Shadows are not visble anymore when disabled ([sebavan](http://www.github.com/sebavan))
+- Fixed ```shadowEnabled``` property on lights. Shadows are not visible anymore when disabled ([sebavan](http://www.github.com/sebavan))
 - Physics `unregisterOnPhysicsCollide` didn't remove callback correctly [#4291](https://github.com/BabylonJS/Babylon.js/issues/4291) ([RaananW](https://github.com/RaananW))
 - Added missing getter and setter for global exposure in ColorCurves ([RaananW](https://github.com/RaananW))
 - Fixed an issue with view matrix when `ArcRotateCamera` was used with collisions ([Deltakosh](https://github.com/deltakosh))
 - Fixed a bug with setting `unlit` on `PBRMaterial` after the material is ready (Wrong dirty flags) ([bghgary](http://www.github.com/bghgary))
 - Fixed `HighlightLayer` support on browsers not supporting HalfFloat ([sebavan](http://www.github.com/sebavan))
 - Fixed support for R and RG texture formats ([sebavan](http://www.github.com/sebavan))
+- Fixed `updatable` parameter setting in the SPS ([jerome](https://github.com/jbousquie))
+- Angular and linear velocity were using the wrong method to copy values to the physics engine ([RaananW](https://github.com/RaananW))
 
 ### Viewer
 
@@ -75,6 +83,7 @@
 - Model configuration was not extended correctly if loaded more than one model ([RaananW](https://github.com/RaananW))
 - It wasn't possible to disable camera behavior(s) using configuration  [#4348](https://github.com/BabylonJS/Babylon.js/issues/4348) ([RaananW](https://github.com/RaananW))
 - Animation blending was always set to true, ignoring configuration [#4412](https://github.com/BabylonJS/Babylon.js/issues/4412) ([RaananW](https://github.com/RaananW))
+- Animation navbar now updates correctly when a new model is loaded [#4441](https://github.com/BabylonJS/Babylon.js/issues/4441) ([RaananW](https://github.com/RaananW))
 
 ## Breaking changes
 

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

@@ -92,7 +92,7 @@ module BABYLON.GUI {
          * @returns the child control if found
          */
         public getChildByName(name: string): Nullable<Control> {
-            for (var child of this._children) {
+            for (var child of this.children) {
                 if (child.name === name) {
                     return child;
                 }
@@ -108,7 +108,7 @@ module BABYLON.GUI {
          * @returns the child control if found
          */        
         public getChildByType(name: string, type: string): Nullable<Control> {
-            for (var child of this._children) {
+            for (var child of this.children) {
                 if (child.typeName === type) {
                     return child;
                 }
@@ -123,7 +123,7 @@ module BABYLON.GUI {
          * @returns true if the control is in child list
          */
         public containsControl(control: Control): boolean {
-            return this._children.indexOf(control) !== -1;
+            return this.children.indexOf(control) !== -1;
         }
 
         /**