From 77fefc33457372f9f5a3f2e7806243d8fd81e09f Mon Sep 17 00:00:00 2001 From: zhuxudong Date: Thu, 14 Nov 2024 18:00:37 +0800 Subject: [PATCH 1/3] fix: correct renderQueueType --- packages/core/src/RenderPipeline/RenderQueue.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/core/src/RenderPipeline/RenderQueue.ts b/packages/core/src/RenderPipeline/RenderQueue.ts index 6f4edd876f..bc1653d3b5 100644 --- a/packages/core/src/RenderPipeline/RenderQueue.ts +++ b/packages/core/src/RenderPipeline/RenderQueue.ts @@ -99,8 +99,13 @@ export class RenderQueue { if (shaderPass.getTagValue(pipelineStageKey) !== pipelineStageTagValue) { continue; } + const renderState = shaderPass._renderState ?? renderStates[j]; + + if (shaderPass._renderState) { + renderState._applyRenderQueueByShaderData(shaderPass._renderStateDataMap, materialData); + } - if ((shaderPass._renderState ?? renderStates[j]).renderQueueType !== renderQueueType) { + if (renderState.renderQueueType !== renderQueueType) { continue; } @@ -163,7 +168,6 @@ export class RenderQueue { } } - const renderState = shaderPass._renderState ?? renderStates[j]; renderState._applyStates( engine, renderer.entity.transform._isFrontFaceInvert(), From c9701eebc21e8323569bfb9234eae1a91a70e37f Mon Sep 17 00:00:00 2001 From: GuoLei1990 Date: Mon, 18 Nov 2024 17:41:04 +0800 Subject: [PATCH 2/3] refactor: opt get render queue type logic --- .../core/src/RenderPipeline/BasicRenderPipeline.ts | 7 ++++--- packages/core/src/RenderPipeline/RenderQueue.ts | 12 ++++++++---- packages/core/src/shader/state/RenderState.ts | 11 ++++++++--- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/core/src/RenderPipeline/BasicRenderPipeline.ts b/packages/core/src/RenderPipeline/BasicRenderPipeline.ts index e728b0465b..6d95edbdd2 100644 --- a/packages/core/src/RenderPipeline/BasicRenderPipeline.ts +++ b/packages/core/src/RenderPipeline/BasicRenderPipeline.ts @@ -1,7 +1,6 @@ import { Vector2 } from "@galacean/engine-math"; import { Background } from "../Background"; import { Camera } from "../Camera"; -import { Engine } from "../Engine"; import { BackgroundMode } from "../enums/BackgroundMode"; import { BackgroundTextureFillMode } from "../enums/BackgroundTextureFillMode"; import { CameraClearFlags } from "../enums/CameraClearFlags"; @@ -270,8 +269,10 @@ export class BasicRenderPipeline { const shaderPass = shaderPasses[i]; const renderState = shaderPass._renderState; if (renderState) { - renderState._applyRenderQueueByShaderData(shaderPass._renderStateDataMap, subRenderElement.material.shaderData); - renderQueueType = renderState.renderQueueType; + renderQueueType = renderState._getRenderQueueByShaderData( + shaderPass._renderStateDataMap, + subRenderElement.material.shaderData + ); } else { renderQueueType = renderStates[i].renderQueueType; } diff --git a/packages/core/src/RenderPipeline/RenderQueue.ts b/packages/core/src/RenderPipeline/RenderQueue.ts index bc1653d3b5..5ce8ab36c9 100644 --- a/packages/core/src/RenderPipeline/RenderQueue.ts +++ b/packages/core/src/RenderPipeline/RenderQueue.ts @@ -99,13 +99,17 @@ export class RenderQueue { if (shaderPass.getTagValue(pipelineStageKey) !== pipelineStageTagValue) { continue; } - const renderState = shaderPass._renderState ?? renderStates[j]; - if (shaderPass._renderState) { - renderState._applyRenderQueueByShaderData(shaderPass._renderStateDataMap, materialData); + let renderState = shaderPass._renderState; + let passQueueType: RenderQueueType; + if (renderState) { + passQueueType = renderState._getRenderQueueByShaderData(shaderPass._renderStateDataMap, materialData); + } else { + renderState = renderStates[j]; + passQueueType = renderState.renderQueueType; } - if (renderState.renderQueueType !== renderQueueType) { + if (passQueueType !== renderQueueType) { continue; } diff --git a/packages/core/src/shader/state/RenderState.ts b/packages/core/src/shader/state/RenderState.ts index 27af040234..5435f5c43e 100644 --- a/packages/core/src/shader/state/RenderState.ts +++ b/packages/core/src/shader/state/RenderState.ts @@ -56,10 +56,15 @@ export class RenderState { * @internal * @todo Should merge when we can delete material render state */ - _applyRenderQueueByShaderData(renderStateDataMap: Record, shaderData: ShaderData): void { + _getRenderQueueByShaderData( + renderStateDataMap: Record, + shaderData: ShaderData + ): RenderQueueType { const renderQueueType = renderStateDataMap[RenderStateElementKey.RenderQueueType]; - if (renderQueueType !== undefined) { - this.renderQueueType = shaderData.getFloat(renderQueueType) ?? RenderQueueType.Opaque; + if (renderQueueType === undefined) { + return this.renderQueueType; + } else { + return shaderData.getFloat(renderQueueType) ?? RenderQueueType.Opaque; } } From 02b8e40fb59ab475ce687ffd8c17f665817655b8 Mon Sep 17 00:00:00 2001 From: zhuxudong Date: Mon, 18 Nov 2024 17:45:24 +0800 Subject: [PATCH 3/3] ci: add e2e --- e2e/case/shaderLab-renderState.ts | 122 ++++++++++++++++++ e2e/config.ts | 7 +- .../Material_shaderLab-renderState.jpg | 3 + 3 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 e2e/case/shaderLab-renderState.ts create mode 100644 e2e/fixtures/originImage/Material_shaderLab-renderState.jpg diff --git a/e2e/case/shaderLab-renderState.ts b/e2e/case/shaderLab-renderState.ts new file mode 100644 index 0000000000..007ea3d354 --- /dev/null +++ b/e2e/case/shaderLab-renderState.ts @@ -0,0 +1,122 @@ +/** + * @title ShaderLab RenderState + * @category Material + */ + +import { + BlendFactor, + Camera, + Color, + CullMode, + Logger, + Material, + MeshRenderer, + PrimitiveMesh, + RenderQueueType, + Shader, + WebGLEngine +} from "@galacean/engine"; +import { ShaderLab } from "@galacean/engine-shader-lab"; +import { initScreenshot, updateForE2E } from "./.mockForE2E"; + +const shaderLab = new ShaderLab(); + +const shaderSource = `Shader "Test RenderState" { + SubShader "Default" { + Pass "0" { + DepthState { + WriteEnabled = depthWriteEnabled; + } + + BlendState { + Enabled = blendEnabled; + SourceColorBlendFactor = sourceColorBlendFactor; + DestinationColorBlendFactor = destinationColorBlendFactor; + SourceAlphaBlendFactor = sourceAlphaBlendFactor; + DestinationAlphaBlendFactor = destinationAlphaBlendFactor; + } + + RasterState{ + CullMode = rasterStateCullMode; + } + // RenderQueueType = renderQueueType; + RenderQueueType = Transparent; + + mat4 renderer_MVPMat; + vec4 u_color; + + struct a2v { + vec4 POSITION; + }; + + struct v2f { + vec4 test; + }; + + VertexShader = vert; + FragmentShader = frag; + + v2f vert(a2v v) { + v2f o; + + gl_Position = renderer_MVPMat * v.POSITION; + return o; + } + + void frag(v2f i) { + gl_FragColor = u_color; + } +} + } +}`; + +Logger.enable(); +WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => { + engine.canvas.resizeByClientSize(); + + const shader = Shader.create(shaderSource); + const scene = engine.sceneManager.activeScene; + const rootEntity = scene.createRootEntity(); + + // camera + const cameraEntity = rootEntity.createChild("cameraNode"); + cameraEntity.transform.setPosition(0, 0, 5); + const camera = cameraEntity.addComponent(Camera); + + // sphere + { + const sphere = rootEntity.createChild("sphere"); + sphere.transform.position.x = -1; + const renderer = sphere.addComponent(MeshRenderer); + renderer.mesh = PrimitiveMesh.createSphere(engine); + const material = new Material(engine, shader); + material.shaderData.setColor("u_color", new Color(1, 0, 0, 0.2)); + renderer.setMaterial(material); + } + + // Cuboid + { + const cuboid = rootEntity.createChild("sphere"); + cuboid.transform.position.x = 1; + const renderer = cuboid.addComponent(MeshRenderer); + renderer.mesh = PrimitiveMesh.createCuboid(engine); + const material = new Material(engine, shader); + material.shaderData.setColor("u_color", new Color(1, 0, 0, 0.2)); + renderer.setMaterial(material); + + const shaderData = material.shaderData; + shaderData.setInt("depthWriteEnabled", 0); + shaderData.setInt("blendEnabled", 1); + shaderData.setInt("renderQueueType", RenderQueueType.Transparent); + shaderData.enableMacro("MATERIAL_IS_TRANSPARENT"); + shaderData.setInt("sourceColorBlendFactor", BlendFactor.SourceAlpha); + shaderData.setInt("destinationColorBlendFactor", BlendFactor.OneMinusSourceAlpha); + shaderData.setInt("sourceAlphaBlendFactor", BlendFactor.One); + shaderData.setInt("destinationAlphaBlendFactor", BlendFactor.OneMinusSourceAlpha); + shaderData.setInt("rasterStateCullMode", CullMode.Off); + } + + updateForE2E(engine); + + initScreenshot(engine, camera); +}); diff --git a/e2e/config.ts b/e2e/config.ts index 924f149a77..d9c44ae69e 100644 --- a/e2e/config.ts +++ b/e2e/config.ts @@ -119,6 +119,11 @@ export const E2E_CONFIG = { category: "Material", caseFileName: "material-unlit", threshold: 0.2 + }, + "shaderLab-renderState": { + category: "Material", + caseFileName: "shaderLab-renderState", + threshold: 0.2 } }, Shadow: { @@ -226,5 +231,5 @@ export const E2E_CONFIG = { caseFileName: "project-loader", threshold: 0.4 } - }, + } }; diff --git a/e2e/fixtures/originImage/Material_shaderLab-renderState.jpg b/e2e/fixtures/originImage/Material_shaderLab-renderState.jpg new file mode 100644 index 0000000000..1024a7ab31 --- /dev/null +++ b/e2e/fixtures/originImage/Material_shaderLab-renderState.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4fd5c4fa17580e5c65bd3d8b6d02b0e38777d4079ed693b03d987b5b9ca255f6 +size 27526