Set transparent if canvas uses alpha

Author: vanruesc

src/materials/EffectMaterial.ts

@@ -1,4 +1,4 @@
-import { IUniform, Texture, Uniform } from "three";
+import { IUniform, NormalBlending, Texture, Uniform } from "three";
 import { EffectShaderSection } from "../enums/EffectShaderSection.js";
 import { EffectShaderSection as Section } from "../enums/EffectShaderSection.js";
 import { ShaderDataTracker } from "../utils/ShaderDataTracker.js";
@@ -29,6 +29,7 @@ export class EffectMaterial extends FullscreenMaterial {
 
 		super({
 			name: "EffectMaterial",
+			blending: NormalBlending,
 			defines: {
 				COLOR_SPACE_CONVERSION: true
 			},

src/passes/EffectPass.ts

@@ -1,4 +1,4 @@
-import { Event as Event3, Material, Texture } from "three";
+import { Event as Event3, Material, Texture, WebGLRenderer } from "three";
 import { Pass } from "../core/Pass.js";
 import { Effect } from "../effects/Effect.js";
 import { GBuffer } from "../enums/GBuffer.js";
@@ -76,6 +76,19 @@ export class EffectPass extends Pass<EffectMaterial> {
 
 	}
 
+	override get renderer(): WebGLRenderer | null {
+
+		return super.renderer;
+
+	}
+
+	override set renderer(value: WebGLRenderer | null) {
+
+		super.renderer = value;
+		this.updateMaterialTransparency();
+
+	}
+
 	override get subpasses(): readonly Pass<Material | null>[] {
 
 		return super.subpasses;
@@ -188,6 +201,7 @@ export class EffectPass extends Pass<EffectMaterial> {
 
 		// Get the material for the current effect combination.
 		this.fullscreenMaterial = this.effectMaterialManager.getMaterial(this.effects);
+		this.updateMaterialTransparency();
 
 		// Pick up new materials.
 		for(const material of this.effectMaterialManager.materials) {
@@ -198,6 +212,24 @@ export class EffectPass extends Pass<EffectMaterial> {
 
 	}
 
+	/**
+	 * Updates the fullscreen material to use alpha blending if needed.
+	 */
+
+	private updateMaterialTransparency(): void {
+
+		if(this.renderer === null) {
+
+			return;
+
+		}
+
+		const alpha = this.renderer.getContext().getContextAttributes()?.alpha ?? false;
+		const outputBuffer = this.output.defaultBuffer?.value ?? null;
+		this.fullscreenMaterial.transparent = (alpha && outputBuffer === null);
+
+	}
+
 	/**
 	 * Updates the G-Buffer struct uniform.
 	 */
@@ -340,6 +372,12 @@ export class EffectPass extends Pass<EffectMaterial> {
 
 	}
 
+	protected override onOutputChange(): void {
+
+		this.updateMaterialTransparency();
+
+	}
+
 	override checkRequirements(): void {
 
 		for(const effect of this.effects) {