Apply texture with transparency as postprocessing effect (using TexturePass?)

Questions
1

I am applying a halftone effect to a photo with a mask over the top to fade out in one corner. This is the effect I am seeking:

process
process1180×411 111 KB

I got this working by adding the mask to a plane that sits just above the photo. However, that only works in this case because I use an orthographic camera and nothing moves. I’d prefer to apply the mask as a postprocessing effect on the render, before the halftone effect.

I tried using TexturePass, which seems to do what I want, but I can’t get the effect to use the texture as the alpha map.

const maskTexture = new THREE.TextureLoader().load('mask.png')
maskTexture.colorSpace = THREE.LinearSRGBColorSpace
const maskPass = new TexturePass(maskTexture)
composer.addPass(maskPass)

texture-pass
texture-pass360×324 2.19 KB

And this is the effect when I use the transparency param of TexturePass(which only effects the overall transparency of the effect):

texture-pass-opacity
texture-pass-opacity360×332 29.5 KB

Is there some way to get TexturePass to apply the texture’s alpha channel? Or is there another postprocessing pass that I should be using here?

For reference, here is the mask image I am using.

2

Try to use
maskTexture.premultiplyAlpha = true;

2 Likes
3

That’s it, thanks! To see the image in the scene, I needed to pass an opacity parameter to TexturePass, which automatically sets transparent = true on the material.

const maskTexture = new THREE.TextureLoader().load('mask.png')
maskTexture.colorSpace = THREE.LinearSRGBColorSpace
maskTexture.premultiplyAlpha = true
const maskPass = new TexturePass(maskTexture, 0.9999)
composer.addPass(maskPass)
1 Like