Transparent RT showing black background when scene background is image

I’m having some trouble when rendering to a RT with transparent clear color.
My goal is to make selective blur to some parts of the scene. What I try to do here is to render these parts to a different RT and after that just draw that RT on the scene using a plane geometry. I’m using composer as a quick test so I don’t have to create all RTs for the 2 pass blur and so on.
So my steps are these:

  • Create an ortho camera
  • Create an scene to render the blurred parts and add the geometry to blur there
  • Create a RT to store the blurred result
  • Use Composer to apply blur (2 passes, V & H) to this scene
  • Create a result scene, with a background (Color or Image) and just a plane with the render texture from the blur scene composer.

When I set the result scene background as a color, everything works as expected, but when I switch it to use a texture, the blur RT background color renders as opaque black

Here is a demo showing the problem

Any idea? what am I doing wrong?


Try it like so: three.js dev template - module - JSFiddle - Code Playground

The idea is to make the plane that holds the render target texture transparent. You also have to define a clear color and alpha value for the render pass in order to get the render target properly cleared.

Thank you, that worked!
The only thing I don’t understand is why, when I set the main scene background to a color (without setting the render pass clear color), the composer renders the RT as transparent OR it is using that background as it’s own background, as it looks like it’s also blurring it (notice there’s no black blurred area around the cube as it should if the bg was black)

Version setting render pass clear color: