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

13

For people reading this and still wanting to enable transparency, here’s how to

const linesMesh = new Line2(
	lineGeometry,
	new LineMaterial({
		linewidth: 1.5,
		transparent: true,
		vertexColors: true,
		alphaToCoverage: true, 
	}),
);
linesMesh.material.onBeforeCompile = function onBeforeCompile(parameters, renderer) {
	parameters.defines["USE_COLOR_ALPHA"] = "";
	parameters.vertexShader = parameters.vertexShader
		.replace(
			"vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd;",
			"vColor = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd;",
		)
		.replace("attribute vec3 instanceColorStart;", "attribute vec4 instanceColorStart;")
		.replace("attribute vec3 instanceColorEnd;", "attribute vec4 instanceColorEnd;");
	parameters.fragmentShader = parameters.fragmentShader.replace(
		"gl_FragColor = vec4( diffuseColor.rgb, alpha );",
		"gl_FragColor = diffuseColor;",
	);
};

also make sure your color buffer itemSize is 4