FrameGraph: add support for OIT (#17553)

Also in this PR:
* Add new properties to the object renderer to render sublists of meshes
(`renderDepthOnlyMeshes`, `renderOpaqueMeshes`, `renderAlphaTestMeshes`
and `renderTransparentMeshes`)
* Add new `initialize()` function to the `Pass` class

Author: Popov72

packages/dev/core/src/FrameGraph/Node/Blocks/PostProcesses/baseWithPropertiesPostProcessBlock.ts

@@ -95,7 +95,7 @@ export class NodeRenderGraphBaseWithPropertiesPostProcessBlock extends NodeRende
     }
 
     /** The viewport to use. */
-    @editableInPropertyPage("Viewport", PropertyTypeForEdition.Viewport, "BASE PROPERTIES")
+    @editableInPropertyPage("    Viewport", PropertyTypeForEdition.Viewport, "BASE PROPERTIES")
     public get viewport(): IViewportLike {
         return this._viewport;
     }

packages/dev/core/src/FrameGraph/Node/Blocks/Rendering/baseObjectRendererBlock.ts

@@ -94,6 +94,11 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
         state.disableShadows = this.disableShadows;
         state.renderInLinearSpace = this.renderInLinearSpace;
         state.renderMeshes = this.renderMeshes;
+        state.renderDepthOnlyMeshes = this.renderDepthOnlyMeshes;
+        state.renderOpaqueMeshes = this.renderOpaqueMeshes;
+        state.renderAlphaTestMeshes = this.renderAlphaTestMeshes;
+        state.renderTransparentMeshes = this.renderTransparentMeshes;
+        state.useOITForTransparentMeshes = this.useOITForTransparentMeshes;
         state.renderParticles = this.renderParticles;
         state.renderSprites = this.renderSprites;
         state.forceLayerMaskCheck = this.forceLayerMaskCheck;
@@ -109,6 +114,11 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
         this.disableShadows = state.disableShadows;
         this.renderInLinearSpace = state.renderInLinearSpace;
         this.renderMeshes = state.renderMeshes;
+        this.renderDepthOnlyMeshes = state.renderDepthOnlyMeshes;
+        this.renderOpaqueMeshes = state.renderOpaqueMeshes;
+        this.renderAlphaTestMeshes = state.renderAlphaTestMeshes;
+        this.renderTransparentMeshes = state.renderTransparentMeshes;
+        this.useOITForTransparentMeshes = state.useOITForTransparentMeshes;
         this.renderParticles = state.renderParticles;
         this.renderSprites = state.renderSprites;
         this.forceLayerMaskCheck = state.forceLayerMaskCheck;
