Added clip planes

dist/preview release/materialsLibrary/babylon.cellMaterial.js

@@ -26,6 +26,9 @@ var BABYLON;
             var _this = _super.call(this) || this;
             _this.DIFFUSE = false;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.ALPHATEST = false;
             _this.POINTSIZE = false;
             _this.FOG = false;
@@ -143,7 +146,7 @@ var BABYLON;
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix"
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix"
                 ];
                 var samplers = ["diffuseSampler"];
                 var uniformBuffers = new Array();

dist/preview release/materialsLibrary/babylon.fireMaterial.js

@@ -26,6 +26,9 @@ var BABYLON;
             var _this = _super.call(this) || this;
             _this.DIFFUSE = false;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.ALPHATEST = false;
             _this.DEPTHPREPASS = false;
             _this.POINTSIZE = false;
@@ -132,7 +135,7 @@ var BABYLON;
                         "vFogInfos", "vFogColor", "pointSize",
                         "vDiffuseInfos",
                         "mBones",
-                        "vClipPlane", "diffuseMatrix",
+                        "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix",
                         // Fire
                         "time", "speed"
                     ],
@@ -183,10 +186,7 @@ var BABYLON;
                     this._activeEffect.setTexture("opacitySampler", this._opacityTexture);
                 }
                 // Clip plane
-                if (scene.clipPlane) {
-                    var clipPlane = scene.clipPlane;
-                    this._activeEffect.setFloat4("vClipPlane", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
-                }
+                BABYLON.MaterialHelper.BindClipPlane(this._activeEffect, scene);
                 // Point size
                 if (this.pointsCloud) {
                     this._activeEffect.setFloat("pointSize", this.pointSize);

dist/preview release/materialsLibrary/babylon.furMaterial.js

@@ -27,6 +27,9 @@ var BABYLON;
             _this.DIFFUSE = false;
             _this.HEIGHTMAP = false;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.ALPHATEST = false;
             _this.DEPTHPREPASS = false;
             _this.POINTSIZE = false;
@@ -190,7 +193,7 @@ var BABYLON;
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix",
                     "furLength", "furAngle", "furColor", "furOffset", "furGravity", "furTime", "furSpacing", "furDensity", "furOcclusion"
                 ];
                 var samplers = ["diffuseSampler",

dist/preview release/materialsLibrary/babylon.gradientMaterial.js

@@ -26,6 +26,9 @@ var BABYLON;
             var _this = _super.call(this) || this;
             _this.DIFFUSE = false;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.ALPHATEST = false;
             _this.DEPTHPREPASS = false;
             _this.POINTSIZE = false;
@@ -171,7 +174,7 @@ var BABYLON;
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix",
                     "topColor", "bottomColor", "offset", "smoothness", "scale"
                 ];
                 var samplers = ["diffuseSampler"];

dist/preview release/materialsLibrary/babylon.lavaMaterial.js

@@ -26,6 +26,9 @@ var BABYLON;
             var _this = _super.call(this) || this;
             _this.DIFFUSE = false;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.ALPHATEST = false;
             _this.DEPTHPREPASS = false;
             _this.POINTSIZE = false;
@@ -185,7 +188,7 @@ var BABYLON;
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix",
                     "time", "speed", "movingSpeed",
                     "fogColor", "fogDensity", "lowFrequencySpeed"
                 ];

dist/preview release/materialsLibrary/babylon.normalMaterial.js

@@ -26,6 +26,9 @@ var BABYLON;
             var _this = _super.call(this) || this;
             _this.DIFFUSE = false;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.ALPHATEST = false;
             _this.DEPTHPREPASS = false;
             _this.POINTSIZE = false;
@@ -178,7 +181,7 @@ var BABYLON;
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix"
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix"
                 ];
                 var samplers = ["diffuseSampler"];
                 var uniformBuffers = new Array();

dist/preview release/materialsLibrary/babylon.shadowOnlyMaterial.js

@@ -19,6 +19,9 @@ var BABYLON;
         function ShadowOnlyMaterialDefines() {
             var _this = _super.call(this) || this;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.POINTSIZE = false;
             _this.FOG = false;
             _this.NORMAL = false;
@@ -121,7 +124,7 @@ var BABYLON;
                 var uniforms = ["world", "view", "viewProjection", "vEyePosition", "vLightsType",
                     "vFogInfos", "vFogColor", "pointSize", "alpha", "shadowColor",
                     "mBones",
-                    "vClipPlane"
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4"
                 ];
                 var samplers = new Array();
                 var uniformBuffers = new Array();

dist/preview release/materialsLibrary/babylon.simpleMaterial.js

@@ -26,6 +26,9 @@ var BABYLON;
             var _this = _super.call(this) || this;
             _this.DIFFUSE = false;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.ALPHATEST = false;
             _this.DEPTHPREPASS = false;
             _this.POINTSIZE = false;
@@ -137,7 +140,7 @@ var BABYLON;
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix"
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix"
                 ];
                 var samplers = ["diffuseSampler"];
                 var uniformBuffers = new Array();

