From three.js example “webgl_lines_fat.html”
webgl_lines_fat.html (8.3 KB)
LineMaterial.js (13.0 KB)
@Chaser_Code @prisoner849
Weird the site you sent looks different to me, will send screenshot soon.
How did you make so the opacity switches mid line? Or is that from the same example?
EDIT:
This is how that site looks for me, the “webgl_lines_fat”. The one @prisoner849 made is interesting to me, how it switches mid-vertex. The one @Chaser_Code sent before (reply 16), how did you do that?
I modified LineMaterial. Calling .computeLineDistances() before.
into html change path to new “LineMaterial.js”
Thank you! This seams to be the solution, I was confused first over the files you sent but realize now they are changed! My other question is, what is .a and .b on a vec4?
It was raw example. I dont know three.js good.
Here new files
webgl_lines_fat.html (8.4 KB)
LineMaterial.js (13.1 KB)
Color can set here:
Transparent value i added to color.b here is 1.0-t
Into fragment shader this
gl_FragColor = vec4(color_a,diffuseColor.b);
Yes, I figured this out a bit after you sent the other files, didn’t understand what you sent at first. My question is how does this work, what part maks it gradient? And what does vec4.a and vec4.b mean?
Can u share where is vec4.a and vec4.b.
Gradient alpha into vertex colors here colors.push( color.r, color.g, 1.0-t );
The LineMaterial.js you sent before:
vec4 diffuseColor = vec4( diffuse, alpha );
gl_FragColor = vec4( vec3(0.0,0.5,1.5), diffuseColor.b );
diffuseColor.b
is vec4.b, what does it do?
Edit: Another thing I noticed, not really a problem but if there is an easy fix it would be nice, is there any way to remove the duplicate color at each vertex?
At the end of each vertex, where the line segments join together they overlap and therefor the opacity is more there, any easy fixes for this?
Thank you so much for you help! I think I have understood now how it works but I am still not understanding what vec4.b does, however that is an another discussion! I have managed to implement this in my code now. It looks alot better now that it is an gradient instead of a hard switch.
vec4.b do alpha. You can set alpha to vec4.r
colors.push( 1.0-t, color.g, color.b);
gl_FragColor = vec4(color_a,diffuseColor.r);
I just use one parameter from vertex colors for alpha. And real color get from new uniform color_a
Code can be improved more.
For transparent artifact three.js webgl - lines - fat
Of course, that is what .b is. I guess it is “prepass depth” and “prepass stensil” that removes the points at the linesegment-intersections? Does prepassing like that use more processing power? In that case how much and how big of a performance hit should I expect?
I didnt used it. There double pass maybe. GPU loaded 52% with depth stencil and 52% without three.js webgl - lines - fat
GPU loaded 53% with 2 posteffect and 1billion tris
I have added the prepass to my line now and it works good. Will do some investigation on if it’s worth it, and maybe turn it off when I have alot of lines or when they are really long. I have one more question: Any idea why this is happening?
The line is cut in half when there is another mesh where the line goes (they are on different scenes, the line and the white plane)
“GPU loaded 52% with depth stencil and 32% without”
Mistake. There 52% with and 52% without
Well, then that is really nice then, no real difference, also realized you didn’t need to add the prepass to the scene for it to remove the dubble colors, or there is another reason for that? Why you made a prepass mesh and added it to the scene?
I rotate my example and change camera near from 0.01 to 1. No artifact.
Try change camera near
I don’t think it has to do with rotation as I can have the same rotation but if the other mesh is visible the width is cut in half if its hidden its normal.