@@ -129,7 +139,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** Indicates that this object renderer is the main object renderer of the frame graph. */
-    @editableInPropertyPage("Is main object renderer", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Is main object renderer", PropertyTypeForEdition.Boolean, "GENERAL")
     public get isMainObjectRenderer() {
         return this._frameGraphTask.isMainObjectRenderer;
     }
@@ -139,7 +149,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** Indicates if depth testing must be enabled or disabled */
-    @editableInPropertyPage("Depth test", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Depth test", PropertyTypeForEdition.Boolean, "GENERAL")
     public get depthTest() {
         return this._frameGraphTask.depthTest;
     }
@@ -149,7 +159,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** Indicates if depth writing must be enabled or disabled */
-    @editableInPropertyPage("Depth write", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Depth write", PropertyTypeForEdition.Boolean, "GENERAL")
     public get depthWrite() {
         return this._frameGraphTask.depthWrite;
     }
@@ -159,7 +169,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** Indicates if meshes should be rendered */
-    @editableInPropertyPage("Render meshes", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Render meshes", PropertyTypeForEdition.Boolean, "RENDERING")
     public get renderMeshes() {
         return this._frameGraphTask.renderMeshes;
     }
@@ -168,8 +178,70 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
         this._frameGraphTask.renderMeshes = value;
     }
 
+    /** Indicates if depth-only meshes should be rendered */
+    @editableInPropertyPage("    Render depth-only meshes", PropertyTypeForEdition.Boolean, "RENDERING")
+    public get renderDepthOnlyMeshes() {
+        return this._frameGraphTask.renderDepthOnlyMeshes;
+    }
+
+    public set renderDepthOnlyMeshes(value: boolean) {
+        this._frameGraphTask.renderDepthOnlyMeshes = value;
+    }
+
+    /** Indicates if opaque meshes should be rendered */
+    @editableInPropertyPage("    Render opaque meshes", PropertyTypeForEdition.Boolean, "RENDERING")
+    public get renderOpaqueMeshes() {
+        return this._frameGraphTask.renderOpaqueMeshes;
+    }
+
+    public set renderOpaqueMeshes(value: boolean) {
+        this._frameGraphTask.renderOpaqueMeshes = value;
+    }
+
+    /** Indicates if alpha tested meshes should be rendered */
+    @editableInPropertyPage("    Render alpha test meshes", PropertyTypeForEdition.Boolean, "RENDERING")
+    public get renderAlphaTestMeshes() {
+        return this._frameGraphTask.renderAlphaTestMeshes;
+    }
+
+    public set renderAlphaTestMeshes(value: boolean) {
+        this._frameGraphTask.renderAlphaTestMeshes = value;
+    }
+
+    /** Indicates if transparent meshes should be rendered */
+    @editableInPropertyPage("    Render transparent meshes", PropertyTypeForEdition.Boolean, "RENDERING")
+    public get renderTransparentMeshes() {
+        return this._frameGraphTask.renderTransparentMeshes;
+    }
+
+    public set renderTransparentMeshes(value: boolean) {
+        this._frameGraphTask.renderTransparentMeshes = value;
+    }
+
+    /** Indicates if use of Order Independent Transparency (OIT) for transparent meshes should be enabled */
+    @editableInPropertyPage("        Use OIT for transparent meshes", PropertyTypeForEdition.Boolean, "RENDERING")
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    public get useOITForTransparentMeshes() {
+        return this._frameGraphTask.useOITForTransparentMeshes;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    public set useOITForTransparentMeshes(value: boolean) {
+        this._frameGraphTask.useOITForTransparentMeshes = value;
+    }
+
+    /** Defines the number of passes to use for Order Independent Transparency */
+    @editableInPropertyPage("            Pass count", PropertyTypeForEdition.Int, "RENDERING", { min: 1, max: 20 })
+    public get oitPassCount(): number {
+        return this._frameGraphTask.oitPassCount;
+    }
+
+    public set oitPassCount(value: number) {
+        this._frameGraphTask.oitPassCount = value;
+    }
+
     /** Indicates if particles should be rendered */
-    @editableInPropertyPage("Render particles", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Render particles", PropertyTypeForEdition.Boolean, "RENDERING")
     public get renderParticles() {
         return this._frameGraphTask.renderParticles;
     }
@@ -179,7 +251,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** Indicates if sprites should be rendered */
-    @editableInPropertyPage("Render sprites", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Render sprites", PropertyTypeForEdition.Boolean, "RENDERING")
     public get renderSprites() {
         return this._frameGraphTask.renderSprites;
     }
@@ -189,7 +261,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** Indicates if layer mask check must be forced */
-    @editableInPropertyPage("Force layer mask check", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Force layer mask check", PropertyTypeForEdition.Boolean, "GENERAL")
     public get forceLayerMaskCheck() {
         return this._frameGraphTask.forceLayerMaskCheck;
     }
@@ -199,7 +271,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** Indicates if bounding boxes should be rendered */
-    @editableInPropertyPage("Enable bounding box rendering", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Render bounding boxes", PropertyTypeForEdition.Boolean, "RENDERING")
     public get enableBoundingBoxRendering() {
         return this._frameGraphTask.enableBoundingBoxRendering;
     }
@@ -209,7 +281,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** Indicates if outlines/overlays should be rendered */
-    @editableInPropertyPage("Enable outline/overlay rendering", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Render outlines/overlays", PropertyTypeForEdition.Boolean, "RENDERING")
     public get enableOutlineRendering() {
         return this._frameGraphTask.enableOutlineRendering;
     }
@@ -219,7 +291,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** Indicates if shadows must be enabled or disabled */
-    @editableInPropertyPage("Disable shadows", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Disable shadows", PropertyTypeForEdition.Boolean, "GENERAL")
     public get disableShadows() {
         return this._frameGraphTask.disableShadows;
     }
@@ -229,7 +301,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** If image processing should be disabled */
-    @editableInPropertyPage("Disable image processing", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Disable image processing", PropertyTypeForEdition.Boolean, "GENERAL")
     public get renderInLinearSpace() {
         return this._frameGraphTask.disableImageProcessing;
     }
@@ -239,7 +311,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** True (default) to not change the aspect ratio of the scene in the RTT */
-    @editableInPropertyPage("Do not change aspect ratio", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Do not change aspect ratio", PropertyTypeForEdition.Boolean, "GENERAL")
     public get doNotChangeAspectRatio() {
         return this._frameGraphTask.objectRenderer.options.doNotChangeAspectRatio;
     }
@@ -249,7 +321,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** True (default) to enable clustered lights */
-    @editableInPropertyPage("Enable clustered lights", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Enable clustered lights", PropertyTypeForEdition.Boolean, "GENERAL")
     public get enableClusteredLights() {
         return this._frameGraphTask.objectRenderer.options.enableClusteredLights;
     }
@@ -259,7 +331,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** If true, MSAA color textures will be resolved at the end of the render pass (default: true) */
-    @editableInPropertyPage("Resolve MSAA colors", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Resolve MSAA colors", PropertyTypeForEdition.Boolean, "GENERAL")
     public get resolveMSAAColors() {
         return this._frameGraphTask.resolveMSAAColors;
     }
@@ -269,7 +341,7 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
     }
 
     /** If true, MSAA depth texture will be resolved at the end of the render pass (default: false) */
-    @editableInPropertyPage("Resolve MSAA depth", PropertyTypeForEdition.Boolean, "RENDERING - OBJECTS")
+    @editableInPropertyPage("Resolve MSAA depth", PropertyTypeForEdition.Boolean, "GENERAL")
     public get resolveMSAADepth() {
         return this._frameGraphTask.resolveMSAADepth;
     }
@@ -384,6 +456,12 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
         codes.push(`${this._codeVariableName}.depthTest = ${this.depthTest};`);
         codes.push(`${this._codeVariableName}.depthWrite = ${this.depthWrite};`);
         codes.push(`${this._codeVariableName}.renderMeshes = ${this.renderMeshes};`);
+        codes.push(`${this._codeVariableName}.renderDepthOnlyMeshes = ${this.renderDepthOnlyMeshes};`);
+        codes.push(`${this._codeVariableName}.renderOpaqueMeshes = ${this.renderOpaqueMeshes};`);
+        codes.push(`${this._codeVariableName}.renderAlphaTestMeshes = ${this.renderAlphaTestMeshes};`);
+        codes.push(`${this._codeVariableName}.renderTransparentMeshes = ${this.renderTransparentMeshes};`);
+        codes.push(`${this._codeVariableName}.useOITForTransparentMeshes = ${this.useOITForTransparentMeshes};`);
+        codes.push(`${this._codeVariableName}.oitPassCount = ${this.oitPassCount};`);
         codes.push(`${this._codeVariableName}.renderParticles = ${this.renderParticles};`);
         codes.push(`${this._codeVariableName}.renderSprites = ${this.renderSprites};`);
         codes.push(`${this._codeVariableName}.forceLayerMaskCheck = ${this.forceLayerMaskCheck};`);
@@ -402,6 +480,12 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
         serializationObject.depthTest = this.depthTest;
         serializationObject.depthWrite = this.depthWrite;
         serializationObject.renderMeshes = this.renderMeshes;
+        serializationObject.renderDepthOnlyMeshes = this.renderDepthOnlyMeshes;
+        serializationObject.renderOpaqueMeshes = this.renderOpaqueMeshes;
+        serializationObject.renderAlphaTestMeshes = this.renderAlphaTestMeshes;
+        serializationObject.renderTransparentMeshes = this.renderTransparentMeshes;
+        serializationObject.useOITForTransparentMeshes = this.useOITForTransparentMeshes;
+        serializationObject.oitPassCount = this.oitPassCount;
         serializationObject.renderParticles = this.renderParticles;
         serializationObject.renderSprites = this.renderSprites;
         serializationObject.forceLayerMaskCheck = this.forceLayerMaskCheck;
@@ -420,6 +504,12 @@ export class NodeRenderGraphBaseObjectRendererBlock extends NodeRenderGraphBlock
         this.depthTest = serializationObject.depthTest;
         this.depthWrite = serializationObject.depthWrite;
         this.renderMeshes = serializationObject.renderMeshes ?? true;
+        this.renderDepthOnlyMeshes = serializationObject.renderDepthOnlyMeshes ?? true;
+        this.renderOpaqueMeshes = serializationObject.renderOpaqueMeshes ?? true;
+        this.renderAlphaTestMeshes = serializationObject.renderAlphaTestMeshes ?? true;
+        this.renderTransparentMeshes = serializationObject.renderTransparentMeshes ?? true;
+        this.useOITForTransparentMeshes = serializationObject.useOITForTransparentMeshes ?? false;
+        this.oitPassCount = serializationObject.oitPassCount ?? 5;
         this.renderParticles = serializationObject.renderParticles ?? true;
         this.renderSprites = serializationObject.renderSprites ?? true;
         this.forceLayerMaskCheck = serializationObject.forceLayerMaskCheck ?? true;

packages/dev/core/src/FrameGraph/Node/Blocks/Rendering/geometryRendererBlock.ts

@@ -102,7 +102,7 @@ export class NodeRenderGraphGeometryRendererBlock extends NodeRenderGraphBaseObj
     }
 
     /** Width of the geometry texture */
-    @editableInPropertyPage("Texture width", PropertyTypeForEdition.Int, "RENDERING - GEOMETRY")
+    @editableInPropertyPage("Texture width", PropertyTypeForEdition.Int, "GEOMETRY")
     public get width() {
         return this._frameGraphTask.size.width;
     }
@@ -112,7 +112,7 @@ export class NodeRenderGraphGeometryRendererBlock extends NodeRenderGraphBaseObj
     }
 
     /** Height of the geometry texture */
-    @editableInPropertyPage("Texture height", PropertyTypeForEdition.Int, "RENDERING - GEOMETRY")
+    @editableInPropertyPage("Texture height", PropertyTypeForEdition.Int, "GEOMETRY")
     public get height() {
         return this._frameGraphTask.size.height;
     }
@@ -122,7 +122,7 @@ export class NodeRenderGraphGeometryRendererBlock extends NodeRenderGraphBaseObj
     }
 
     /** Indicates if the geometry texture width and height are percentages or absolute values */
-    @editableInPropertyPage("Size is in percentage", PropertyTypeForEdition.Boolean, "RENDERING - GEOMETRY")
+    @editableInPropertyPage("Size is in percentage", PropertyTypeForEdition.Boolean, "GEOMETRY")
     public get sizeInPercentage() {
         return this._frameGraphTask.sizeIsPercentage;
     }
@@ -132,7 +132,7 @@ export class NodeRenderGraphGeometryRendererBlock extends NodeRenderGraphBaseObj
     }
 
     /** Number of samples of the geometry texture */
-    @editableInPropertyPage("Samples", PropertyTypeForEdition.Int, "RENDERING - GEOMETRY", { min: 1, max: 8 })
+    @editableInPropertyPage("Samples", PropertyTypeForEdition.Int, "GEOMETRY", { min: 1, max: 8 })
     public get samples() {
         return this._frameGraphTask.samples;
     }
@@ -142,7 +142,7 @@ export class NodeRenderGraphGeometryRendererBlock extends NodeRenderGraphBaseObj
     }
 
     /** Indicates if culling must be reversed */
-    @editableInPropertyPage("Reverse culling", PropertyTypeForEdition.Boolean, "RENDERING - GEOMETRY")
+    @editableInPropertyPage("Reverse culling", PropertyTypeForEdition.Boolean, "GEOMETRY")
     public get reverseCulling() {
         return this._frameGraphTask.reverseCulling;
     }
@@ -152,7 +152,7 @@ export class NodeRenderGraphGeometryRendererBlock extends NodeRenderGraphBaseObj
     }
 
     /** Indicates if a mesh shouldn't be rendered when its material has depth write disabled */
-    @editableInPropertyPage("Don't render if material depth write is disabled", PropertyTypeForEdition.Boolean, "RENDERING - GEOMETRY")
+    @editableInPropertyPage("Don't render if material depth write is disabled", PropertyTypeForEdition.Boolean, "GEOMETRY")
     public get dontRenderWhenMaterialDepthWriteIsDisabled() {
         return this._frameGraphTask.dontRenderWhenMaterialDepthWriteIsDisabled;
     }
@@ -162,7 +162,7 @@ export class NodeRenderGraphGeometryRendererBlock extends NodeRenderGraphBaseObj
     }
 
     /** Indicates if depth pre-pass must be disabled */
-    @editableInPropertyPage("Disable depth pre-pass", PropertyTypeForEdition.Boolean, "RENDERING - GEOMETRY")
+    @editableInPropertyPage("Disable depth pre-pass", PropertyTypeForEdition.Boolean, "GEOMETRY")
     public get disableDepthPrePass() {
         return this._frameGraphTask.disableDepthPrePass;
     }

packages/dev/core/src/FrameGraph/Node/Blocks/Textures/copyTextureBlock.ts

@@ -76,7 +76,7 @@ export class NodeRenderGraphCopyTextureBlock extends NodeRenderGraphBlock {
     }
 
     /** The viewport to use. */
-    @editableInPropertyPage("Viewport", PropertyTypeForEdition.Viewport, "PROPERTIES")
+    @editableInPropertyPage("    Viewport", PropertyTypeForEdition.Viewport, "PROPERTIES")
     public get viewport(): IViewportLike {
         return this._viewport;
     }