From 0568499b1b2edc33fbdf868761055c246ea64004 Mon Sep 17 00:00:00 2001 From: Adam NAILI Date: Mon, 12 Jun 2023 11:44:24 +0200 Subject: [PATCH 1/3] Post-Processing: Update the webgl_postprocessing example to use the pmdrs postprocessing library --- examples/webgl_postprocessing.html | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/examples/webgl_postprocessing.html b/examples/webgl_postprocessing.html index 24056c8b763d0b..787c450f18d0df 100644 --- a/examples/webgl_postprocessing.html +++ b/examples/webgl_postprocessing.html @@ -16,7 +16,8 @@ { "imports": { "three": "../build/three.module.js", - "three/addons/": "./jsm/" + "three/addons/": "./jsm/", + "postprocessing": "https://esm.sh/postprocessing" } } @@ -25,9 +26,8 @@ import * as THREE from 'three'; - import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; - import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; - import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; + import * as PP from 'postprocessing'; + import { RGBShiftShader } from 'three/addons/shaders/RGBShiftShader.js'; import { DotScreenShader } from 'three/addons/shaders/DotScreenShader.js'; @@ -79,18 +79,21 @@ // postprocessing - composer = new EffectComposer( renderer ); - composer.addPass( new RenderPass( scene, camera ) ); + composer = new PP.EffectComposer( renderer ); + composer.addPass( new PP.RenderPass( scene, camera ) ); - const effect1 = new ShaderPass( DotScreenShader ); - effect1.uniforms[ 'scale' ].value = 4; + const dotScreenMaterialShader = new THREE.ShaderMaterial( DotScreenShader ); + const effect1 = new PP.ShaderPass( dotScreenMaterialShader, 'tDiffuse' ); + dotScreenMaterialShader.uniforms[ 'scale' ].value = 4; composer.addPass( effect1 ); - const effect2 = new ShaderPass( RGBShiftShader ); - effect2.uniforms[ 'amount' ].value = 0.0015; + const rgbShiftMaterialShader = new THREE.ShaderMaterial( RGBShiftShader ); + const effect2 = new PP.ShaderPass( rgbShiftMaterialShader, 'tDiffuse' ); + rgbShiftMaterialShader.uniforms[ 'amount' ].value = 0.0015; composer.addPass( effect2 ); - const effect3 = new ShaderPass( GammaCorrectionShader ); + const gammaCorrectionMaterialShader = new THREE.ShaderMaterial( GammaCorrectionShader ); + const effect3 = new PP.ShaderPass( gammaCorrectionMaterialShader, 'tDiffuse' ); composer.addPass( effect3 ); // From ef28bfe18694dd185df45ff74986fff55ed1bb04 Mon Sep 17 00:00:00 2001 From: Adam NAILI Date: Tue, 13 Jun 2023 12:49:27 +0200 Subject: [PATCH 2/3] Post Processing: update the example about LUT using pmdrs postprocessing and the old LUTPass (#26246) --- examples/jsm/postprocessing/LUTPass.js | 2 +- examples/webgl_postprocessing_3dlut.html | 330 +++++++++++++---------- 2 files changed, 185 insertions(+), 147 deletions(-) diff --git a/examples/jsm/postprocessing/LUTPass.js b/examples/jsm/postprocessing/LUTPass.js index ceb356d008cb04..48e5e5a40a2aa2 100644 --- a/examples/jsm/postprocessing/LUTPass.js +++ b/examples/jsm/postprocessing/LUTPass.js @@ -170,4 +170,4 @@ class LUTPass extends ShaderPass { } -export { LUTPass }; +export { LUTPass, LUTShader }; diff --git a/examples/webgl_postprocessing_3dlut.html b/examples/webgl_postprocessing_3dlut.html index 18800a948328ea..a3f21404144a0a 100644 --- a/examples/webgl_postprocessing_3dlut.html +++ b/examples/webgl_postprocessing_3dlut.html @@ -1,207 +1,245 @@ - - three.js webgl - 3d luts - - - - - - -
- three.js - 3D LUTs
- Battle Damaged Sci-fi Helmet by - theblueturtle_
- Royal Esplanade from HDRI Haven
- LUTs from RocketStock, FreePresets.com -
- - - - - - + + - - - camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 ); - camera.position.set( - 1.8, 0.6, 2.7 ); + + } + + + function render() { + + requestAnimationFrame( render ); + + lutPass.enabled = params.enabled && Boolean( lutMap[ params.lut ] ); + lutShaderMaterial.uniforms.intensity.value = params.intensity; + + if ( lutMap[ params.lut ] ) checkLut( params.use2DLut ? lutMap[ params.lut ].texture : lutMap[ params.lut ].texture3D ); + + composer.render(); + + } + + - + From b410d3d1f0ff0225d0c0ee328bacadbf1be31c9f Mon Sep 17 00:00:00 2001 From: Adam NAILI Date: Wed, 14 Jun 2023 10:56:54 +0200 Subject: [PATCH 3/3] Post Processing: removing the Gamma Correction Pass that is bundled in pmdrs postprocessing library and happening through outputColorSpace (#26246) --- examples/webgl_postprocessing.html | 5 ----- 1 file changed, 5 deletions(-) diff --git a/examples/webgl_postprocessing.html b/examples/webgl_postprocessing.html index 787c450f18d0df..9bc8133f0e90bc 100644 --- a/examples/webgl_postprocessing.html +++ b/examples/webgl_postprocessing.html @@ -31,7 +31,6 @@ import { RGBShiftShader } from 'three/addons/shaders/RGBShiftShader.js'; import { DotScreenShader } from 'three/addons/shaders/DotScreenShader.js'; - import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js'; let camera, renderer, composer; let object; @@ -92,10 +91,6 @@ rgbShiftMaterialShader.uniforms[ 'amount' ].value = 0.0015; composer.addPass( effect2 ); - const gammaCorrectionMaterialShader = new THREE.ShaderMaterial( GammaCorrectionShader ); - const effect3 = new PP.ShaderPass( gammaCorrectionMaterialShader, 'tDiffuse' ); - composer.addPass( effect3 ); - // window.addEventListener( 'resize', onWindowResize );