Special effect caused by OutlinePass

Hi ThreeJS community,

Does OutlinePass do any special rendering (other than the outlining)? I was doing something fairly simple:

var composer = new EffectComposer(...);
composer.addPass(new RenderPass(...));
composer.addPass(new OutlinePass(...));

After adding OutlinePass, the entire scene is much darker and looks terrible. After removing OutlinePass, the scene went back to normal. Any insight would be appreciated.

Please modify the official outline example in order to demonstrate the issue: three.js webgl - post processing - Outline Pass

It’s best to share the code as an editable live example: https://jsfiddle.net/f2Lommf5/

Sorry for dropping the ball on my end. What appeared to fix the problem is to modify EffectComposer.js to use sRGBEncoding (my renderer is using sRGBEncoding). However, this is kind of confusing, because EffectComposer constructor doesn’t really allow this type of customization. Any ideas why? (see below for actual code change)

// Inside EffectComposer.js
var parameters = {
  // irrelevant code omitted.
  format: RGBAFormat,
  encoding: sRGBEncoding
// irrelevant code omitted.
// NOTE: the default encoding method is LinearEncoding for WebGLRenderTarget.
renderTarget = new WebGLRenderTarget( ..., parameters );

Gentle ping on this :slight_smile: Our code is pretty convoluted and hard to reproduce with a small example. For now, it’s working with the above change added, but just curious to see why would this happen and whether EffectComposer should allow to configure encoding via constructor. Thanks a lot.

I have the exact same problem .
Thanks for the solution

This should be the official recommended solution

	const size = renderer.getSize( new THREE.Vector2() );
	const _pixelRatio = renderer.getPixelRatio();
	const _width = size.width;
	const _height = size.height;
	const renderTarget = new THREE.WebGLRenderTarget( _width * _pixelRatio, _height * _pixelRatio, {
		minFilter: THREE.LinearFilter,
		magFilter: THREE.LinearFilter,
		format: THREE.RGBAFormat,
		encoding: THREE.sRGBEncoding
       } );
    renderTarget.texture.name = 'EffectComposer.rt1';

   composer = new EffectComposer( renderer, renderTarget );
1 Like

Same problem as well! Thanks for this :smiling_face_with_three_hearts: