Examples

Animations

Animation 101

How to add animations

DocumentationPlayground

Animation blending

Blend multiple animations together to move from on animation clip to another

DocumentationPlayground

Animation weights

Use weights to blend multiple animations together

DocumentationPlayground

Bones 101

Create complex animations by using skeletons and bones

DocumentationPlayground

Easing functions

Create animations with different easing functions

DocumentationPlayground

Instanced bones

Animated skeletons of people walking

DocumentationPlayground

Morph targets

Morph a mesh between multiple targets

DocumentationPlayground

Cameras

Cameras 101

Types of cameras in babylonjs

DocumentationPlayground

Device orientation camera

Camera that reacts to events such as a mobile device being tilted forward or back

DocumentationPlayground

GUI

GUI

Babylons graphical user interface provides sliders, buttons, etc.

DocumentationPlayground

Interactions & events

Actions

Actions are a simple way to add interactions in your scenes

DocumentationPlayground

Drag and drop

Move meshes around a scene with a mouse

DocumentationPlayground

Keyboard + game loop

Move a sphere around with the keyboard

DocumentationPlayground

Picking

Use mouse or touch to pick meshes on the screen

DocumentationPlayground

Pointer events handling

Handle pointer input

DocumentationPlayground

Lights

Directional light

The light is emitted from everywhere in the specified direction, and has an infinite range

DocumentationPlayground

Hemispheric light

Simulate an ambient environment light

DocumentationPlayground

Light projected texture

Project a texture from a spot light

DocumentationPlayground

Lights 101

Add lights to a scene

DocumentationPlayground

Point light

Light emitting from a single point

DocumentationPlayground

Simultaneous lights

Use multiple lights on a single mesh

DocumentationPlayground

Spot light

Defines a cone of light pointing in a direction

DocumentationPlayground

Loaders

Asset container

To add and remove assets from a scene an AssetContainer can be used.

DocumentationPlayground

Assets manager

Use AssetsManager to load multiple assets in a centralized way

DocumentationPlayground

Cornell box

Load a glTF file and setup the environment

DocumentationPlayground

Import meshes

Load a mesh from a file and add it to the scene

DocumentationPlayground

Load glTF model

Show how to easily load a glTF model

DocumentationPlayground

Materials

Cell Shading

Cell shading material

DocumentationPlayground

Fire

Fire material

DocumentationPlayground

Glossiness and roughness

Demonstration of glossiness and rouphness features of standard material

DocumentationPlayground

Materials

Create and add materials to a mesh

DocumentationPlayground

MultiMaterial

Apply multiple materials to a single mesh using MultiMaterial class

DocumentationPlayground

PBR

Physically based rendering materials

DocumentationPlayground

ShaderMaterial

Use ShaderMaterial to create advanced effects

DocumentationPlayground

Water

Water material

DocumentationPlayground

X-ray material with Fresnel

Use fresnel parameters to simulate an x-ray effect

DocumentationPlayground

Meshes

Basic elements

Ball, box, plane, line, etc

DocumentationPlayground

Basic scene

Ball and plane

DocumentationPlayground

Constructive solid geometries

Use boolean operations on meshes using CSG

DocumentationPlayground

Curved lines

Use Path3D to create a curved line

DocumentationPlayground

Decals

Create decals to apply additional textures to a portion of a mesh

DocumentationPlayground

Displacement map (CPU)

Update mesh geometry using a displacement map (CPU)

DocumentationPlayground

Extrude polygon

Use MeshBuilder to generate geometry from extruded data

DocumentationPlayground

Height map

Use a height map to extrude a plane to create mountains

DocumentationPlayground

Look at

Use lookAt() function to align meshes on a specific target

DocumentationPlayground

Polygon mesh

Use PolygonMeshBuilder to create meshes from polygon data

DocumentationPlayground

Raycast on height map

Raycast to find positions on a heightmap

DocumentationPlayground

Render lines

Use LinesMesh to render lines in 3D

DocumentationPlayground

Ribbons

Use ribbons to create complex meshes

DocumentationPlayground

Rotating mesh to look at a target

Make a mesh face towards where the pointer hit a plane

DocumentationPlayground

Rotation and scaling

Position mesh layout in space

DocumentationPlayground

Optimizations

Hardware instancing

Use hardware instancing to duplicate meshes at no cost

DocumentationPlayground

Level of detail

Use various meshes based on distance to optimize rendering speed

DocumentationPlayground

Octrees

Use octrees to boost mesh selections when dealing with thousands of objects

DocumentationPlayground

Particles

A lot of triangles with SPS

Use solid particle system to create a colorful cube

DocumentationPlayground

GPU particles

Use GPU only to create a massive number of particles

DocumentationPlayground

Low lying fog

Use particle to simulate volumetric fog

DocumentationPlayground

Particle editor

Online editor to play with particle parameters

DocumentationPlayground

Particles 101

Create a particle system and attach it to a moving object

DocumentationPlayground

Particles and mirrors

Use particles with a mirror

DocumentationPlayground

Particles with custom shader

Use custom shader to display CPU particles

DocumentationPlayground

