Playground 
9.0.0 (WebGL2)
TS
Javascript
Run
Save
Inspector
Download
Create new
Clear code
WebGL2
9.0.0
Examples
index.js
Examples
Animation
Animation Blending
Triggering Mixamo animations.
Documentation
Animation Group Example 2
Second Example of Animation Groups.
Documentation
Animation Retargeting Tool
Tool to help retarget animations to characters
Documentation
Blending Animations Together
Example of blending animations and animation weights
Documentation
Box animation stop after 5 secs
An example of stopping an animation after specific amount of time.
Documentation
Load Model and Play Animation Group
Simple example of loading a gltf/glb asset and playing the animation groups tha come with it.
Documentation
Retargeted animation
Example of retargeting a hip-hop animation to a character
Documentation
Slide and Rotate Animation
The simple slide animation with rotation introduced.
Documentation
Sliding Box Direct Animation
An example of sliding a box with direct animation.
Documentation
Audio
3D Spatial Sound
A simple example of creating spatial sound in your scene.
Documentation
Custom audio unlock & autoplay
A simple example unlocking audio on first user interaction
Documentation
Full Audio Example
Full audio playground example.
Documentation
Playing Sounds Together
A simple example playing sounds together and synchronized.
Documentation
Playing Sounds With Interaction
A simple example playing a sound on user interaction.
Documentation
Simple Music Playback Example
A simple example of playing sounds or music in your scene.
Documentation
Behaviors
AttachToBoxBehavior Example
A simple example of AttachToBoxBehavior.
Documentation
Bouncing Behavior Example
A simple example of the camera bouncing behavior.
Documentation
Drag Along an Axis
A simple example of the pointerDragBehavior.
Documentation
Framing Behavior Example
A simple example of the camera Framing behavior.
Documentation
Six Directions Example
A simple example of SixDofDragBehavior with single or multipoint support.
Documentation
Cameras
ArcRotateCamera Offset Demo
A demonstration of setting targetScreenOffset
Documentation
ArcRotateCamera Rotation Example
A demo showing how the camera moves with changes to alpha, beta, and the camera's upVector
Documentation
Device Orientation Camera Example
A simple example of how to construct a Device Orientation camera.
Documentation
Follow Camera Example
A simple example of how to construct a follow camera.
Documentation
Gun Sight Crosshair Example
A simple example of creating a gun sight crosshair using layer masks and two cameras.
Documentation
Picture in Picture Visual Camera
Using layer masks and viewports, show a visual representation of camera movement.
Documentation
Universal Camera Example
A simple example of how to construct a universal camera.
Documentation
arcRotate Camera Example
A simple example of how to construct an arcRotate camera.
Documentation
Dynamic Texture
Product Customization
Customize the graphics of a skateboard deck.
Documentation
Environment
Background Material with Reflection Texture
Simple example of a background material with a reflection texture.
Documentation
Playground Example Skybox Helper
Simple example of using the Skybox Helper.
Documentation
Reflection Probe and PBR Example
Simple example of how to use reflection probes with PBR in your scene.
Documentation
Simple Fog Example
Simple example of how to add fog to your scene.
Documentation
Frame Graph
Compute shader task (NRG)
Example of a node render graph using the compute shader block
Documentation
Custom post-process in frame graph
Using a custom post-process in frame graph with FrameGraphCustomPostProcessTask
Documentation
Generate mipmaps task (NRG)
Example of a node render graph using the generate mipmaps block
Documentation
Multiple shadow generators example (PG)
Using multiple shadow generators with a ObjectRenderer block
Documentation
SSR task (NRG)
Example of a node render graph using the SSR block
Documentation
Selection outline layer (NRG)
Example of a node render graph using the Selection outline layer block
Documentation
Use of the GlowLayer block (PG)
Example of a node render graph using the GlowLayer block
Documentation
Use of the UtilityLayerRenderer block
Example of a node render graph using the UtilityLayerRenderer block
Documentation
Using SSR in a node render graph
Example of a node render graph using SSR with automatic thickness computation
Documentation
Volumetric lighting (NRG)
Example of a node render graph using the volumetric lighting block
Documentation
GUI
Alignments Example
Simple example demonstrating how to use gui alignments.
Documentation
Button Example
Simple example showing how to add a Button control to your scene.
Documentation
Fullscreen GUI Example
Simple example of adding a fullscreen BabylonGUI to your scene.
Documentation
Horizontal Adaptive Scaling Example
Simple example of horizontal adaptive scaling.
Documentation
Positions and Sizes Example
Simple example demonstrating how to set and update GUI positions and sizes.
Documentation
Rotation and Scaling Example
Simple example of rotation and scaling.
Documentation
Simple TextBlock Example
Simple example of adding a textBlock to your scene.
Documentation
Import
Append An Object
Simple example showing how append an object to your scene.
Documentation
Asset Container Load Example
Simple example showing how to load assets into asset containers.
Documentation
Asset Container Load Example
Simple example showing how to load assets into asset containers.
Documentation
Import Mesh
Simple example showing how to import an object into your scene.
Documentation
Import Mesh Async with Promises
Importing an object in your scene with async/await paradigm
Documentation
Import Mesh Async with await
Importing an object in your scene with async/await paradigm
Documentation
Load a Mesh Using the Asset Librarian
Simple example of how to use the Asset Librarian to load mesh into the scene.
Documentation
Load a glTF Asset
Simple example showing how load a .glTF asset into your scene.
Documentation
Interactions
Click+Drag to Multi Select
Simple example of how to multi-select objects in a scene using rectangular selection.
Documentation
Scene Observables Template
Simple scene observables template.
Documentation
Simple Drag Example
Simple example of a drag behavior.
Documentation
Simple Keyboard Input Example
Simple example of keyboard input.
Documentation
Lights
Area Light with Emission
Area Light using emission texture.
Documentation
Directional Light Example
Simple Example of adding a Directional Light to your scene.
Documentation
Example of Excluding Meshes to Light
Simple Example of exluding meshes from being lit by a light.
Documentation
Hemispheric Light Example
Simple Example of adding a Hemispheric Light to your scene.
Documentation
Point Light Example
Simple Example of adding a Point Light to your scene.
Documentation
Rectangular Area Light Example
Simple Example of adding a Rectangular Area Light to your scene.
Documentation
Spot Light Example
Simple Example of adding a Spot Light to your scene.
Documentation
Materials
Blending Tiling Textures
Blending tiling textures to hide repeating elements.
Documentation
Material Color Reaction to Light Color
Simple example of material color reacting to light color.
Documentation
Material Transparency
Simple example of using transparency in your scene materials.
Documentation
Material with Diffuse, Emissive, and Ambient Textures
Simple example of using diffuse, emissive, and ambient textures in your scene materials.
Documentation
Nine Patch with NME
Example Node Material for Nine Patch Texture Scaling
Documentation
Passing and updating a Color3 uniform to a shader
Demonstrating how to pass a Color3 uniform to a shader
Documentation
Pulse Wave Shader
A wave of color that washes over simple geometry similar to a radar ping.
Documentation
Simplest Shader Material
Most basic example of ShaderMaterial
Documentation
Using Bump Maps
Simple example of applying bump maps.
Documentation
Mesh
Cloning Example 1
Simple example showing shared geometry by scaling one geometry by 2.
Documentation
Create a Sphere
Simple example of creating a sphere.
Documentation
Get First Mesh Hit By Ray
Simple example of getting the first mesh hit by a ray.
Documentation
Loading Bones
Simple example of loading bones.
Documentation
Mesh Intersection Example
Simple example of mesh intersections.
Documentation
Updatable Extrusion
Updatable extrusion.
Documentation
Node Material
Incredible NME Ocean Shader
Incredible NME Ocean Shader.
Documentation
NME Particle Shaders Example
Playground example of using the Node Material Editor to create Particle Shaders.
Documentation
NME Post Process Playground Example
Playground example of using the Node Material Editor to create a Post Process effect.
Documentation
PBR Blocks Playground
Playground of the full use of PBR blocks in NME.
Documentation
Playground of Standard Material and NME Standard Material
Playground to compare the existing `StandardMaterial` and the corresponding Node Material.
Documentation
Particles
Combining SPS with Node Material
A demonstration of how to leverage a node material with a solid particle system mesh
Documentation
Emit Particles From a Box Position
Simple example showing how to set a particle emission point to a box's position.
Documentation
Loading Particle System From File
Simple example using the Asset Manager to load a particle system and texture before parsing it.
Documentation
Minimal Particle System
Simple example of creating a minimal particle system.
Documentation
Multiple Systems With Mesh Emitter
A more complex example with several systems emitting from the same mesh.
Documentation
Particle Snippet Server Example
Simple example of loading a particle system from the snippet server.
Documentation
Texture Mask Example
Particle system using a texture mask.
Documentation
Physics
6 DoF Joint Tool
Simple tool for experimenting with commonly used Physics6DoFConstraint parameters
Documentation
Animated character
Ragdoll with an animated character and the ability to apply impulse
Documentation
Basic Physics Scene
Simple example of a basic physics scene.
Documentation
Bunny ragdoll
Ragdoll sample using a bunny plush
Documentation
Constraint Debug view
Edit angular and linear limits of a constraint
Documentation
Constraints
Shows all the different constraints available
Documentation
Constraints limits
View limits for different type of constraints
Documentation
Instances
How to use instances with physics
Documentation
Motor Constraints
Example of Motor Constraints targeting velocity and position
Documentation
Physics helpers
Show how to use physics helpers and add various effects with forces
Documentation
RayPicking Vs Raycast
Compare Raypicking with raycast feature of the Physics Engine
Documentation
Raycast Filtering Example
Example of the raycast filtering feature
Documentation
Simple scene with gltf
Simple falling boombox mesh coming from gltf
Documentation
Stress test
Instantiate many bodies to test the Physics engine performance
Documentation
Swinging pendulums
Example of using the Distance Constraint to model a pendulum
Documentation
Post-processing
Custom Post Process Example
Simple example of a custom post process.
Documentation
Default Rendering Pipeline Example
Complete example of the default rendering pipeline.
Documentation
IBL Shadows Pipeline Example
Boombox scene with IBL shadows
Documentation
Multiple Passes Example
Simple example showing how to run multiple passes with the render target texture.
Documentation
SSAO Rendering Pipeline Example
Simple example of using the SSAO rendering pipeline.
Documentation
SSR Rendering Pipeline Example (Hill Valley)
Hill Valley scene with screen space reflections
Documentation
TAA Rendering Pipeline Example
BoomBox scene with temporal anti-aliasing
Documentation
Scene
Performance Mode Example
Simple example of using Performance Mode.
Documentation
Switching Scenes
Simple example showing how to switch scenes.
Documentation
Shadows
Animated Directional Light Example
Simple Example of a moving directional light.
Documentation
Blurred Shadow Example
Simple Example of adding blurred shadows to your scene.
Documentation
Cascaded Shadow Map Example
Simple Example of using the CSM system in your scene.
Documentation
Shadow Example
Simple Example of adding shadows to your scene.
Documentation
Soft Transparent Shadows Example
Simple Example of adding soft transparent shadows to your scene.
Documentation
Sprites
Pick And Rotate A Selected Sprite
Simple example of picking a sprite and rotating it.
Documentation
Single Sprite Image
Simple example of a single sprite image.
Documentation
Sprite Animation
Simple example of how to handle sprite animation.
Documentation
Sprites From Different Cells
Simple example of sprites from different cells
Documentation
WebGPU
Ocean demo
Ocean simulation
Documentation
WebXR
AR Portal
WebXR AR Portal
Documentation
Basic Scene With Teleportation
Simple example of a basic scene with teleportation enabled.
Documentation
Goalkeeper Training
Goalkeeper Training
Documentation
Legacy Physics Playground
Physics Playground
Documentation
Sphere In WebXR Using Babylon.js
Simple example of a sphere in WebXR using Babylon.js
Documentation
WebXR Color Picker
Simple WebXR color picker example.
Documentation