@babylonjs/core 8.15.0 → 8.16.0

package/Engines/WebGPU/webgpuCacheRenderPipeline.js

@@ -15,14 +15,16 @@ var StatePosition;
     StatePosition[StatePosition["DepthBias"] = 2] = "DepthBias";
     StatePosition[StatePosition["DepthBiasSlopeScale"] = 3] = "DepthBiasSlopeScale";
     StatePosition[StatePosition["DepthStencilState"] = 4] = "DepthStencilState";
-    StatePosition[StatePosition["MRTAttachments1"] = 5] = "MRTAttachments1";
-    StatePosition[StatePosition["MRTAttachments2"] = 6] = "MRTAttachments2";
-    StatePosition[StatePosition["RasterizationState"] = 7] = "RasterizationState";
-    StatePosition[StatePosition["ColorStates"] = 8] = "ColorStates";
-    StatePosition[StatePosition["ShaderStage"] = 9] = "ShaderStage";
-    StatePosition[StatePosition["TextureStage"] = 10] = "TextureStage";
-    StatePosition[StatePosition["VertexState"] = 11] = "VertexState";
-    StatePosition[StatePosition["NumStates"] = 12] = "NumStates";
+    StatePosition[StatePosition["MRTAttachments"] = 5] = "MRTAttachments";
+    StatePosition[StatePosition["RasterizationState"] = 6] = "RasterizationState";
+    StatePosition[StatePosition["ColorStates1"] = 7] = "ColorStates1";
+    StatePosition[StatePosition["ColorStates2"] = 8] = "ColorStates2";
+    StatePosition[StatePosition["ColorStates3"] = 9] = "ColorStates3";
+    StatePosition[StatePosition["ColorStates4"] = 10] = "ColorStates4";
+    StatePosition[StatePosition["ShaderStage"] = 11] = "ShaderStage";
+    StatePosition[StatePosition["TextureStage"] = 12] = "TextureStage";
+    StatePosition[StatePosition["VertexState"] = 13] = "VertexState";
+    StatePosition[StatePosition["NumStates"] = 14] = "NumStates";
 })(StatePosition || (StatePosition = {}));
 const alphaBlendFactorToIndex = {
     0: 1, // Zero
@@ -38,8 +40,19 @@ const alphaBlendFactorToIndex = {
     0x0308: 11, // SrcAlphaSaturated
     0x8001: 12, // BlendColor
     0x8002: 13, // OneMinusBlendColor
-    0x8003: 12, // BlendColor (alpha)
-    0x8004: 13, // OneMinusBlendColor (alpha)
+    0x8003: 14, // BlendColor (alpha)
+    0x8004: 15, // OneMinusBlendColor (alpha)
+    0x88f9: 16, // Src1Color
+    0x88fa: 17, // OneMinusSrc1Color
+    0x8589: 18, // Src1Alpha
+    0x88fb: 19, // OneMinusSrc1Alpha
+};
+const alphaBlendEquationToIndex = {
+    0x8006: 0, // Add
+    0x8007: 1, // Min
+    0x8008: 2, // Max
+    0x800a: 3, // Subtract
+    0x800b: 4, // ReverseSubtract
 };
 const stencilOpToIndex = {
     0x0000: 0, // ZERO
@@ -51,6 +64,7 @@ const stencilOpToIndex = {
     0x8507: 6, // INCR_WRAP
     0x8508: 7, // DECR_WRAP
 };
+const colorStates = [0, 0, 0, 0];
 /** @internal */
 export class WebGPUCacheRenderPipeline {
     constructor(device, emptyVertexBuffer) {
@@ -79,7 +93,7 @@ export class WebGPUCacheRenderPipeline {
         this._webgpuColorFormat = ["bgra8unorm" /* WebGPUConstants.TextureFormat.BGRA8Unorm */];
         this.setColorFormat("bgra8unorm" /* WebGPUConstants.TextureFormat.BGRA8Unorm */);
         this.setMRT([]);
-        this.setAlphaBlendEnabled(false);
+        this.setAlphaBlendEnabled([false], 1);
         this.setAlphaBlendFactors([null, null, null, null], [null, null]);
         this.setWriteMask(0xf);
         this.setDepthStencilFormat("depth24plus-stencil8" /* WebGPUConstants.TextureFormat.Depth24PlusStencil8 */);
@@ -89,7 +103,7 @@ export class WebGPUCacheRenderPipeline {
         this._setTextureState(0);
     }
     get colorFormats() {
-        return this._mrtAttachments1 > 0 ? this._mrtFormats : this._webgpuColorFormat;
+        return this._mrtAttachments > 0 ? this._mrtFormats : this._webgpuColorFormat;
     }
     getRenderPipeline(fillMode, effect, sampleCount, textureState = 0) {
         sampleCount = WebGPUTextureHelper.GetSample(sampleCount);
@@ -187,6 +201,7 @@ export class WebGPUCacheRenderPipeline {
         this._webgpuColorFormat[0] = format;
         this._colorFormat = renderableTextureFormatToIndex[format ?? ""];
     }
+    // Must be called after setMRT!
     setMRTAttachments(attachments) {
         this.mrtAttachments = attachments;
         let mask = 0;
@@ -198,47 +213,40 @@ export class WebGPUCacheRenderPipeline {
         if (this._mrtEnabledMask !== mask) {
             this._mrtEnabledMask = mask;
             this._isDirty = true;
-            this._stateDirtyLowestIndex = Math.min(this._stateDirtyLowestIndex, StatePosition.MRTAttachments1);
+            this._stateDirtyLowestIndex = Math.min(this._stateDirtyLowestIndex, StatePosition.MRTAttachments);
         }
     }
     setMRT(textureArray, textureCount) {
         textureCount = textureCount ?? textureArray.length;
-        if (textureCount > 10) {
-            // If we want more than 10 attachments we need to change this method (and the StatePosition enum) but 10 seems plenty: note that WebGPU only supports 8 at the time (2021/12/13)!
-            // As we need ~39 different values we are using 6 bits to encode a texture format, meaning we can encode 5 texture formats in 32 bits
-            // We are using 2x32 bit values to handle 10 textures
-            // eslint-disable-next-line no-throw-literal
-            throw "Can't handle more than 10 attachments for a MRT in cache render pipeline!";
+        if (textureCount > 8) {
+            // We only support 8 MRTs in WebGPU, so we throw an error if we try to set more than that.
+            throw new Error("Can't handle more than 8 attachments for a MRT in cache render pipeline!");
         }
         this.mrtTextureArray = textureArray;
         this.mrtTextureCount = textureCount;
+        // Since we need approximately 45 different values per texture format (see WebGPUTextureManager.renderableTextureFormatToIndex), we use 6 bits to encode a texture format,
+        // which means we can encode 8 texture formats in 48 bits (a double can represent integers exactly up until 2^53, so 48 bits is ok).
         this._mrtEnabledMask = 0xffff; // all textures are enabled at start (meaning we can write to them). Calls to setMRTAttachments may disable some
-        const bits = [0, 0];
-        let indexBits = 0, mask = 0, numRT = 0;
+        let mrtAttachments = 0;
+        let mask = 0;
         for (let i = 0; i < textureCount; ++i) {
             const texture = textureArray[i];
             const gpuWrapper = texture?._hardwareTexture;
-            this._mrtFormats[numRT] = gpuWrapper?.format ?? this._webgpuColorFormat[0];
-            bits[indexBits] += renderableTextureFormatToIndex[this._mrtFormats[numRT] ?? ""] << mask;
+            this._mrtFormats[i] = gpuWrapper?.format ?? this._webgpuColorFormat[0];
+            mrtAttachments += renderableTextureFormatToIndex[this._mrtFormats[i] ?? ""] * 2 ** mask;
             mask += 6;
-            numRT++;
-            if (mask >= 32) {
-                mask = 0;
-                indexBits++;
-            }
         }
-        this._mrtFormats.length = numRT;
-        if (this._mrtAttachments1 !== bits[0] || this._mrtAttachments2 !== bits[1]) {
-            this._mrtAttachments1 = bits[0];
-            this._mrtAttachments2 = bits[1];
-            this._states[StatePosition.MRTAttachments1] = bits[0];
-            this._states[StatePosition.MRTAttachments2] = bits[1];
+        this._mrtFormats.length = textureCount;
+        if (this._mrtAttachments !== mrtAttachments) {
+            this._mrtAttachments = mrtAttachments;
+            this._states[StatePosition.MRTAttachments] = mrtAttachments;
             this._isDirty = true;
-            this._stateDirtyLowestIndex = Math.min(this._stateDirtyLowestIndex, StatePosition.MRTAttachments1);
+            this._stateDirtyLowestIndex = Math.min(this._stateDirtyLowestIndex, StatePosition.MRTAttachments);
         }
     }
-    setAlphaBlendEnabled(enabled) {
+    setAlphaBlendEnabled(enabled, numAlphaBlendTargetsEnabled) {
         this._alphaBlendEnabled = enabled;
+        this._numAlphaBlendTargetsEnabled = numAlphaBlendTargetsEnabled;
     }
     setAlphaBlendFactors(factors, operations) {
         this._alphaBlendFuncParams = factors;
@@ -275,6 +283,18 @@ export class WebGPUCacheRenderPipeline {
     setStencilFailOp(op) {
         this._stencilFrontFailOp = op === null ? 1 /* KEEP */ : stencilOpToIndex[op];
     }
+    setStencilBackCompare(func) {
+        this._stencilBackCompare = (func ?? 519) - 0x0200;
+    }
+    setStencilBackDepthFailOp(op) {
+        this._stencilBackDepthFailOp = op === null ? 1 /* KEEP */ : stencilOpToIndex[op];
+    }
+    setStencilBackPassOp(op) {
+        this._stencilBackPassOp = op === null ? 2 /* REPLACE */ : stencilOpToIndex[op];
+    }
+    setStencilBackFailOp(op) {
+        this._stencilBackFailOp = op === null ? 1 /* KEEP */ : stencilOpToIndex[op];
+    }
     setStencilReadMask(mask) {
         if (this._stencilReadMask !== mask) {
             this._stencilReadMask = mask;
@@ -294,12 +314,16 @@ export class WebGPUCacheRenderPipeline {
     resetStencilState() {
         this.setStencilState(false, 519, 7680, 7681, 7680, 0xff, 0xff);
     }
-    setStencilState(stencilEnabled, compare, depthFailOp, passOp, failOp, readMask, writeMask) {
+    setStencilState(stencilEnabled, compare, depthFailOp, passOp, failOp, readMask, writeMask, backCompare = null, backDepthFailOp = null, backPassOp = null, backFailOp = null) {
         this._stencilEnabled = stencilEnabled;
         this._stencilFrontCompare = (compare ?? 519) - 0x0200;
         this._stencilFrontDepthFailOp = depthFailOp === null ? 1 /* KEEP */ : stencilOpToIndex[depthFailOp];
         this._stencilFrontPassOp = passOp === null ? 2 /* REPLACE */ : stencilOpToIndex[passOp];
         this._stencilFrontFailOp = failOp === null ? 1 /* KEEP */ : stencilOpToIndex[failOp];
+        this._stencilBackCompare = (backCompare ?? 519) - 0x0200;
+        this._stencilBackDepthFailOp = backDepthFailOp === null ? 1 /* KEEP */ : stencilOpToIndex[backDepthFailOp];
+        this._stencilBackPassOp = backPassOp === null ? 2 /* REPLACE */ : stencilOpToIndex[backPassOp];
+        this._stencilBackFailOp = backFailOp === null ? 1 /* KEEP */ : stencilOpToIndex[backFailOp];
         this.setStencilReadMask(readMask);
         this.setStencilWriteMask(writeMask);
     }
@@ -381,11 +405,9 @@ export class WebGPUCacheRenderPipeline {
             case 776:
                 return "src-alpha-saturated" /* WebGPUConstants.BlendFactor.SrcAlphaSaturated */;
             case 32769:
-                return "constant" /* WebGPUConstants.BlendFactor.Constant */;
-            case 32770:
-                return "one-minus-constant" /* WebGPUConstants.BlendFactor.OneMinusConstant */;
             case 32771:
                 return "constant" /* WebGPUConstants.BlendFactor.Constant */;
+            case 32770:
             case 32772:
                 return "one-minus-constant" /* WebGPUConstants.BlendFactor.OneMinusConstant */;
             case 35065:
@@ -526,24 +548,24 @@ export class WebGPUCacheRenderPipeline {
         }
         throw new Error(`Invalid Format '${vertexBuffer.getKind()}' - type=${type}, normalized=${normalized}, size=${size}`);
     }
-    _getAphaBlendState() {
-        if (!this._alphaBlendEnabled) {
+    _getAphaBlendState(targetIndex) {
+        if (!this._alphaBlendEnabled[targetIndex]) {
             return null;
         }
         return {
-            srcFactor: WebGPUCacheRenderPipeline._GetAphaBlendFactor(this._alphaBlendFuncParams[2]),
-            dstFactor: WebGPUCacheRenderPipeline._GetAphaBlendFactor(this._alphaBlendFuncParams[3]),
-            operation: WebGPUCacheRenderPipeline._GetAphaBlendOperation(this._alphaBlendEqParams[1]),
+            srcFactor: WebGPUCacheRenderPipeline._GetAphaBlendFactor(this._alphaBlendFuncParams[targetIndex * 4 + 2]),
+            dstFactor: WebGPUCacheRenderPipeline._GetAphaBlendFactor(this._alphaBlendFuncParams[targetIndex * 4 + 3]),
+            operation: WebGPUCacheRenderPipeline._GetAphaBlendOperation(this._alphaBlendEqParams[targetIndex * 2 + 1]),
         };
     }
-    _getColorBlendState() {
+    _getColorBlendState(targetIndex) {
         if (!this._alphaBlendEnabled) {
             return null;
         }
         return {
-            srcFactor: WebGPUCacheRenderPipeline._GetAphaBlendFactor(this._alphaBlendFuncParams[0]),
-            dstFactor: WebGPUCacheRenderPipeline._GetAphaBlendFactor(this._alphaBlendFuncParams[1]),
-            operation: WebGPUCacheRenderPipeline._GetAphaBlendOperation(this._alphaBlendEqParams[0]),
+            srcFactor: WebGPUCacheRenderPipeline._GetAphaBlendFactor(this._alphaBlendFuncParams[targetIndex * 4 + 0]),
+            dstFactor: WebGPUCacheRenderPipeline._GetAphaBlendFactor(this._alphaBlendFuncParams[targetIndex * 4 + 1]),
+            operation: WebGPUCacheRenderPipeline._GetAphaBlendOperation(this._alphaBlendEqParams[targetIndex * 2 + 0]),
         };
     }
     _setShaderStage(id) {
@@ -568,28 +590,65 @@ export class WebGPUCacheRenderPipeline {
         }
     }
     _setColorStates() {
-        let colorStates = ((this._writeMask ? 1 : 0) << 22) + (this._colorFormat << 23) + ((this._depthWriteEnabled ? 1 : 0) << 29); // this state has been moved from depthStencilState here because alpha and depth are related (generally when alpha is on, depth write is off and the other way around)
-        if (this._alphaBlendEnabled) {
-            colorStates +=
-                ((this._alphaBlendFuncParams[0] === null ? 2 : alphaBlendFactorToIndex[this._alphaBlendFuncParams[0]]) << 0) +
-                    ((this._alphaBlendFuncParams[1] === null ? 2 : alphaBlendFactorToIndex[this._alphaBlendFuncParams[1]]) << 4) +
-                    ((this._alphaBlendFuncParams[2] === null ? 2 : alphaBlendFactorToIndex[this._alphaBlendFuncParams[2]]) << 8) +
-                    ((this._alphaBlendFuncParams[3] === null ? 2 : alphaBlendFactorToIndex[this._alphaBlendFuncParams[3]]) << 12) +
-                    ((this._alphaBlendEqParams[0] === null ? 1 : this._alphaBlendEqParams[0] - 0x8005) << 16) +
-                    ((this._alphaBlendEqParams[1] === null ? 1 : this._alphaBlendEqParams[1] - 0x8005) << 19);
-        }
-        if (colorStates !== this._colorStates) {
-            this._colorStates = colorStates;
-            this._states[StatePosition.ColorStates] = this._colorStates;
+        // Note that _depthWriteEnabled state has been moved from depthStencilState here because alpha and depth are related (generally when alpha is on, depth write is off and the other way around)
+        // We need 4 color states because we will be grouping 2 blend targets in each state (and WebGPU supports up to 8 targets).
+        // Integers can only be represented exactly in 53 bits with a double, so we can only use 53 bits for each state.
+        // We use 25 bits for each blend target (5 bits for the 2 (color/alpha) equations and 4*5 bits for the 4 factors (src/dst color and src/dst alpha)).
+        // This means that we need 25*2=50 bits to pack 2 blend targets, and we can use the remaining 3 bits for other states (write mask, depth write, color format).
+        // The color format is encoded on 6 bits, so we dispatch it over 3 bits to the last two color states.
+        colorStates[0] = (this._writeMask ? 1 : 0) * 2 ** 53;
+        colorStates[1] = (this._depthWriteEnabled ? 1 : 0) * 2 ** 53;
+        colorStates[2] = (this._colorFormat & 0x07) * 2 ** 50;
+        colorStates[3] = (this._colorFormat & 0x38) * 2 ** 47;
+        let colorStateIndex = 0;
+        let isDirty = false;
+        for (let i = 0; i < 8; i++) {
+            if (this._alphaBlendEnabled[i]) {
+                const index0 = i * 4 + 0;
+                const index1 = i * 4 + 1;
+                const index2 = i * 4 + 2;
+                const index3 = i * 4 + 3;
+                const indexEq0 = i * 2 + 0;
+                const indexEq1 = i * 2 + 1;
+                const eq0 = this._alphaBlendEqParams[indexEq0] === null ? 0 : alphaBlendEquationToIndex[this._alphaBlendEqParams[indexEq0]];
+                const eq1 = this._alphaBlendEqParams[indexEq1] === null ? 0 : alphaBlendEquationToIndex[this._alphaBlendEqParams[indexEq1]];
+                colorStates[colorStateIndex] +=
+                    ((this._alphaBlendFuncParams[index0] === null ? 1 : alphaBlendFactorToIndex[this._alphaBlendFuncParams[index0]]) << 0) +
+                        ((this._alphaBlendFuncParams[index1] === null ? 1 : alphaBlendFactorToIndex[this._alphaBlendFuncParams[index1]]) << 5) +
+                        ((this._alphaBlendFuncParams[index2] === null ? 1 : alphaBlendFactorToIndex[this._alphaBlendFuncParams[index2]]) << 10) +
+                        ((this._alphaBlendFuncParams[index3] === null ? 1 : alphaBlendFactorToIndex[this._alphaBlendFuncParams[index3]]) << 15) +
+                        (eq0 + eq1 * 5) * (1 << 20);
+            }
+            if (i & 1) {
+                isDirty = isDirty || this._states[StatePosition.ColorStates1 + colorStateIndex] !== colorStates[colorStateIndex];
+                this._states[StatePosition.ColorStates1 + colorStateIndex] = colorStates[colorStateIndex];
+                colorStateIndex++;
+            }
+        }
+        if (isDirty) {
             this._isDirty = true;
-            this._stateDirtyLowestIndex = Math.min(this._stateDirtyLowestIndex, StatePosition.ColorStates);
+            this._stateDirtyLowestIndex = Math.min(this._stateDirtyLowestIndex, StatePosition.ColorStates1);
         }
     }
     _setDepthStencilState() {
         const stencilState = !this._stencilEnabled
-            ? 7 /* ALWAYS */ + (1 /* KEEP */ << 3) + (1 /* KEEP */ << 6) + (1 /* KEEP */ << 9)
-            : this._stencilFrontCompare + (this._stencilFrontDepthFailOp << 3) + (this._stencilFrontPassOp << 6) + (this._stencilFrontFailOp << 9);
-        const depthStencilState = this._depthStencilFormat + ((this._depthTestEnabled ? this._depthCompare : 7) /* ALWAYS */ << 6) + (stencilState << 10); // stencil front - stencil back is the same
+            ? 7 /* ALWAYS */ +
+                (1 /* KEEP */ << 3) +
+                (1 /* KEEP */ << 6) +
+                (1 /* KEEP */ << 9) + // front
+                (7 /* ALWAYS */ << 12) +
+                (1 /* KEEP */ << 15) +
+                (1 /* KEEP */ << 18) +
+                (1 /* KEEP */ << 21) // back
+            : this._stencilFrontCompare +
+                (this._stencilFrontDepthFailOp << 3) +
+                (this._stencilFrontPassOp << 6) +
+                (this._stencilFrontFailOp << 9) + // front
+                (this._stencilBackCompare << 12) +
+                (this._stencilBackDepthFailOp << 15) +
+                (this._stencilBackPassOp << 18) +
+                (this._stencilBackFailOp << 21); // back
+        const depthStencilState = this._depthStencilFormat + ((this._depthTestEnabled ? this._depthCompare : 7) /* ALWAYS */ << 6) + stencilState * (1 << 10); // stencil front + back
         if (this._depthStencilState !== depthStencilState) {
             this._depthStencilState = depthStencilState;
             this._states[StatePosition.DepthStencilState] = this._depthStencilState;
@@ -752,12 +811,10 @@ export class WebGPUCacheRenderPipeline {
         const inputStateDescriptor = this._getVertexInputDescriptor(effect);
         const pipelineLayout = this._createPipelineLayout(webgpuPipelineContext);
         const colorStates = [];
-        const alphaBlend = this._getAphaBlendState();
-        const colorBlend = this._getColorBlendState();
         if (this._vertexBuffers) {
             checkNonFloatVertexBuffers(this._vertexBuffers, effect);
         }
-        if (this._mrtAttachments1 > 0) {
+        if (this._mrtAttachments > 0) {
             for (let i = 0; i < this._mrtFormats.length; ++i) {
                 const format = this._mrtFormats[i];
                 if (format) {
@@ -765,6 +822,8 @@ export class WebGPUCacheRenderPipeline {
                         format,
                         writeMask: (this._mrtEnabledMask & (1 << i)) !== 0 ? this._writeMask : 0,
                     };
+                    const alphaBlend = this._getAphaBlendState(i < this._numAlphaBlendTargetsEnabled ? i : 0);
+                    const colorBlend = this._getColorBlendState(i < this._numAlphaBlendTargetsEnabled ? i : 0);
                     if (alphaBlend && colorBlend) {
                         descr.blend = {
                             alpha: alphaBlend,
@@ -784,6 +843,8 @@ export class WebGPUCacheRenderPipeline {
                     format: this._webgpuColorFormat[0],
                     writeMask: this._writeMask,
                 };
+                const alphaBlend = this._getAphaBlendState(0);
+                const colorBlend = this._getColorBlendState(0);
                 if (alphaBlend && colorBlend) {
                     descr.blend = {
                         alpha: alphaBlend,
@@ -796,12 +857,18 @@ export class WebGPUCacheRenderPipeline {
                 colorStates.push(null);
             }
         }
-        const stencilFrontBack = {
+        const stencilFront = {
             compare: WebGPUCacheRenderPipeline._GetCompareFunction(this._stencilEnabled ? this._stencilFrontCompare : 7 /* ALWAYS */),
             depthFailOp: WebGPUCacheRenderPipeline._GetStencilOpFunction(this._stencilEnabled ? this._stencilFrontDepthFailOp : 1 /* KEEP */),
             failOp: WebGPUCacheRenderPipeline._GetStencilOpFunction(this._stencilEnabled ? this._stencilFrontFailOp : 1 /* KEEP */),
             passOp: WebGPUCacheRenderPipeline._GetStencilOpFunction(this._stencilEnabled ? this._stencilFrontPassOp : 1 /* KEEP */),
         };
+        const stencilBack = {
+            compare: WebGPUCacheRenderPipeline._GetCompareFunction(this._stencilEnabled ? this._stencilBackCompare : 7 /* ALWAYS */),
+            depthFailOp: WebGPUCacheRenderPipeline._GetStencilOpFunction(this._stencilEnabled ? this._stencilBackDepthFailOp : 1 /* KEEP */),
+            failOp: WebGPUCacheRenderPipeline._GetStencilOpFunction(this._stencilEnabled ? this._stencilBackFailOp : 1 /* KEEP */),
+            passOp: WebGPUCacheRenderPipeline._GetStencilOpFunction(this._stencilEnabled ? this._stencilBackPassOp : 1 /* KEEP */),
+        };
         const topologyIsTriangle = topology === "triangle-list" /* WebGPUConstants.PrimitiveTopology.TriangleList */ || topology === "triangle-strip" /* WebGPUConstants.PrimitiveTopology.TriangleStrip */;
         let stripIndexFormat = undefined;
         if (topology === "line-strip" /* WebGPUConstants.PrimitiveTopology.LineStrip */ || topology === "triangle-strip" /* WebGPUConstants.PrimitiveTopology.TriangleStrip */) {
@@ -840,8 +907,8 @@ export class WebGPUCacheRenderPipeline {
                     depthWriteEnabled: this._depthWriteEnabled,
                     depthCompare: this._depthTestEnabled ? WebGPUCacheRenderPipeline._GetCompareFunction(this._depthCompare) : "always" /* WebGPUConstants.CompareFunction.Always */,
                     format: this._webgpuDepthStencilFormat,
-                    stencilFront: this._stencilEnabled && depthStencilFormatHasStencil ? stencilFrontBack : undefined,
-                    stencilBack: this._stencilEnabled && depthStencilFormatHasStencil ? stencilFrontBack : undefined,
+                    stencilFront: this._stencilEnabled && depthStencilFormatHasStencil ? stencilFront : undefined,
+                    stencilBack: this._stencilEnabled && depthStencilFormatHasStencil ? stencilBack : undefined,
                     stencilReadMask: this._stencilEnabled && depthStencilFormatHasStencil ? this._stencilReadMask : undefined,
                     stencilWriteMask: this._stencilEnabled && depthStencilFormatHasStencil ? this._stencilWriteMask : undefined,
                     depthBias: this._depthBias,