From b9a80a503c7c060e6fe53d5e50f95c9c4d67e1cd Mon Sep 17 00:00:00 2001 From: Sophie Date: Fri, 20 Nov 2020 15:53:54 +0100 Subject: [PATCH 1/2] [+] Setup postprocessing and effect --- package-lock.json | 5 +++++ package.json | 7 ++++--- src/webgl/Webgl.js | 27 +++++++++++++++++++++++++-- 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index b2df0a2..b382a54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5459,6 +5459,11 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==" }, + "postprocessing": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.18.0.tgz", + "integrity": "sha512-AUmV+465StCApG6QG5J7lSYn1DmtwLDcaIQ7+aoyXsnw3qmhM3u31Xr0qpWrEmLDW52bQ9VntVCdXixHT5BUuA==" + }, "pretty-error": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz", diff --git a/package.json b/package.json index 86e2e35..87d6ac4 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,11 @@ "webpack-dev-server": "^3.11.0" }, "dependencies": { - "three": "^0.121.1", - "style-loader": "^1.3.0", "css-loader": "^4.3.0", - "dat.gui": "^0.7.7" + "dat.gui": "^0.7.7", + "postprocessing": "^6.18.0", + "style-loader": "^1.3.0", + "three": "^0.121.1" }, "engines": { "node": "12.x" diff --git a/src/webgl/Webgl.js b/src/webgl/Webgl.js index 3321f47..ba5639d 100644 --- a/src/webgl/Webgl.js +++ b/src/webgl/Webgl.js @@ -1,4 +1,5 @@ -import { Scene, PerspectiveCamera, WebGLRenderer, Color, AmbientLight, SpotLight } from 'three' +import { Scene, PerspectiveCamera, WebGLRenderer, Color, AmbientLight, SpotLight, Clock } from 'three' +import { GridEffect,BloomEffect,NoiseEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing"; import { OrbitControls } from './controls/OrbitControls' @@ -16,7 +17,12 @@ export default class Webgl { this.scene = new Scene() this.camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) // this.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 10000 ); - this.renderer = new WebGLRenderer() + this.renderer = new WebGLRenderer({ + powerPreference: "high-performance", + antialias: false, + stencil: false, + depth: false + }) this.renderer.setSize( window.innerWidth, window.innerHeight ); $parent.appendChild( this.renderer.domElement ); @@ -46,6 +52,21 @@ export default class Webgl { this.setGui(); window.addEventListener('resize', this.onResize); + + this.composer = new EffectComposer(this.renderer); + this.composer.addPass(new RenderPass(this.scene, this.camera)); + this.composer.addPass(new EffectPass(this.camera, new GridEffect({}))); + this.composer.addPass(new EffectPass(this.camera, new BloomEffect({ + intensity: 10, + luminanceThreshold: 0.8 + }))); + + + this.composer.addPass(new EffectPass(this.camera, new NoiseEffect())); + + + this.clock = new Clock(); + } setGui() { @@ -69,5 +90,7 @@ export default class Webgl { this.controls.update(); this.renderer.render( this.scene, this.camera ); + this.composer.render(this.clock.getDelta()); + } } From a0ad26d5a063e709e1b1fbc15fc70b8bf1f25f1b Mon Sep 17 00:00:00 2001 From: Nicolas LIENART Date: Fri, 27 Nov 2020 10:54:26 +0100 Subject: [PATCH 2/2] ADD(GUI) post processing controls for grid and bloom --- src/webgl/Webgl.js | 203 +++++++++++------- .../skySphere/{skySphere.js => SkySphere.js} | 0 2 files changed, 120 insertions(+), 83 deletions(-) rename src/webgl/objects/skySphere/{skySphere.js => SkySphere.js} (100%) diff --git a/src/webgl/Webgl.js b/src/webgl/Webgl.js index ba5639d..62ecf0c 100644 --- a/src/webgl/Webgl.js +++ b/src/webgl/Webgl.js @@ -10,87 +10,124 @@ import SkySphere from './objects/skySphere/SkySphere' import {webglGuiFolder} from '../utils/gui' export default class Webgl { - constructor($parent) { - this.start = this.start.bind(this) - this.onResize = this.onResize.bind(this) - - this.scene = new Scene() - this.camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) - // this.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 10000 ); - this.renderer = new WebGLRenderer({ - powerPreference: "high-performance", - antialias: false, - stencil: false, - depth: false - }) - this.renderer.setSize( window.innerWidth, window.innerHeight ); - $parent.appendChild( this.renderer.domElement ); - - this.controls = new OrbitControls(this.camera, this.renderer.domElement); - - this.light = new AmbientLight( 0x404040, 2 ); // soft white light - this.scene.add(this.light); - this.spotlight = new SpotLight( 0xffffff ); - this.spotlight.position.set(10, 10, -10) - this.scene.add(this.spotlight); - - this.cube = new MagicalObject() - this.scene.add( this.cube ); - - this.blob = new Blob() - this.scene.add( this.blob ); - this.sky = new SkySphere({ - colorUp: 0x7ee5fc, - colorDown: 0x1844d7 - }) - this.scene.add( this.sky ); - - this.camera.position.z = 5; - - this.time = 0 - - this.setGui(); - - window.addEventListener('resize', this.onResize); - - this.composer = new EffectComposer(this.renderer); - this.composer.addPass(new RenderPass(this.scene, this.camera)); - this.composer.addPass(new EffectPass(this.camera, new GridEffect({}))); - this.composer.addPass(new EffectPass(this.camera, new BloomEffect({ - intensity: 10, - luminanceThreshold: 0.8 - }))); - - - this.composer.addPass(new EffectPass(this.camera, new NoiseEffect())); - - - this.clock = new Clock(); - - } - - setGui() { - this.cube.setGui(webglGuiFolder) - this.blob.setGui(webglGuiFolder) - } - - onResize () { - this.camera.aspect = window.innerWidth / window.innerHeight - this.camera.updateProjectionMatrix() - this.renderer.setSize( window.innerWidth, window.innerHeight ) - } - - start () { - requestAnimationFrame( this.start ); - this.time += 0.01; - - this.cube.update() - this.blob.update(this.time) - - this.controls.update(); - - this.renderer.render( this.scene, this.camera ); - this.composer.render(this.clock.getDelta()); - - } + constructor() { + this.start = this.start.bind(this) + this.onResize = this.onResize.bind(this) + + this.scene = new Scene() + this.camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) + // this.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 10000 ); + this.renderer = new WebGLRenderer({ + powerPreference: "high-performance", + antialias: false, + stencil: false, + depth: false + }) + this.renderer.setSize( window.innerWidth, window.innerHeight ); + document.body.appendChild( this.renderer.domElement ); + + this.controls = new OrbitControls(this.camera, this.renderer.domElement); + + this.light = new AmbientLight( 0x404040, 2 ); // soft white light + this.scene.add(this.light); + this.spotlight = new SpotLight( 0xffffff ); + this.spotlight.position.set(10, 10, -10) + this.scene.add(this.spotlight); + + this.cube = new MagicalObject() + this.scene.add( this.cube ); + + this.blob = new Blob() + this.scene.add( this.blob ); + this.sky = new SkySphere({ + colorUp: 0x7ee5fc, + colorDown: 0x1844d7 + }) + this.scene.add( this.sky ); + + this.camera.position.z = 5; + + this.time = 0 + + this.setGui(); + + window.addEventListener('resize', this.onResize); + + this.effects = {} + + this.composer = new EffectComposer(this.renderer); + this.composer.addPass(new RenderPass(this.scene, this.camera)); + + this.effects.grid = new GridEffect({ + scale: 1.0, + lineWidth: 0.0 + }) + this.composer.addPass(new EffectPass(this.camera, this.effects.grid)); + + this.effects.bloom = new BloomEffect({ + intensity: 10, + luminanceThreshold: 0.8 + }) + this.composer.addPass(new EffectPass(this.camera, this.effects.bloom)); + + this.composer.addPass(new EffectPass(this.camera, new NoiseEffect())); + + + this.clock = new Clock(); + + } + + setGui() { + + const params = { + bloom: { + intensity: 10, + luminanceThreshold: 0.8, + }, + grid: { + scale: 1.0, + lineWidth: 0.0, + } + } + + this.cube.setGui(webglGuiFolder) + this.blob.setGui(webglGuiFolder) + + const postProcessing = webglGuiFolder.addFolder('Post-processing') + const bloom = postProcessing.addFolder('Bloom') + + bloom.add(params.bloom, 'intensity').onChange((value) => { + this.effects.bloom.intensity = value + }) + bloom.add(params.bloom, 'luminanceThreshold').onChange((value) => { + this.effects.bloom.luminanceThreshold = value + }) + + const grid = postProcessing.addFolder('Grid') + grid.add(params.grid, 'scale').onChange((value) => { + this.effects.grid.setScale(value) + }) + grid.add(params.grid, 'lineWidth').onChange((value) => { + this.effects.grid.setLineWidth(value) + }) + } + + onResize () { + this.camera.aspect = window.innerWidth / window.innerHeight + this.camera.updateProjectionMatrix() + this.renderer.setSize( window.innerWidth, window.innerHeight ) + /* resize composer */ + } + + start () { + requestAnimationFrame( this.start ); + this.time += 0.01; + + this.cube.update() + this.blob.update(this.time) + + this.controls.update(); + + this.composer.render(this.clock.getDelta()); + } } diff --git a/src/webgl/objects/skySphere/skySphere.js b/src/webgl/objects/skySphere/SkySphere.js similarity index 100% rename from src/webgl/objects/skySphere/skySphere.js rename to src/webgl/objects/skySphere/SkySphere.js