CSM step 1

src/Engines/Extensions/engine.multiRender.ts

@@ -243,7 +243,6 @@ ThinEngine.prototype.createMultipleRenderTarget = function(size: any, options: I
     }
 
     gl.drawBuffers(attachments);
-    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
     this._bindUnboundFramebuffer(null);
 
     this.resetTextureCache();

src/Engines/Extensions/engine.renderTarget.ts

@@ -13,7 +13,7 @@ declare module "../../Engines/thinEngine" {
          * @param options defines the options used to create the texture
          * @returns a new render target texture stored in an InternalTexture
          */
-        createRenderTargetTexture(size: number | { width: number, height: number }, options: boolean | RenderTargetCreationOptions): InternalTexture;
+        createRenderTargetTexture(size: number | { width: number, height: number, layers?: number }, options: boolean | RenderTargetCreationOptions): InternalTexture;
 
         /**
          * Creates a depth stencil texture.
@@ -22,16 +22,15 @@ declare module "../../Engines/thinEngine" {
          * @param options The options defining the texture.
          * @returns The texture
          */
-        createDepthStencilTexture(size: number | { width: number, height: number }, options: DepthTextureCreationOptions): InternalTexture;
+        createDepthStencilTexture(size: number | { width: number, height: number, layers?: number }, options: DepthTextureCreationOptions): InternalTexture;
 
         /** @hidden */
-        _createDepthStencilTexture(size: number | { width: number, height: number }, options: DepthTextureCreationOptions): InternalTexture;
+        _createDepthStencilTexture(size: number | { width: number, height: number, layers?: number }, options: DepthTextureCreationOptions): InternalTexture;
     }
 }
 
-ThinEngine.prototype.createRenderTargetTexture = function(this: ThinEngine, size: number | { width: number, height: number }, options: boolean | RenderTargetCreationOptions): InternalTexture {
-    let fullOptions = new RenderTargetCreationOptions();
-
+ThinEngine.prototype.createRenderTargetTexture = function(this: ThinEngine, size: number | { width: number, height: number, layers?: number }, options: boolean | RenderTargetCreationOptions): InternalTexture {
+    const fullOptions = new RenderTargetCreationOptions();
     if (options !== undefined && typeof options === "object") {
         fullOptions.generateMipMaps = options.generateMipMaps;
         fullOptions.generateDepthBuffer = !!options.generateDepthBuffer;
@@ -56,50 +55,63 @@ ThinEngine.prototype.createRenderTargetTexture = function(this: ThinEngine, size
         // if floating point linear (HALF_FLOAT) then force to NEAREST_SAMPLINGMODE
         fullOptions.samplingMode = Constants.TEXTURE_NEAREST_SAMPLINGMODE;
     }
-    var gl = this._gl;
-
-    var texture = new InternalTexture(this, InternalTextureSource.RenderTarget);
-    this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
-
-    var width = (<{ width: number, height: number }>size).width || <number>size;
-    var height = (<{ width: number, height: number }>size).height || <number>size;
-
-    var filters = this._getSamplingParameters(fullOptions.samplingMode, fullOptions.generateMipMaps ? true : false);
-
     if (fullOptions.type === Constants.TEXTURETYPE_FLOAT && !this._caps.textureFloat) {
         fullOptions.type = Constants.TEXTURETYPE_UNSIGNED_INT;
         Logger.Warn("Float textures are not supported. Render target forced to TEXTURETYPE_UNSIGNED_BYTE type");
     }
 
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filters.mag);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filters.min);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const gl = this._gl;
+    const texture = new InternalTexture(this, InternalTextureSource.RenderTarget);
+    const width = (<{ width: number, height: number, layers?: number }>size).width || <number>size;
+    const height = (<{ width: number, height: number, layers?: number }>size).height || <number>size;
+    const layers = (<{ width: number, height: number, layers?: number }>size).layers || 0;
+    const filters = this._getSamplingParameters(fullOptions.samplingMode, fullOptions.generateMipMaps ? true : false);
+    const target = layers !== 0 ? gl.TEXTURE_2D_ARRAY : gl.TEXTURE_2D;
+    const sizedFormat = this._getRGBABufferInternalSizedFormat(fullOptions.type, fullOptions.format);
+    const internalFormat = this._getInternalFormat(fullOptions.format);
+    const type = this._getWebGLTextureType(fullOptions.type);
+
+    // Bind
+    this._bindTextureDirectly(target, texture);
+
+    if (layers !== 0) {
+        texture.is2DArray = true;
+        gl.texImage3D(target, 0, sizedFormat, width, height, layers, 0, internalFormat, type, null);
+    }
+    else {
+        gl.texImage2D(target, 0, sizedFormat, width, height, 0, internalFormat, type, null);
+    }
+
+    gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, filters.mag);
+    gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, filters.min);
+    gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
-    gl.texImage2D(gl.TEXTURE_2D, 0, this._getRGBABufferInternalSizedFormat(fullOptions.type, fullOptions.format), width, height, 0, this._getInternalFormat(fullOptions.format), this._getWebGLTextureType(fullOptions.type), null);
+    // MipMaps
+    if (fullOptions.generateMipMaps) {
+        this._gl.generateMipmap(target);
+    }
+
+    this._bindTextureDirectly(target, null);
 
     // Create the framebuffer
-    var currentFrameBuffer = this._currentFramebuffer;
-    var framebuffer = gl.createFramebuffer();
+    const framebuffer = gl.createFramebuffer();
     this._bindUnboundFramebuffer(framebuffer);
-    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture._webGLTexture, 0);
-
     texture._depthStencilBuffer = this._setupFramebufferDepthAttachments(fullOptions.generateStencilBuffer ? true : false, fullOptions.generateDepthBuffer, width, height);
 
-    if (fullOptions.generateMipMaps) {
-        this._gl.generateMipmap(this._gl.TEXTURE_2D);
+    // No need to rebind on every frame
+    if (!texture.is2DArray) {
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture._webGLTexture, 0);
     }
 
