feat(engine): implement composer rendering in GameRenderer (#69)

Author: fraxken

packages/engine/src/components/Camera.ts

@@ -32,9 +32,6 @@ export class Camera extends ActorComponent {
     } = options;
 
     this.threeCamera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-  }
-
-  start() {
     this.threeCamera.add(this.actor.gameInstance.audio.listener);
     this.actor.gameInstance.renderer.addRenderComponent(this.threeCamera);
   }

packages/engine/src/components/Camera3DControls.ts

@@ -54,11 +54,9 @@ export class Camera3DControls extends Behavior {
     this.maxRollDown = options.maxRollDown ?? -Math.PI / 2;
     this.#rotationSpeed = options.rotationSpeed ?? 2;
     this.#movementSpeed = options.speed ?? 20;
-  }
 
-  start() {
-    this.camera.add(this.actor.gameInstance.audio.listener);
     this.actor.gameInstance.renderer.addRenderComponent(this.camera);
+    this.camera.add(this.actor.gameInstance.audio.listener);
   }
 
   set speed(

packages/engine/src/systems/GameInstance.ts

@@ -4,9 +4,8 @@ import * as THREE from "three";
 // Import Internal Dependencies
 import {
   type GameRenderer
-} from "./Renderers/index.js";
+} from "./renderers/index.js";
 import {
-  SceneEngine,
   type Scene
 } from "./Scene.js";
 import {
@@ -28,7 +27,7 @@ export interface GameInstanceOptions {
   enableOnExit?: boolean;
 
   loadingManager?: THREE.LoadingManager;
-  scene?: Scene;
+  scene: Scene;
   input?: Input;
   scheduler?: FixedTimeStep;
   audio?: GlobalAudio;
@@ -53,11 +52,11 @@ export class GameInstance<T = THREE.WebGLRenderer> {
 
   constructor(
     renderer: GameRenderer<T>,
-    options: GameInstanceOptions = {}
+    options: GameInstanceOptions
   ) {
     const {
       loadingManager = new THREE.LoadingManager(),
-      scene = new SceneEngine(),
+      scene,
       input = new Input(renderer.canvas, { enableOnExit: options.enableOnExit ?? false }),
       scheduler = new FixedTimeStep(options.clock),
       audio = new GlobalAudio(),
@@ -108,9 +107,7 @@ export class GameInstance<T = THREE.WebGLRenderer> {
       return true;
     }
 
-    if (updates > 0) {
-      this.renderer.draw(this.scene);
-    }
+    updates > 0 && this.renderer.draw();
 
     return false;
   }

packages/engine/src/systems/Renderers/GameRenderer.ts

@@ -1,22 +1,25 @@
 // Import Third-party Dependencies
 import * as THREE from "three";
+import type { Pass } from "three/addons/postprocessing/EffectComposer.js";
 
 // Import Internal Dependencies
-import type { Scene } from "../Scene.js";
+import type { RenderMode } from "./RenderStrategy.js";
 
 export type RenderComponent = THREE.PerspectiveCamera | THREE.OrthographicCamera;
 
 export interface GameRenderer<T = any> {
   readonly canvas: HTMLCanvasElement;
 
   getSource(): T;
+  setRenderMode(mode: RenderMode): this;
   setRatio(ratio: number | null): this;
+  setEffects(...effects: Pass[]): this;
 
   addRenderComponent(component: RenderComponent): void;
   removeRenderComponent(component: RenderComponent): void;
 
   resize(): void;
-  draw(scene: Scene): void;
+  draw(): void;
   onDraw(callback: (source: T) => void): void;
   clear(): void;
 }

packages/engine/src/systems/Renderers/RenderStrategy.ts

@@ -0,0 +1,72 @@
+// Import Third-party Dependencies
+import * as THREE from "three";
+import type {
+  EffectComposer,
+  Pass
+} from "three/addons/postprocessing/EffectComposer.js";
+
+// Import Internal Dependencies
+import type { RenderComponent } from "./GameRenderer.js";
+
+export type RenderMode = "direct" | "composer";
+
+export interface RenderStrategy {
+  render(scene: THREE.Scene, renderComponents: RenderComponent[]): void;
+  resize(width: number, height: number): void;
+}
+
+export class DirectRenderStrategy implements RenderStrategy {
+  #renderer: THREE.WebGLRenderer;
+
+  constructor(
+    renderer: THREE.WebGLRenderer
+  ) {
+    this.#renderer = renderer;
+  }
+
+  render(
+    scene: THREE.Scene,
+    renderComponents: RenderComponent[]
+  ): void {
+    for (const renderComponent of renderComponents) {
+      this.#renderer.render(scene, renderComponent);
+    }
+  }
+
+  resize(width: number, height: number): void {
+    this.#renderer.setSize(width, height, false);
+  }
+}
+
+export class ComposerRenderStrategy implements RenderStrategy {
+  #composer: EffectComposer;
+
+  constructor(
+    composer: EffectComposer
+  ) {
+    this.#composer = composer;
+  }
+
+  render(
+    _scene: THREE.Scene,
+    _renderComponents: RenderComponent[]
+  ): void {
+    this.#composer.render();
+  }
+
+  resize(width: number, height: number): void {
+    this.#composer.setSize(width, height);
+  }
+
+  addEffect(pass: Pass): void {
+    this.#composer.addPass(pass);
+  }
+
+  removeEffect(pass: Pass): void {
+    this.#composer.removePass(pass);
+  }
+
+  getComposer(): EffectComposer {
+    return this.#composer;
+  }
+}

packages/engine/src/systems/Renderers/ThreeRenderer.ts

@@ -1,5 +1,7 @@
 // Import Third-party Dependencies
 import * as THREE from "three";
+import { EffectComposer, type Pass } from "three/addons/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
 import { EventEmitter } from "@posva/event-emitter";
 
 // Import Internal Dependencies
@@ -8,6 +10,12 @@ import type {
   RenderComponent
 } from "./GameRenderer.js";
 import type { Scene } from "../Scene.js";
+import {
+  type RenderMode,
+  type RenderStrategy,
+  DirectRenderStrategy,
+  ComposerRenderStrategy
+} from "./RenderStrategy.js";
 
 export type ThreeRendererEvents = {
   resize: [
@@ -18,28 +26,33 @@ export type ThreeRendererEvents = {
   ];
 };
 
+export interface ThreeRendererOptions {
+  /**
+   * @default "direct"
+   */
+  renderMode: RenderMode;
+  scene: Scene;
+}
+
 export class ThreeRenderer extends EventEmitter<
   ThreeRendererEvents
 > implements GameRenderer {
   webGLRenderer: THREE.WebGLRenderer;
   renderComponents: RenderComponent[] = [];
+  renderStrategy: RenderStrategy;
   ratio: number | null = null;
+  scene: Scene;
 
   constructor(
-    canvas: HTMLCanvasElement
+    canvas: HTMLCanvasElement,
+    options: ThreeRendererOptions
   ) {
     super();
-    this.webGLRenderer = new THREE.WebGLRenderer({
-      canvas,
-      antialias: true,
-      alpha: true
-    });
-
-    this.webGLRenderer.setPixelRatio(window.devicePixelRatio);
-    this.webGLRenderer.shadowMap.enabled = true;
-    this.webGLRenderer.shadowMap.type = THREE.BasicShadowMap;
-    this.webGLRenderer.setSize(0, 0, false);
-    this.webGLRenderer.autoClear = false;
+    const { scene, renderMode = "direct" } = options;
+
+    this.scene = scene;
+    this.webGLRenderer = createWebGLRenderer(canvas);
+    this.setRenderMode(renderMode);
   }
 
   get canvas() {
@@ -50,29 +63,77 @@ export class ThreeRenderer extends EventEmitter<
     return this.webGLRenderer;
   }
 
-  addRenderComponent(component: RenderComponent): void {
+  addRenderComponent(
+    component: RenderComponent
+  ): void {
     this.renderComponents.push(component);
+    if (this.renderStrategy instanceof ComposerRenderStrategy) {
+      const renderPass = new RenderPass(this.scene.getSource(), component);
+      this.renderStrategy.addEffect(renderPass);
+    }
   }
 
-  removeRenderComponent(component: RenderComponent): void {
+  removeRenderComponent(
+    component: RenderComponent
+  ): void {
     const index = this.renderComponents.indexOf(component);
     if (index !== -1) {
       this.renderComponents.splice(index, 1);
     }
+
+    if (this.renderStrategy instanceof ComposerRenderStrategy) {
+      const composer = this.renderStrategy.getComposer();
+      const renderPass = composer.passes.find(
+        (pass) => (pass as RenderPass).camera === component
+      )!;
+      this.renderStrategy.removeEffect(renderPass);
+    }
+  }
+
+  setRenderMode(
+    mode: RenderMode
+  ): this {
+    if (mode === "direct") {
+      this.renderStrategy = new DirectRenderStrategy(this.webGLRenderer);
+    }
+    else {
+      const composer = new EffectComposer(this.webGLRenderer);
+
+      const scene = this.scene.getSource();
+      for (const renderComponent of this.renderComponents) {
+        const renderPass = new RenderPass(scene, renderComponent);
+        composer.addPass(renderPass);
+      }
+
+      this.renderStrategy = new ComposerRenderStrategy(
+        composer
+      );
+    }
+    this.resize();
+    this.clear();
+
+    return this;
+  }
+
+  setEffects(...effects: Pass[]): this {
+    if (this.renderStrategy instanceof ComposerRenderStrategy) {
+      for (const pass of effects) {
+        this.renderStrategy.addEffect(pass);
+      }
+    }
+
+    return this;
   }
 
   setRatio(
     ratio: number | null = null
   ) {
     this.ratio = ratio;
-    if (this.ratio) {
-      this.webGLRenderer.domElement.style.margin = "0";
-      this.webGLRenderer.domElement.style.flex = "1";
-    }
-    else {
-      this.webGLRenderer.domElement.style.margin = "auto";
-      this.webGLRenderer.domElement.style.flex = "none";
-    }
+
+    const styles = this.ratio ?
+      { margin: "0", flex: "1" } :
+      { margin: "auto", flex: "none" };
+    Object.assign(this.webGLRenderer.domElement.style, styles);
     this.resize();
 
     return this;
@@ -107,7 +168,7 @@ export class ThreeRenderer extends EventEmitter<
       this.webGLRenderer.domElement.width !== width ||
       this.webGLRenderer.domElement.height !== height
     ) {
-      this.webGLRenderer.setSize(width, height, false);
+      this.renderStrategy.resize(width, height);
       for (const renderComponent of this.renderComponents) {
         if (renderComponent instanceof THREE.PerspectiveCamera) {
           renderComponent.aspect = width / height;
@@ -118,24 +179,14 @@ export class ThreeRenderer extends EventEmitter<
     }
   };
 
-  draw(
-    scene: Scene
-  ) {
+  draw() {
     this.resize();
     this.clear();
-    // this.renderComponents.sort((a, b) => {
-    //   let order = (a.depth - b.depth);
-    //   if (order === 0) {
-    //     order = this.cachedActors.indexOf(a.actor) - this.cachedActors.indexOf(b.actor);
-    //   }
-
-    //   return order;
-    // });
-
-    const source = scene.getSource();
-    for (const renderComponent of this.renderComponents) {
-      this.webGLRenderer.render(source, renderComponent);
-    }
+
+    this.renderStrategy.render(
+      this.scene.getSource(),
+      this.renderComponents
+    );
     this.emit("draw", { source: this.webGLRenderer });
   }
 
@@ -149,3 +200,24 @@ export class ThreeRenderer extends EventEmitter<
     this.webGLRenderer.clear();
   }
 }
+
+function createWebGLRenderer(
+  canvas: HTMLCanvasElement
+): THREE.WebGLRenderer {
+  const renderer = new THREE.WebGLRenderer({
+    canvas,
+    antialias: true,
+    alpha: true
+  });
+
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.BasicShadowMap;
+  renderer.setSize(0, 0, false);
+  renderer.autoClear = false;
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.NeutralToneMapping;
+  renderer.toneMappingExposure = 1.25;
+
+  return renderer;
+}

packages/engine/src/systems/Renderers/index.ts

@@ -1,2 +1,3 @@
 export * from "./GameRenderer.js";
 export * from "./ThreeRenderer.js";
+export type { RenderMode } from "./RenderStrategy.js";