feat: add effect composer option

NewKrok · Nov 16, 2023 · 8878667 · 8878667
1 parent bb8d093
commit 8878667
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/js/newkrok/three-game/world.d.ts b/src/js/newkrok/three-game/world.d.ts
@@ -47,7 +47,11 @@ export type WorldConfig = {
 export type World = {
   scene: THREE.Scene;
   renderer: THREE.WebGLRenderer;
+  effectComposer?: {
+    passes: Array<({scene:THREE.Scene, camera: THREE.PerspectiveCamera }) => any> | Array<any>,
+  }
   camera: THREE.PerspectiveCamera;
+  setCamera: (camera: THREE.PerspectiveCamera) => void;
   skybox?: THREE.Mesh;
   resume: () => void;
   pause: () => void;

diff --git a/src/js/newkrok/three-game/world.js b/src/js/newkrok/three-game/world.js
@@ -2,7 +2,9 @@ import * as THREE from "three";
 
 import { AssetsUtils } from "@newkrok/three-utils/assets";
 import { DisposeUtils } from "@newkrok/three-utils";
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 import { ObjectUtils } from "@newkrok/three-utils";
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 import { createModuleHandler } from "./modules/module-handler.js";
 import { detect } from "detect-browser";
 
@@ -39,6 +41,9 @@ const DEFAULT_WORLD_CONFIG = {
       type: THREE.VSMShadowMap,
     },
   },
+  effectComposer: {
+    passes: [],
+  },
   entities: [],
   modules: [],
   staticModels: [],
@@ -96,6 +101,17 @@ export const createWorld = ({ target, worldConfig, verbose = false }) => {
   renderer.shadowMap.type = normalizedWorldConfig.renderer.shadowMap.type;
   target.appendChild(renderer.domElement);
 
+  let effectComposer;
+  if (normalizedWorldConfig.effectComposer?.passes.length) {
+    effectComposer = new EffectComposer(renderer);
+    const renderScene = new RenderPass( scene, _camera );
+    effectComposer.addPass( renderScene );
+
+    normalizedWorldConfig.effectComposer.passes.forEach((pass) => {
+      effectComposer.addPass(typeof pass === "function" ? pass({scene, camera: _camera}) : pass);
+    });
+  }
+
   scene.fog = normalizedWorldConfig.fog;
 
   const entities =
@@ -115,7 +131,11 @@ export const createWorld = ({ target, worldConfig, verbose = false }) => {
     }
 
     onUpdateCallbacks.forEach((callback) => callback(cycleData));
-    renderer.render(scene, _camera);
+
+    if (effectComposer)
+      effectComposer.render();
+    else
+      renderer.render(scene, _camera);
   };
 
   const animate = () => {
@@ -127,6 +147,7 @@ export const createWorld = ({ target, worldConfig, verbose = false }) => {
     _camera.aspect = window.innerWidth / window.innerHeight;
     _camera.updateProjectionMatrix();
     renderer.setSize(window.innerWidth, window.innerHeight);
+    if (effectComposer) effectComposer.setSize( window.innerWidth, window.innerHeight );
   };
   window.addEventListener("resize", onWindowResize);
 
@@ -181,7 +202,10 @@ export const createWorld = ({ target, worldConfig, verbose = false }) => {
           cycleData,
           pause,
           resume,
-          setCamera: (camera) => (_camera = camera),
+          setCamera: (camera) => {
+            _camera = camera
+            if (effectComposer) effectComposer.passes.forEach(pass => pass.camera = _camera)
+          },
           getModule: moduleHandler.getModule,
           addModule: moduleHandler.addModule,
           dispose: () => {