Extract FramePass base class from RenderPass (#8523)

* refactor: extract FramePass base class from RenderPass

Extract generic frame graph scheduling logic into a new FramePass base class.
RenderPass now extends FramePass, keeping only GPU render pass specifics.
8 non-render subclasses renamed from RenderPass* to FramePass* and re-parented.
CameraComponent.renderPasses renamed to framePasses with deprecated forwarding.

Made-with: Cursor

* updated comments

---------

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

Author: mvaligursky

examples/src/examples/graphics/render-pass.example.mjs

@@ -163,7 +163,7 @@ assetListLoader.load(() => {
     tintPass.init(null);
 
     // assign those two passes to the camera to be used instead of its default rendering
-    cameraEntity.camera.renderPasses = [renderPass, tintPass];
+    cameraEntity.camera.framePasses = [renderPass, tintPass];
 
     // update things every frame
     let angle = 3;

examples/src/examples/test/radix-sort.example.mjs

@@ -1,4 +1,4 @@
-// @config DESCRIPTION Test example for RenderPassRadixSort - GPU radix sort using mipmap binary search
+// @config DESCRIPTION Test example for FramePassRadixSort - GPU radix sort using mipmap binary search
 // @config HIDDEN
 import files from 'examples/files';
 import { data } from 'examples/observer';
@@ -86,15 +86,15 @@ let currentNumElements = 0;
 let currentNumBits = 0;
 /** @type {pc.Texture|null} */
 let keysTexture = null;
-/** @type {pc.RenderPassRadixSort|null} */
+/** @type {pc.FramePassRadixSort|null} */
 let radixSort = null;
 /** @type {number[]} */
 let originalValues = [];
 /** @type {boolean} */
 let needsRegen = true;
 
 // Create render pass instance once
-radixSort = new pc.RenderPassRadixSort(device);
+radixSort = new pc.FramePassRadixSort(device);
 
 // ==================== MATERIALS ====================
 

src/extras/index.js

@@ -15,13 +15,13 @@ export { GltfExporter } from './exporters/gltf-exporter.js';
 
 // RENDER PASSES
 export { SSAOTYPE_NONE, SSAOTYPE_LIGHTING, SSAOTYPE_COMBINE } from './render-passes/constants.js';
-export { RenderPassCameraFrame, CameraFrameOptions } from './render-passes/render-pass-camera-frame.js';
+export { FramePassCameraFrame, CameraFrameOptions } from './render-passes/frame-pass-camera-frame.js';
 export { RenderPassCompose } from './render-passes/render-pass-compose.js';
 export { RenderPassDepthAwareBlur } from './render-passes/render-pass-depth-aware-blur.js';
-export { RenderPassDof } from './render-passes/render-pass-dof.js';
+export { FramePassDof } from './render-passes/frame-pass-dof.js';
 export { RenderPassDownsample } from './render-passes/render-pass-downsample.js';
 export { RenderPassUpsample } from './render-passes/render-pass-upsample.js';
-export { RenderPassBloom } from './render-passes/render-pass-bloom.js';
+export { FramePassBloom } from './render-passes/frame-pass-bloom.js';
 export { RenderPassPrepass } from './render-passes/render-pass-prepass.js';
 export { RenderPassSsao } from './render-passes/render-pass-ssao.js';
 export { RenderPassTAA } from './render-passes/render-pass-taa.js';

src/extras/render-passes/camera-frame.js

@@ -3,7 +3,7 @@ import { Color } from '../../core/math/color.js';
 import { math } from '../../core/math/math.js';
 import { PIXELFORMAT_111110F, PIXELFORMAT_RGBA16F, PIXELFORMAT_RGBA32F } from '../../platform/graphics/constants.js';
 import { SSAOTYPE_NONE } from './constants.js';
-import { CameraFrameOptions, RenderPassCameraFrame } from './render-pass-camera-frame.js';
+import { CameraFrameOptions, FramePassCameraFrame } from './frame-pass-camera-frame.js';
 
 /**
  * @import { AppBase } from '../../framework/app-base.js'
@@ -364,7 +364,7 @@ class CameraFrame {
     options = new CameraFrameOptions();
 
     /**
-     * @type {RenderPassCameraFrame|null}
+     * @type {FramePassCameraFrame|null}
      * @private
      */
     renderPassCamera = null;
@@ -400,15 +400,15 @@ class CameraFrame {
 
     enable() {
         this.renderPassCamera = this.createRenderPass();
-        this.cameraComponent.renderPasses = [this.renderPassCamera];
+        this.cameraComponent.framePasses = [this.renderPassCamera];
     }
 
     disable() {
         const cameraComponent = this.cameraComponent;
-        cameraComponent.renderPasses?.forEach((renderPass) => {
+        cameraComponent.framePasses?.forEach((renderPass) => {
             renderPass.destroy();
         });
-        cameraComponent.renderPasses = [];
+        cameraComponent.framePasses = [];
         cameraComponent.rendering = null;
 
         cameraComponent.jitter = 0;
@@ -420,13 +420,13 @@ class CameraFrame {
     }
 
     /**
-     * Creates a render pass for the camera frame. Override this method to utilize a custom render
-     * pass, typically one that extends {@link RenderPassCameraFrame}.
+     * Creates a frame pass for the camera frame. Override this method to utilize a custom frame
+     * pass, typically one that extends {@link FramePassCameraFrame}.
      *
-     * @returns {RenderPassCameraFrame} - The render pass.
+     * @returns {FramePassCameraFrame} - The frame pass.
      */
     createRenderPass() {
-        return new RenderPassCameraFrame(this.app, this, this.cameraComponent, this.options);
+        return new FramePassCameraFrame(this.app, this, this.cameraComponent, this.options);
     }
 
     /**

…xtras/render-passes/render-pass-bloom.js …extras/render-passes/frame-pass-bloom.jssrc/extras/render-passes/render-pass-bloom.js renamed to src/extras/render-passes/frame-pass-bloom.js src/extras/render-passes/render-pass-bloom.js renamed to src/extras/render-passes/frame-pass-bloom.js

@@ -2,7 +2,7 @@ import { Color } from '../../core/math/color.js';
 import { Texture } from '../../platform/graphics/texture.js';
 import { BlendState } from '../../platform/graphics/blend-state.js';
 import { RenderTarget } from '../../platform/graphics/render-target.js';
-import { RenderPass } from '../../platform/graphics/render-pass.js';
+import { FramePass } from '../../platform/graphics/frame-pass.js';
 import { FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE } from '../../platform/graphics/constants.js';
 
 import { RenderPassDownsample } from './render-pass-downsample.js';
@@ -20,7 +20,7 @@ import { math } from '../../core/math/math.js';
  * @category Graphics
  * @ignore
  */
-class RenderPassBloom extends RenderPass {
+class FramePassBloom extends FramePass {
     bloomTexture;
 
     blurLevel = 16;
@@ -156,4 +156,4 @@ class RenderPassBloom extends RenderPass {
     }
 }
 
-export { RenderPassBloom };
+export { FramePassBloom };

…ender-passes/render-pass-camera-frame.js …render-passes/frame-pass-camera-frame.jssrc/extras/render-passes/render-pass-camera-frame.js renamed to src/extras/render-passes/frame-pass-camera-frame.js src/extras/render-passes/render-pass-camera-frame.js renamed to src/extras/render-passes/frame-pass-camera-frame.js

@@ -1,15 +1,15 @@
 import { LAYERID_SKYBOX, LAYERID_IMMEDIATE, TONEMAP_NONE, GAMMA_NONE } from '../../scene/constants.js';
 import { ADDRESS_CLAMP_TO_EDGE, FILTER_LINEAR, PIXELFORMAT_RGBA8 } from '../../platform/graphics/constants.js';
 import { Texture } from '../../platform/graphics/texture.js';
-import { RenderPass } from '../../platform/graphics/render-pass.js';
-import { RenderPassColorGrab } from '../../scene/graphics/render-pass-color-grab.js';
+import { FramePass } from '../../platform/graphics/frame-pass.js';
+import { FramePassColorGrab } from '../../scene/graphics/frame-pass-color-grab.js';
 import { RenderPassForward } from '../../scene/renderer/render-pass-forward.js';
 import { RenderTarget } from '../../platform/graphics/render-target.js';
 
-import { RenderPassBloom } from './render-pass-bloom.js';
+import { FramePassBloom } from './frame-pass-bloom.js';
 import { RenderPassCompose } from './render-pass-compose.js';
 import { RenderPassTAA } from './render-pass-taa.js';
-import { RenderPassDof } from './render-pass-dof.js';
+import { FramePassDof } from './frame-pass-dof.js';
 import { RenderPassPrepass } from './render-pass-prepass.js';
 import { RenderPassSsao } from './render-pass-ssao.js';
 import { SSAOTYPE_COMBINE, SSAOTYPE_LIGHTING, SSAOTYPE_NONE } from './constants.js';
@@ -22,8 +22,8 @@ import { Color } from '../../core/math/color.js';
  */
 
 /**
- * Options used to configure the RenderPassCameraFrame. To modify these options, you must create
- * a new instance of the RenderPassCameraFrame with the desired settings.
+ * Options used to configure the FramePassCameraFrame. To modify these options, you must create
+ * a new instance of the FramePassCameraFrame with the desired settings.
  *
  * @ignore
  */
@@ -76,7 +76,7 @@ const _defaultOptions = new CameraFrameOptions();
  * @category Graphics
  * @ignore
  */
-class RenderPassCameraFrame extends RenderPass {
+class FramePassCameraFrame extends FramePass {
     app;
 
     prePass;
@@ -375,7 +375,7 @@ class RenderPassCameraFrame extends RenderPass {
         // grab pass allowing us to copy the render scene into a texture and use for refraction
         // the source for the copy is the texture we render the scene to
         if (options.sceneColorMap) {
-            this.colorGrabPass = new RenderPassColorGrab(device);
+            this.colorGrabPass = new FramePassColorGrab(device);
             this.colorGrabPass.source = this.rt;
 
             // if grab pass is used, render the layers after it (otherwise they were already rendered)
@@ -430,13 +430,13 @@ class RenderPassCameraFrame extends RenderPass {
 
         if (this._bloomEnabled) {
             // create a bloom pass, which generates bloom texture based on the provided texture
-            this.bloomPass = new RenderPassBloom(this.device, inputTexture, this.hdrFormat);
+            this.bloomPass = new FramePassBloom(this.device, inputTexture, this.hdrFormat);
         }
     }
 
     setupDofPass(options, inputTexture, inputTextureHalf) {
         if (options.dofEnabled)  {
-            this.dofPass = new RenderPassDof(this.device, this.cameraComponent, inputTexture, inputTextureHalf, options.dofHighQuality, options.dofNearBlur);
+            this.dofPass = new FramePassDof(this.device, this.cameraComponent, inputTexture, inputTextureHalf, options.dofHighQuality, options.dofNearBlur);
         }
     }
 
@@ -503,4 +503,4 @@ class RenderPassCameraFrame extends RenderPass {
     }
 }
 
-export { RenderPassCameraFrame, CameraFrameOptions };
+export { FramePassCameraFrame, CameraFrameOptions };

…/extras/render-passes/render-pass-dof.js …c/extras/render-passes/frame-pass-dof.jssrc/extras/render-passes/render-pass-dof.js renamed to src/extras/render-passes/frame-pass-dof.js src/extras/render-passes/render-pass-dof.js renamed to src/extras/render-passes/frame-pass-dof.js

@@ -1,7 +1,7 @@
 import { Color } from '../../core/math/color.js';
 import { Texture } from '../../platform/graphics/texture.js';
 import { RenderTarget } from '../../platform/graphics/render-target.js';
-import { RenderPass } from '../../platform/graphics/render-pass.js';
+import { FramePass } from '../../platform/graphics/frame-pass.js';
 import { FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE, PIXELFORMAT_RG8, PIXELFORMAT_R8 } from '../../platform/graphics/constants.js';
 
 import { RenderPassDownsample } from './render-pass-downsample.js';
@@ -19,7 +19,7 @@ import { RenderPassDofBlur } from './render-pass-dof-blur.js';
  * @category Graphics
  * @ignore
  */
-class RenderPassDof extends RenderPass {
+class FramePassDof extends FramePass {
     focusDistance = 100;
 
     focusRange = 50;
@@ -192,4 +192,4 @@ class RenderPassDof extends RenderPass {
     }
 }
 
-export { RenderPassDof };
+export { FramePassDof };

src/framework/components/camera/component.js

@@ -14,7 +14,7 @@ import { PostEffectQueue } from './post-effect-queue.js';
  * @import { LayerComposition } from '../../../scene/composition/layer-composition.js'
  * @import { Layer } from '../../../scene/layer.js'
  * @import { Mat4 } from '../../../core/math/mat4.js'
- * @import { RenderPass } from '../../../platform/graphics/render-pass.js'
+ * @import { FramePass } from '../../../platform/graphics/frame-pass.js'
  * @import { RenderTarget } from '../../../platform/graphics/render-target.js'
  * @import { FogParams } from '../../../scene/fog-params.js'
  * @import { Vec3 } from '../../../core/math/vec3.js'
@@ -205,26 +205,46 @@ class CameraComponent extends Component {
     }
 
     /**
-     * Sets the render passes the camera uses for rendering, instead of its default rendering.
+     * Sets the frame passes the camera uses for rendering, instead of its default rendering.
      * Set this to null to return to the default behavior.
      *
-     * @type {RenderPass[]|null}
+     * @type {FramePass[]|null}
      * @ignore
      */
-    set renderPasses(passes) {
-        this._camera.renderPasses = passes || [];
+    set framePasses(passes) {
+        this._camera.framePasses = passes || [];
         this.dirtyLayerCompositionCameras();
         this.system.app.scene.updateShaders = true;
     }
 
     /**
-     * Gets the render passes the camera uses for rendering, instead of its default rendering.
+     * Gets the frame passes the camera uses for rendering, instead of its default rendering.
      *
-     * @type {RenderPass[]}
+     * @type {FramePass[]}
+     * @ignore
+     */
+    get framePasses() {
+        return this._camera.framePasses;
+    }
+
+    /**
+     * @type {FramePass[]|null}
+     * @deprecated Use {@link CameraComponent#framePasses} instead.
+     * @ignore
+     */
+    set renderPasses(passes) {
+        Debug.deprecated('CameraComponent#renderPasses is deprecated. Use CameraComponent#framePasses instead.');
+        this.framePasses = passes;
+    }
+
+    /**
+     * @type {FramePass[]}
+     * @deprecated Use {@link CameraComponent#framePasses} instead.
      * @ignore
      */
     get renderPasses() {
-        return this._camera.renderPasses;
+        Debug.deprecated('CameraComponent#renderPasses is deprecated. Use CameraComponent#framePasses instead.');
+        return this.framePasses;
     }
 
     get shaderParams() {
@@ -901,8 +921,8 @@ class CameraComponent extends Component {
     set renderTarget(value) {
 
         Debug.call(() => {
-            if (this._camera.renderPasses.length > 0) {
-                Debug.warn(`Setting a render target on the camera ${this.entity.name} after the render passes is not supported, set it up first.`);
+            if (this._camera.framePasses.length > 0) {
+                Debug.warn(`Setting a render target on the camera ${this.entity.name} after the frame passes is not supported, set it up first.`);
             }
         });
 

src/index.js

@@ -180,8 +180,9 @@ export { Skeleton } from './scene/animation/skeleton.js';
 export { ComputeRadixSort } from './scene/graphics/compute-radix-sort.js';
 export { EnvLighting } from './scene/graphics/env-lighting.js';
 export { PostEffect } from './scene/graphics/post-effect.js';
-export { RenderPassColorGrab } from './scene/graphics/render-pass-color-grab.js';
-export { RenderPassRadixSort } from './scene/graphics/render-pass-radix-sort.js';
+export { FramePass } from './platform/graphics/frame-pass.js';
+export { FramePassColorGrab } from './scene/graphics/frame-pass-color-grab.js';
+export { FramePassRadixSort } from './scene/graphics/frame-pass-radix-sort.js';
 export { RenderPassShaderQuad } from './scene/graphics/render-pass-shader-quad.js';
 export { reprojectTexture } from './scene/graphics/reproject-texture.js';