create PostEffectsRenderer (wip)

Author: spearwolf

packages/twopoint5d-elements/src/components/Stage2DElement.ts

@@ -1,6 +1,7 @@
 import {consume} from '@lit/context';
 import {eventize, type Eventize} from '@spearwolf/eventize';
-import {createEffect, createSignal, value, type SignalFuncs, type SignalReader} from '@spearwolf/signalize';
+import {createEffect, type SignalReader} from '@spearwolf/signalize';
+import {signal, signalReader} from '@spearwolf/signalize/decorators';
 import {
   OrthographicProjection,
   ParallaxProjection,
@@ -53,19 +54,8 @@ export class Stage2DElement extends TwoPoint5DElement {
   @property({attribute: false})
   accessor stageRendererCtx: IStageRenderer | undefined;
 
-  readonly #stageRenderer: SignalFuncs<IStageRenderer | undefined> = createSignal();
-
-  get stageRenderer(): IStageRenderer | undefined {
-    return value(this.#stageRenderer[0]);
-  }
-
-  get stageRenderer$(): SignalReader<IStageRenderer | undefined> {
-    return this.#stageRenderer[0];
-  }
-
-  set stageRenderer(value: IStageRenderer | undefined) {
-    this.#stageRenderer[1](value);
-  }
+  @signal({readAsValue: true}) accessor stageRenderer: IStageRenderer | undefined;
+  @signalReader() accessor stageRenderer$: SignalReader<IStageRenderer | undefined>;
 
   @property({type: String, reflect: true})
   accessor fit: 'contain' | 'cover' | 'fill' | undefined;
@@ -103,26 +93,17 @@ export class Stage2DElement extends TwoPoint5DElement {
   @property({type: String, reflect: true, attribute: 'projection-type'})
   accessor projectionType: 'parallax' | 'ortho' | 'orthographic' | undefined;
 
+  // TODO add autoClear property
+
   readonly #projSignals: SignalMap;
   readonly #viewSpecsSignals: SignalMap;
 
   private getViewSpecs(): ParallaxProjectionSpecs | OrthographicProjectionSpecs {
     return this.#viewSpecsSignals.getValueObject() as ParallaxProjectionSpecs | OrthographicProjectionSpecs;
   }
 
-  readonly #projection = createSignal<IProjection | undefined>();
-
-  get projection(): IProjection | undefined {
-    return value(this.#projection[0]);
-  }
-
-  get projection$(): SignalReader<IProjection | undefined> {
-    return this.#projection[0];
-  }
-
-  set projection(value: IProjection | undefined) {
-    this.#projection[1](value);
-  }
+  @signal({readAsValue: true}) accessor projection: IProjection | undefined;
+  @signalReader() accessor projection$: SignalReader<IProjection | undefined>;
 
   readonly stage2d = new Stage2D();
 

packages/twopoint5d/src/events.ts

@@ -52,13 +52,8 @@ export interface StageRenderFrameProps {
   /**
    * You do not need to call this callback yourself. It's normally done after the event.
    * However, you can use this callback to control when the THREE.WebGLRenderer is called.
-   *
-   * This is how the stage is rendered: `renderer.render(stage.scene, stage.camera)`
-   *
-   * If you provide a `renderHook`, then calling renderFrame will not render anything, that's up to you.
-   * In this case, this method will just inform the stage that you have rendered this scene, and the stage should not do it.
    */
-  renderFrame: (renderHook?: () => void) => void;
+  renderFrame: () => void;
 }
 
 export interface Stage2DRenderFrameProps extends StageRenderFrameProps {

packages/twopoint5d/src/stage/IStage.ts

@@ -1,6 +1,8 @@
-import type {WebGLRenderer} from 'three';
+import type {Camera, Scene, WebGLRenderer} from 'three';
+
+export type RenderCmdFunc = (scene: Scene, camera: Camera) => void;
 
 export interface IStage {
   resize(width: number, height: number): void;
-  renderFrame(renderer: WebGLRenderer, now: number, deltaTime: number, frameNo: number): void;
+  renderFrame(renderer: WebGLRenderer, now: number, deltaTime: number, frameNo: number, renderCmd?: RenderCmdFunc): void;
 }

packages/twopoint5d/src/stage/PostEffectsRenderer.ts

@@ -0,0 +1,55 @@
+import type {WebGLRenderer} from 'three';
+import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
+import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
+import {StageAdded, StageRemoved, type StageAddedProps, type StageRemovedProps} from '../events.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 PostEffectsRenderer extends StageRenderer {
+  composer?: EffectComposer;
+  renderPass: WeakMap<IStage, RenderPass> = new WeakMap();
+
+  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);
+    }
+
+    this.stages.forEach((stage) => {
+      this.resizeStage(stage, this.width, this.height);
+      stage.stage.renderFrame(renderer, now, deltaTime, frameNo, (scene, camera) => {
+        const renderPass = this.renderPass.get(stage.stage);
+        if (renderPass) {
+          renderPass.clear = (stage.stage as Stage2D).autoClear;
+          renderPass.scene = scene;
+          renderPass.camera = camera;
+        }
+      });
+    });
+
+    this.composer.render();
+  }
+
+  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});
+    }
+  }
+
+  stageRemoved({stage}: StageRemovedProps) {
+    if (this.renderPass.has(stage)) {
+      const renderPass = this.renderPass.get(stage)!;
+      this.renderPass.delete(stage);
+      renderPass.dispose();
+      console.log('stageRemoved as renderPass', {stage, postEffectsRenderer: this});
+    }
+  }
+}

