Transparent Canvas ?

[stephanedemotte]

Hello.

Can we set a transparent background in the composer.

i've got

  const renderer = new WebGLRenderer({ 
    powerPreference: "high-performance",
    stencil: false,
    depth: false,
    canvas: canvas.value,
    alpha: true,
    antialias: true
  })

When i use

  const render = () => {
    renderer.render(scene, camera)
  } 

But i've got a black background when i render

  const render = () => {
    composer.render(clock.getDelta())
  } 

Any idea ?

Thank you !

[Mateo150]

Hi! How do you solve this?

[anat]

+1 I'm getting a black background when using DepthOfFieldEffect and I was wondering how I could make my canvas transparent.

When I disable the effect it's transparent, but when actived it's black.

const effectPass = new EffectPass(this.camera, depthOfFieldEffect, vignetteEffect, cocTextureEffect, depthEffect);
this.composer.addPass(effectPass);

I tried to remove vignetteEffect, cocTextureEffect and depthEffect like this :

const effectPass = new EffectPass(this.camera, depthOfFieldEffect);
this.composer.addPass(effectPass);

The bokeh is still working but I can't get my background back to transparent. I'm using a background gradient on the DOM with moving objects on multiple layers. Maybe the background could look like with zero blur. Wondering myself how this could look as my DOM elements is the background of the scene.

[vanruesc]

@anat Thanks for the report; it looks like the internal mask pass of the DepthOfFieldEffect isn't being configured properly when a transparent canvas is used. I'll include a fix in the next release. You can use the following hack to make it work now:

import { MaskFunction } from "postprocessing";

const maskMaterial = depthOfFieldEffect.maskPass.getFullscreenMaterial();
maskMaterial.maskFunction = MaskFunction.MULTIPLY;

Please note that it's not advisable to comment on old issues due to greatly reduced visibility. It's generally better to open a new ticket or discussion. You can reference related issues by their number, e.g. #226.

[anat]

@vanruesc Thanks a lot for your answer !

It work as expected and it looks great.

Your package is really great, by the time I was using spite/Wagner and it was really nice. Thank you for providing us your awesome work.

I will remember your advice ;) (#issue)