Playground : Fix https warnings, and get exemple list from documentation repo instead of copying it.

Playground/debug.html

@@ -439,7 +439,7 @@
         </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">
+        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
     <span class="label" id="fpsLabel">FPS</span>

Playground/examples/list.json

@@ -1,892 +0,0 @@
-{
-    "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

@@ -381,7 +381,7 @@
             </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">
+            <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
         </div>
 
         <span class="label" id="fpsLabel">FPS</span>

Playground/index.html

@@ -416,7 +416,7 @@
             </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">
+            <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
         </div>
 
         <span class="label" id="fpsLabel">FPS</span>

Playground/indexStable.html

@@ -407,7 +407,7 @@
             </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">
+            <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
         </div>
 
         <span class="label" id="fpsLabel">FPS</span>

Playground/js/index.js

@@ -191,7 +191,7 @@
         var loadScriptsList = function () {
             var xhr = new XMLHttpRequest();
 
-            xhr.open('GET', 'examples/list.json', true);
+            xhr.open('GET', 'https://raw.githubusercontent.com/BabylonJS/Documentation/master/examples/list.json', true);
 
             xhr.onreadystatechange = function () {
                 if (xhr.readyState === 4) {
@@ -223,7 +223,7 @@
                                 example.id = ii;
 
                                 var exampleImg = document.createElement("img");
-                                exampleImg.src = scripts[i].samples[ii].icon.replace("icons", "http://doc.babylonjs.com/examples/icons");
+                                exampleImg.src = scripts[i].samples[ii].icon.replace("icons", "https://doc.babylonjs.com/examples/icons");
                                 exampleImg.setAttribute("onClick", "document.getElementById('PGLink_" + scripts[i].samples[ii].PGID + "').click();");
 
                                 var exampleContent = document.createElement("div");