Rendering Engine: Fix blending when blending parameters per target are not supported

packages/dev/core/src/Engines/abstractEngine.ts

@@ -210,7 +210,7 @@ export abstract class AbstractEngine {
     /** @internal */
     public _stencilState = new StencilState();
     /** @internal */
-    public _alphaState = new AlphaState();
+    public _alphaState = new AlphaState(false);
     /** @internal */
     public _alphaMode = Array(8).fill(-1);
     /** @internal */

packages/dev/core/src/Engines/thinEngine.ts

@@ -53,6 +53,7 @@ import { Effect } from "../Materials/effect";
 import { _ConcatenateShader, _GetGlobalDefines } from "./abstractEngine.functions";
 import { resetCachedPipeline } from "core/Materials/effect.functions";
 import { HasStencilAspect, IsDepthTexture } from "core/Materials/Textures/textureHelper.functions";
+import { AlphaState } from "../States/alphaCullingState";
 
 /**
  * Keeps track of all the buffer info used in engine.
@@ -628,6 +629,8 @@ export class ThinEngine extends AbstractEngine {
         const oesDrawBuffersIndexed = this._gl.getExtension("OES_draw_buffers_indexed");
         this._caps.blendParametersPerTarget = oesDrawBuffersIndexed ? true : false;
 
+        this._alphaState = new AlphaState(this._caps.blendParametersPerTarget);
+
         if (oesDrawBuffersIndexed) {
             this._gl.blendEquationSeparateIndexed = oesDrawBuffersIndexed.blendEquationSeparateiOES.bind(oesDrawBuffersIndexed);
             this._gl.blendEquationIndexed = oesDrawBuffersIndexed.blendEquationiOES.bind(oesDrawBuffersIndexed);

packages/dev/core/src/Engines/webgpuEngine.ts

@@ -55,6 +55,7 @@ import type { InternalTextureCreationOptions, TextureSize } from "../Materials/T
 import { WebGPUSnapshotRendering } from "./WebGPU/webgpuSnapshotRendering";
 import type { WebGPUDataBuffer } from "../Meshes/WebGPU/webgpuDataBuffer";
 import type { WebGPURenderTargetWrapper } from "./WebGPU/webgpuRenderTargetWrapper";
+import { AlphaState } from "../States/alphaCullingState";
 
 import "../Buffers/buffer.align";
 
@@ -947,6 +948,8 @@ export class WebGPUEngine extends ThinWebGPUEngine {
             _checkNonFloatVertexBuffersDontRecreatePipelineContext: true,
             _collectUbosUpdatedInFrame: false,
         };
+
+        this._alphaState = new AlphaState(this._caps.blendParametersPerTarget);
     }
 
     private _initializeContextAndSwapChain(): void {

packages/dev/core/src/States/alphaCullingState.ts

@@ -19,8 +19,9 @@ export class AlphaState {
 
     /**
      * Initializes the state.
+     * @param _supportBlendParametersPerTarget - Whether blend parameters per target is supported
      */
-    public constructor() {
+    public constructor(private _supportBlendParametersPerTarget: boolean) {
         this.reset();
     }
 
@@ -117,7 +118,7 @@ export class AlphaState {
 
         // Alpha blend
         if (this._isAlphaBlendDirty) {
-            if (numTargets === 1) {
+            if (numTargets === 1 || !this._supportBlendParametersPerTarget) {
                 if (this._alphaBlend[0]) {
                     gl.enable(gl.BLEND);
                 } else {
@@ -140,7 +141,7 @@ export class AlphaState {
 
         // Alpha function
         if (this._isBlendFunctionParametersDirty) {
-            if (numTargets === 1) {
+            if (numTargets === 1 || !this._supportBlendParametersPerTarget) {
                 gl.blendFuncSeparate(
                     <number>this._blendFunctionParameters[0],
                     <number>this._blendFunctionParameters[1],
@@ -165,7 +166,7 @@ export class AlphaState {
 
         // Alpha equation
         if (this._isBlendEquationParametersDirty) {
-            if (numTargets === 1) {
+            if (numTargets === 1 || !this._supportBlendParametersPerTarget) {
                 gl.blendEquationSeparate(<number>this._blendEquationParameters[0], <number>this._blendEquationParameters[1]);
             } else {
                 const gl2 = gl as WebGL2RenderingContext;