dist/preview release/materialsLibrary/babylon.skyMaterial.js

@@ -25,6 +25,9 @@ var BABYLON;
         function SkyMaterialDefines() {
             var _this = _super.call(this) || this;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.POINTSIZE = false;
             _this.FOG = false;
             _this.VERTEXCOLOR = false;
@@ -99,7 +102,7 @@ var BABYLON;
                 var shaderName = "sky";
                 var join = defines.toString();
                 subMesh.setEffect(scene.getEngine().createEffect(shaderName, attribs, ["world", "viewProjection", "view",
-                    "vFogInfos", "vFogColor", "pointSize", "vClipPlane",
+                    "vFogInfos", "vFogColor", "pointSize", "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4",
                     "luminance", "turbidity", "rayleigh", "mieCoefficient", "mieDirectionalG", "sunPosition",
                     "cameraPosition"
                 ], [], join, fallbacks, this.onCompiled, this.onError), defines);
@@ -126,11 +129,7 @@ var BABYLON;
             this.bindOnlyWorldMatrix(world);
             this._activeEffect.setMatrix("viewProjection", scene.getTransformMatrix());
             if (this._mustRebind(scene, effect)) {
-                // Clip plane
-                if (scene.clipPlane) {
-                    var clipPlane = scene.clipPlane;
-                    this._activeEffect.setFloat4("vClipPlane", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
-                }
+                BABYLON.MaterialHelper.BindClipPlane(this._activeEffect, scene);
                 // Point size
                 if (this.pointsCloud) {
                     this._activeEffect.setFloat("pointSize", this.pointSize);

dist/preview release/materialsLibrary/babylon.triPlanarMaterial.js

@@ -31,6 +31,9 @@ var BABYLON;
             _this.BUMPY = false;
             _this.BUMPZ = false;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.ALPHATEST = false;
             _this.DEPTHPREPASS = false;
             _this.POINTSIZE = false;
@@ -156,7 +159,7 @@ var BABYLON;
                 var uniforms = ["world", "view", "viewProjection", "vEyePosition", "vLightsType", "vDiffuseColor", "vSpecularColor",
                     "vFogInfos", "vFogColor", "pointSize",
                     "mBones",
-                    "vClipPlane",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4",
                     "tileSize"
                 ];
                 var samplers = ["diffuseSamplerX", "diffuseSamplerY", "diffuseSamplerZ",

dist/preview release/materialsLibrary/babylon.waterMaterial.js

@@ -27,6 +27,9 @@ var BABYLON;
             _this.BUMP = false;
             _this.REFLECTION = false;
             _this.CLIPPLANE = false;
+            _this.CLIPPLANE2 = false;
+            _this.CLIPPLANE3 = false;
+            _this.CLIPPLANE4 = false;
             _this.ALPHATEST = false;
             _this.DEPTHPREPASS = false;
             _this.POINTSIZE = false;
@@ -295,7 +298,7 @@ var BABYLON;
                     "vFogInfos", "vFogColor", "pointSize",
                     "vNormalInfos",
                     "mBones",
-                    "vClipPlane", "normalMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "normalMatrix",
                     "logarithmicDepthConstant",
                     // Water
                     "worldReflectionViewProjection", "windDirection", "waveLength", "time", "windForce",

dist/preview release/viewer/babylon.viewer.d.ts

@@ -168,11 +168,11 @@ declare module BabylonViewer {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -189,11 +189,11 @@ declare module BabylonViewer {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -916,7 +916,7 @@ declare module BabylonViewer {
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1542,20 +1542,6 @@ declare module BabylonViewer {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 declare module BabylonViewer {
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-declare module BabylonViewer {
 }
 declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {
@@ -2168,21 +2154,6 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
-    export interface IVRConfiguration {
-        disabled?: boolean;
-        objectScaleFactor?: number;
-        disableInteractions?: boolean;
-        disableTeleportation?: boolean;
-        overrideFloorMeshName?: string;
-        vrOptions?: BABYLON.VRExperienceHelperOptions;
-        modelHeightCorrection?: number | boolean;
-        rotateUsingControllers?: boolean;
-        cameraPosition?: {
-            x: number;
-            y: number;
-            z: number;
-        };
-    }
 }
 declare module BabylonViewer {
     /**

dist/preview release/viewer/babylon.viewer.module.d.ts

@@ -200,11 +200,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -221,11 +221,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -977,14 +977,13 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
-    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
     import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
     /**
       *
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1647,22 +1646,6 @@ declare module 'babylonjs-viewer/loader/plugins' {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 
-declare module 'babylonjs-viewer/optimizer/custom/extended' {
-    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';
@@ -2331,22 +2314,7 @@ declare module 'babylonjs-viewer/configuration/interfaces/templateConfiguration'
 }
 
 declare module 'babylonjs-viewer/configuration/interfaces/vrConfiguration' {
-    import { VRExperienceHelperOptions } from "babylonjs";
-    export interface IVRConfiguration {
-        disabled?: boolean;
-        objectScaleFactor?: number;
-        disableInteractions?: boolean;
-        disableTeleportation?: boolean;
-        overrideFloorMeshName?: string;
-        vrOptions?: VRExperienceHelperOptions;
-        modelHeightCorrection?: number | boolean;
-        rotateUsingControllers?: boolean;
-        cameraPosition?: {
-            x: number;
-            y: number;
-            z: number;
-        };
-    }
+    
 }
 
 declare module 'babylonjs-viewer/labs/environmentSerializer' {

materialsLibrary/src/cell/babylon.cellMaterial.ts

@@ -4,6 +4,9 @@ module BABYLON {
     class CellMaterialDefines extends MaterialDefines {
         public DIFFUSE = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public POINTSIZE = false;
         public FOG = false;
@@ -166,7 +169,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix"
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4","diffuseMatrix"
                 ];
                 var samplers = ["diffuseSampler"];
                 var uniformBuffers = new Array<string>()

materialsLibrary/src/fire/babylon.fireMaterial.ts

@@ -5,6 +5,9 @@ module BABYLON {
     class FireMaterialDefines extends MaterialDefines {
         public DIFFUSE = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -155,7 +158,7 @@ module BABYLON {
                             "vFogInfos", "vFogColor", "pointSize",
                             "vDiffuseInfos",
                             "mBones",
-                            "vClipPlane", "diffuseMatrix",
+                            "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix",
                             // Fire
                             "time", "speed"
                         ],
@@ -218,10 +221,7 @@ module BABYLON {
                 }
 
                 // Clip plane
-                if (scene.clipPlane) {
-                    var clipPlane = scene.clipPlane;
-                    this._activeEffect.setFloat4("vClipPlane", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
-                }
+               MaterialHelper.BindClipPlane(this._activeEffect, scene);
 
                 // Point size
                 if (this.pointsCloud) {

materialsLibrary/src/fur/babylon.furMaterial.ts

@@ -5,6 +5,9 @@ module BABYLON {
         public DIFFUSE = false;
         public HEIGHTMAP = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -242,7 +245,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix",
                     "furLength", "furAngle", "furColor", "furOffset", "furGravity", "furTime", "furSpacing", "furDensity", "furOcclusion"
                 ];
                 var samplers = ["diffuseSampler",

materialsLibrary/src/gradient/babylon.gradientMaterial.ts

@@ -4,6 +4,9 @@ module BABYLON {
     class GradientMaterialDefines extends MaterialDefines {
         public DIFFUSE = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -197,7 +200,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix",
                     "topColor", "bottomColor", "offset", "smoothness", "scale"
                 ];
                 var samplers = ["diffuseSampler"];

materialsLibrary/src/lava/babylon.lavaMaterial.ts

@@ -4,6 +4,9 @@ module BABYLON {
     class LavaMaterialDefines extends MaterialDefines {
         public DIFFUSE = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -219,7 +222,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix",
                     "time", "speed", "movingSpeed",
                     "fogColor", "fogDensity", "lowFrequencySpeed"
                 ];

materialsLibrary/src/mix/babylon.mixMaterial.ts

@@ -4,6 +4,9 @@ module BABYLON {
     class MixMaterialDefines extends MaterialDefines {
         public DIFFUSE = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -228,7 +231,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vTextureInfos",
                     "mBones",
-                    "vClipPlane", "textureMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "textureMatrix",
                     "diffuse1Infos", "diffuse2Infos", "diffuse3Infos", "diffuse4Infos",
                     "diffuse5Infos", "diffuse6Infos", "diffuse7Infos", "diffuse8Infos"
                 ];

materialsLibrary/src/mix/mix.fragment.fx

@@ -69,10 +69,7 @@ uniform vec2 diffuse8Infos;
 
 void main(void) {
 	// Clip plane
-#ifdef CLIPPLANE
-	if (fClipDistance > 0.0)
-		discard;
-#endif
+	#include<clipPlaneFragment>
 
 	vec3 viewDirectionW = normalize(vEyePosition - vPositionW);
 

materialsLibrary/src/mix/mix.vertex.fx

@@ -80,9 +80,7 @@ void main(void) {
 #endif
 
 	// Clip plane
-#ifdef CLIPPLANE
-	fClipDistance = dot(worldPos, vClipPlane);
-#endif
+	#include<clipPlaneVertex>
 
 	// Fog
 	#include<fogVertex>

materialsLibrary/src/normal/babylon.normalMaterial.ts

@@ -4,6 +4,9 @@ module BABYLON {
     class NormalMaterialDefines extends MaterialDefines {
         public DIFFUSE = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -198,7 +201,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix"
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix"
                 ];
                 var samplers = ["diffuseSampler"];
                 var uniformBuffers = new Array<string>()

materialsLibrary/src/shadowOnly/babylon.shadowOnlyMaterial.ts

@@ -3,6 +3,9 @@
 module BABYLON {
     class ShadowOnlyMaterialDefines extends MaterialDefines {
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public POINTSIZE = false;
         public FOG = false;
         public NORMAL = false;
@@ -130,7 +133,7 @@ module BABYLON {
                 var uniforms = ["world", "view", "viewProjection", "vEyePosition", "vLightsType",
                     "vFogInfos", "vFogColor", "pointSize", "alpha", "shadowColor",
                     "mBones",
-                    "vClipPlane"
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4"
                 ];
                 var samplers = new Array<string>();
 

materialsLibrary/src/simple/babylon.simpleMaterial.ts

@@ -4,6 +4,9 @@ module BABYLON {
     class SimpleMaterialDefines extends MaterialDefines {
         public DIFFUSE = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -155,7 +158,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix"
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix"
                 ];
                 var samplers = ["diffuseSampler"];
                 var uniformBuffers = new Array<string>()

materialsLibrary/src/sky/babylon.skyMaterial.ts

@@ -3,6 +3,9 @@
 module BABYLON {
     class SkyMaterialDefines extends MaterialDefines {
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public POINTSIZE = false;
         public FOG = false;
         public VERTEXCOLOR = false;
@@ -118,7 +121,7 @@ module BABYLON {
                 subMesh.setEffect(scene.getEngine().createEffect(shaderName,
                     attribs,
                     ["world", "viewProjection", "view",
-                        "vFogInfos", "vFogColor", "pointSize", "vClipPlane",
+                        "vFogInfos", "vFogColor", "pointSize", "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4",
                         "luminance", "turbidity", "rayleigh", "mieCoefficient", "mieDirectionalG", "sunPosition",
                         "cameraPosition"
                     ],
@@ -155,11 +158,8 @@ module BABYLON {
             this._activeEffect.setMatrix("viewProjection", scene.getTransformMatrix());
 
             if (this._mustRebind(scene, effect)) {
-                // Clip plane
-                if (scene.clipPlane) {
-                    var clipPlane = scene.clipPlane;
-                    this._activeEffect.setFloat4("vClipPlane", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
-                }
+
+                BABYLON.MaterialHelper.BindClipPlane(this._activeEffect, scene);
 
                 // Point size
                 if (this.pointsCloud) {

materialsLibrary/src/terrain/babylon.terrainMaterial.ts

@@ -6,6 +6,9 @@ module BABYLON {
         public DIFFUSE = false;
         public BUMP = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -197,7 +200,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vTextureInfos",
                     "mBones",
-                    "vClipPlane", "textureMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "textureMatrix",
                     "diffuse1Infos", "diffuse2Infos", "diffuse3Infos"
                 ];
                 var samplers = ["textureSampler", "diffuse1Sampler", "diffuse2Sampler", "diffuse3Sampler",

materialsLibrary/src/terrain/terrain.fragment.fx

@@ -97,10 +97,7 @@ vec3 perturbNormal(vec3 viewDir, vec3 mixColor)
 
 void main(void) {
 	// Clip plane
-#ifdef CLIPPLANE
-	if (fClipDistance > 0.0)
-		discard;
-#endif
+	#include<clipPlaneFragment>
 
 	vec3 viewDirectionW = normalize(vEyePosition - vPositionW);
 

materialsLibrary/src/terrain/terrain.vertex.fx

@@ -80,9 +80,7 @@ void main(void) {
 #endif
 
 	// Clip plane
-#ifdef CLIPPLANE
-	fClipDistance = dot(worldPos, vClipPlane);
-#endif
+	#include<clipPlaneVertex>
 
 	// Fog
 	#include<fogVertex>

materialsLibrary/src/triPlanar/babylon.triPlanarMaterial.ts

@@ -11,6 +11,9 @@ module BABYLON {
         public BUMPZ = false;
 
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -209,7 +212,7 @@ module BABYLON {
                 var uniforms = ["world", "view", "viewProjection", "vEyePosition", "vLightsType", "vDiffuseColor", "vSpecularColor",
                     "vFogInfos", "vFogColor", "pointSize",
                     "mBones",
-                    "vClipPlane",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4",
                     "tileSize"
                 ];
                 var samplers = ["diffuseSamplerX", "diffuseSamplerY", "diffuseSamplerZ",

materialsLibrary/src/water/babylon.waterMaterial.ts

@@ -5,6 +5,9 @@ module BABYLON {
         public BUMP = false;
         public REFLECTION = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public POINTSIZE = false;
@@ -360,7 +363,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vNormalInfos",
                     "mBones",
-                    "vClipPlane", "normalMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "normalMatrix",
                     "logarithmicDepthConstant",
 
                     // Water

src/Materials/Background/babylon.backgroundMaterial.ts

@@ -116,6 +116,9 @@
         public UV1 = false;
         public UV2 = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public POINTSIZE = false;
         public FOG = false;
         public NORMAL = false;
@@ -813,7 +816,7 @@
 
                 var uniforms = ["world", "view", "viewProjection", "vEyePosition", "vLightsType",
                     "vFogInfos", "vFogColor", "pointSize",
-                    "vClipPlane", "mBones",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "mBones",
 
                     "vPrimaryColor", "vPrimaryColorShadow",
                     "vReflectionInfos", "reflectionMatrix", "vReflectionMicrosurfaceInfos", "fFovMultiplier",

src/Materials/PBR/babylon.pbrBaseMaterial.ts

@@ -130,6 +130,9 @@
         public TWOSIDEDLIGHTING = false;
         public SHADOWFLOAT = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public POINTSIZE = false;
         public FOG = false;
         public LOGARITHMICDEPTH = false;
@@ -985,7 +988,7 @@
                 "vAlbedoInfos", "vAmbientInfos", "vOpacityInfos", "vReflectionInfos", "vReflectionPosition", "vReflectionSize", "vEmissiveInfos", "vReflectivityInfos", 
                 "vMicroSurfaceSamplerInfos", "vBumpInfos", "vLightmapInfos", "vRefractionInfos",
                 "mBones",
-                "vClipPlane", "albedoMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "reflectivityMatrix", "normalMatrix", "microSurfaceSamplerMatrix", "bumpMatrix", "lightmapMatrix", "refractionMatrix",
+                "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "albedoMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "reflectivityMatrix", "normalMatrix", "microSurfaceSamplerMatrix", "bumpMatrix", "lightmapMatrix", "refractionMatrix",
                 "vLightingIntensity",
                 "logarithmicDepthConstant",
                 "vSphericalX", "vSphericalY", "vSphericalZ",

src/Materials/babylon.materialHelper.ts

@@ -88,15 +88,35 @@ module BABYLON {
          */
         public static PrepareDefinesForFrameBoundValues(scene: Scene, engine: Engine, defines: any, useInstances: boolean, useClipPlane: Nullable<boolean> = null): void {
             var changed = false;
-
-            if (useClipPlane == null) {
-                useClipPlane = (scene.clipPlane !== undefined && scene.clipPlane !== null);
+            let useClipPlane1 = false;
+            let useClipPlane2 = false;
+            let useClipPlane3 = false;
+            let useClipPlane4 = false;
+
+            useClipPlane1 = useClipPlane == null ? (scene.clipPlane !== undefined && scene.clipPlane !== null) : useClipPlane;
+            useClipPlane2 = useClipPlane == null ? (scene.clipPlane2 !== undefined && scene.clipPlane2 !== null) : useClipPlane;
+            useClipPlane3 = useClipPlane == null ? (scene.clipPlane3 !== undefined && scene.clipPlane3 !== null) : useClipPlane;
+            useClipPlane4 = useClipPlane == null ? (scene.clipPlane4 !== undefined && scene.clipPlane4 !== null) : useClipPlane;
+
+            if (defines["CLIPPLANE"] !== useClipPlane1) {
+                defines["CLIPPLANE"] = useClipPlane1;
+                changed = true;
             }
 
-            if (defines["CLIPPLANE"] !== useClipPlane) {
-                defines["CLIPPLANE"] = useClipPlane;
+            if (defines["CLIPPLANE2"] !== useClipPlane2) {
+                defines["CLIPPLANE2"] = useClipPlane2;
+                changed = true;
+            }
+            
+            if (defines["CLIPPLANE3"] !== useClipPlane3) {
+                defines["CLIPPLANE3"] = useClipPlane3;
                 changed = true;
             }
+            
+            if (defines["CLIPPLANE4"] !== useClipPlane4) {
+                defines["CLIPPLANE4"] = useClipPlane4;
+                changed = true;
+            }            
 
             if (defines["DEPTHPREPASS"] !== !engine.getColorWrite()) {
                 defines["DEPTHPREPASS"] = !defines["DEPTHPREPASS"];
@@ -617,9 +637,21 @@ module BABYLON {
          */
         public static BindClipPlane(effect: Effect, scene: Scene): void {
             if (scene.clipPlane) {
-                var clipPlane = scene.clipPlane;
+                let clipPlane = scene.clipPlane;
                 effect.setFloat4("vClipPlane", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
             }
+            if (scene.clipPlane2) {
+                let clipPlane = scene.clipPlane2;
+                effect.setFloat4("vClipPlane2", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
+            }
+            if (scene.clipPlane3) {
+                let clipPlane = scene.clipPlane3;
+                effect.setFloat4("vClipPlane3", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
+            }
+            if (scene.clipPlane4) {
+                let clipPlane = scene.clipPlane4;
+                effect.setFloat4("vClipPlane4", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
+            }
         }
     }
 }

src/Materials/babylon.standardMaterial.ts

@@ -21,6 +21,9 @@ module BABYLON {
         public PARALLAXOCCLUSION = false;
         public SPECULAROVERALPHA = false;
         public CLIPPLANE = false;
+        public CLIPPLANE2 = false;
+        public CLIPPLANE3 = false;
+        public CLIPPLANE4 = false;        
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
         public ALPHAFROMDIFFUSE = false;
@@ -883,7 +886,7 @@ module BABYLON {
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos", "vAmbientInfos", "vOpacityInfos", "vReflectionInfos", "vEmissiveInfos", "vSpecularInfos", "vBumpInfos", "vLightmapInfos", "vRefractionInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "normalMatrix", "lightmapMatrix", "refractionMatrix",
+                    "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "normalMatrix", "lightmapMatrix", "refractionMatrix",
                     "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor", "refractionLeftColor", "refractionRightColor",
                     "vReflectionPosition", "vReflectionSize",
                     "logarithmicDepthConstant", "vTangentSpaceParams", "alphaCutOff"

src/Particles/babylon.gpuParticleSystem.ts

@@ -735,6 +735,15 @@
             if (this._scene.clipPlane) {
                 defines = "\n#define CLIPPLANE";
             }
+            if (this._scene.clipPlane2) {
+                defines = "\n#define CLIPPLANE2";
+            }
+            if (this._scene.clipPlane3) {
+                defines = "\n#define CLIPPLANE3";
+            }
+            if (this._scene.clipPlane4) {
+                defines = "\n#define CLIPPLANE4";
+            }
 
             if (this._isBillboardBased) {
                 defines += "\n#define BILLBOARD";
@@ -766,7 +775,7 @@
                 return;
             }
 
-            var uniforms = ["view", "projection", "colorDead", "invView", "vClipPlane", "sheetInfos", "translationPivot", "eyePosition"];
+            var uniforms = ["view", "projection", "colorDead", "invView", "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "sheetInfos", "translationPivot", "eyePosition"];
             var samplers = ["textureSampler", "colorGradientSampler"];
 
             if (ImageProcessingConfiguration) {
@@ -995,12 +1004,11 @@
                     this._renderEffect.setVector3("eyePosition", camera.globalPosition);
                 }
 
-                if (this._scene.clipPlane) {
-                    var clipPlane = this._scene.clipPlane;
+                if (this._scene.clipPlane || this._scene.clipPlane2 || this._scene.clipPlane3 || this._scene.clipPlane4) {
                     var invView = viewMatrix.clone();
                     invView.invert();
                     this._renderEffect.setMatrix("invView", invView);
-                    this._renderEffect.setFloat4("vClipPlane", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
+                    MaterialHelper.BindClipPlane(this._renderEffect, this._scene);
                 }
 
                 // image processing

src/Particles/babylon.particleSystem.ts

@@ -968,7 +968,7 @@
         }
 
         public static _GetEffectCreationOptions(isAnimationSheetEnabled = false): string[] {
-            var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask", "translationPivot", "eyePosition"];
+            var effectCreationOption = ["invView", "view", "projection", "vClipPlane", "vClipPlane2", "vClipPlane3", "vClipPlane4", "textureMask", "translationPivot", "eyePosition"];
 
             if (isAnimationSheetEnabled) {
                 effectCreationOption.push("particlesInfos")
@@ -988,6 +988,18 @@
                 defines.push("#define CLIPPLANE");
             }
 
+            if (this._scene.clipPlane2) {
+                defines.push("#define CLIPPLANE2");
+            }
+            
+            if (this._scene.clipPlane3) {
+                defines.push("#define CLIPPLANE3");
+            }
+            
+            if (this._scene.clipPlane4) {
+                defines.push("#define CLIPPLANE4");
+            }            
+
             if (this._isAnimationSheetEnabled) {
                 defines.push("#define ANIMATESHEET");
             }
@@ -1188,12 +1200,11 @@
                 effect.setVector3("eyePosition", camera.globalPosition);
             }
 
-            if (this._scene.clipPlane) {
-                var clipPlane = this._scene.clipPlane;
+            if (this._scene.clipPlane || this._scene.clipPlane2 || this._scene.clipPlane3 || this._scene.clipPlane4) {
                 var invView = viewMatrix.clone();
                 invView.invert();
                 effect.setMatrix("invView", invView);
-                effect.setFloat4("vClipPlane", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
+                MaterialHelper.BindClipPlane(effect, this._scene);
             }
 
             engine.bindBuffers(this._vertexBuffers, this._indexBuffer, effect);

src/Shaders/ShadersInclude/clipPlaneFragment.fx

@@ -3,4 +3,25 @@
 	{
 		discard;
 	}
+#endif
+
+#ifdef CLIPPLANE2
+	if (fClipDistance2 > 0.0)
+	{
+		discard;
+	}
+#endif
+
+#ifdef CLIPPLANE3
+	if (fClipDistance3 > 0.0)
+	{
+		discard;
+	}
+#endif
+
+#ifdef CLIPPLANE4
+	if (fClipDistance4 > 0.0)
+	{
+		discard;
+	}
 #endif

src/Shaders/ShadersInclude/clipPlaneFragmentDeclaration.fx

@@ -1,3 +1,15 @@
 #ifdef CLIPPLANE
 	varying float fClipDistance;
+#endif
+
+#ifdef CLIPPLANE2
+	varying float fClipDistance2;
+#endif
+
+#ifdef CLIPPLANE3
+	varying float fClipDistance3;
+#endif
+
+#ifdef CLIPPLANE4
+	varying float fClipDistance4;
 #endif

src/Shaders/ShadersInclude/clipPlaneFragmentDeclaration2.fx

@@ -0,0 +1,15 @@
+#ifdef CLIPPLANE
+	in float fClipDistance;
+#endif
+
+#ifdef CLIPPLANE2
+	in float fClipDistance2;
+#endif
+
+#ifdef CLIPPLANE3
+	in float fClipDistance3;
+#endif
+
+#ifdef CLIPPLANE4
+	in float fClipDistance4;
+#endif

src/Shaders/ShadersInclude/clipPlaneVertex.fx

@@ -1,3 +1,15 @@
 #ifdef CLIPPLANE
 	fClipDistance = dot(worldPos, vClipPlane);
+#endif
+
+#ifdef CLIPPLANE2
+	fClipDistance2 = dot(worldPos, vClipPlane2);
+#endif
+
+#ifdef CLIPPLANE3
+	fClipDistance3 = dot(worldPos, vClipPlane3);
+#endif
+
+#ifdef CLIPPLANE4
+	fClipDistance4 = dot(worldPos, vClipPlane4);
 #endif

src/Shaders/ShadersInclude/clipPlaneVertexDeclaration.fx

@@ -1,4 +1,19 @@
 #ifdef CLIPPLANE
 	uniform vec4 vClipPlane;
 	varying float fClipDistance;
+#endif
+
+#ifdef CLIPPLANE2
+	uniform vec4 vClipPlane2;
+	varying float fClipDistance2;
+#endif
+
+#ifdef CLIPPLANE3
+	uniform vec4 vClipPlane3;
+	varying float fClipDistance3;
+#endif
+
+#ifdef CLIPPLANE4
+	uniform vec4 vClipPlane4;
+	varying float fClipDistance4;
 #endif

src/Shaders/ShadersInclude/clipPlaneVertexDeclaration2.fx

@@ -0,0 +1,19 @@
+#ifdef CLIPPLANE
+	uniform vec4 vClipPlane;
+	out float fClipDistance;
+#endif
+
+#ifdef CLIPPLANE2
+	uniform vec4 vClipPlane2;
+	out float fClipDistance2;
+#endif
+
+#ifdef CLIPPLANE3
+	uniform vec4 vClipPlane3;
+	out float fClipDistance3;
+#endif
+
+#ifdef CLIPPLANE4
+	uniform vec4 vClipPlane4;
+	out float fClipDistance4;
+#endif

src/Shaders/gpuRenderParticles.fragment.fx

@@ -7,9 +7,7 @@ in vec4 vColor;
 
 out vec4 outFragColor;
 
-#ifdef CLIPPLANE
-in float fClipDistance;
-#endif
+#include<clipPlaneFragmentDeclaration2> 
 
 #include<imageProcessingDeclaration>
 
@@ -18,11 +16,8 @@ in float fClipDistance;
 #include<imageProcessingFunctions>
 
 void main() {
-#ifdef CLIPPLANE
-	if (fClipDistance > 0.0)
-		discard;
-#endif  
-  outFragColor = texture(textureSampler, vUV) * vColor;
+	#include<clipPlaneFragment> 
+  	outFragColor = texture(textureSampler, vUV) * vColor;
 
 // Apply image processing if relevant. As this applies in linear space, 
 // We first move from gamma to linear.

src/Shaders/gpuRenderParticles.vertex.fx

@@ -23,12 +23,12 @@ in vec2 uv;
 out vec2 vUV;
 out vec4 vColor;
 
-#ifdef CLIPPLANE
-uniform vec4 vClipPlane;
+#if defined(CLIPPLANE) || defined(CLIPPLANE2) || defined(CLIPPLANE3) || defined(CLIPPLANE4)
 uniform mat4 invView;
-out float fClipDistance;
 #endif
 
+#include<clipPlaneVertexDeclaration2>
+
 #ifdef COLORGRADIENTS
 uniform sampler2D colorGradientSampler;
 #else
@@ -120,8 +120,8 @@ void main() {
 	gl_Position = projection * viewPosition;
 
 	// Clip plane
-#ifdef CLIPPLANE
+#if defined(CLIPPLANE) || defined(CLIPPLANE2) || defined(CLIPPLANE3) || defined(CLIPPLANE4)
 	vec4 worldPos = invView * viewPosition;
-	fClipDistance = dot(worldPos, vClipPlane);
 #endif  
+	#include<clipPlaneVertex>
 }

src/Shaders/particles.fragment.fx

@@ -4,9 +4,7 @@ varying vec4 vColor;
 uniform vec4 textureMask;
 uniform sampler2D diffuseSampler;
 
-#ifdef CLIPPLANE
-varying float fClipDistance;
-#endif
+#include<clipPlaneFragmentDeclaration>
 
 #include<imageProcessingDeclaration>
 
@@ -15,10 +13,8 @@ varying float fClipDistance;
 #include<imageProcessingFunctions>
 
 void main(void) {
-#ifdef CLIPPLANE
-	if (fClipDistance > 0.0)
-		discard;
-#endif
+	#include<clipPlaneFragment>
+
 	vec4 baseColor = texture2D(diffuseSampler, vUV);
 	baseColor = (baseColor * textureMask + (vec4(1., 1., 1., 1.) - textureMask)) * vColor;
 

src/Shaders/particles.vertex.fx

@@ -24,11 +24,10 @@ uniform vec3 particlesInfos; // x (number of rows) y(number of columns) z(rowSiz
 varying vec2 vUV;
 varying vec4 vColor;
 
-#ifdef CLIPPLANE
-uniform vec4 vClipPlane;
+#if defined(CLIPPLANE) || defined(CLIPPLANE2) || defined(CLIPPLANE3) || defined(CLIPPLANE4)
 uniform mat4 invView;
-varying float fClipDistance;
 #endif
+#include<clipPlaneVertexDeclaration>
 
 #ifdef BILLBOARD
 	uniform vec3 eyePosition;	
@@ -104,8 +103,9 @@ void main(void) {
 	#endif
 
 	// Clip plane
-#ifdef CLIPPLANE
+#if defined(CLIPPLANE) || defined(CLIPPLANE2) || defined(CLIPPLANE3) || defined(CLIPPLANE4)
 	vec4 worldPos = invView * vec4(viewPos, 1.0);
-	fClipDistance = dot(worldPos, vClipPlane);
 #endif
+	#include<clipPlaneVertex>
+
 }

src/babylon.scene.ts

@@ -198,10 +198,28 @@
         }
 
         /**
-         * Gets or sets the active clipplane
+         * Gets or sets the active clipplane 1
          */
         public clipPlane: Nullable<Plane>;
 
+
+        /**
+         * Gets or sets the active clipplane 2
+         */
+        public clipPlane2: Nullable<Plane>;
+        
+
+        /**
+         * Gets or sets the active clipplane 3
+         */
+        public clipPlane3: Nullable<Plane>;
+        
+
+        /**
+         * Gets or sets the active clipplane 4
+         */
+        public clipPlane4: Nullable<Plane>;        
+
         /**
          * Gets or sets a boolean indicating if animations are enabled
          */
@@ -5993,7 +6011,7 @@
             return this._renderingManager.getAutoClearDepthStencilSetup(index);
         }
 
-        /** Gets or sets a boolean blocking all the call to markAllMaterialsAsDirty (ie. the materials won't be updated if they are out of sync) */
+        /** Gets or sets a boolean blocking all the calls to markAllMaterialsAsDirty (ie. the materials won't be updated if they are out of sync) */
         public blockMaterialDirtyMechanism = false;
 
         /**