Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Line2NodeMaterial: Add opacityNode support #29964

Open
wants to merge 11 commits into
base: dev
Choose a base branch
from
+16 −6
Open

Line2NodeMaterial: Add opacityNode support #29964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
eb8c0d2
add opacityNode support to line2NodeMaterial
Makio64 Nov 25, 2024
4b6c85d
alpha.mul to take in account previous alpha
Makio64 Nov 25, 2024
ad752bd
fix line geometry segments
Makio64 Nov 25, 2024
3d492d5
fix merge
Makio64 Nov 25, 2024
a2b4e24
update screenshot
Makio64 Nov 25, 2024
a573110
fix fat line example typo
Makio64 Nov 26, 2024
5e6845e
allow larger line width to test
Makio64 Nov 26, 2024
227f3ee
revert synthax
Makio64 Nov 26, 2024
ff61f2b
fixed pr
Makio64 Nov 26, 2024
ee9d07c
test using transparent:true ..
Makio64 Nov 26, 2024
a7ed3dc
revert line changes
Makio64 Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified examples/screenshots/webgpu_lines_fat.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 13 additions & 3 deletions examples/webgpu_lines_fat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<script type="module">

import * as THREE from 'three';
import { color } from 'three/tsl';
import { color, float, uniform } from 'three/tsl';

import Stats from 'three/addons/libs/stats.module.js';

Expand Down Expand Up @@ -111,9 +111,12 @@
vertexColors: true,
dashed: false,
alphaToCoverage: true,
transparent: true

} );

matLine.opacityNode = uniform( float( 1 ) );

line = new Line2( geometry, matLine );
line.computeLineDistances();
line.scale.set( 1, 1, 1 );
Expand Down Expand Up @@ -213,7 +216,8 @@
'dashed': false,
'dash offset': 0,
'dash scale': 1,
'dash / gap': 1
'dash / gap': 1,
'alpha': 1
};

gui.add( param, 'line type', { 'LineGeometry': 0, '"line-strip"': 1 } ).onChange( function ( val ) {
Expand Down Expand Up @@ -245,7 +249,7 @@

} );

gui.add( param, 'width', 1, 10 ).onChange( function ( val ) {
gui.add( param, 'width', 1, 50 ).onChange( function ( val ) {

matLine.linewidth = val;

Expand Down Expand Up @@ -313,6 +317,12 @@

} );

gui.add( param, 'alpha', 0, 1 ).onChange( function ( val ) {

matLine.opacityNode.value = val;

} );

}

</script>
Expand Down
6 changes: 3 additions & 3 deletions src/materials/nodes/Line2NodeMaterial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ class Line2NodeMaterial extends NodeMaterial {

}

const alpha = float( 1 ).toVar( 'alpha' );
const alpha = float( this.opacityNode ? this.opacityNode : 1 ).toVar( 'alpha' );

if ( useWorldUnits ) {

Expand All @@ -309,7 +309,7 @@ class Line2NodeMaterial extends NodeMaterial {
if ( useAlphaToCoverage && renderer.samples > 1 ) {

const dnorm = norm.fwidth();
alpha.assign( smoothstep( dnorm.negate().add( 0.5 ), dnorm.add( 0.5 ), norm ).oneMinus() );
alpha.mulAssign( smoothstep( dnorm.negate().add( 0.5 ), dnorm.add( 0.5 ), norm ).oneMinus() );

} else {

Expand All @@ -334,7 +334,7 @@ class Line2NodeMaterial extends NodeMaterial {

If( vUv.y.abs().greaterThan( 1.0 ), () => {

alpha.assign( smoothstep( dlen.oneMinus(), dlen.add( 1 ), len2 ).oneMinus() );
alpha.mulAssign( smoothstep( dlen.oneMinus(), dlen.add( 1 ), len2 ).oneMinus() );

} );

Expand Down