-    // Unbind
-    this._bindTextureDirectly(gl.TEXTURE_2D, null);
-    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-    this._bindUnboundFramebuffer(currentFrameBuffer);
+    this._bindUnboundFramebuffer(null);
 
     texture._framebuffer = framebuffer;
     texture.baseWidth = width;
     texture.baseHeight = height;
     texture.width = width;
     texture.height = height;
+    texture.depth = layers;
     texture.isReady = true;
     texture.samples = 1;
     texture.generateMipMaps = fullOptions.generateMipMaps ? true : false;
@@ -109,14 +121,12 @@ ThinEngine.prototype.createRenderTargetTexture = function(this: ThinEngine, size
     texture._generateDepthBuffer = fullOptions.generateDepthBuffer;
     texture._generateStencilBuffer = fullOptions.generateStencilBuffer ? true : false;
 
-    // this.resetTextureCache();
-
     this._internalTexturesCache.push(texture);
 
     return texture;
 };
 
-ThinEngine.prototype.createDepthStencilTexture = function(size: number | { width: number, height: number }, options: DepthTextureCreationOptions): InternalTexture {
+ThinEngine.prototype.createDepthStencilTexture = function(size: number | { width: number, height: number, layers?: number }, options: DepthTextureCreationOptions): InternalTexture {
     if (options.isCube) {
         let width = (<{ width: number, height: number }>size).width || <number>size;
         return this._createDepthStencilCubeTexture(width, options);
@@ -126,44 +136,42 @@ ThinEngine.prototype.createDepthStencilTexture = function(size: number | { width
     }
 };
 
-ThinEngine.prototype._createDepthStencilTexture = function(size: number | { width: number, height: number }, options: DepthTextureCreationOptions): InternalTexture {
-    var internalTexture = new InternalTexture(this, InternalTextureSource.Depth);
-
+ThinEngine.prototype._createDepthStencilTexture = function(size: number | { width: number, height: number, layers?: number }, options: DepthTextureCreationOptions): InternalTexture {
+    const gl = this._gl;
+    const layers = (<{ width: number, height: number, layers?: number }>size).layers || 0;
+    const target = layers !== 0 ? gl.TEXTURE_2D_ARRAY : gl.TEXTURE_2D;
+    const internalTexture = new InternalTexture(this, InternalTextureSource.Depth);
     if (!this._caps.depthTextureExtension) {
         Logger.Error("Depth texture is not supported by your browser or hardware.");
         return internalTexture;
     }
 
-    var internalOptions = {
+    const internalOptions = {
         bilinearFiltering: false,
         comparisonFunction: 0,
         generateStencil: false,
         ...options
     };
 
-    var gl = this._gl;
-    this._bindTextureDirectly(gl.TEXTURE_2D, internalTexture, true);
+    this._bindTextureDirectly(target, internalTexture, true);
 
     this._setupDepthStencilTexture(internalTexture, size, internalOptions.generateStencil, internalOptions.bilinearFiltering, internalOptions.comparisonFunction);
 
+    const type = internalOptions.generateStencil ? gl.UNSIGNED_INT_24_8 : gl.UNSIGNED_INT;
+    const internalFormat = internalOptions.generateStencil ? gl.DEPTH_STENCIL : gl.DEPTH_COMPONENT;
+    let sizedFormat = internalFormat;
     if (this.webGLVersion > 1) {
-        if (internalOptions.generateStencil) {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH24_STENCIL8, internalTexture.width, internalTexture.height, 0, gl.DEPTH_STENCIL, gl.UNSIGNED_INT_24_8, null);
-        }
-        else {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT24, internalTexture.width, internalTexture.height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
-        }
+        sizedFormat = internalOptions.generateStencil ? gl.DEPTH24_STENCIL8 : gl.DEPTH_COMPONENT24;
+    }
+
+    if (internalTexture.is2DArray) {
+        gl.texImage3D(target, 0, sizedFormat, internalTexture.width, internalTexture.height, layers, 0, internalFormat, type, null);
     }
     else {
-        if (internalOptions.generateStencil) {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_STENCIL, internalTexture.width, internalTexture.height, 0, gl.DEPTH_STENCIL, gl.UNSIGNED_INT_24_8, null);
-        }
-        else {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, internalTexture.width, internalTexture.height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
-        }
+        gl.texImage2D(target, 0, sizedFormat, internalTexture.width, internalTexture.height, 0, internalFormat, type, null);
     }
 
-    this._bindTextureDirectly(gl.TEXTURE_2D, null);
+    this._bindTextureDirectly(target, null);
 
     return internalTexture;
 };

src/Engines/Extensions/engine.renderTargetCube.ts

@@ -70,7 +70,6 @@ ThinEngine.prototype.createRenderTargetCubeTexture = function(size: number, opti
 
     // Unbind
     this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, null);
-    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
     this._bindUnboundFramebuffer(null);
 
     texture._framebuffer = framebuffer;

src/Engines/engine.ts

@@ -1630,40 +1630,6 @@ export class Engine extends ThinEngine {
     }
 
     /**
-     * Sets the frame buffer Depth / Stencil attachement of the render target to the defined depth stencil texture.
-     * @param renderTarget The render target to set the frame buffer for
-     */
-    public setFrameBufferDepthStencilTexture(renderTarget: RenderTargetTexture): void {
-        // Create the framebuffer
-        var internalTexture = renderTarget.getInternalTexture();
-        if (!internalTexture || !internalTexture._framebuffer || !renderTarget.depthStencilTexture) {
-            return;
-        }
-
-        var gl = this._gl;
-        var depthStencilTexture = renderTarget.depthStencilTexture;
-
-        this._bindUnboundFramebuffer(internalTexture._framebuffer);
-        if (depthStencilTexture.isCube) {
-            if (depthStencilTexture._generateStencilBuffer) {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.TEXTURE_CUBE_MAP_POSITIVE_X, depthStencilTexture._webGLTexture, 0);
-            }
-            else {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_CUBE_MAP_POSITIVE_X, depthStencilTexture._webGLTexture, 0);
-            }
-        }
-        else {
-            if (depthStencilTexture._generateStencilBuffer) {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.TEXTURE_2D, depthStencilTexture._webGLTexture, 0);
-            }
-            else {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthStencilTexture._webGLTexture, 0);
-            }
-        }
-        this._bindUnboundFramebuffer(null);
-    }
-
-    /**
      * Update a dynamic index buffer
      * @param indexBuffer defines the target index buffer
      * @param indices defines the data to update
@@ -1751,7 +1717,6 @@ export class Engine extends ThinEngine {
         texture.samples = samples;
         texture._depthStencilBuffer = this._setupFramebufferDepthAttachments(texture._generateStencilBuffer, texture._generateDepthBuffer, texture.width, texture.height, samples);
 
-        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
         this._bindUnboundFramebuffer(null);
 
         return samples;

src/Engines/nullEngine.ts

@@ -647,7 +647,6 @@ export class NullEngine extends Engine {
      * @param requiredWidth The width of the target to render to
      * @param requiredHeight The height of the target to render to
      * @param forceFullscreenViewport Forces the viewport to be the entire texture/screen if true
-     * @param depthStencilTexture The depth stencil texture to use to render
      * @param lodLevel defines le lod level to bind to the frame buffer
      */
     public bindFramebuffer(texture: InternalTexture, faceIndex?: number, requiredWidth?: number, requiredHeight?: number, forceFullscreenViewport?: boolean): void {

src/Engines/thinEngine.ts

@@ -1290,29 +1290,35 @@ export class ThinEngine {
      * @param requiredWidth The width of the target to render to
      * @param requiredHeight The height of the target to render to
      * @param forceFullscreenViewport Forces the viewport to be the entire texture/screen if true
-     * @param depthStencilTexture The depth stencil texture to use to render
-     * @param lodLevel defines le lod level to bind to the frame buffer
+     * @param lodLevel defines the lod level to bind to the frame buffer
+     * @param layer defines the 2d array index to bind to frame buffer to
      */
-    public bindFramebuffer(texture: InternalTexture, faceIndex?: number, requiredWidth?: number, requiredHeight?: number, forceFullscreenViewport?: boolean, depthStencilTexture?: InternalTexture, lodLevel = 0): void {
+    public bindFramebuffer(texture: InternalTexture, faceIndex: number = 0, requiredWidth?: number, requiredHeight?: number, forceFullscreenViewport?: boolean, lodLevel = 0, layer = 0): void {
         if (this._currentRenderTarget) {
             this.unBindFramebuffer(this._currentRenderTarget);
         }
         this._currentRenderTarget = texture;
         this._bindUnboundFramebuffer(texture._MSAAFramebuffer ? texture._MSAAFramebuffer : texture._framebuffer);
-        var gl = this._gl;
-        if (texture.isCube) {
-            if (faceIndex === undefined) {
-                faceIndex = 0;
-            }
+
+        const gl = this._gl;
+        if (texture.is2DArray) {
+            gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, texture._webGLTexture, lodLevel, layer);
+        }
+        else if (texture.isCube) {
             gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture._webGLTexture, lodLevel);
+        }
 
-            if (depthStencilTexture) {
-                if (depthStencilTexture._generateStencilBuffer) {
-                    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, depthStencilTexture._webGLTexture, lodLevel);
-                }
-                else {
-                    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, depthStencilTexture._webGLTexture, lodLevel);
-                }
+        const depthStencilTexture = texture._depthStencilTexture;
+        if (depthStencilTexture) {
+            const attachment = (depthStencilTexture._generateStencilBuffer) ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT;
+            if (texture.is2DArray) {
+                gl.framebufferTextureLayer(gl.FRAMEBUFFER, attachment, depthStencilTexture._webGLTexture, lodLevel, layer);
+            }
+            else if (texture.isCube) {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, depthStencilTexture._webGLTexture, lodLevel);
+            }
+            else {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gl.TEXTURE_2D, depthStencilTexture._webGLTexture, lodLevel);
             }
         }
 
