Can I have a transparent background in outline only??

[monkeykim111]

Hello sir! I need a transparent background, not a black background in Outline only. I want the output to look like the picture below.

For Outlines V2

const renderer = new THREE.WebGLRenderer({
      alpha: true,
      canvas: document.querySelector('#outline')
});

As in the code above, if alpha: true is given, a transparent background is output. like this picture.

However, in Outline only, no matter what I do, I cannot output a transparent background. like this picture.

This is my forked repo. https://github.com/monkeykim111/webgl-outlines I used three js minimal version and changed gl_FragColor for outline only and ran several tests for transparent background here.

And these are the sites I referenced. https://stackoverflow.com/questions/20899326/how-do-i-stop-effectcomposer-from-destroying-my-transparent-background

https://discourse.threejs.org/t/effect-composer-keep-transparency/4447

https://discourse.threejs.org/t/transparent-background/22742/3

please help thank you!!

[OmarShehata]

@monkeykim111 thank you for the code example! It looks like the issue is in my code, in this line:

https://github.com/monkeykim111/webgl-outlines/blob/ad55818e33d71b069ed92daae596fdf5554e99d5/threejs-outlines-minimal/src/CustomOutlinePass.js#L197

This hard-codes the alpha of all pixels drawn to 1.

What we want instead is to draw with alpha = 1 in pixels where there is an outline, and alpha = 0 in pixels where there is no outline. This information is encoded in the outline variable. So to fix this, change this line to:

gl_FragColor = vec4(vec3(outline * outlineColor), outline);

If you wanted the outline itself to be drawn with a specific alpha, you would do it like this:

float outlineAlpha = 0.25;

gl_FragColor = vec4(vec3(outline * outlineColor), outline * outlineAlpha);

Here's a diff of changes I made to your repo to confirm this working, including adding a background on the HTML page to confirm it is visible: diff.txt

[monkeykim111]

Thank you very much! the problem is easily solved and the result is great. I was struggling with three js for the first time in my life. Your projects and kindness have helped me a lot. happy new year and have a nice day :)