Transparency changes upgrading from r137 to r138

Questions
1

I am running into problems migrating one of my projects from r135 to r149 but have identified the step from r137 to r138 to be the cause of the problem.

Consider the following (simplified) setup. I have a transparent canvas (it needs to stay transparent because important things are behind it and cannot be in front) and I am rendering a transparent object onto that canvas. However, I am not rendering it directly, instead I am rendering it to a render target first (again for various reasons that cannot be changed) and then copying the content of that render target to the canvas.

In r137 the behavior of directly rendering to the canvas and rendering to the render target + copying to the canvas was exactly the same. It resulted in a transparent background and the transparency of the object was exactly the same in both cases.
In r138 the direct rendering is still the same but when I copy from the render target to the canvas I get a black background. I tried to fix this by setting transparent: true on the copying material. This removed the black background but greatly reduced the opacity of the object.

How can I get the same result on the canvas by copying from the render target (in r138 and above)?

Here are some example screenshots form the following fiddle: Edit fiddle - JSFiddle - Code Playground

(I have a red html-background and some blue text that is behind the canvas. I am rendering a transparent green plane.)

Direct rendering in r137 and r138 (they are the same):

image
image1274×926 24.9 KB

Copying from a render target to the canvas using a non-transparent material:
r137 (the same as direct rendering):

image
image1272×924 24.9 KB

r138 (same transparency of the green but a black background):
image
image1274×916 8.5 KB

Copying from a render target to the canvas using a transparent material in r137 and r138 (they are the same, but the opacity of the green is very reduced):

image
image1276×922 24.7 KB

Thanks for any help!

2

Try adding .blending in this way (line 25):

const copyQuad = new THREE.Mesh(
    new THREE.PlaneGeometry(1, 1),
    new THREE.MeshBasicMaterial({
            map: renderTarget.texture,
            transparent: COPY_MATERIAL_TRANSPARENT,
            blending: THREE.NoBlending, // add this 
        }));
2 Likes