{
    "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#7"
                }
            ]
        },
        {
            "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": "#SRZRWV#5"
                },
                {
                    "title": "Picture in Picture Visual Camera",
                    "doc": "https://doc.babylonjs.com/divingDeeper/cameras/layerMasksAndMultiCam",
                    "icon": "icons/pipcamera.png",
                    "description": "Using layer masks and viewports, show a visual representation of camera movement",
                    "PGID": "#L92PHY#36"
                }
            ]
        },
        {
            "title": "GUI",
            "samples": [
                {
                    "title": "GUI",
                    "doc": "https://doc.babylonjs.com/how_to/gui",
                    "icon": "icons/gui.png",
                    "description": "Babylon.js graphical user interface provides sliders, buttons, etc.",
                    "PGID": "#3VMTI9#0"
                },
                {
                    "title": "3D GUI",
                    "doc": "https://doc.babylonjs.com/how_to/gui3d",
                    "icon": "icons/gui3d.jpg",
                    "description": "Babylon.js 3D graphical user interface provides 3D buttons, 3D containers etc.",
                    "PGID": "#HB4C01#9"
                },
                {
                    "title": "3D GUI - MeshButton3D",
                    "doc": "https://doc.babylonjs.com/how_to/gui3d#meshbutton3d",
                    "icon": "icons/meshbutton3d.jpg",
                    "description": "Uses MeshButton3D to create custom 3D buttons",
                    "PGID": "#8Y780Y#52"
                },
                {
                    "title": "App Bar (AttachToBoxBehavior)",
                    "doc": "https://doc.babylonjs.com/how_to/meshbehavior",
                    "icon": "icons/appBar.jpg",
                    "description": "Attach a menu to a bounding box such that it always faces the user",
                    "PGID": "#8GY6J8#180"
                }
            ]
        },
        {
            "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": "Keyboard + game loop",
                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_actions",
                    "icon": "icons/keyboard.png",
                    "description": "Move a sphere around with the keyboard",
                    "PGID": "#15EY4F#0"
                },
                {
                    "title": "Gizmo/Manipulator",
                    "doc": "https://doc.babylonjs.com/how_to/gizmo",
                    "icon": "icons/gizmo.jpg",
                    "description": "Position, Rotate and Scale meshes with a pointer",
                    "PGID": "#8MGKWK#25"
                },
                {
                    "title": "Using DeviceSourceManager",
                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_devicesourcemanager",
                    "icon": "icons/dsm_input.png",
                    "description": "Control ship with keyboard or gamepad.",
                    "PGID": "#C7PM2B"
                }
            ]
        },
        {
            "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 light",
                    "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": "#G3GZA1#49"
                },
                {
                    "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": "#SYQW69"
                },
                {
                    "title": "Assets manager",
                    "doc": "https://doc.babylonjs.com/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#34"
                }
            ]
        },
        {
            "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": "Float on Water",
                    "doc": "https://doc.babylonjs.com/extensions/water",
                    "icon": "icons/FloatWater.jpg",
                    "description": "Float on Water material",
                    "PGID": "#L76FB1#49"
                }

            ]
        },
        {
            "title": "Meshes",
            "samples": [
                {
                    "title": "Render lines",
                    "doc": "https://doc.babylonjs.com/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#184"
                },
                {
                    "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#1"
                },
                {
                    "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#75"
                },
                {
                    "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": "Clip planes",
                    "doc": "https://doc.babylonjs.com/how_to/clip_planes",
                    "icon": "icons/clipplanes.jpg",
                    "description": "You can clip the rendering of a scene by using clip planes",
                    "PGID": "#Y6W087#0"
                }
            ]
        },
        {
            "title": "Particles",
            "samples": [
                {
                    "title": "Particle helper",
                    "doc": "https://doc.babylonjs.com/how_to/particlehelper",
                    "icon": "icons/particle_helper.jpg",
                    "description": "Easily create complex particle systems",
                    "PGID": "#1VGT5D#2"
                },
                {
                    "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#2"
                },
                {
                    "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": "Particles and node material",
                    "doc": "https://doc.babylonjs.com/How_To/Particles_and_nme",
                    "icon": "icons/particle_nme.jpg",
                    "description": "Updating default particle shader with NME",
                    "PGID": "#RA18GJ#0"
                },
                {
                    "title": "A lot of triangles with SPS",
                    "doc": "https://doc.babylonjs.com/how_to/solid_particles",
                    "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_particles",
                    "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_particles",
                    "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_particles",
                    "icon": "icons/sps_shadows.jpg",
                    "description": "Animate SPS with realtime shadows",
                    "PGID": "#ML2LR9#0"
                },
                {
                    "title": "Particle sub emitters",
                    "doc": "https://doc.babylonjs.com/how_to/sub_emitters",
                    "icon": "icons/subemitter.jpg",
                    "description": "Spawn particles from another particle as it moves or when it dies",
                    "PGID": "#T0L01N#50"
                }
            ]
        },
        {
            "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#14"
                },
                {
                    "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": "#1Z89KY#28"
                },
                {
                    "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": "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#1"
                },
                {
                    "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#6"
                },
                {
                    "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#106"
                },
                {
                    "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 through 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#1"
                },
                {
                    "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": "#J0D279#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#7"
                },
                {
                    "title": "Highlight layer",
                    "doc": "https://doc.babylonjs.com/how_to/highlight_layer",
                    "icon": "icons/highlights.jpg",
                    "description": "Highlight a mesh",
                    "PGID": "#7EESGZ#8"
                },
                {
                    "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": "Heatwave",
                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_postprocesses#custom-postprocesses",
                    "icon": "icons/heatwave.jpg",
                    "description": "Use custom post process effect to simulate heat wave effect",
                    "PGID": "#TZJ0HQ#18"
                },
                {
                    "title": "RGB Shift Glitch",
                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_postprocesses#custom-postprocesses",
                    "icon": "icons/rgbglitch.jpg",
                    "description": "Use custom post process effect to simulate RGB Shift glitch",
                    "PGID": "#TZJ0HQ#19"
                },
                {
                    "title": "Dawn Bringer",
                    "doc": "https://doc.babylonjs.com/how_to/how_to_use_postprocesses#custom-postprocesses",
                    "icon": "icons/dawn.jpg",
                    "description": "Use custom post process effect to simulate DawnBringer effect",
                    "PGID": "#TZJ0HQ#17"
                }
            ]
        },
        {
            "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": "#SQ5UC1#1"
                },
                {
                    "title": "360 photos",
                    "doc": "https://doc.babylonjs.com/how_to/360photodome",
                    "icon": "icons/360photo.jpg",
                    "description": "Easily display and control 360 photos",
                    "PGID": "#14KRGG#3"
                },
                {
                    "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#37"
                },
                {
                    "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#1"
                },
                {
                    "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#30"
                },
                {
                    "title": "Image texture",
                    "doc": "https://doc.babylonjs.com/babylon101/materials#transparent-texture-examples",
                    "icon": "icons/image_texture.jpg",
                    "description": "Apply an image with transparency to a mesh",
                    "PGID": "#YDO1F#75"
                },
                {
                    "title": "Video texture",
                    "doc": "https://doc.babylonjs.com/how_to/video_texture",
                    "icon": "icons/video_texture.jpg",
                    "description": "Apply a video as a texture to a mesh",
                    "PGID": "#CHQ4T#120"
                },
                {
                    "title": "Basis texture loading",
                    "doc": "https://doc.babylonjs.com/resources/Multi-Platform_Compressed_Textures",
                    "icon": "icons/basis.jpg",
                    "description": "Load a basis texture",
                    "PGID": "#4RN0VF#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#260"
                }
            ]
        },
        {
            "title": "Misc.",
            "samples": [
                {
                    "title": "Charting",
                    "doc": "https://doc.babylonjs.com/babylon101/",
                    "icon": "icons/charting.jpg",
                    "description": "Creates a 3D charting presentation",
                    "PGID": "#8PY6X5#1"
                }
            ]
        }
    ]
}