Merge pull request #45 from MasatoMakino/add-output-pass

add : OutputPass in PostProcessRenderer

demoSrc/Common.js

@@ -14,8 +14,8 @@ export class Common {
     return scene;
   }
 
-  static initLight(scene) {
-    const ambientLight = new AmbientLight(0xffffff, Math.PI);
+  static initLight(scene, intensity = Math.PI) {
+    const ambientLight = new AmbientLight(0xffffff, intensity);
     scene.add(ambientLight);
     return ambientLight;
   }

demoSrc/demoBloom.js

@@ -1,6 +1,7 @@
 import {
   Color,
   Fog,
+  Light,
   Mesh,
   MeshLambertMaterial,
   PointLight,
@@ -15,7 +16,6 @@ import {
 } from "../esm/index.js";
 import GUI from "lil-gui";
 import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
-import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
 import { RAFTicker } from "@masatomakino/raf-ticker";
 
 export class StudyBloom {
@@ -36,23 +36,22 @@ export class StudyBloom {
     const size = this.postRenderer.getSize();
     const renderPass = new RenderPass(scene, camera);
     this.bloom = new BloomEffectComposer(scene, renderer, {
-      renderPass: renderPass,
+      renderPass,
     });
-    this.bloom.bloomPass.threshold = 0.385;
-    this.bloom.bloomPass.strength = 1.25;
+    this.bloom.bloomPass.threshold = 0.1;
+    this.bloom.bloomPass.strength = 1;
 
     const mixPass = new MixShaderPass(this.bloom.result);
-    const smaaPass = new SMAAPass(size.width, size.height);
 
     this.postRenderer.composers.push(this.bloom);
-    this.postRenderer.addComposer([mixPass, smaaPass], renderPass);
+    this.postRenderer.addComposer([mixPass], renderPass);
     RAFTicker.on("tick", this.postRenderer.render);
 
     this.initGUI();
   }
 
   initObject(scene) {
-    const spot = new PointLight(0xffffff, 6_000);
+    const spot = new PointLight(0xffffff, 2_000);
     spot.position.set(0, 0, 0);
     scene.add(spot);
     const helper = new PointLightHelper(spot, 2, 0);
@@ -117,7 +116,7 @@ export class StudyBloom {
   initPassGUI(gui) {
     const folder = gui.addFolder("renderer");
     folder.add(this.bloom.bloomPass, "threshold", 0.0, 1.0);
-    folder.add(this.bloom.bloomPass, "strength", 0.0, 4.0);
+    folder.add(this.bloom.bloomPass, "strength", 0.0, 3.0);
     folder.add(this.bloom.bloomPass, "radius", 0.0, 1.0);
     folder.open();
   }

src/mix/MixShader.frag.glsl.ts

@@ -1,6 +1,6 @@
 export default () => {
   //language=GLSL
-  return `    
+  return /* GLSL */ `    
 uniform sampler2D tDiffuse;
 uniform sampler2D mixTexture;
 varying vec2 vUv;
@@ -9,5 +9,6 @@ vec4 getTexture( sampler2D map ) {
 }
 void main() {
     gl_FragColor = ( getTexture( tDiffuse ) + vec4( 1.0 ) * getTexture( mixTexture ) );
-}`;
+}
+`;
 };

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;
   }