Change opacity using fat lines example

Questions
1

Hi,

I am using the fat lines example : three.js webgl - lines - fat

I would like to change the opacity of the lines, how can I proceed ?

Thanks :slight_smile:

2

Looks like the material takes opacity have you tried modifying that?

3

I tried that but it’s not working :

   	matLine = new THREE.LineMaterial( {
	linewidth: 0.002,
	vertexColors: THREE.VertexColors,
            transparent: true,
            opacity : 0.5
} );
4

I have just been trying to achieve the fat lines with an opacity value, exactly as @Roger has tried but I too cannot get it to work.

Can anyone confirm whether its possible or not?

5

I haven’t been able to create fat transparent lines either.
I think it should be possible, by tweaking the shaders, tho im not sure wich one and how.
I might look into this later though.

6

Is there anyone who has succeeded in setting an opacity to the fat lines? I have been looking for a solution, but can’t seem to make it work…

7

LineMaterial is a ShaderMaterial which has a uniform opacity that is passed to the fragment shader. However when setting opacity on the LineMaterial it is not passed to the fragment shader. A workaround is to set the opacity uniform directly. So instead of setting material.opacity = 0.5, I did material.uniforms.opacity = 0.5. Hope this works for others aswell.

8

To clarify this topic: Wide lines do officially not support transparency because of rendering artifacts. More details right here: https://github.com/mrdoob/three.js/pull/16570#issuecomment-496235146

9

Thank you for your clarification. I understand why it isn’t officially supported, but for my use case it isn’t an issue.

10

Interestingly this approach would suit me fine, but doesn’t seem to work - it just dissappears if the material.uniforms.opacity is anything other than 1. Is this something that will only work in later releases (im on r96)?

11

I checked r96 source code of LineMaterial and this should work the same way. The fragment shader contains the same piece of code which should set opacity on gl_fragcolor.
vec4 diffuseColor = vec4( diffuse, opacity );
gl_FragColor = vec4( diffuseColor.rgb, diffuseColor.a );

12

Thanks @Joachim material.uniforms.opacity.value = 0.5 worked for me