Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

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/Gulp/config.json

@@ -1720,6 +1720,7 @@
                     "../../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",

dist/preview release/babylon.max.js

@@ -12085,7 +12085,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "3.3.0-alpha.4";
+                return "3.3.0-alpha.5";
             },
             enumerable: true,
             configurable: true
@@ -18540,6 +18540,18 @@ var BABYLON;
             _this._rotation = BABYLON.Vector3.Zero();
             _this._scaling = BABYLON.Vector3.One();
             _this._isDirty = false;
+            /**
+            * Set the billboard mode. Default is 0.
+            *
+            * | Value | Type | Description |
+            * | --- | --- | --- |
+            * | 0 | BILLBOARDMODE_NONE |  |
+            * | 1 | BILLBOARDMODE_X |  |
+            * | 2 | BILLBOARDMODE_Y |  |
+            * | 4 | BILLBOARDMODE_Z |  |
+            * | 7 | BILLBOARDMODE_ALL |  |
+            *
+            */
             _this.billboardMode = TransformNode.BILLBOARDMODE_NONE;
             _this.scalingDeterminant = 1;
             _this.infiniteDistance = false;
@@ -57710,46 +57722,54 @@ var BABYLON;
          * Creates a new instance ConeParticleEmitter
          * @param radius the radius of the emission cone (1 by default)
          * @param angles the cone base angle (PI by default)
-         * @param directionRandomizer defines how much to randomize the particle direction [0-1]
-         */
-        function ConeParticleEmitter(radius, 
-        /**
-         * The radius of the emission cone.
-         */
-        angle, 
-        /**
-         * The cone base angle.
+         * @param directionRandomizer defines how much to randomize the particle direction [0-1] (default is 0)
          */
+        function ConeParticleEmitter(radius, angle, 
+        /** defines how much to randomize the particle direction [0-1] (default is 0) */
         directionRandomizer) {
             if (radius === void 0) { radius = 1; }
             if (angle === void 0) { angle = Math.PI; }
             if (directionRandomizer === void 0) { directionRandomizer = 0; }
-            this.angle = angle;
             this.directionRandomizer = directionRandomizer;
+            this.angle = angle;
             this.radius = radius;
         }
         Object.defineProperty(ConeParticleEmitter.prototype, "radius", {
             /**
-             * Gets the radius of the emission cone.
+             * Gets or sets the radius of the emission cone
              */
             get: function () {
                 return this._radius;
             },
+            set: function (value) {
+                this._radius = value;
+                this._buildHeight();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ConeParticleEmitter.prototype, "angle", {
             /**
-             * Sets the radius of the emission cone.
+             * Gets or sets the angle of the emission cone
              */
+            get: function () {
+                return this._angle;
+            },
             set: function (value) {
-                this._radius = value;
-                if (this.angle !== 0) {
-                    this._height = value / Math.tan(this.angle / 2);
-                }
-                else {
-                    this._height = 1;
-                }
+                this._angle = value;
+                this._buildHeight();
             },
             enumerable: true,
             configurable: true
         });
+        ConeParticleEmitter.prototype._buildHeight = function () {
+            if (this._angle !== 0) {
+                this._height = this._radius / Math.tan(this._angle / 2);
+            }
+            else {
+                this._height = 1;
+            }
+        };
         /**
          * Called by the particle System when the direction is computed for the created particle.
          * @param emitPower is the power of the particle (speed)
@@ -57758,7 +57778,7 @@ var BABYLON;
          * @param particle is the particle we are computed the direction for
          */
         ConeParticleEmitter.prototype.startDirectionFunction = function (emitPower, worldMatrix, directionToUpdate, particle) {
-            if (this.angle === 0) {
+            if (this._angle === 0) {
                 BABYLON.Vector3.TransformNormalFromFloatsToRef(0, emitPower, 0, worldMatrix, directionToUpdate);
             }
             else {
@@ -57797,7 +57817,7 @@ var BABYLON;
          * @returns the new emitter
          */
         ConeParticleEmitter.prototype.clone = function () {
-            var newOne = new ConeParticleEmitter(this.radius, this.angle, this.directionRandomizer);
+            var newOne = new ConeParticleEmitter(this._radius, this._angle, this.directionRandomizer);
             BABYLON.Tools.DeepCopy(this, newOne);
             return newOne;
         };
@@ -57806,8 +57826,8 @@ var BABYLON;
          * @param effect defines the update shader
          */
         ConeParticleEmitter.prototype.applyToShader = function (effect) {
-            effect.setFloat("radius", this.radius);
-            effect.setFloat("coneAngle", this.angle);
+            effect.setFloat("radius", this._radius);
+            effect.setFloat("coneAngle", this._angle);
             effect.setFloat("height", this._height);
             effect.setFloat("directionRandomizer", this.directionRandomizer);
         };
@@ -57832,8 +57852,8 @@ var BABYLON;
         ConeParticleEmitter.prototype.serialize = function () {
             var serializationObject = {};
             serializationObject.type = this.getClassName();
-            serializationObject.radius = this.radius;
-            serializationObject.angle = this.angle;
+            serializationObject.radius = this._radius;
+            serializationObject.angle = this._angle;
             serializationObject.directionRandomizer = this.directionRandomizer;
             return serializationObject;
         };
@@ -59152,7 +59172,7 @@ var BABYLON;
             this._particlesIntersect = options ? options.particleIntersection : false;
             this._bSphereOnly = options ? options.boundingSphereOnly : false;
             this._bSphereRadiusFactor = (options && options.bSphereRadiusFactor) ? options.bSphereRadiusFactor : 1.0;
-            if (options && options.updatable) {
+            if (options && options.updatable !== undefined) {
                 this._updatable = options.updatable;
             }
             else {
@@ -85872,10 +85892,10 @@ var BABYLON;
             return lastShape;
         }*/
         OimoJSPlugin.prototype.setLinearVelocity = function (impostor, velocity) {
-            impostor.physicsBody.linearVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.linearVelocity.copy(velocity);
         };
         OimoJSPlugin.prototype.setAngularVelocity = function (impostor, velocity) {
-            impostor.physicsBody.angularVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.angularVelocity.copy(velocity);
         };
         OimoJSPlugin.prototype.getLinearVelocity = function (impostor) {
             var v = impostor.physicsBody.linearVelocity;

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

@@ -12052,7 +12052,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "3.3.0-alpha.4";
+                return "3.3.0-alpha.5";
             },
             enumerable: true,
             configurable: true
@@ -18507,6 +18507,18 @@ var BABYLON;
             _this._rotation = BABYLON.Vector3.Zero();
             _this._scaling = BABYLON.Vector3.One();
             _this._isDirty = false;
+            /**
+            * Set the billboard mode. Default is 0.
+            *
+            * | Value | Type | Description |
+            * | --- | --- | --- |
+            * | 0 | BILLBOARDMODE_NONE |  |
+            * | 1 | BILLBOARDMODE_X |  |
+            * | 2 | BILLBOARDMODE_Y |  |
+            * | 4 | BILLBOARDMODE_Z |  |
+            * | 7 | BILLBOARDMODE_ALL |  |
+            *
+            */
             _this.billboardMode = TransformNode.BILLBOARDMODE_NONE;
             _this.scalingDeterminant = 1;
             _this.infiniteDistance = false;
@@ -57677,46 +57689,54 @@ var BABYLON;
          * Creates a new instance ConeParticleEmitter
          * @param radius the radius of the emission cone (1 by default)
          * @param angles the cone base angle (PI by default)
-         * @param directionRandomizer defines how much to randomize the particle direction [0-1]
-         */
-        function ConeParticleEmitter(radius, 
-        /**
-         * The radius of the emission cone.
-         */
-        angle, 
-        /**
-         * The cone base angle.
+         * @param directionRandomizer defines how much to randomize the particle direction [0-1] (default is 0)
          */
+        function ConeParticleEmitter(radius, angle, 
+        /** defines how much to randomize the particle direction [0-1] (default is 0) */
         directionRandomizer) {
             if (radius === void 0) { radius = 1; }
             if (angle === void 0) { angle = Math.PI; }
             if (directionRandomizer === void 0) { directionRandomizer = 0; }
-            this.angle = angle;
             this.directionRandomizer = directionRandomizer;
+            this.angle = angle;
             this.radius = radius;
         }
         Object.defineProperty(ConeParticleEmitter.prototype, "radius", {
             /**
-             * Gets the radius of the emission cone.
+             * Gets or sets the radius of the emission cone
              */
             get: function () {
                 return this._radius;
             },
+            set: function (value) {
+                this._radius = value;
+                this._buildHeight();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ConeParticleEmitter.prototype, "angle", {
             /**
-             * Sets the radius of the emission cone.
+             * Gets or sets the angle of the emission cone
              */
+            get: function () {
+                return this._angle;
+            },
             set: function (value) {
-                this._radius = value;
-                if (this.angle !== 0) {
-                    this._height = value / Math.tan(this.angle / 2);
-                }
-                else {
-                    this._height = 1;
-                }
+                this._angle = value;
+                this._buildHeight();
             },
             enumerable: true,
             configurable: true
         });
+        ConeParticleEmitter.prototype._buildHeight = function () {
+            if (this._angle !== 0) {
+                this._height = this._radius / Math.tan(this._angle / 2);
+            }
+            else {
+                this._height = 1;
+            }
+        };
         /**
          * Called by the particle System when the direction is computed for the created particle.
          * @param emitPower is the power of the particle (speed)
@@ -57725,7 +57745,7 @@ var BABYLON;
          * @param particle is the particle we are computed the direction for
          */
         ConeParticleEmitter.prototype.startDirectionFunction = function (emitPower, worldMatrix, directionToUpdate, particle) {
-            if (this.angle === 0) {
+            if (this._angle === 0) {
                 BABYLON.Vector3.TransformNormalFromFloatsToRef(0, emitPower, 0, worldMatrix, directionToUpdate);
             }
             else {
@@ -57764,7 +57784,7 @@ var BABYLON;
          * @returns the new emitter
          */
         ConeParticleEmitter.prototype.clone = function () {
-            var newOne = new ConeParticleEmitter(this.radius, this.angle, this.directionRandomizer);
+            var newOne = new ConeParticleEmitter(this._radius, this._angle, this.directionRandomizer);
             BABYLON.Tools.DeepCopy(this, newOne);
             return newOne;
         };
@@ -57773,8 +57793,8 @@ var BABYLON;
          * @param effect defines the update shader
          */
         ConeParticleEmitter.prototype.applyToShader = function (effect) {
-            effect.setFloat("radius", this.radius);
-            effect.setFloat("coneAngle", this.angle);
+            effect.setFloat("radius", this._radius);
+            effect.setFloat("coneAngle", this._angle);
             effect.setFloat("height", this._height);
             effect.setFloat("directionRandomizer", this.directionRandomizer);
         };
@@ -57799,8 +57819,8 @@ var BABYLON;
         ConeParticleEmitter.prototype.serialize = function () {
             var serializationObject = {};
             serializationObject.type = this.getClassName();
-            serializationObject.radius = this.radius;
-            serializationObject.angle = this.angle;
+            serializationObject.radius = this._radius;
+            serializationObject.angle = this._angle;
             serializationObject.directionRandomizer = this.directionRandomizer;
             return serializationObject;
         };
@@ -59119,7 +59139,7 @@ var BABYLON;
             this._particlesIntersect = options ? options.particleIntersection : false;
             this._bSphereOnly = options ? options.boundingSphereOnly : false;
             this._bSphereRadiusFactor = (options && options.bSphereRadiusFactor) ? options.bSphereRadiusFactor : 1.0;
-            if (options && options.updatable) {
+            if (options && options.updatable !== undefined) {
                 this._updatable = options.updatable;
             }
             else {
@@ -85839,10 +85859,10 @@ var BABYLON;
             return lastShape;
         }*/
         OimoJSPlugin.prototype.setLinearVelocity = function (impostor, velocity) {
-            impostor.physicsBody.linearVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.linearVelocity.copy(velocity);
         };
         OimoJSPlugin.prototype.setAngularVelocity = function (impostor, velocity) {
-            impostor.physicsBody.angularVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.angularVelocity.copy(velocity);
         };
         OimoJSPlugin.prototype.getLinearVelocity = function (impostor) {
             var v = impostor.physicsBody.linearVelocity;

dist/preview release/es6.js

@@ -12052,7 +12052,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "3.3.0-alpha.4";
+                return "3.3.0-alpha.5";
             },
             enumerable: true,
             configurable: true
@@ -18507,6 +18507,18 @@ var BABYLON;
             _this._rotation = BABYLON.Vector3.Zero();
             _this._scaling = BABYLON.Vector3.One();
             _this._isDirty = false;
+            /**
+            * Set the billboard mode. Default is 0.
+            *
+            * | Value | Type | Description |
+            * | --- | --- | --- |
+            * | 0 | BILLBOARDMODE_NONE |  |
+            * | 1 | BILLBOARDMODE_X |  |
+            * | 2 | BILLBOARDMODE_Y |  |
+            * | 4 | BILLBOARDMODE_Z |  |
+            * | 7 | BILLBOARDMODE_ALL |  |
+            *
+            */
             _this.billboardMode = TransformNode.BILLBOARDMODE_NONE;
             _this.scalingDeterminant = 1;
             _this.infiniteDistance = false;
@@ -57677,46 +57689,54 @@ var BABYLON;
          * Creates a new instance ConeParticleEmitter
          * @param radius the radius of the emission cone (1 by default)
          * @param angles the cone base angle (PI by default)
-         * @param directionRandomizer defines how much to randomize the particle direction [0-1]
-         */
-        function ConeParticleEmitter(radius, 
-        /**
-         * The radius of the emission cone.
-         */
-        angle, 
-        /**
-         * The cone base angle.
+         * @param directionRandomizer defines how much to randomize the particle direction [0-1] (default is 0)
          */
+        function ConeParticleEmitter(radius, angle, 
+        /** defines how much to randomize the particle direction [0-1] (default is 0) */
         directionRandomizer) {
             if (radius === void 0) { radius = 1; }
             if (angle === void 0) { angle = Math.PI; }
             if (directionRandomizer === void 0) { directionRandomizer = 0; }
-            this.angle = angle;
             this.directionRandomizer = directionRandomizer;
+            this.angle = angle;
             this.radius = radius;
         }
         Object.defineProperty(ConeParticleEmitter.prototype, "radius", {
             /**
-             * Gets the radius of the emission cone.
+             * Gets or sets the radius of the emission cone
              */
             get: function () {
                 return this._radius;
             },
+            set: function (value) {
+                this._radius = value;
+                this._buildHeight();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ConeParticleEmitter.prototype, "angle", {
             /**
-             * Sets the radius of the emission cone.
+             * Gets or sets the angle of the emission cone
              */
+            get: function () {
+                return this._angle;
+            },
             set: function (value) {
-                this._radius = value;
-                if (this.angle !== 0) {
-                    this._height = value / Math.tan(this.angle / 2);
-                }
-                else {
-                    this._height = 1;
-                }
+                this._angle = value;
+                this._buildHeight();
             },
             enumerable: true,
             configurable: true
         });
+        ConeParticleEmitter.prototype._buildHeight = function () {
+            if (this._angle !== 0) {
+                this._height = this._radius / Math.tan(this._angle / 2);
+            }
+            else {
+                this._height = 1;
+            }
+        };
         /**
          * Called by the particle System when the direction is computed for the created particle.
          * @param emitPower is the power of the particle (speed)
@@ -57725,7 +57745,7 @@ var BABYLON;
          * @param particle is the particle we are computed the direction for
          */
         ConeParticleEmitter.prototype.startDirectionFunction = function (emitPower, worldMatrix, directionToUpdate, particle) {
-            if (this.angle === 0) {
+            if (this._angle === 0) {
                 BABYLON.Vector3.TransformNormalFromFloatsToRef(0, emitPower, 0, worldMatrix, directionToUpdate);
             }
             else {
@@ -57764,7 +57784,7 @@ var BABYLON;
          * @returns the new emitter
          */
         ConeParticleEmitter.prototype.clone = function () {
-            var newOne = new ConeParticleEmitter(this.radius, this.angle, this.directionRandomizer);
+            var newOne = new ConeParticleEmitter(this._radius, this._angle, this.directionRandomizer);
             BABYLON.Tools.DeepCopy(this, newOne);
             return newOne;
         };
@@ -57773,8 +57793,8 @@ var BABYLON;
          * @param effect defines the update shader
          */
         ConeParticleEmitter.prototype.applyToShader = function (effect) {
-            effect.setFloat("radius", this.radius);
-            effect.setFloat("coneAngle", this.angle);
+            effect.setFloat("radius", this._radius);
+            effect.setFloat("coneAngle", this._angle);
             effect.setFloat("height", this._height);
             effect.setFloat("directionRandomizer", this.directionRandomizer);
         };
@@ -57799,8 +57819,8 @@ var BABYLON;
         ConeParticleEmitter.prototype.serialize = function () {
             var serializationObject = {};
             serializationObject.type = this.getClassName();
-            serializationObject.radius = this.radius;
-            serializationObject.angle = this.angle;
+            serializationObject.radius = this._radius;
+            serializationObject.angle = this._angle;
             serializationObject.directionRandomizer = this.directionRandomizer;
             return serializationObject;
         };
@@ -59119,7 +59139,7 @@ var BABYLON;
             this._particlesIntersect = options ? options.particleIntersection : false;
             this._bSphereOnly = options ? options.boundingSphereOnly : false;
             this._bSphereRadiusFactor = (options && options.bSphereRadiusFactor) ? options.bSphereRadiusFactor : 1.0;
-            if (options && options.updatable) {
+            if (options && options.updatable !== undefined) {
                 this._updatable = options.updatable;
             }
             else {
@@ -85839,10 +85859,10 @@ var BABYLON;
             return lastShape;
         }*/
         OimoJSPlugin.prototype.setLinearVelocity = function (impostor, velocity) {
-            impostor.physicsBody.linearVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.linearVelocity.copy(velocity);
         };
         OimoJSPlugin.prototype.setAngularVelocity = function (impostor, velocity) {
-            impostor.physicsBody.angularVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.angularVelocity.copy(velocity);
         };
         OimoJSPlugin.prototype.getLinearVelocity = function (impostor) {
             var v = impostor.physicsBody.linearVelocity;

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.4",
+    "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,87 @@ 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;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
      * Class used to manage 3D user interface
      * @see http://doc.babylonjs.com/how_to/gui3d
      */

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,313 @@ 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);
+            };
+            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) {
@@ -7125,7 +7432,7 @@ var BABYLON;
                     this._isVisible = value;
                     var mesh = this.mesh;
                     if (mesh) {
-                        mesh.isVisible = value;
+                        mesh.setEnabled(value);
                     }
                 },
                 enumerable: true,

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,87 @@ 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;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
      * Class used to manage 3D user interface
      * @see http://doc.babylonjs.com/how_to/gui3d
      */

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

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

@@ -304,6 +304,7 @@ 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";

dist/preview release/inspector/package.json

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

dist/preview release/proceduralTexturesLibrary/package.json

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

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "3.3.0-alpha.4",
+    "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.4"
+        "babylonjs-gltf2interface": "3.3.0-alpha.6"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

dist/preview release/viewer/babylon.viewer.max.js

@@ -12173,7 +12173,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "3.3.0-alpha.4";
+                return "3.3.0-alpha.5";
             },
             enumerable: true,
             configurable: true
@@ -18628,6 +18628,18 @@ var BABYLON;
             _this._rotation = BABYLON.Vector3.Zero();
             _this._scaling = BABYLON.Vector3.One();
             _this._isDirty = false;
+            /**
+            * Set the billboard mode. Default is 0.
+            *
+            * | Value | Type | Description |
+            * | --- | --- | --- |
+            * | 0 | BILLBOARDMODE_NONE |  |
+            * | 1 | BILLBOARDMODE_X |  |
+            * | 2 | BILLBOARDMODE_Y |  |
+            * | 4 | BILLBOARDMODE_Z |  |
+            * | 7 | BILLBOARDMODE_ALL |  |
+            *
+            */
             _this.billboardMode = TransformNode.BILLBOARDMODE_NONE;
             _this.scalingDeterminant = 1;
             _this.infiniteDistance = false;
@@ -57798,46 +57810,54 @@ var BABYLON;
          * Creates a new instance ConeParticleEmitter
          * @param radius the radius of the emission cone (1 by default)
          * @param angles the cone base angle (PI by default)
-         * @param directionRandomizer defines how much to randomize the particle direction [0-1]
-         */
-        function ConeParticleEmitter(radius, 
-        /**
-         * The radius of the emission cone.
-         */
-        angle, 
-        /**
-         * The cone base angle.
+         * @param directionRandomizer defines how much to randomize the particle direction [0-1] (default is 0)
          */
+        function ConeParticleEmitter(radius, angle, 
+        /** defines how much to randomize the particle direction [0-1] (default is 0) */
         directionRandomizer) {
             if (radius === void 0) { radius = 1; }
             if (angle === void 0) { angle = Math.PI; }
             if (directionRandomizer === void 0) { directionRandomizer = 0; }
-            this.angle = angle;
             this.directionRandomizer = directionRandomizer;
+            this.angle = angle;
             this.radius = radius;
         }
         Object.defineProperty(ConeParticleEmitter.prototype, "radius", {
             /**
-             * Gets the radius of the emission cone.
+             * Gets or sets the radius of the emission cone
              */
             get: function () {
                 return this._radius;
             },
+            set: function (value) {
+                this._radius = value;
+                this._buildHeight();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ConeParticleEmitter.prototype, "angle", {
             /**
-             * Sets the radius of the emission cone.
+             * Gets or sets the angle of the emission cone
              */
+            get: function () {
+                return this._angle;
+            },
             set: function (value) {
-                this._radius = value;
-                if (this.angle !== 0) {
-                    this._height = value / Math.tan(this.angle / 2);
-                }
-                else {
-                    this._height = 1;
-                }
+                this._angle = value;
+                this._buildHeight();
             },
             enumerable: true,
             configurable: true
         });
+        ConeParticleEmitter.prototype._buildHeight = function () {
+            if (this._angle !== 0) {
+                this._height = this._radius / Math.tan(this._angle / 2);
+            }
+            else {
+                this._height = 1;
+            }
+        };
         /**
          * Called by the particle System when the direction is computed for the created particle.
          * @param emitPower is the power of the particle (speed)
@@ -57846,7 +57866,7 @@ var BABYLON;
          * @param particle is the particle we are computed the direction for
          */
         ConeParticleEmitter.prototype.startDirectionFunction = function (emitPower, worldMatrix, directionToUpdate, particle) {
-            if (this.angle === 0) {
+            if (this._angle === 0) {
                 BABYLON.Vector3.TransformNormalFromFloatsToRef(0, emitPower, 0, worldMatrix, directionToUpdate);
             }
             else {
@@ -57885,7 +57905,7 @@ var BABYLON;
          * @returns the new emitter
          */
         ConeParticleEmitter.prototype.clone = function () {
-            var newOne = new ConeParticleEmitter(this.radius, this.angle, this.directionRandomizer);
+            var newOne = new ConeParticleEmitter(this._radius, this._angle, this.directionRandomizer);
             BABYLON.Tools.DeepCopy(this, newOne);
             return newOne;
         };
@@ -57894,8 +57914,8 @@ var BABYLON;
          * @param effect defines the update shader
          */
         ConeParticleEmitter.prototype.applyToShader = function (effect) {
-            effect.setFloat("radius", this.radius);
-            effect.setFloat("coneAngle", this.angle);
+            effect.setFloat("radius", this._radius);
+            effect.setFloat("coneAngle", this._angle);
             effect.setFloat("height", this._height);
             effect.setFloat("directionRandomizer", this.directionRandomizer);
         };
@@ -57920,8 +57940,8 @@ var BABYLON;
         ConeParticleEmitter.prototype.serialize = function () {
             var serializationObject = {};
             serializationObject.type = this.getClassName();
-            serializationObject.radius = this.radius;
-            serializationObject.angle = this.angle;
+            serializationObject.radius = this._radius;
+            serializationObject.angle = this._angle;
             serializationObject.directionRandomizer = this.directionRandomizer;
             return serializationObject;
         };
@@ -59240,7 +59260,7 @@ var BABYLON;
             this._particlesIntersect = options ? options.particleIntersection : false;
             this._bSphereOnly = options ? options.boundingSphereOnly : false;
             this._bSphereRadiusFactor = (options && options.bSphereRadiusFactor) ? options.bSphereRadiusFactor : 1.0;
-            if (options && options.updatable) {
+            if (options && options.updatable !== undefined) {
                 this._updatable = options.updatable;
             }
             else {
@@ -85960,10 +85980,10 @@ var BABYLON;
             return lastShape;
         }*/
         OimoJSPlugin.prototype.setLinearVelocity = function (impostor, velocity) {
-            impostor.physicsBody.linearVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.linearVelocity.copy(velocity);
         };
         OimoJSPlugin.prototype.setAngularVelocity = function (impostor, velocity) {
-            impostor.physicsBody.angularVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.angularVelocity.copy(velocity);
         };
         OimoJSPlugin.prototype.getLinearVelocity = function (impostor) {
             var v = impostor.physicsBody.linearVelocity;

dist/preview release/what's new.md

@@ -7,6 +7,7 @@
 - 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](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))
 
 ## Updates
 
@@ -67,6 +68,8 @@
 - 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
 

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;
         }
 
         /**

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

@@ -72,6 +72,9 @@ module BABYLON.GUI {
         private _doNotRender = false;
         private _downPointerIds:{[id:number] : boolean} = {};
 
+        /** @hidden */
+        public _tag: any;
+
         /** Gets or sets a boolean indicating if the control can be hit with pointer events */
         public isHitTestVisible = true;
         /** Gets or sets a boolean indicating if the control can block pointer events */

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

@@ -0,0 +1,341 @@
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    /**
+     * Class used to create a 2D grid container
+     */
+    export class Grid extends Container {
+        private _rowDefinitions = new Array<ValueAndUnit>();
+        private _columnDefinitions = new Array<ValueAndUnit>();
+        private _cells: {[key: string]:Container} = {};
+        private _childControls = new Array<Control>();
+
+        /** Gets the list of children */
+        public get children(): Control[] {
+            return this._childControls;
+        }             
+
+        /**
+         * 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
+         */
+        public addRowDefinition(height: number, isPixel = false): Grid {
+            this._rowDefinitions.push(new ValueAndUnit(height, isPixel ? ValueAndUnit.UNITMODE_PIXEL : 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
+         */
+        public addColumnDefinition(width: number, isPixel = false): Grid {
+            this._columnDefinitions.push(new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : 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
+         */
+        public setRowDefinition(index: number, height: number, isPixel = false): Grid {
+            if (index < 0 || index >= this._rowDefinitions.length) {
+                return this;
+            }
+
+            this._rowDefinitions[index] = new ValueAndUnit(height,isPixel ? ValueAndUnit.UNITMODE_PIXEL : 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
+         */
+        public setColumnDefinition(index: number, width: number, isPixel = false): Grid {
+            if (index < 0 || index >= this._columnDefinitions.length) {
+                return this;
+            }
+
+            this._columnDefinitions[index] = new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE);
+
+            this._markAsDirty();
+
+            return this;
+        }        
+
+        private _removeCell(cell: Container, key: string) {
+            if (!cell) {
+                return;
+            }
+
+            super.removeControl(cell);
+
+            for (var control of cell.children) {
+                let childIndex = this._childControls.indexOf(control);
+
+                if (childIndex !== -1) {
+                    this._childControls.splice(childIndex, 1);
+                }
+            }
+
+            delete this._cells[key];
+        }
+
+        private _offsetCell(previousKey: string, key: string) {
+            if (!this._cells[key]) {
+                return;
+            }
+
+            this._cells[previousKey] = this._cells[key];
+
+            for (var control of this._cells[previousKey].children) {
+                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
+         */
+        public removeColumnDefinition(index: number): Grid {
+            if (index < 0 || index >= this._columnDefinitions.length) {
+                return this;
+            }
+
+            for (var x = 0; x < this._rowDefinitions.length; x++) {
+                let key = `${x}:${index}`;
+                let 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++) {
+                    let previousKey = `${x}:${y - 1}`;
+                    let 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
+         */
+        public removeRowDefinition(index: number): Grid {
+            if (index < 0 || index >= this._rowDefinitions.length) {
+                return this;
+            }
+
+            for (var y = 0; y < this._columnDefinitions.length; y++) {
+                let key = `${index}:${y}`;
+                let 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++) {
+                    let previousKey = `${x - 1}:${y}`;
+                    let 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
+         */
+        public addControl(control: Control, row: number = 0, column: number = 0): Grid {
+            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);
+            }
+
+            let x = Math.min(row, this._rowDefinitions.length - 1);
+            let y = Math.min(column, this._columnDefinitions.length - 1);
+            let key = `${x}:${y}`;
+            let goodContainer = this._cells[key];
+
+            if (!goodContainer) {
+                goodContainer = new Container(key);
+                this._cells[key] = goodContainer;
+                goodContainer.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+                goodContainer.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+                super.addControl(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
+         */        
+        public removeControl(control: Control): Container {
+            var index = this._childControls.indexOf(control);
+
+            if (index !== -1) {
+                this._childControls.splice(index, 1);
+            }
+
+            let cell = this._cells[control._tag];
+
+            if (cell) {
+                cell.removeControl(control);
+            }
+
+            this._markAsDirty();
+            return this;
+        }        
+
+        /**
+         * Creates a new Grid
+         * @param name defines control name
+         */
+        constructor(public name?: string) {
+            super(name);
+        }
+
+        protected _getTypeName(): string {
+            return "Grid";
+        }   
+
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            let widths = [];
+            let heights = [];
+            let lefts = [];
+            let tops = [];
+
+            let availableWidth = this._currentMeasure.width;
+            let globalWidthPercentage = 0;
+            let availableHeight = this._currentMeasure.height;
+            let globalHeightPercentage = 0;
+
+            // Heights
+            let index = 0;
+            for (var value of this._rowDefinitions) {
+                if (value.isPixel) {
+                    let height = value.getValue(this._host);
+                    availableHeight -= height;
+                    heights[index] = height;
+                } else {
+                    globalHeightPercentage += value.internalValue;
+                }
+                index++;
+            }
+
+            let top = 0;
+            index = 0;
+            for (var value of this._rowDefinitions) {
+                tops.push(top);
+
+                if (!value.isPixel) {
+                    let height = (value.internalValue / globalHeightPercentage) * availableHeight;
+                    top += height;
+                    heights[index] = height;
+                } else {
+                    top += value.getValue(this._host);
+                }
+                index++;
+            }
+
+            // Widths
+            index = 0;
+            for (var value of this._columnDefinitions) {
+                if (value.isPixel) {
+                    let width = value.getValue(this._host);
+                    availableWidth -= width;
+                    widths[index] = width;
+                } else {
+                    globalWidthPercentage += value.internalValue;
+                }
+                index++;
+            }
+
+            let left = 0;
+            index = 0;
+            for (var value of this._columnDefinitions) {
+                lefts.push(left);
+                if (!value.isPixel) {
+                    let 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;
+                }
+                let split = key.split(":");
+                let x = parseInt(split[0]);
+                let y = parseInt(split[1]);
+                let 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._additionalProcessing(parentMeasure, context);
+        }
+    }
+}

gui/src/3D/controls/control3D.ts

@@ -179,7 +179,7 @@ module BABYLON.GUI {
 
             let mesh = this.mesh;
             if (mesh) {
-                mesh.isVisible = value;
+                mesh.setEnabled(value);
             }
         }
 

inspector/src/Inspector.ts

@@ -372,6 +372,7 @@ module INSPECTOR {
             // Create popup
             let 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";

package.json

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

src/Engine/babylon.engine.ts

@@ -710,7 +710,7 @@
          * Returns the current version of the framework
          */
         public static get Version(): string {
-            return "3.3.0-alpha.4";
+            return "3.3.0-alpha.6";
         }
 
         // Updatable statics so stick with vars here

src/Mesh/babylon.transformNode.ts

@@ -25,6 +25,18 @@ module BABYLON {
         protected _isDirty = false;
         private _transformToBoneReferal: Nullable<TransformNode>;
 
+        /**
+        * Set the billboard mode. Default is 0.
+        *
+        * | Value | Type | Description |
+        * | --- | --- | --- |
+        * | 0 | BILLBOARDMODE_NONE |  |
+        * | 1 | BILLBOARDMODE_X |  |
+        * | 2 | BILLBOARDMODE_Y |  |
+        * | 4 | BILLBOARDMODE_Z |  |
+        * | 7 | BILLBOARDMODE_ALL |  |
+        *
+        */
         @serialize()
         public billboardMode = TransformNode.BILLBOARDMODE_NONE;
 

src/Particles/EmitterTypes/babylon.coneParticleEmitter.ts

@@ -6,22 +6,36 @@ module BABYLON {
      */
     export class ConeParticleEmitter implements IParticleEmitterType {
         private _radius: number;
+        private _angle: number;
         private _height: number;
 
         /**
-         * Gets the radius of the emission cone.
+         * Gets or sets the radius of the emission cone
          */
         public get radius(): number {
             return this._radius;
         }
 
-        /**
-         * Sets the radius of the emission cone.
-         */
         public set radius(value: number) {
             this._radius = value;
-            if (this.angle !== 0) {
-                this._height = value / Math.tan(this.angle / 2);
+            this._buildHeight();
+        }
+
+        /**
+         * Gets or sets the angle of the emission cone
+         */
+        public get angle(): number {
+            return this._angle;
+        }
+
+        public set angle(value: number) {
+            this._angle = value;
+            this._buildHeight();
+        }        
+
+        private _buildHeight() {
+            if (this._angle !== 0) {
+                this._height =  this._radius / Math.tan(this._angle / 2);
             }
             else {
                 this._height = 1;
@@ -32,17 +46,12 @@ module BABYLON {
          * Creates a new instance ConeParticleEmitter
          * @param radius the radius of the emission cone (1 by default)
          * @param angles the cone base angle (PI by default)
-         * @param directionRandomizer defines how much to randomize the particle direction [0-1]
+         * @param directionRandomizer defines how much to randomize the particle direction [0-1] (default is 0)
          */
-        constructor(radius = 1, 
-            /**
-             * The radius of the emission cone.
-             */
-            public angle = Math.PI, 
-            /**
-             * The cone base angle.
-             */
+        constructor(radius = 1, angle = Math.PI, 
+            /** defines how much to randomize the particle direction [0-1] (default is 0) */
             public directionRandomizer = 0) {
+            this.angle = angle;
             this.radius = radius;
         }
 
@@ -54,7 +63,7 @@ module BABYLON {
          * @param particle is the particle we are computed the direction for
          */
         public startDirectionFunction(emitPower: number, worldMatrix: Matrix, directionToUpdate: Vector3, particle: Particle): void {
-            if (this.angle === 0) {
+            if (this._angle === 0) {
                 Vector3.TransformNormalFromFloatsToRef(0, emitPower, 0, worldMatrix, directionToUpdate);
             }
             else {
@@ -98,7 +107,7 @@ module BABYLON {
          * @returns the new emitter
          */
         public clone(): ConeParticleEmitter {
-            let newOne = new ConeParticleEmitter(this.radius, this.angle, this.directionRandomizer);
+            let newOne = new ConeParticleEmitter(this._radius, this._angle, this.directionRandomizer);
 
             Tools.DeepCopy(this, newOne);
 
@@ -110,8 +119,8 @@ module BABYLON {
          * @param effect defines the update shader
          */        
         public applyToShader(effect: Effect): void {
-            effect.setFloat("radius", this.radius);
-            effect.setFloat("coneAngle", this.angle);
+            effect.setFloat("radius", this._radius);
+            effect.setFloat("coneAngle", this._angle);
             effect.setFloat("height", this._height);
             effect.setFloat("directionRandomizer", this.directionRandomizer);
         }
@@ -140,8 +149,8 @@ module BABYLON {
             var serializationObject: any = {};
 
             serializationObject.type = this.getClassName();
-            serializationObject.radius  = this.radius;
-            serializationObject.angle  = this.angle;
+            serializationObject.radius  = this._radius;
+            serializationObject.angle  = this._angle;
             serializationObject.directionRandomizer  = this.directionRandomizer;
 
             return serializationObject;

src/Particles/babylon.solidParticleSystem.ts

@@ -159,7 +159,7 @@
                 this._particlesIntersect = options ? <boolean>options.particleIntersection : false;
                 this._bSphereOnly= options ? <boolean>options.boundingSphereOnly : false;
                 this._bSphereRadiusFactor = (options && options.bSphereRadiusFactor) ? options.bSphereRadiusFactor : 1.0;
-                if (options && options.updatable) {
+                if (options && options.updatable !== undefined) {
                     this._updatable = options.updatable;
                 } else {
                     this._updatable = true;

src/Physics/Plugins/babylon.oimoJSPlugin.ts

@@ -351,11 +351,11 @@ module BABYLON {
         }*/
 
         public setLinearVelocity(impostor: PhysicsImpostor, velocity: Vector3) {
-            impostor.physicsBody.linearVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.linearVelocity.copy(velocity);
         }
 
         public setAngularVelocity(impostor: PhysicsImpostor, velocity: Vector3) {
-            impostor.physicsBody.angularVelocity.init(velocity.x, velocity.y, velocity.z);
+            impostor.physicsBody.angularVelocity.copy(velocity);
         }
 
         public getLinearVelocity(impostor: PhysicsImpostor): Nullable<Vector3> {