feat(webgl): Make the depthWriteEnabled flag on material configs work (…

…#943)

src/rendering/renderers/webGl/WebGlRenderer.js

@@ -71,6 +71,8 @@ export class WebGlRenderer extends Renderer {
 	/** @type {number?} */
 	#currentBlendDstAlpha = null;
 
+	#depthMaskEnabled = true;
+
 	/**
 	 * This is a helper type for registering callbacks on CustomMaterialData and should not be called on the renderer directly.
 	 * Calling this directly will lead to runtime errors.
@@ -183,6 +185,7 @@ export class WebGlRenderer extends Renderer {
 
 		gl.viewport(0, this.#canvas.height - domTarget.height, domTarget.width, domTarget.height);
 		gl.clearColor(0.0, 0.0, 0.0, 0.0);
+		this.#setDepthMaskEnabled(true);
 		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 		gl.enable(gl.DEPTH_TEST);
 		gl.depthFunc(gl.LESS);
@@ -254,6 +257,8 @@ export class WebGlRenderer extends Renderer {
 					gl.uniformMatrix4fv(viewUniformLocations.viewProjectionMatrix, false, new Float32Array(viewProjectionMatrix.getFlatArrayBuffer("f32").buffer));
 				}
 
+				this.#setDepthMaskEnabled(materialConfig.depthWriteEnabled);
+
 				for (const [material, meshRenderDatas] of materialRenderData.materials) {
 					const cullModeData = material.getMappedPropertyForMapType(WebGlMaterialMapType, "cullMode");
 					const cullMode = cullModeData?.value ?? "back";
@@ -482,4 +487,14 @@ Material.setProperty("${mappedData.mappedName}", customData)`;
 			}
 		}
 	}
+
+	/**
+	 * @param {boolean} depthMaskEnabled
+	 */
+	#setDepthMaskEnabled(depthMaskEnabled) {
+		if (depthMaskEnabled == this.#depthMaskEnabled) return;
+		this.#depthMaskEnabled = depthMaskEnabled;
+		const gl = this.getWebGlContext();
+		gl.depthMask(depthMaskEnabled);
+	}
 }

test/unit/src/rendering/renderers/webGl/WebGlRenderer.test.js

@@ -576,3 +576,33 @@ Deno.test({
 		});
 	},
 });
+
+Deno.test({
+	name: "Materials with depthWriteEnabled false disable the depth mask",
+	async fn() {
+		await runWithWebGlMocksAsync(async () => {
+			const { scene, domTarget, camComponent, commandLog } = await basicRendererSetup();
+
+			const vertexState = createVertexState();
+
+			const { material, materialConfig } = createMaterial();
+			materialConfig.depthWriteEnabled = false;
+			createCubeEntity({ scene, material, vertexState });
+
+			domTarget.render(camComponent);
+			assertLogEquals(commandLog.getFilteredCommands("depthMask"), [{ name: "depthMask", args: [false] }]);
+
+			commandLog.clear();
+
+			domTarget.render(camComponent);
+			assertLogEquals(commandLog.getFilteredCommands("depthMask", "viewport", "clear"), [
+				{ name: "viewport" },
+				// The depthMask needs to be enabled otherwise the gl.clear(gl.DEPTH_BUFFER_BIT)
+				// command won't have any effect
+				{ name: "depthMask", args: [true] },
+				{ name: "clear" },
+				{ name: "depthMask", args: [false] },
+			]);
+		});
+	},
+});