Post processing outline error

Hello,

I followed the outline post processing example, using the effect on a transparent canvas(the alpha buffer is enabled in WebGLRenderer). While an object is selected and added the outline, the canvas background becomes black instead of transparent(see the screenshots below).

How can i keep the background as transparent with the outline effect?
Thanks.

1
2

If i set renderer.setClearColor( 0xffffff );in the mentioned example, the background stays white. Is it possible to provide a live demo with your code?

I think I see the issue

Rather than the background being white, the background is transparent and the image above had it white. I’ve made a fiddle to show the issue by having a red css background which changes to black once you mouse over one of the elements.

https://jsfiddle.net/96a143g4/

I was planning on using this effect soon but want it to have the transparent background, so will be looking into it soon if no one else does.

Thanks for reply, actually the background is transparent :joy:, so it looks like “white”. I set the webglrenderer with alpha true.

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

Please see calrk’s jsfiddle demo, the same issue as mine.

Yes, it’s exactly my problem. Hoping someone could help.:grinning:

I tried to change getOverlayMaterial function in OutlinePass.js, the output color’s alpha as 0 then the outline effect disappeared…

A quick fix doing some tests, after commenting out line 304 of OutlinePass.js

renderer.render( this.scene, this.camera, this.renderTargetEdgeBuffer1, true );
example
https://jsfiddle.net/8ega29d7/

This is probably what I will use as the solution, but would be good if anyone knows why the following lines with BlurDirectionY would cause this effect?

this.separableBlurMaterial1.uniforms[ "colorTexture" ].value = this.renderTargetBlurBuffer1.texture;
this.separableBlurMaterial1.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionY;
renderer.render( this.scene, this.camera, this.renderTargetEdgeBuffer1, true );
1 Like

Oh my god, it works, you saved my life :kissing_heart::kissing_heart::kissing_heart::kissing_heart:
Merci beaucoup.