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..2deec3f 100644 --- a/demoSrc/demoBloom.js +++ b/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(); } 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 ) ); -}`; +} +`; }; 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; }