Canvas background is always black when using postprocessing

Questions
1

When set WebGLRenderer alpha=true

https://jsfiddle.net/f2Lommf5/16257/

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

canvas context imagedata is transparent

3
49426442-8cfba280-f7db-11e8-94c6-af919ec17c11.png862×747 2.2 KB

but use postprocessing canvas context image always black
https://jsfiddle.net/f2Lommf5/16258/

5
49426583-f7acde00-f7db-11e8-87ae-13b0ba66ab5a.png998×747 48.8 KB

Then I try.
https://jsfiddle.net/f2Lommf5/16259/

 var renderScene = new THREE.RenderPass( scene, camera ,null,new THREE.Color('red'),0);

canvas context imagedata still black

I hope when postprocessing canvas context imagedata is transparent,I can save canva as transparent image.
What should I do?

2

That might be an issue with UnrealBloomPass pass. There is already an issue that tackles this problem.

2 Likes
3

thanks ; I Look at it.:grin:

4

I’ve created a full example with the fix. Thanks to help from: Unreal Bloom and Renderer Transparency issue · Issue #14104 · mrdoob/three.js · GitHub

Disclaimer it’s in typescript:

1 Like