Solid Particle System and shadows

Animate SPS with realtime shadows

DocumentationPlayground

Solid Particle System collisions

Use basic geometry to simulate SPS collisions

DocumentationPlayground

Solid Particle System facet collision

Use SPS facets to simulate complex mesh collisions

DocumentationPlayground

Collisions & intersections

Collisions

Handle basic collisions to avoid a camera going through a box

DocumentationPlayground

Intersections

Detect when meshes intersect each other

DocumentationPlayground

Physics

Cloth

Use physic engine to simulate cloth

DocumentationPlayground

Physics

How to use physic engines within Babylon

DocumentationPlayground

Shadows

Contact hardening

Shadows will get softer when they are further away from the object casting them

DocumentationPlayground

Different shadow filters

Demonstrate different kind of shadows

DocumentationPlayground

Multi directional lights with soft shadows

Use multiple directional lights to cast soft shadows

DocumentationPlayground

Point light shadows

Use point light to cast shadows

DocumentationPlayground

Self shadowing #1

Use shadow exponential mode to enable self shadowing on a rotating object

DocumentationPlayground

Self shadowing #2

Use shadow close exponential mode to enable self shadowing on animated object

DocumentationPlayground

Shadow on transparent textures

Create realistic shadows from a transparent texture

DocumentationPlayground

Shadows 101

Setup a scene with lights and meshes to cast different types of shadows

DocumentationPlayground

Audio

Audio analyzer #1

Analyze audio frequencies in realtime

DocumentationPlayground

Basic sounds

Playing sounds with babylon

DocumentationPlayground

PBR with music analyzer #2

Visualize audio frequencies in realtime

DocumentationPlayground

Sound on mesh

Attach a sound to a mesh which will be modified by the objects position

DocumentationPlayground

Special FX

Color curves

Apply color curves to your rendering

DocumentationPlayground

Convolution post-process

Apply emboss filter to the scene using the ConvolutionPostProcess

DocumentationPlayground

Dawn Bringer

Use custom post process effect to simulate DawnBringer effect

DocumentationPlayground

Default rendering pipeline

Bloom, FXAA, sharpen, grain, vignette, chromatic aberration and DoF with one single object

DocumentationPlayground

Depth of field

Apply depth of field effect

DocumentationPlayground

Environment

Adding a skybox and fog

DocumentationPlayground

Fog

Simulate fog in your scene

DocumentationPlayground

Fresnel

Renders spheres to simulate a fresnel lens

DocumentationPlayground

Glass wubble ball

Warped ball effect

DocumentationPlayground

Glow layer

Generates glow around emissive objects

DocumentationPlayground

Heatwave

Use custom post process effect to simulate heat wave effect

DocumentationPlayground

Highlight layer

Highlight a mesh

DocumentationPlayground

Hypnotizing infinite loader

Visually apealing loading animation

DocumentationPlayground

Lens effects

Create photographic effect with the LensRenderingPipeline

DocumentationPlayground

Lens flares

Simulate lens flares on the camera

DocumentationPlayground

Motion blur

Use the standard rendering pipeline to simulate motion blur

DocumentationPlayground

Portals

Portal effect created using custom shaders

DocumentationPlayground

RGB Shift Glitch

Use custom post process effect to simulate RGB Shift glitch

DocumentationPlayground

Realtime reflection

use reflection probes to simulate realtime reflection

DocumentationPlayground

Realtime refraction

use reflection probes to simulate realtime refraction

DocumentationPlayground

Refraction and Reflection

Simulate how light would reflect and refract with a sphere

DocumentationPlayground

SSAO rendering pipeline

Screen space ambient occlusion

DocumentationPlayground

SSAO rendering pipeline (WebGL2)

Screen space ambient occlusion with WebGL2

DocumentationPlayground

Sprites

Load and display sprites

DocumentationPlayground

Volumetric Light Scattering

Simulates light scattering due to light hitting the atmosphere

DocumentationPlayground

Warp speed !

Fly through stars using a custom shader texture

DocumentationPlayground

Textures

360 photos

Easily display and control 360 photos

DocumentationPlayground

360 videos

Easily display and control 360 videos

DocumentationPlayground

Bump texture

Use normal map to simulate bump

DocumentationPlayground

Custom render targets

Use render target textures to generate procedural data

DocumentationPlayground

Equirectangular map as reflection texture

Using Equirectangular maps as a reflection texture

DocumentationPlayground

Local cubemaps

Improve cubemaps with local mode

DocumentationPlayground

Mirrors

Shows how to use mirrors in babylon

DocumentationPlayground

ProceduralTexture

Use procedual textures for wood, grass, marble, fire, etc.

DocumentationPlayground

Saving dynamic texture on disk

Save a texture generated at runtime using DynamicTexture

DocumentationPlayground

Starfield procedural texture

Use the starfield procedual texture to simulate space

DocumentationPlayground

VR

WebVR

View a basic mesh and interact with a gui in WebVR

DocumentationPlayground

Misc.

Charting

Creates a 3D charting presentation

DocumentationPlayground

No results found.

Please, choose an example in the list