EffectComposer UnrealBloomPass is ruining my whole render thing

Questions
, , ,
1

After appling the unreal bloom zig zag lines are appearing on objects.

below is without unreal bloom

I need the glow effect with a proper render

here is my code copied from selective bloom from threejs example

var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
bloomPass.threshold = 0.2;
bloomPass.strength = 5;
bloomPass.radius = 0.55;

    var bloomComposer = new THREE.EffectComposer( renderer );
		bloomComposer.renderToScreen = false;
		bloomComposer.addPass( renderScene );
		bloomComposer.addPass( bloomPass );

    this.bloomPass = bloomPass;

    var finalPass = new THREE.ShaderPass(
			new THREE.ShaderMaterial( {
				uniforms: {
					baseTexture: { value: null },
					bloomTexture: { value: bloomComposer.renderTarget2.texture },
                    //time: { value: 1.0 },
	                //resolution: { value: new THREE.Vector2() }
				},
				vertexShader: document.getElementById( 'vertexshader' ).textContent,
				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
				defines: {}
			} ), 'baseTexture'
		);

    finalPass.needsSwap = true;


    var finalComposer = new THREE.EffectComposer( renderer );
		finalComposer.addPass( renderScene );
		finalComposer.addPass( finalPass );


    this.bloomComposer = bloomComposer;
    this.finalComposer = finalComposer;
2

that’s usually when near/far is too wide. either try to set them more narrow, or try logarithmicDepthBuffer.

also the final pass, you don’t need that. bloom is selective out of the box, people just use it wrong. the official bloom demo is making something that is so easy seem overly complex. all you need is unrealbloompass with threshold 1, and now you can select on the materials (emissiveIntensity).

see: Selective Bloom not working in react function with vanilla js wrapped in useeffect - #2 by drcmda

THREE.ColorManagement.legacyMode = false
...
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
...
const target = new THREE.WebGLRenderTarget(width, height, {
  type: THREE.HalfFloatType,
  format: THREE.RGBAFormat,
  encoding: THREE.sRGBEncoding,
})
target.samples = 8
const composer = new EffectComposer(renderer, target)
composer.addPass(new RenderPass(scene, camera))
// Threshold is 1, nothing will glow by default
composer.addPass(new UnrealBloomPass(undefined, 1, 1, 1))

// This mesh will glow
const mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshStandardMaterial({
    toneMapped: false,
    emissive: "red",
    emissiveIntensity: 10
  })
)

// This mesh will also glow, because it goes beyond 0-1 color space
const mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshBasicMaterial({ toneMapped: false, color: new THREE.Color().setRGB(10, 10, 10) })
)
1 Like
3

got it with logarithmicDepthBuffer but there is still some zig zag thing.

Is there anything so that i can completely remove it and this happens only if i add Effect composer .

this is how i am creating my renderer.

renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true, preserveDrawingBuffer: false, logarithmicDepthBuffer: true });

thank yoy