Line2NodeMaterial: Add opacityNode support
#29964
Conversation
📦 Bundle sizeFull ESM build, minified and gzipped.
🌳 Bundle size after tree-shakingMinimal build including a renderer, camera, empty scene, and dependencies.
|
It looks better but we can still see a point between segmentation |
|
I had to modify also updated the demo @Mugen87 let me know what you think of it, i didn't see bad side effects |
sunag
changed the title
opacityNode support
|
Wide line materials do not support alpha because of the resulting artifacts, see #23680. I'm not familiar enough with the wide line implementation so I hope @WestLangley or @gkjohnson can have a look at this PR. |
|
Please test with wider lines and fewer points so you can see the artifacts. The segmented colors look like a previous issue. 
Setting |
Without something like a stencil test (see #23680 (comment)) it won't be possible to avoid these artifacts. Even with the pre-depth / stencil test, though, overlapping lines won't display correctly which would be even more noticeable with per-line opacity. I don't have strong opinions on this other than it won't look right or work "out of the box" in the connected line segments case - this can be useful for users who know how to work around it, though. Separated line segments should look okay, as well. With more control over render order or ability to render an object with two passes in three.js it would be more possible to make a variant of this that "just works" (overlapping aside). I wonder if something like a compute shader rasterizer or some custom per-segment depth adjustment could help with the artifacts. |
examples/jsm/lines/LineGeometry.js
Outdated
| const count = array.length / 3 - 1; | ||
| const points = new Float32Array( 6 * count ); | ||
|
|
||
| const length = array.length - 3; | ||
| const points = new Float32Array( 2 * length ); | ||
| for ( let i = 0; i < count; i ++ ) { | ||
|
|
||
| for ( let i = 0; i < length; i += 3 ) { | ||
|
|
||
| points[ 2 * i ] = array[ i ]; | ||
| points[ 2 * i + 1 ] = array[ i + 1 ]; | ||
| points[ 2 * i + 2 ] = array[ i + 2 ]; | ||
|
|
||
| points[ 2 * i + 3 ] = array[ i + 3 ]; | ||
| points[ 2 * i + 4 ] = array[ i + 4 ]; | ||
| points[ 2 * i + 5 ] = array[ i + 5 ]; | ||
| points.set( array.slice( 3 * i, 3 * ( i + 1 ) ), 6 * i ); | ||
| points.set( array.slice( 3 * ( i + 1 ), 3 * ( i + 2 ) ), 6 * i + 3 ); |
There was a problem hiding this comment.
I'd prefer to revert these changes to LineGeometry and keep the PR focused on any changes related to material opacity. I find it harder to read and it will be slower and generate more garbage with the unnecessary "slice" calls.
There was a problem hiding this comment.
revert to previous synthax
There was a problem hiding this comment.
It looks like there's still a pretty significant diff in the LineGeometry.js file. I don't think it needs to be touched at all for the changes being proposed.
|
@WestLangley I just tested with wider lines and it looks good on my without alpha with alpha You need to apply my changes to the LineGeometry as well to make it works But the problem is you can't see behind the line ( make sense as its draw as one object ? ) and more complex approach like suggest by @gkjohnson might be necessary for it ? Still I think its a little improvement compare to before and can be used to varius effect like making a line appear using alpha ( simulating line drawing as example ) or adding painting/particles textures to the line. |
Related issue: #29962
Add opacityNode support to line2NodeMaterial
wip : worked almost straightforward but at the intersection of line there is a round corner added
