Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

After the 171 version used in the postprocessing the renderer. ToneMappingExposure affect the background #30202

Open
lwaier opened this issue Dec 25, 2024 · 1 comment

Comments

@lwaier
Copy link

lwaier commented Dec 25, 2024

Description

After the 171 version used in the postprocessing the renderer. ToneMappingExposure affect the background
image
image

To solve this problem and keep the background intact I implemented a version using shaderPass
The idea is:
The background is hidden and stored in renderTarget before outputPass processing and then merged with baseTexture through shaderPass that I wrote after outputPass processing
image

But the effect of this fusion is still not as transparent as the good feeling of the previous version of 151
The following is the actual effect comparison diagram in the project: the top is 151 and the bottom is 171 (after using the above ideas).
image
image

Is there a better way to solve the impact of renderer. ToneMappingExposure on the background

Reproduction steps

  1. Find any webgl_postprocessing page in the examples 。Refer to webgl_postprocessing_outline
  2. Add a background and change renderer. ToneMappingExposure
  3. Then you will find that the background follows changes

Code

const texture = new THREE.TextureLoader().load('./textures/2294472375_24a3b8ef46_o.jpg')
scene.background = texture
renderer. ToneMappingExposure = 10 //OR renderer. ToneMappingExposure = 0

Live example

https://github.com/mrdoob/three.js/blob/dev/examples/webgl_postprocessing_outline.html
https://threejs.org/examples/?q=outlin#webgl_postprocessing_outline

Screenshots

No response

Version

r171

Device

Desktop

Browser

Chrome

OS

Windows

@lwaier
Copy link
Author

lwaier commented Dec 25, 2024

shaderPass source code:

const outputPass = new OutputPass();
composer.addPass(outputPass);

window.finalPass = new ShaderPass(
new THREE.ShaderMaterial({
uniforms: {
baseTexture: { value: null },
background: { value: null }
},
vertexShader: `varying vec2 vUv;

      void main() {

        vUv = uv;

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

      }`,
				fragmentShader: `
      
      #include <common>

      uniform sampler2D baseTexture;
      uniform sampler2D background;
      varying vec2 vUv;

      void main() {
			vec4 baseColor = texture2D(baseTexture, vUv);
			vec4 backgroundColor = texture2D(background, vUv);

			gl_FragColor = mix(backgroundColor, baseColor, baseColor.a);
		
      }`,
				defines: {}
			}),
			"baseTexture"
		)

		composer.addPass(finalPass)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant