add : OutputPass with PostProcessRenderer

demoSrc/demoBloom.js

@@ -16,7 +16,6 @@ import {
 } from "../esm/index.js";
 import GUI from "lil-gui";
 import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
-import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
 import { RAFTicker } from "@masatomakino/raf-ticker";
 
 export class StudyBloom {
@@ -25,7 +24,7 @@ export class StudyBloom {
     const H = 480;
 
     const scene = Common.initScene();
-    Common.initLight(scene, 1.6);
+    Common.initLight(scene);
     const camera = Common.initCamera(scene, W, H);
     const renderer = Common.initRenderer(W, H);
     const control = Common.initControl(camera, renderer);
@@ -45,7 +44,7 @@ export class StudyBloom {
     const mixPass = new MixShaderPass(this.bloom.result);
 
     this.postRenderer.composers.push(this.bloom);
-    this.postRenderer.addComposer([mixPass, new OutputPass()], renderPass);
+    this.postRenderer.addComposer([mixPass], renderPass);
     RAFTicker.on("tick", this.postRenderer.render);
 
     this.initGUI();

src/postprocess/PostProcessRenderer.ts

@@ -6,6 +6,7 @@ import {
   Camera,
 } from "three";
 import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
 import { Pass } from "three/examples/jsm/postprocessing/Pass.js";
 import { PostProcessEffectComposer } from "./PostProcessEffectComposer.js";
 import { RAFTickerEventContext } from "@masatomakino/raf-ticker";
@@ -66,10 +67,18 @@ export class PostProcessRenderer {
   ): PostProcessEffectComposer {
     RenderPassOption.init(renderPassOption);
     const composer = new PostProcessEffectComposer(renderer);
+
+    //先頭にレンダーパスを挿入
     composer.addPass(renderPassOption.renderPass);
+
+    //中間にエフェクトパスを挿入
     passes.forEach((p) => {
       composer.addPass(p);
     });
+
+    //末端にOutputPassを挿入
+    composer.addPass(new OutputPass());
+
     return composer;
   }