Using Clipping Planes

How to use clip planes

You can clip the rendering of a scene by using one of the supported clip planes:

  • scene.clipPlane
  • scene.clipPlane2
  • scene.clipPlane3
  • scene.clipPlane4
  • scene.clipPlane5
  • scene.clipPlane6

Each clip plane is a BABYLON.Plane that you can define like this:

scene.clipPlane4 = new BABYLON.Plane(0, 1, 0, 0);

The 3 first parameters of the Plane constructor defines the normal of the plane and the last one defines the distance from (0,0,0).

You can find an interactive demo about clip planes here: Clipping Planes Example 1

A maximum of 6 different clip planes can be used simultaneously for a specific rendering.

If you want to apply per mesh clip planes, you can rely on the following observables:

  • mesh.onBeforeRenderObservable
  • mesh.onAfterRenderObservable


sphere.onBeforeRenderObservable.add(function() {
scene.clipPlane = new BABYLON.Plane(1, 0, 0, 0);
sphere.onAfterRenderObservable.add(function() {
scene.clipPlane = null;

Demo: Clipping Planes Example 2

Since version 5.33.0, the best way to use clip planes in this case is through the properties material.clipPlane / clipPlane2 / ... / clipPlane6. This way, you don't need to add observers to onBeforeRenderObservable / onAfterRenderObservable.

Demo: Clipping Planes Example 3