post-processing (wip)

Author: spearwolf

packages/twopoint5d/src/stage/IGetRenderPass.ts

@@ -0,0 +1,8 @@
+import type {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
+
+export interface IGetRenderPass {
+  getRenderPass(): RenderPass;
+}
+
+export const hasGetRenderPass = (obj: object): obj is IGetRenderPass =>
+  obj && typeof (obj as IGetRenderPass).getRenderPass === 'function';

packages/twopoint5d/src/stage/IStage.ts

@@ -1,8 +1,10 @@
 import type {Camera, Scene, WebGLRenderer} from 'three';
+import type {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
 
 export type RenderCmdFunc = (scene: Scene, camera: Camera, autoClear: boolean) => void;
 
 export interface IStage {
   resize(width: number, height: number): void;
   renderFrame(renderer: WebGLRenderer, now: number, deltaTime: number, frameNo: number, renderCmd?: RenderCmdFunc): void;
+  getRenderPass?(): RenderPass;
 }

packages/twopoint5d/src/stage/PostProcessingRenderer.ts

@@ -1,5 +1,5 @@
 import type {WebGLRenderer} from 'three';
-import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
+import {EffectComposer, Pass} from 'three/addons/postprocessing/EffectComposer.js';
 import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
 import {
   StageAdded,
@@ -9,30 +9,28 @@ import {
   type StageAddedProps,
   type StageRemovedProps,
 } from '../events.js';
+import {hasGetRenderPass} from './IGetRenderPass.js';
 import type {IStage} from './IStage.js';
-import {Stage2D} from './Stage2D.js';
 import {StageRenderer} from './StageRenderer.js';
 
-const isRenderPassable = (stage: IStage): stage is Stage2D => stage instanceof Stage2D;
-
 export class PostProcessingRenderer extends StageRenderer implements IStageAdded, IStageRemoved {
   composer?: EffectComposer;
-  renderPass: WeakMap<IStage, RenderPass> = new WeakMap();
+
+  renderPasses: WeakMap<IStage, RenderPass> = new WeakMap();
+  passes: Pass[] = [];
 
   constructor() {
     super();
     this.on([StageAdded, StageRemoved], this);
   }
 
   override renderFrame(renderer: WebGLRenderer, now: number, deltaTime: number, frameNo: number): void {
-    if (!this.composer) {
-      this.composer = new EffectComposer(renderer);
-    }
+    const composer = this.getComposer(renderer);
 
     this.stages.forEach((stage) => {
       this.resizeStage(stage, this.width, this.height);
       stage.stage.renderFrame(renderer, now, deltaTime, frameNo, (scene, camera, autoClear) => {
-        const renderPass = this.renderPass.get(stage.stage);
+        const renderPass = this.renderPasses.get(stage.stage);
         if (renderPass) {
           renderPass.clear = autoClear;
           renderPass.scene = scene;
@@ -41,22 +39,57 @@ export class PostProcessingRenderer extends StageRenderer implements IStageAdded
       });
     });
 
-    this.composer.render();
+    composer.render();
+  }
+
+  addPass(pass: Pass) {
+    if (this.composer) {
+      this.composer.addPass(pass);
+    } else {
+      this.passes.push(pass);
+    }
+  }
+
+  removePass(pass: Pass) {
+    if (this.composer) {
+      this.composer.removePass(pass);
+    } else {
+      const index = this.passes.indexOf(pass);
+      if (index !== -1) {
+        this.passes.splice(index, 1);
+      }
+    }
+  }
+
+  getComposer(renderer: WebGLRenderer): EffectComposer {
+    if (this.composer == null) {
+      this.composer = new EffectComposer(renderer);
+      this.passes.forEach((pass) => this.composer.addPass(pass));
+      this.passes.length = 0;
+    }
+    return this.composer;
   }
 
   stageAdded({stage}: StageAddedProps) {
-    if (isRenderPassable(stage) && !this.renderPass.has(stage)) {
-      this.renderPass.set(stage, new RenderPass(stage.scene, stage.camera));
-      console.log('stageAdded as renderPass', {stage, postEffectsRenderer: this});
+    if (hasGetRenderPass(stage) && !this.renderPasses.has(stage)) {
+      const renderPass = stage.getRenderPass();
+      this.renderPasses.set(stage, renderPass);
+      this.addPass(renderPass);
+
+      console.log('stageAdded', {stage, renderPass, postProcessingRenderer: this});
     }
   }
 
   stageRemoved({stage}: StageRemovedProps) {
-    if (this.renderPass.has(stage)) {
-      const renderPass = this.renderPass.get(stage)!;
-      this.renderPass.delete(stage);
+    if (this.renderPasses.has(stage)) {
+      const renderPass = this.renderPasses.get(stage)!;
+      this.renderPasses.delete(stage);
+      this.removePass(renderPass);
       renderPass.dispose();
-      console.log('stageRemoved as renderPass', {stage, postEffectsRenderer: this});
+
+      console.log('stageRemoved', {stage, renderPass, postProcessingRenderer: this});
     }
   }
+
+  // TODO dispose
 }

packages/twopoint5d/src/stage/Stage2D.ts

@@ -1,6 +1,7 @@
 import {eventize, Eventize} from '@spearwolf/eventize';
 import {Camera, Scene, WebGLRenderer} from 'three';
 
+import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass.js';
 import {
   FirstFrame,
   StageAfterCameraChanged,
@@ -11,6 +12,7 @@ import {
   type Stage2DResizeProps,
   type StageAfterCameraChangedArgs,
 } from '../events.js';
+import type {IGetRenderPass} from './IGetRenderPass.js';
 import type {IProjection} from './IProjection.js';
 import type {IStage, RenderCmdFunc} from './IStage.js';
 
@@ -31,7 +33,7 @@ export interface Stage2D extends Eventize {}
  *
  * After the camera is created the scene can be rendered with the method `renderFrame(renderer: THREE.WebGLRenderer)`
  */
-export class Stage2D implements IStage {
+export class Stage2D implements IStage, IGetRenderPass {
   scene: Scene;
 
   autoClear = true;
@@ -230,4 +232,14 @@ export class Stage2D implements IStage {
       );
     }
   }
+
+  #renderPass?: RenderPass;
+
+  getRenderPass(): RenderPass {
+    if (this.#renderPass == null) {
+      this.#renderPass = new RenderPass(this.scene, this.camera);
+      this.#renderPass.clear = this.autoClear;
+    }
+    return this.#renderPass;
+  }
 }