packages/twopoint5d/src/stage/Stage2D.ts

@@ -12,10 +12,12 @@ import {
   type StageAfterCameraChangedArgs,
 } from '../events.js';
 import type {IProjection} from './IProjection.js';
-import type {IStage} from './IStage.js';
+import type {IStage, RenderCmdFunc} from './IStage.js';
 
 export interface Stage2D extends Eventize {}
 
+// TODO extract base class Stage
+
 /**
  * The `Stage2D` is a facade for a `THREE.Scene` with a `THREE.Camera`.
  * The camera is managed by means of a *projection* description.
@@ -172,19 +174,19 @@ export class Stage2D implements IStage {
   #isFirstFrame = true;
   #firstFrameProps?: FirstFrameProps;
 
-  renderFrame(renderer: WebGLRenderer, now: number, deltaTime: number, frameNo: number): void {
+  renderFrame(renderer: WebGLRenderer, now: number, deltaTime: number, frameNo: number, renderCmd?: RenderCmdFunc): void {
     const {scene, camera} = this;
     if (scene && camera) {
       const previousAutoClearValue = renderer.autoClear;
       renderer.autoClear = this.autoClear;
 
       let isRendered = false;
 
-      const renderFrame = (renderHook?: () => void) => {
+      const renderFrame = () => {
         if (!isRendered) {
           isRendered = true;
-          if (renderHook) {
-            renderHook();
+          if (renderCmd) {
+            renderCmd(scene, camera);
           } else {
             renderer.render(scene, camera);
           }

packages/twopoint5d/src/stage/StageRenderer.ts

@@ -70,7 +70,7 @@ export class StageRenderer implements IStageRenderer {
     );
   }
 
-  readonly #stages: StageItem[] = [];
+  protected readonly stages: StageItem[] = [];
 
   constructor() {
     eventize(this);
@@ -88,10 +88,10 @@ export class StageRenderer implements IStageRenderer {
     this.width = width;
     this.height = height;
 
-    this.#stages.forEach((stage) => this.#resizeStage(stage, width, height));
+    this.stages.forEach((stage) => this.resizeStage(stage, width, height));
   }
 
-  #resizeStage(stage: StageItem, width: number, height: number): void {
+  protected resizeStage(stage: StageItem, width: number, height: number): void {
     if (stage.width !== width || stage.height !== height) {
       stage.width = width;
       stage.height = height;
@@ -100,14 +100,14 @@ export class StageRenderer implements IStageRenderer {
   }
 
   renderFrame(renderer: WebGLRenderer, now: number, deltaTime: number, frameNo: number): void {
-    this.#stages.forEach((stage) => {
-      this.#resizeStage(stage, this.width, this.height);
+    this.stages.forEach((stage) => {
+      this.resizeStage(stage, this.width, this.height);
       stage.stage.renderFrame(renderer, now, deltaTime, frameNo);
     });
   }
 
   #getIndex(stage: StageType): number {
-    return this.#stages.findIndex((item) => item.stage === stage);
+    return this.stages.findIndex((item) => item.stage === stage);
   }
 
   hasStage(stage: StageType): boolean {
@@ -116,7 +116,7 @@ export class StageRenderer implements IStageRenderer {
 
   addStage(stage: StageType): void {
     if (!this.hasStage(stage)) {
-      this.#stages.push({
+      this.stages.push({
         stage,
         width: 0,
         height: 0,
@@ -128,7 +128,7 @@ export class StageRenderer implements IStageRenderer {
   removeStage(stage: StageType): void {
     const index = this.#getIndex(stage);
     if (index !== -1) {
-      this.#stages.splice(index, 1);
+      this.stages.splice(index, 1);
       this.emit(StageRemoved, {stage, renderer: this} as StageRemovedProps);
     }
   }

packages/twopoint5d/src/stage/public-api.ts

@@ -4,6 +4,7 @@ export type * from './IStage.js';
 export type * from './IStageRenderer.js';
 export * from './OrthographicProjection.js';
 export * from './ParallaxProjection.js';
+export * from './PostEffectsRenderer.js';
 export * from './ProjectionPlane.js';
 export * from './Stage2D.js';
 export * from './StageRenderer.js';