Update post processing examples with pmdrs postprocessing library #26247
Conversation
…mdrs postprocessing library
…ing and the old LUTPass (mrdoob#26246)
|
By default I've used the old If anyone has a different feeling about this example, we can work something out, but for now I'm just trying to preserve the capabilities of the examples. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| camera.aspect = window.innerWidth / window.innerHeight; | ||
| camera.updateProjectionMatrix(); | ||
| params.use2DLut ? lutMap[ params.lut ].texture : lutMap[ params.lut ].texture3D; |
Check warning
Code scanning / CodeQL
Expression has no effect
|
|
||
| camera.aspect = window.innerWidth / window.innerHeight; | ||
| camera.updateProjectionMatrix(); | ||
| params.use2DLut ? lutMap[ params.lut ].texture : lutMap[ params.lut ].texture3D; |
Check warning
Code scanning / CodeQL
Expression has no effect
|
|
||
| camera.aspect = window.innerWidth / window.innerHeight; | ||
| camera.updateProjectionMatrix(); | ||
| params.use2DLut ? lutMap[ params.lut ].texture : lutMap[ params.lut ].texture3D; |
Check warning
Code scanning / CodeQL
Expression has no effect
| "three/addons/": "./jsm/", | ||
| "postprocessing": "https://esm.sh/postprocessing" |
There was a problem hiding this comment.
This bundles its own copy of three.js. Maybe use another CDN which isn't so helpful like unpkg.com?
There was a problem hiding this comment.
With unpkg, I did not manage to get it work somehow. It searches the three dependency unfortunately. I'm no expert in importmap, if you have a quick fix, I would be glad to change it
Thank you in advance !
There was a problem hiding this comment.
I think you may have to point unpkg to the ESM file explicitly, otherwise it's serving CJS. For example:
"postprocessing": "https://unpkg.com/postprocessing@6.33.0/build/index.js"
examples/webgl_postprocessing.html
Outdated
|
|
||
| const effect3 = new ShaderPass( GammaCorrectionShader ); | ||
| const gammaCorrectionMaterialShader = new THREE.ShaderMaterial( GammaCorrectionShader ); | ||
| const effect3 = new PP.ShaderPass( gammaCorrectionMaterialShader, 'tDiffuse' ); |
There was a problem hiding this comment.
When using postprocessing, GammaCorrectionShader should be omitted. The package handles renderer.outputColorSpace automatically.
There was a problem hiding this comment.
My bad, will fix it. Thank you for the insight ! 🤝
| lutPass = new LUTPass(); | ||
| composer.addPass( lutPass ); | ||
| const gammaShaderMaterial = new THREE.ShaderMaterial( GammaCorrectionShader ); | ||
| composer.addPass( new PP.ShaderPass( gammaShaderMaterial, 'tDiffuse' ) ); |
There was a problem hiding this comment.
Removing the Gamma Correction pass here results in a different visual:
See the comparison below :
With gamma correction pass
Without gamma correction pass
Original example from threejs.org
The fact that the LUT pass is fed with the gamma correction pass output is meaningful for the final result. The outputColorSpace occurs at the end of the pipeline. For this example, I think we should keep the intermediary gamma correction pass.
There was a problem hiding this comment.
Ah good call – yes, if the LUT requires sRGB input then we should use OutputPass before the LUT. Possibly there are other ways to handle this in postprocessing but we don't need to consider that now. Thanks!
There was a problem hiding this comment.
Thank you for helping me shape this PR the postprocessing way, I'm learning a lot too 👌
…n pmdrs postprocessing library and happening through outputColorSpace (mrdoob#26246)
Related issue: closes #26246
Description
This branch contains the ongoing process of update for the examples about postprocessing that I'm working on with the stream.