From 7425cdce32f4be4b34603e1f37758ce2958c6653 Mon Sep 17 00:00:00 2001 From: MasatoMakino Date: Mon, 29 Jan 2024 14:36:33 +0900 Subject: [PATCH 1/3] add : OutputPass and Refactor lighting initialization --- demoSrc/Common.js | 4 ++-- demoSrc/demoBloom.js | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/demoSrc/Common.js b/demoSrc/Common.js index 47dde79..c077dc2 100644 --- a/demoSrc/Common.js +++ b/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; } diff --git a/demoSrc/demoBloom.js b/demoSrc/demoBloom.js index 9146f4e..f104e65 100644 --- a/demoSrc/demoBloom.js +++ b/demoSrc/demoBloom.js @@ -1,6 +1,7 @@ import { Color, Fog, + Light, Mesh, MeshLambertMaterial, PointLight, @@ -15,7 +16,7 @@ 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 { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js"; import { RAFTicker } from "@masatomakino/raf-ticker"; export class StudyBloom { @@ -24,7 +25,7 @@ export class StudyBloom { const H = 480; const scene = Common.initScene(); - Common.initLight(scene); + Common.initLight(scene, 1.6); const camera = Common.initCamera(scene, W, H); const renderer = Common.initRenderer(W, H); const control = Common.initControl(camera, renderer); @@ -36,23 +37,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, new OutputPass()], 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 +117,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(); } From 46a9185136c7aeadd2fcf716825c01411266fe74 Mon Sep 17 00:00:00 2001 From: MasatoMakino Date: Mon, 29 Jan 2024 14:38:51 +0900 Subject: [PATCH 2/3] Refactor MixShader.frag.glsl.ts to use GLSL syntax --- src/mix/MixShader.frag.glsl.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/mix/MixShader.frag.glsl.ts b/src/mix/MixShader.frag.glsl.ts index 3ff72f0..a07c5fd 100644 --- a/src/mix/MixShader.frag.glsl.ts +++ b/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 ) ); -}`; +} +`; }; From 2417c3d165e0b99b86589f88ec5dfe8d03aa34de Mon Sep 17 00:00:00 2001 From: MasatoMakino Date: Mon, 29 Jan 2024 14:53:39 +0900 Subject: [PATCH 3/3] add : OutputPass with PostProcessRenderer --- demoSrc/demoBloom.js | 5 ++--- src/postprocess/PostProcessRenderer.ts | 9 +++++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/demoSrc/demoBloom.js b/demoSrc/demoBloom.js index f104e65..2deec3f 100644 --- a/demoSrc/demoBloom.js +++ b/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(); diff --git a/src/postprocess/PostProcessRenderer.ts b/src/postprocess/PostProcessRenderer.ts index f1457aa..e02a05d 100644 --- a/src/postprocess/PostProcessRenderer.ts +++ b/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; }