@@ -3144,13 +3150,17 @@ export class ThinEngine {
     }
 
     /** @hidden */
-    public _setupDepthStencilTexture(internalTexture: InternalTexture, size: number | { width: number, height: number }, generateStencil: boolean, bilinearFiltering: boolean, comparisonFunction: number): void {
-        var width = (<{ width: number, height: number }>size).width || <number>size;
-        var height = (<{ width: number, height: number }>size).height || <number>size;
+    public _setupDepthStencilTexture(internalTexture: InternalTexture, size: number | { width: number, height: number, layers?: number }, generateStencil: boolean, bilinearFiltering: boolean, comparisonFunction: number): void {
+        const width = (<{ width: number, height: number, layers?: number }>size).width || <number>size;
+        const height = (<{ width: number, height: number, layers?: number }>size).height || <number>size;
+        const layers = (<{ width: number, height: number, layers?: number }>size).layers || 0;
+
         internalTexture.baseWidth = width;
         internalTexture.baseHeight = height;
         internalTexture.width = width;
         internalTexture.height = height;
+        internalTexture.is2DArray = layers > 0;
+        internalTexture.depth = layers;
         internalTexture.isReady = true;
         internalTexture.samples = 1;
         internalTexture.generateMipMaps = false;
@@ -3160,9 +3170,9 @@ export class ThinEngine {
         internalTexture.type = Constants.TEXTURETYPE_UNSIGNED_INT;
         internalTexture._comparisonFunction = comparisonFunction;
 
-        var gl = this._gl;
-        var target = internalTexture.isCube ? gl.TEXTURE_CUBE_MAP : gl.TEXTURE_2D;
-        var samplingParameters = this._getSamplingParameters(internalTexture.samplingMode, false);
+        const gl = this._gl;
+        const target = this._getTextureTarget(internalTexture);
+        const samplingParameters = this._getSamplingParameters(internalTexture.samplingMode, false);
         gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, samplingParameters.mag);
         gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, samplingParameters.min);
         gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -3299,10 +3309,9 @@ export class ThinEngine {
             return this._getDepthStencilBuffer(width, height, samples, gl.DEPTH_STENCIL, gl.DEPTH24_STENCIL8, gl.DEPTH_STENCIL_ATTACHMENT);
         }
         if (generateDepthBuffer) {
-            let anyGl = <any>gl;
             let depthFormat = gl.DEPTH_COMPONENT16;
             if (this._webGLVersion > 1) {
-                depthFormat = anyGl.DEPTH_COMPONENT32F;
+                depthFormat = gl.DEPTH_COMPONENT32F;
             }
 
             return this._getDepthStencilBuffer(width, height, samples, depthFormat, depthFormat, gl.DEPTH_ATTACHMENT);
@@ -3327,6 +3336,9 @@ export class ThinEngine {
         }
 
         gl.framebufferRenderbuffer(gl.FRAMEBUFFER, attachment, gl.RENDERBUFFER, depthStencilBuffer);
+
+        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+
         return depthStencilBuffer;
     }
 

src/LibDeclarations/webgl2.d.ts

@@ -54,11 +54,14 @@ interface WebGLRenderingContext {
     readonly UNSIGNED_INT_10F_11F_11F_REV: number;
     readonly UNSIGNED_INT_5_9_9_9_REV: number;
     readonly FLOAT_32_UNSIGNED_INT_24_8_REV: number;
+    readonly DEPTH_COMPONENT32F: number;
 
     texImage3D(target: number, level: number, internalformat: number, width: number, height: number, depth: number, border: number, format: number, type: number, pixels: ArrayBufferView | null): void;
     texImage3D(target: number, level: number, internalformat: number, width: number, height: number, depth: number, border: number, format: number, type: number, pixels: ArrayBufferView, offset: number): void;
     texImage3D(target: number, level: number, internalformat: number, width: number, height: number, depth: number, border: number, format: number, type: number, pixels: ImageBitmap | ImageData | HTMLVideoElement | HTMLImageElement | HTMLCanvasElement): void;
 
+    framebufferTextureLayer(target: number, attachment: number, texture: WebGLTexture | null, level: number, layer: number): void;
+
     compressedTexImage3D(target: number, level: number, internalformat: number, width: number, height: number, depth: number, border: number, data: ArrayBufferView, offset?: number, length?: number): void;
 
     readonly TRANSFORM_FEEDBACK: number;

src/Lights/Shadows/index.ts

@@ -1,2 +1,3 @@
 export * from "./shadowGenerator";
+export * from "./cascadedShadowGenerator";
 export * from "./shadowGeneratorSceneComponent";

src/Lights/Shadows/shadowGenerator.ts

@@ -69,11 +69,6 @@ export interface IShadowGenerator {
      * @returns The render target texture if present otherwise, null
      */
     getShadowMap(): Nullable<RenderTargetTexture>;
-    /**
-     * Gets the RTT used during rendering (can be a blurred version of the shadow map or the shadow map itself).
-     * @returns The render target texture if the shadow map is present otherwise, null
-     */
-    getShadowMapForRendering(): Nullable<RenderTargetTexture>;
 
     /**
      * Determine wheter the shadow generator is ready or not (mainly all effects and related post processes needs to be ready).
@@ -115,7 +110,7 @@ export interface IShadowGenerator {
      * @param onCompiled Callback triggered at the and of the effects compilation
      * @param options Sets of optional options forcing the compilation with different modes
      */
-    forceCompilation(onCompiled?: (generator: ShadowGenerator) => void, options?: Partial<{ useInstances: boolean }>): void;
+    forceCompilation(onCompiled?: (generator: IShadowGenerator) => void, options?: Partial<{ useInstances: boolean }>): void;
 
     /**
      * Forces all the attached effect to compile to enable rendering only once ready vs. lazyly compiling effects.
@@ -936,12 +931,13 @@ export class ShadowGenerator implements IShadowGenerator {
         var index: number;
         let engine = this._scene.getEngine();
 
+        const colorWrite = engine.getColorWrite();
         if (depthOnlySubMeshes.length) {
             engine.setColorWrite(false);
             for (index = 0; index < depthOnlySubMeshes.length; index++) {
                 this._renderSubMeshForShadowMap(depthOnlySubMeshes.data[index]);
             }
-            engine.setColorWrite(true);
+            engine.setColorWrite(colorWrite);
         }
 
         for (index = 0; index < opaqueSubMeshes.length; index++) {
@@ -1074,7 +1070,7 @@ export class ShadowGenerator implements IShadowGenerator {
      * @param onCompiled Callback triggered at the and of the effects compilation
      * @param options Sets of optional options forcing the compilation with different modes
      */
-    public forceCompilation(onCompiled?: (generator: ShadowGenerator) => void, options?: Partial<{ useInstances: boolean }>): void {
+    public forceCompilation(onCompiled?: (generator: IShadowGenerator) => void, options?: Partial<{ useInstances: boolean }>): void {
         let localOptions = {
             useInstances: false,
             ...options

src/Lights/Shadows/shadowGeneratorSceneComponent.ts

@@ -2,6 +2,7 @@ import { SmartArrayNoDuplicate } from "../../Misc/smartArray";
 import { Scene } from "../../scene";
 import { RenderTargetTexture } from "../../Materials/Textures/renderTargetTexture";
 import { ShadowGenerator } from "./shadowGenerator";
+import { CascadedShadowGenerator } from "./cascadedShadowGenerator";
 import { SceneComponentConstants, ISceneSerializableComponent } from "../../sceneComponent";
 import { _TimeToken } from "../../Instrumentation/timeToken";
 import { AbstractScene } from "../../abstractScene";
@@ -121,4 +122,12 @@ ShadowGenerator._SceneComponentInitialization = (scene: Scene) => {
         component = new ShadowGeneratorSceneComponent(scene);
         scene._addComponent(component);
     }
+};
+
+CascadedShadowGenerator._SceneComponentInitialization = (scene: Scene) => {
+    let component = scene._getComponent(SceneComponentConstants.NAME_SHADOWGENERATOR);
+    if (!component) {
+        component = new ShadowGeneratorSceneComponent(scene);
+        scene._addComponent(component);
+    }
 };

src/Materials/Textures/internalTexture.ts

@@ -221,6 +221,8 @@ export class InternalTexture {
     public _lodGenerationScale: number = 0;
     /** @hidden */
     public _lodGenerationOffset: number = 0;
+    /** @hidden */
+    public _depthStencilTexture: Nullable<InternalTexture>;
 
     // Multiview
     /** @hidden */
@@ -372,7 +374,8 @@ export class InternalTexture {
                 } else {
                     let size = {
                         width: this.width,
-                        height: this.height
+                        height: this.height,
+                        layers: this.is2DArray ? this.depth : undefined
                     };
 
                     proxy = (this._engine as Engine).createRenderTargetTexture(size, options);
@@ -389,7 +392,12 @@ export class InternalTexture {
                     isCube: this.isCube
                 };
 
-                proxy = this._engine.createDepthStencilTexture({ width: this.width, height: this.height }, depthTextureOptions);
+                let size = {
+                    width: this.width,
+                    height: this.height,
+                    layers: this.is2DArray ? this.depth : undefined
+                };
+                proxy = this._engine.createDepthStencilTexture(size, depthTextureOptions);
                 proxy._swapAndDie(this);
 
                 this.isReady = true;
@@ -442,6 +450,8 @@ export class InternalTexture {
             target._depthStencilBuffer = this._depthStencilBuffer;
         }
 
+        target._depthStencilTexture = this._depthStencilTexture;
+
         if (this._lodTextureHigh) {
             if (target._lodTextureHigh) {
                 target._lodTextureHigh.dispose();

src/Materials/Textures/renderTargetTexture.ts

@@ -208,7 +208,7 @@ export class RenderTargetTexture extends Texture {
      * Define the clear color of the Render Target if it should be different from the scene.
      */
     public clearColor: Color4;
-    protected _size: number | { width: number, height: number };
+    protected _size: number | { width: number, height: number, layers?: number };
     protected _initialSizeParameter: number | { width: number, height: number } | { ratio: number };
     protected _sizeRatio: Nullable<number>;
     /** @hidden */
@@ -270,7 +270,9 @@ export class RenderTargetTexture extends Texture {
      * depth texture.
      * Otherwise, return null.
      */
-    public depthStencilTexture: Nullable<InternalTexture>;
+    public get depthStencilTexture(): Nullable<InternalTexture> {
+        return this.getInternalTexture()?._depthStencilTexture || null;
+    }
 
     /**
      * Instantiate a render target texture. This is mainly used to render of screen the scene to for instance apply post processse
@@ -289,7 +291,7 @@ export class RenderTargetTexture extends Texture {
      * @param format The internal format of the buffer in the RTT (RED, RG, RGB, RGBA, ALPHA...)
      * @param delayAllocation if the texture allocation should be delayed (default: false)
      */
-    constructor(name: string, size: number | { width: number, height: number } | { ratio: number }, scene: Nullable<Scene>, generateMipMaps?: boolean, doNotChangeAspectRatio: boolean = true, type: number = Constants.TEXTURETYPE_UNSIGNED_INT, public isCube = false, samplingMode = Texture.TRILINEAR_SAMPLINGMODE, generateDepthBuffer = true, generateStencilBuffer = false, isMulti = false, format = Constants.TEXTUREFORMAT_RGBA, delayAllocation = false) {
+    constructor(name: string, size: number | { width: number, height: number, layers?: number } | { ratio: number }, scene: Nullable<Scene>, generateMipMaps?: boolean, doNotChangeAspectRatio: boolean = true, type: number = Constants.TEXTURETYPE_UNSIGNED_INT, public isCube = false, samplingMode = Texture.TRILINEAR_SAMPLINGMODE, generateDepthBuffer = true, generateStencilBuffer = false, isMulti = false, format = Constants.TEXTUREFORMAT_RGBA, delayAllocation = false) {
         super(null, scene, !generateMipMaps);
         scene = this.getScene();
 
@@ -352,18 +354,18 @@ export class RenderTargetTexture extends Texture {
      * @param generateStencil Specifies whether or not a stencil should be allocated in the texture
      */
     public createDepthStencilTexture(comparisonFunction: number = 0, bilinearFiltering: boolean = true, generateStencil: boolean = false): void {
-        if (!this.getScene()) {
+        const internalTexture = this.getInternalTexture();
+        if (!this.getScene() || !internalTexture) {
             return;
         }
 
         var engine = this.getScene()!.getEngine();
-        this.depthStencilTexture = engine.createDepthStencilTexture(this._size, {
+        internalTexture._depthStencilTexture = engine.createDepthStencilTexture(this._size, {
             bilinearFiltering,
             comparisonFunction,
             generateStencil,
             isCube: this.isCube
         });
-        engine.setFrameBufferDepthStencilTexture(this);
     }
 
     private _processSizeParameter(size: number | { width: number, height: number } | { ratio: number }): void {
@@ -374,7 +376,7 @@ export class RenderTargetTexture extends Texture {
                 height: this._bestReflectionRenderTargetDimension(this._engine.getRenderHeight(), this._sizeRatio)
             };
         } else {
-            this._size = <number | { width: number, height: number }>size;
+            this._size = <number | { width: number, height: number, layers?: number }>size;
         }
     }
 
@@ -528,6 +530,19 @@ export class RenderTargetTexture extends Texture {
     }
 
     /**
+     * Gets the actual number of layers of the texture.
+     * @returns the number of layers
+     */
+    public getRenderLayers(): number {
+        const layers = (<{ width: number, height: number, layers?: number }>this._size).layers;
+        if (layers) {
+            return layers;
+        }
+
+        return 0;
+    }
+
+    /**
      * Get if the texture can be rescaled or not.
      */
     public get canRescale(): boolean {
@@ -717,7 +732,14 @@ export class RenderTargetTexture extends Texture {
             }
         }
 
-        if (this.isCube) {
+        if (this.is2DArray) {
+            for (let layer = 0; layer < this.getRenderLayers(); layer++) {
+                this.renderToTarget(0, currentRenderList, useCameraPostProcess, dumpForDebug, layer);
+                scene.incrementRenderId();
+                scene.resetCachedMaterial();
+            }
+        }
+        else if (this.isCube) {
             for (var face = 0; face < 6; face++) {
                 this.renderToTarget(face, currentRenderList, useCameraPostProcess, dumpForDebug);
                 scene.incrementRenderId();
@@ -752,8 +774,9 @@ export class RenderTargetTexture extends Texture {
     /**
      * @hidden
      * @param faceIndex face index to bind to if this is a cubetexture
+     * @param layer defines the index of the texture to bind in the array
      */
-    public _bindFrameBuffer(faceIndex: number = 0) {
+    public _bindFrameBuffer(faceIndex: number = 0, layer = 0) {
         var scene = this.getScene();
         if (!scene) {
             return;
@@ -761,7 +784,7 @@ export class RenderTargetTexture extends Texture {
 
         var engine = scene.getEngine();
         if (this._texture) {
-            engine.bindFramebuffer(this._texture, this.isCube ? faceIndex : undefined, undefined, undefined, this.ignoreCameraViewport, this.depthStencilTexture ? this.depthStencilTexture : undefined);
+            engine.bindFramebuffer(this._texture, this.isCube ? faceIndex : undefined, undefined, undefined, this.ignoreCameraViewport, 0, layer);
         }
     }
 
@@ -774,7 +797,7 @@ export class RenderTargetTexture extends Texture {
         });
     }
 
-    private renderToTarget(faceIndex: number, currentRenderList: AbstractMesh[], useCameraPostProcess: boolean, dumpForDebug: boolean): void {
+    private renderToTarget(faceIndex: number, currentRenderList: AbstractMesh[], useCameraPostProcess: boolean, dumpForDebug: boolean, layer = 0): void {
         var scene = this.getScene();
 
         if (!scene) {
@@ -792,10 +815,15 @@ export class RenderTargetTexture extends Texture {
             this._postProcessManager._prepareFrame(this._texture, this._postProcesses);
         }
         else if (!useCameraPostProcess || !scene.postProcessManager._prepareFrame(this._texture)) {
-            this._bindFrameBuffer(faceIndex);
+            this._bindFrameBuffer(faceIndex, layer);
         }
 
-        this.onBeforeRenderObservable.notifyObservers(faceIndex);
+        if (this.is2DArray) {
+            this.onBeforeRenderObservable.notifyObservers(layer);
+        }
+        else {
+            this.onBeforeRenderObservable.notifyObservers(faceIndex);
+        }
 
         // Clear
         if (this.onClearObservable.hasObservers()) {

src/Materials/materialHelper.ts

@@ -343,6 +343,9 @@ export class MaterialHelper {
 
         // Shadows
         defines["SHADOW" + lightIndex] = false;
+        defines["SHADOWCSM" + lightIndex] = false;
+        defines["SHADOWCSMDEBUG" + lightIndex] = false;
+        defines["SHADOWCSMNUM_CASCADES" + lightIndex] = false;
         defines["SHADOWPCF" + lightIndex] = false;
         defines["SHADOWPCSS" + lightIndex] = false;
         defines["SHADOWPOISSON" + lightIndex] = false;
@@ -421,6 +424,9 @@ export class MaterialHelper {
                 defines["DIRLIGHT" + index] = false;
                 defines["SPOTLIGHT" + index] = false;
                 defines["SHADOW" + index] = false;
+                defines["SHADOWCSM" + index] = false;
+                defines["SHADOWCSMDEBUG" + index] = false;
+                defines["SHADOWCSMNUM_CASCADES" + index] = false;
                 defines["SHADOWPCF" + index] = false;
                 defines["SHADOWPCSS" + index] = false;
                 defines["SHADOWPOISSON" + index] = false;
@@ -477,6 +483,12 @@ export class MaterialHelper {
         samplersList.push("shadowSampler" + lightIndex);
         samplersList.push("depthSampler" + lightIndex);
 
+        uniformsList.push(
+            "lightMatrixCSM" + lightIndex,
+            "camViewMatCSM" + lightIndex,
+            "viewFrustumZCSM" + lightIndex,
+        );
+
         if (projectedLightTexture) {
             samplersList.push("projectionLightSampler" + lightIndex);
             uniformsList.push(

src/PostProcesses/postProcessManager.ts

@@ -110,7 +110,7 @@ export class PostProcessManager {
                 postProcesses[index + 1].activate(this._scene.activeCamera, targetTexture);
             } else {
                 if (targetTexture) {
-                    engine.bindFramebuffer(targetTexture, faceIndex, undefined, undefined, forceFullscreenViewport, undefined, lodLevel);
+                    engine.bindFramebuffer(targetTexture, faceIndex, undefined, undefined, forceFullscreenViewport, lodLevel);
                 } else {
                     engine.restoreDefaultFramebuffer();
                 }

src/Shaders/ShadersInclude/lightFragment.fx

@@ -125,7 +125,62 @@
     #endif
 
     #ifdef SHADOW{X}
-        #ifdef SHADOWCLOSEESM{X}
+        #ifdef SHADOWCSM{X}
+            int index = SHADOWCSMNUM_CASCADES{X} - 1;
+
+            float diff = 0.;
+            float frustrumLenght = 0.;
+            float previousFrustrumMax = 0.;
+            for (int i = 0; i < SHADOWCSMNUM_CASCADES{X} - 1; i++) {
+                diff = viewFrustumZCSM{X}[i] - vPositionFromCameraCSM{X}.z;
+                frustrumLenght = viewFrustumZCSM{X}[i] - previousFrustrumMax;
+                previousFrustrumMax = viewFrustumZCSM{X}[i];
+
+                if (diff >= 0.){
+                    index = i;
+                    break;
+                }
+            }
+
+            #if defined(SHADOWLOWQUALITY{X})
+                shadow = computeShadowWithCSMPCF1(float(index), vPositionFromLightCSM{X}[index], vDepthMetricCSM{X}[index], shadowSampler{X}, light{X}.shadowsInfo.x, light{X}.shadowsInfo.w);
+            #elif defined(SHADOWMEDIUMQUALITY{X})
+                shadow = computeShadowWithCSMPCF3(float(index), vPositionFromLightCSM{X}[index], vDepthMetricCSM{X}[index], shadowSampler{X}, light{X}.shadowsInfo.yz, light{X}.shadowsInfo.x, light{X}.shadowsInfo.w);
+            #else
+                shadow = computeShadowWithCSMPCF5(float(index), vPositionFromLightCSM{X}[index], vDepthMetricCSM{X}[index], shadowSampler{X}, light{X}.shadowsInfo.yz, light{X}.shadowsInfo.x, light{X}.shadowsInfo.w);
+            #endif
+
+            float diffRatio = clamp(diff / frustrumLenght, 0., 1.) * 4.; // 25 % linear
+            #ifdef SHADOWCSMDEBUG{X}
+                int realIndex = index;
+            #endif
+            if (index < (SHADOWCSMNUM_CASCADES{X} - 1) && diffRatio < 1.)
+            {
+                index += 1;
+                float nextShadow = 0.;
+                #if defined(SHADOWLOWQUALITY{X})
+                    nextShadow = computeShadowWithCSMPCF1(float(index), vPositionFromLightCSM{X}[index], vDepthMetricCSM{X}[index], shadowSampler{X}, light{X}.shadowsInfo.x, light{X}.shadowsInfo.w);
+                #elif defined(SHADOWMEDIUMQUALITY{X})
+                    nextShadow = computeShadowWithCSMPCF3(float(index), vPositionFromLightCSM{X}[index], vDepthMetricCSM{X}[index], shadowSampler{X}, light{X}.shadowsInfo.yz, light{X}.shadowsInfo.x, light{X}.shadowsInfo.w);
+                #else
+                    nextShadow = computeShadowWithCSMPCF5(float(index), vPositionFromLightCSM{X}[index], vDepthMetricCSM{X}[index], shadowSampler{X}, light{X}.shadowsInfo.yz, light{X}.shadowsInfo.x, light{X}.shadowsInfo.w);
+                #endif
+
+                shadow = mix(nextShadow, shadow, diffRatio);
+            }
+
+            #ifdef SHADOWCSMDEBUG{X}
+                gl_FragColor = vec4(float(realIndex) / float(SHADOWCSMNUM_CASCADES{X}),
+                    1. - shadow,
+                    0,
+                    1.);
+                if (realIndex < (SHADOWCSMNUM_CASCADES{X} - 1) && diffRatio < 1.)
+                {
+                    gl_FragColor.b = 1. - diffRatio; // reverse for display
+                }
+                return;
+            #endif
+        #elif SHADOWCLOSEESM{X}
             #if defined(SHADOWCUBE{X})
                 shadow = computeShadowWithCloseESMCube(light{X}.vLightData.xyz, shadowSampler{X}, light{X}.shadowsInfo.x, light{X}.shadowsInfo.z, light{X}.depthValues);
             #else

src/Shaders/ShadersInclude/lightUboDeclaration.fx

@@ -21,7 +21,26 @@
 	uniform sampler2D projectionLightSampler{X};
 #endif
 #ifdef SHADOW{X}
-	#if defined(SHADOWCUBE{X})
+	#ifdef SHADOWCSM{X}
+		uniform mat4 lightMatrixCSM{X}[SHADOWCSMNUM_CASCADES{X}];
+		uniform mat4 camViewMatCSM{X};
+		uniform float viewFrustumZCSM{X}[SHADOWCSMNUM_CASCADES{X}];
+		varying vec4 vPositionFromLightCSM{X}[SHADOWCSMNUM_CASCADES{X}];
+		varying float vDepthMetricCSM{X}[SHADOWCSMNUM_CASCADES{X}];
+		varying vec4 vPositionFromCameraCSM{X};
+
+		#if defined(SHADOWPCSS{X})
+			uniform highp sampler2DArrayShadow shadowSampler{X};
+			uniform highp sampler2DArray depthSampler{X};
+		#else
+			uniform highp sampler2DArrayShadow shadowSampler{X};
+		#endif
+
+		//uniform sampler2D shadowSamplerArrayCSM{X}[NUM_CASCADESP{X}];
+		// varying vec4 vPositionFromLight{X};
+		// varying float vDepthMetric{X};
+		// uniform mat4 lightMatrix{X};
+	#elif defined(SHADOWCUBE{X})
 		uniform samplerCube shadowSampler{X};		
 	#else
 		varying vec4 vPositionFromLight{X};

src/Shaders/ShadersInclude/shadowsFragmentFunctions.fx

@@ -223,6 +223,103 @@
 
     #ifdef WEBGL2
         // Shadow PCF kernel size 1 with a single tap (lowest quality)
+        float computeShadowWithCSMPCF1(float layer, vec4 vPositionFromLight, float depthMetric, highp sampler2DArrayShadow shadowSampler, float darkness, float frustumEdgeFalloff)
+        {
+            if (depthMetric > 1.0 || depthMetric < 0.0) {
+                return 1.0;
+            }
+
+            vec3 clipSpace = vPositionFromLight.xyz / vPositionFromLight.w;
+            vec3 uvDepth = vec3(0.5 * clipSpace.xyz + vec3(0.5));
+            vec4 uvDepthLayer = vec4(uvDepth.x, uvDepth.y, layer, uvDepth.z);
+
+            float shadow = texture(shadowSampler, uvDepthLayer);
+            shadow = mix(darkness, 1., shadow);
+            return computeFallOff(shadow, clipSpace.xy, frustumEdgeFalloff);
+        }
+
+        // Shadow PCF kernel 3*3 in only 4 taps (medium quality)
+        // This uses a well distributed taps to allow a gaussian distribution covering a 3*3 kernel
+        // https://mynameismjp.wordpress.com/2013/09/10/shadow-maps/
+        float computeShadowWithCSMPCF3(float layer, vec4 vPositionFromLight, float depthMetric, highp sampler2DArrayShadow shadowSampler, vec2 shadowMapSizeAndInverse, float darkness, float frustumEdgeFalloff)
+        {
+            if (depthMetric > 1.0 || depthMetric < 0.0) {
+                return 1.0;
+            }
+
+            vec3 clipSpace = vPositionFromLight.xyz / vPositionFromLight.w;
+            vec3 uvDepth = vec3(0.5 * clipSpace.xyz + vec3(0.5));
+
+            vec2 uv = uvDepth.xy * shadowMapSizeAndInverse.x;	// uv in texel units
+            uv += 0.5;											// offset of half to be in the center of the texel
+            vec2 st = fract(uv);								// how far from the center
+            vec2 base_uv = floor(uv) - 0.5;						// texel coord
+            base_uv *= shadowMapSizeAndInverse.y;				// move back to uv coords
+
+            // Equation resolved to fit in a 3*3 distribution like 
+            // 1 2 1
+            // 2 4 2 
+            // 1 2 1
+            vec2 uvw0 = 3. - 2. * st;
+            vec2 uvw1 = 1. + 2. * st;
+            vec2 u = vec2((2. - st.x) / uvw0.x - 1., st.x / uvw1.x + 1.) * shadowMapSizeAndInverse.y;
+            vec2 v = vec2((2. - st.y) / uvw0.y - 1., st.y / uvw1.y + 1.) * shadowMapSizeAndInverse.y;
+
+            float shadow = 0.;
+            shadow += uvw0.x * uvw0.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[0], v[0]), layer, uvDepth.z));
+            shadow += uvw1.x * uvw0.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[1], v[0]), layer, uvDepth.z));
+            shadow += uvw0.x * uvw1.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[0], v[1]), layer, uvDepth.z));
+            shadow += uvw1.x * uvw1.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[1], v[1]), layer, uvDepth.z));
+            shadow = shadow / 16.;
+
+            shadow = mix(darkness, 1., shadow);
+            return computeFallOff(shadow, clipSpace.xy, frustumEdgeFalloff);
+        }
+
+        // Shadow PCF kernel 5*5 in only 9 taps (high quality)
+        // This uses a well distributed taps to allow a gaussian distribution covering a 5*5 kernel
+        // https://mynameismjp.wordpress.com/2013/09/10/shadow-maps/
+        float computeShadowWithCSMPCF5(float layer, vec4 vPositionFromLight, float depthMetric, highp sampler2DArrayShadow shadowSampler, vec2 shadowMapSizeAndInverse, float darkness, float frustumEdgeFalloff)
+        {
+            if (depthMetric > 1.0 || depthMetric < 0.0) {
+                return 1.0;
+            }
+
+            vec3 clipSpace = vPositionFromLight.xyz / vPositionFromLight.w;
+            vec3 uvDepth = vec3(0.5 * clipSpace.xyz + vec3(0.5));
+
+            vec2 uv = uvDepth.xy * shadowMapSizeAndInverse.x;	// uv in texel units
+            uv += 0.5;											// offset of half to be in the center of the texel
+            vec2 st = fract(uv);								// how far from the center
+            vec2 base_uv = floor(uv) - 0.5;						// texel coord
+            base_uv *= shadowMapSizeAndInverse.y;				// move back to uv coords
+
+            // Equation resolved to fit in a 5*5 distribution like 
+            // 1 2 4 2 1
+            vec2 uvw0 = 4. - 3. * st;
+            vec2 uvw1 = vec2(7.);
+            vec2 uvw2 = 1. + 3. * st;
+
+            vec3 u = vec3((3. - 2. * st.x) / uvw0.x - 2., (3. + st.x) / uvw1.x, st.x / uvw2.x + 2.) * shadowMapSizeAndInverse.y;
+            vec3 v = vec3((3. - 2. * st.y) / uvw0.y - 2., (3. + st.y) / uvw1.y, st.y / uvw2.y + 2.) * shadowMapSizeAndInverse.y;
+
+            float shadow = 0.;
+            shadow += uvw0.x * uvw0.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[0], v[0]), layer, uvDepth.z));
+            shadow += uvw1.x * uvw0.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[1], v[0]), layer, uvDepth.z));
+            shadow += uvw2.x * uvw0.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[2], v[0]), layer, uvDepth.z));
+            shadow += uvw0.x * uvw1.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[0], v[1]), layer, uvDepth.z));
+            shadow += uvw1.x * uvw1.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[1], v[1]), layer, uvDepth.z));
+            shadow += uvw2.x * uvw1.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[2], v[1]), layer, uvDepth.z));
+            shadow += uvw0.x * uvw2.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[0], v[2]), layer, uvDepth.z));
+            shadow += uvw1.x * uvw2.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[1], v[2]), layer, uvDepth.z));
+            shadow += uvw2.x * uvw2.y * texture2D(shadowSampler, vec4(base_uv.xy + vec2(u[2], v[2]), layer, uvDepth.z));
+            shadow = shadow / 144.;
+
+            shadow = mix(darkness, 1., shadow);
+            return computeFallOff(shadow, clipSpace.xy, frustumEdgeFalloff);
+        }
+
+        // Shadow PCF kernel size 1 with a single tap (lowest quality)
         float computeShadowWithPCF1(vec4 vPositionFromLight, float depthMetric, sampler2DShadow shadowSampler, float darkness, float frustumEdgeFalloff)
         {
             if (depthMetric > 1.0 || depthMetric < 0.0) {

src/Shaders/ShadersInclude/shadowsVertex.fx

@@ -1,5 +1,11 @@
 #ifdef SHADOWS
-	#if defined(SHADOW{X}) && !defined(SHADOWCUBE{X})
+	#if defined(SHADOWCSM{X})
+		vPositionFromCameraCSM{X} = camViewMatCSM{X} * worldPos;
+		for (int i = 0; i < SHADOWCSMNUM_CASCADES{X}; i++) {
+			vPositionFromLightCSM{X}[i] = lightMatrixCSM{X}[i] * worldPos;
+			vDepthMetricCSM{X}[i] = ((vPositionFromLightCSM{X}[i].z + light{X}.depthValues.x) / (light{X}.depthValues.y));
+		}
+	#elif defined(SHADOW{X}) && !defined(SHADOWCUBE{X})
 		vPositionFromLight{X} = lightMatrix{X} * worldPos;
 		vDepthMetric{X} = ((vPositionFromLight{X}.z + light{X}.depthValues.x) / (light{X}.depthValues.y));
 	#endif