fix(GUI): add option to receive post effects (#426)

samples/gui/Sample_POI.ts

@@ -1,11 +1,16 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
 import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene";
-import { Scene3D, PropertyAnimation, Engine3D, Object3D, Object3DUtil, PropertyAnimClip, WrapMode, WorldPanel, BillboardType, TextAnchor, UIImage, UIShadow, UITextField, Vector3, Color, Time } from "@orillusion/core";
+import {
+    Scene3D, PropertyAnimation, Engine3D, Object3D, Object3DUtil, PropertyAnimClip,
+    WrapMode, WorldPanel, BillboardType, TextAnchor, UIImage, UIShadow, UITextField,
+    Vector3, Color, Time, PostProcessingComponent, BloomPost, UIPanel
+} from "@orillusion/core";
 import { GUIUtil } from "@samples/utils/GUIUtil";
 
 class Sample_POI {
     scene: Scene3D;
     panel: WorldPanel;
+    panel2: UIPanel;
     position: Vector3;
 
     async run() {
@@ -18,19 +23,26 @@ class Sample_POI {
 
         await Engine3D.init({ renderLoop: () => { this.loop(); } });
         let param = createSceneParam();
+        param.light.intensity = 5;
         param.camera.distance = 30;
         let exampleScene = createExampleScene(param);
 
         GUIHelp.init();
 
         this.scene = exampleScene.scene;
-        // exampleScene.camera.enableCSM = true;
 
         Engine3D.startRenderView(exampleScene.view);
+        let postCom = this.scene.addComponent(PostProcessingComponent);
+        let bloom = postCom.addPost(BloomPost);
+
+        bloom.luminanceThreshole = 1;
+        bloom.bloomIntensity = 0.8;
 
         await this.initScene();
         this.initDuckPOI();
         this.initScenePOI();
+        this.panel2.renderer.isRecievePostEffectUI = true;
+        GUIHelp.add(this.panel2.renderer, 'isRecievePostEffectUI');
     }
 
     private modelContainer: Object3D;
@@ -73,7 +85,7 @@ class Sample_POI {
         return animation;
     }
 
-    private initDuckPOI() {
+    private initDuckPOI(): UIPanel {
         let canvas = this.scene.view.enableUICanvas();
         //panel
         this.panel = new Object3D().addComponent(WorldPanel);
@@ -99,14 +111,16 @@ class Sample_POI {
         text.fontSize = 4;
         text.color = new Color(0, 0, 0, 1);
         text.alignment = TextAnchor.MiddleCenter;
-        GUIUtil.renderUIPanel(this.panel, true);
+        GUIUtil.renderUIPanel(this.panel, false);
+        return this.panel;
     }
 
     private sceneText: UITextField;
-    private initScenePOI() {
+    private initScenePOI(): UIPanel {
         let canvas = this.scene.view.enableUICanvas();
         //panel
         let panel = new Object3D().addComponent(WorldPanel);
+        this.panel2 = panel;
         panel.cullMode = "none";
         //add to canvas
         canvas.addChild(panel.object3D);
@@ -123,11 +137,12 @@ class Sample_POI {
         text.uiTransform.resize(80, 16);
         text.text = this.title;
         text.fontSize = 10;
-        text.color = new Color(0.5, 1.0, 0.5, 1.0);
+        text.color = new Color(0.5, 1.5, 0.5, 1.0);
         text.alignment = TextAnchor.MiddleLeft;
 
         panelRoot.addComponent(UIShadow).shadowOffset.multiplyScaler(0.2);
         this.sceneText = text;
+        return panel;
     }
 
     private charCount = 0;

src/components/gui/core/GUIMaterial.ts

@@ -29,32 +29,38 @@ export class GUIMaterial extends Material {
 
         let newShader = new Shader();
 
+        // colorPass.transparent = true;
+        // colorPass.receiveEnv = false;
+
+        this.addColorPass(newShader, PassType.COLOR, space);
+        this.addColorPass(newShader, PassType.UI, space);
+        this.shader = newShader;
+    }
+
+    private addColorPass(shader: Shader, passType: PassType, space: GUISpace) {
         let shaderKey: string = space == GUISpace.View ? 'GUI_shader_view' : 'GUI_shader_world';
-        let colorPass = new RenderShaderPass(shaderKey, shaderKey);
-        colorPass.passType = PassType.COLOR;
-        colorPass.setShaderEntry(`VertMain`, `FragMain`);
+        let shaderPass = new RenderShaderPass(shaderKey, shaderKey);
+        shaderPass.passType = passType;
+        shaderPass.setShaderEntry(`VertMain`, `FragMain`);
 
-        colorPass.setUniformVector4('scissorRect', new Vector4());
-        colorPass.setUniformVector2('screenSize', this._screenSize);
-        colorPass.setUniformFloat('scissorCornerRadius', 0.0);
-        colorPass.setUniformFloat('scissorFadeOutSize', 0.0);
+        shaderPass.setUniformVector4('scissorRect', new Vector4());
+        shaderPass.setUniformVector2('screenSize', this._screenSize);
+        shaderPass.setUniformFloat('scissorCornerRadius', 0.0);
+        shaderPass.setUniformFloat('scissorFadeOutSize', 0.0);
 
-        colorPass.setUniformFloat('pixelRatio', 1);
-        colorPass.setUniformVector3('v3', Vector3.ZERO);
+        shaderPass.setUniformFloat('pixelRatio', 1);
+        shaderPass.setUniformVector3('v3', Vector3.ZERO);
 
-        let shaderState = colorPass.shaderState;
+        let shaderState = shaderPass.shaderState;
         // shaderState.useZ = false;
         shaderState.depthWriteEnabled = false;
-        colorPass.blendMode = BlendMode.ALPHA;
-        colorPass.depthCompare = space == GUISpace.View ? GPUCompareFunction.always : GPUCompareFunction.less_equal;
-        colorPass.cullMode = GPUCullMode.back;
-        newShader.addRenderPass(colorPass);
-        // colorPass.transparent = true;
-        // colorPass.receiveEnv = false;
-
-        this.shader = newShader;
+        shaderPass.blendMode = BlendMode.NORMAL;
+        shaderPass.depthCompare = space == GUISpace.View ? GPUCompareFunction.always : GPUCompareFunction.less_equal;
+        shaderPass.cullMode = GPUCullMode.back;
+        shader.addRenderPass(shaderPass);
     }
 
+
     public setPanelRatio(pixelRatio: number) {
         this.shader.setUniformFloat('pixelRatio', pixelRatio);
     }

src/components/gui/core/GUIShader.ts

@@ -150,14 +150,18 @@ export class GUIShader {
             }else if(texId == 6){            
                 ${this.sampleTexture(6)}
             }
-            color *= vColor4;
-            color.a *= scissorAlpha;
+            var rgb = color.rgb;
+            var alpha = color.a;
+
+            rgb *= vColor4.rgb;
+            alpha *= vColor4.a;
+            alpha *= scissorAlpha;
             if(color.a < EPSILON)
             { 
                 discard;
             }
 
-            fragmentOutput.color = color;
+            fragmentOutput.color = vec4<f32>(rgb, alpha);
             return fragmentOutput ;
         }`;
 

src/components/gui/uiComponents/UIPanel.ts

@@ -93,6 +93,10 @@ export class UIPanel extends UIImage {
         return this._maxCount;
     }
 
+    public get renderer() {
+        return this._uiRenderer;
+    }
+
     public set billboard(type: BillboardType) {
         if (this.space == GUISpace.View) {
             type = BillboardType.None;

src/components/renderer/RenderNode.ts

@@ -54,6 +54,7 @@ export class RenderNode extends ComponentBase {
     protected _passInit: Map<PassType, boolean> = new Map<PassType, boolean>();
     public isRenderOrderChange?: boolean;
     public needSortOnCameraZ?: boolean;
+    public isRecievePostEffectUI?: boolean;
     protected _octreeBinder: { octree: Octree, entity: OctreeEntity };
 
     /**
@@ -102,6 +103,7 @@ export class RenderNode extends ComponentBase {
         this.castShadow = from.castShadow;
         this.castGI = from.castGI;
         this.rendererMask = from.rendererMask;
+        this.isRecievePostEffectUI = from.isRecievePostEffectUI;
         return this;
     }
 

src/gfx/graphics/webGpu/descriptor/WebGPUDescriptorCreator.ts

@@ -4,6 +4,7 @@ import { GPUTextureFormat } from '../WebGPUConst';
 import { webGPUContext } from '../Context3D';
 import { RendererPassState } from '../../../renderJob/passRenderer/state/RendererPassState';
 import { CResizeEvent } from '../../../../event/CResizeEvent';
+import { GBufferFrame } from '../../../renderJob/frame/GBufferFrame';
 /**
  * @internal
  * @author sirxu
@@ -30,8 +31,14 @@ export class WebGPUDescriptorCreator {
         if (rtFrame && rtFrame.renderTargets.length > 0) {
             rps.renderTargets = rtFrame.renderTargets;
             rps.rtTextureDescriptors = rtFrame.rtDescriptors;
-
             rps.renderPassDescriptor = WebGPUDescriptorCreator.getRenderPassDescriptor(rps);
+            if (rps.renderPassDescriptor.depthStencilAttachment) {
+                rps.renderPassDescriptor.depthStencilAttachment.depthLoadOp = rtFrame.depthLoadOp;
+            }
+            if (loadOp == 'load' && rtFrame?.renderTargets[0] && rtFrame.renderTargets[0].name.startsWith(GBufferFrame.gui_GBuffer)) {
+                rps.renderPassDescriptor.colorAttachments[0].loadOp = 'load'
+            }
+            rps.depthLoadOp = rtFrame.depthLoadOp;
             rps.renderBundleEncoderDescriptor = WebGPUDescriptorCreator.getRenderBundleDescriptor(rps);
             rps.renderTargetTextures = [];
             for (let i = 0; i < rtFrame.renderTargets.length; i++) {

src/gfx/renderJob/frame/GBufferFrame.ts

@@ -10,6 +10,7 @@ import { RTResourceMap } from "./RTResourceMap";
 export class GBufferFrame extends RTFrame {
     public static colorPass_GBuffer: string = "ColorPassGBuffer";
     public static reflections_GBuffer: string = "reflections_GBuffer";
+    public static gui_GBuffer: string = "gui_GBuffer";
     public static gBufferMap: Map<string, GBufferFrame> = new Map<string, GBufferFrame>();
     // public static bufferTexture: boolean = false;
 
@@ -20,7 +21,7 @@ export class GBufferFrame extends RTFrame {
         super([], []);
     }
 
-    createGBuffer(key: string, rtWidth: number, rtHeight: number, autoResize: boolean = true, outColor: boolean = true) {
+    createGBuffer(key: string, rtWidth: number, rtHeight: number, autoResize: boolean = true, outColor: boolean = true, depthTexture?: RenderTexture) {
         let attachments = this.renderTargets;
         let reDescriptors = this.rtDescriptors;
         if (outColor) {
@@ -34,11 +35,12 @@ export class GBufferFrame extends RTFrame {
         this._compressGBufferTex = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.rgba32float, false, undefined, 1, 0, true, true);
         attachments.push(this._compressGBufferTex);
 
-        this.depthTexture = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.depth24plus, false, undefined, 1, 0, true, true);
-        this.depthTexture.name = key + `_depthTexture`;
-
-        let depthDec = new RTDescriptor();
-        depthDec.loadOp = `load`;
+        if (depthTexture) {
+            this.depthTexture = depthTexture;
+        } else {
+            this.depthTexture = new RenderTexture(rtWidth, rtHeight, GPUTextureFormat.depth24plus, false, undefined, 1, 0, true, true);
+            this.depthTexture.name = key + `_depthTexture`;
+        }
 
         let compressGBufferRTDes: RTDescriptor;
         compressGBufferRTDes = new RTDescriptor();
@@ -65,7 +67,7 @@ export class GBufferFrame extends RTFrame {
     /**
      * @internal
      */
-    public static getGBufferFrame(key: string, fixedWidth: number = 0, fixedHeight: number = 0, outColor: boolean = true): GBufferFrame {
+    public static getGBufferFrame(key: string, fixedWidth: number = 0, fixedHeight: number = 0, outColor: boolean = true, depthTexture?: RenderTexture): GBufferFrame {
         let gBuffer: GBufferFrame;
         if (!GBufferFrame.gBufferMap.has(key)) {
             gBuffer = new GBufferFrame();
@@ -76,7 +78,8 @@ export class GBufferFrame extends RTFrame {
                 fixedWidth == 0 ? size[0] : fixedWidth,
                 fixedHeight == 0 ? size[1] : fixedHeight,
                 fixedWidth != 0 && fixedHeight != 0,
-                outColor
+                outColor,
+                depthTexture
             );
             GBufferFrame.gBufferMap.set(key, gBuffer);
         } else {
@@ -85,6 +88,13 @@ export class GBufferFrame extends RTFrame {
         return gBuffer;
     }
 
+
+    public static getGUIBufferFrame() {
+        let colorRTFrame = this.getGBufferFrame(this.colorPass_GBuffer);
+        let rtFrame = GBufferFrame.getGBufferFrame(GBufferFrame.gui_GBuffer, 0, 0, true, colorRTFrame.depthTexture);
+        return rtFrame;
+    }
+
     public clone() {
         let gBufferFrame = new GBufferFrame();
         this.clone2Frame(gBufferFrame);

src/gfx/renderJob/jobs/ForwardRenderJob.ts

@@ -9,6 +9,7 @@ import { webGPUContext } from '../../graphics/webGpu/Context3D';
 import { RTResourceConfig } from '../config/RTResourceConfig';
 import { RTResourceMap } from '../frame/RTResourceMap';
 import { GPUTextureFormat } from '../../graphics/webGpu/WebGPUConst';
+import { GUIPassRenderer } from '../passRenderer/color/GUIPassRenderer';
 /**
  * Forward+
  * Every time a forward rendering is performed, 
@@ -25,10 +26,9 @@ export class ForwardRenderJob extends RendererJob {
 
     public start(): void {
         super.start();
-
-        let rtFrame = GBufferFrame.getGBufferFrame("ColorPassGBuffer");
         {
             let colorPassRenderer = new ColorPassRenderer();
+            let rtFrame = GBufferFrame.getGBufferFrame(GBufferFrame.colorPass_GBuffer);
 
             if (Engine3D.setting.render.zPrePass) {
                 rtFrame.zPreTexture = this.depthPassRenderer.rendererPassState.depthTexture;
@@ -50,6 +50,13 @@ export class ForwardRenderJob extends RendererJob {
             this.rendererMap.addRenderer(colorPassRenderer);
         }
 
+        {
+            let guiFrame = GBufferFrame.getGUIBufferFrame();
+            let guiPassRenderer = new GUIPassRenderer();
+            guiPassRenderer.setRenderStates(guiFrame);
+            this.rendererMap.addRenderer(guiPassRenderer);
+        }
+
         if (Engine3D.setting.render.debug) {
             this.debug();
         }

src/gfx/renderJob/jobs/RendererJob.ts

@@ -231,17 +231,24 @@ export class RendererJob {
             this.ddgiProbeRenderer.render(view, this.occlusionSystem);
         }
 
+
         let passList = this.rendererMap.getAllPassRenderer();
         for (let i = 0; i < passList.length; i++) {
             const renderer = passList[i];
             renderer.compute(view, this.occlusionSystem);
             renderer.render(view, this.occlusionSystem, this.clusterLightingRender.clusterLightingBuffer, false);
         }
 
-        if (this.postRenderer && this.postRenderer.postList.size > 0) {
-            this.postRenderer.render(view);
-        }
+        this.postRenderer.render(view);
+
+        //GUI
+        let guiRenderer = this.rendererMap.getRenderer(PassType.UI);
+        guiRenderer.compute(view, this.occlusionSystem);
+        guiRenderer.render(view, this.occlusionSystem, this.clusterLightingRender.clusterLightingBuffer, false);
 
+        //output
+        let lastTexture = GBufferFrame.getGUIBufferFrame().getColorTexture();
+        this.postRenderer.presentContent(view, lastTexture);
     }
 
     public debug() {

src/gfx/renderJob/passRenderer/RenderContext.ts

@@ -58,6 +58,12 @@ export class RenderContext {
         this.beginNewEncoder();
     }
 
+    public specialtRenderPass() {
+        this.beginContinueRendererPassState('load', 'load');
+        this.begineNewCommand();
+        this.beginNewEncoder();
+    }
+
     public endRenderPass() {
         this.endEncoder();
         this.endCommand();

src/gfx/renderJob/passRenderer/color/ColorPassRenderer.ts

@@ -1,17 +1,16 @@
-import { GlobalBindGroup } from "../../../..";
 import { Engine3D } from "../../../../Engine3D";
 import { RenderNode } from "../../../../components/renderer/RenderNode";
 import { View3D } from "../../../../core/View3D";
 import { ProfilerUtil } from "../../../../util/ProfilerUtil";
+import { GlobalBindGroup } from "../../../graphics/webGpu/core/bindGroups/GlobalBindGroup";
 import { GPUContext } from "../../GPUContext";
 import { EntityCollect } from "../../collect/EntityCollect";
-import { RTResourceConfig } from "../../config/RTResourceConfig";
-import { RTResourceMap } from "../../frame/RTResourceMap";
 import { OcclusionSystem } from "../../occlusion/OcclusionSystem";
 import { RenderContext } from "../RenderContext";
 import { RendererBase } from "../RendererBase";
 import { ClusterLightingBuffer } from "../cluster/ClusterLightingBuffer";
 import { PassType } from "../state/PassType";
+import { RendererMask } from "../state/RendererMask";
 
 /**
  *  @internal
@@ -133,7 +132,8 @@ export class ColorPassRenderer extends RendererBase {
                     continue;
                 if (!renderNode.enable)
                     continue;
-
+                if (renderNode.hasMask(RendererMask.UI) && !renderNode.isRecievePostEffectUI)
+                    continue;
                 if (!renderNode.preInit(this._rendererType)) {
                     renderNode.nodeUpdate(view, this._rendererType, this.rendererPassState, clusterLightingBuffer);
                 }