Skip to content

NodeMaterial: Introduce .maskNode and improve shapeCircle() #31127

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.

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

Merged
merged 4 commits into from
May 19, 2025

Conversation

sunag
Copy link
Collaborator

@sunag sunag commented May 18, 2025

Related issue: #31092

Description

Introduce .maskNode as was done in the old NodeMaterial, this simplifies the use of alphaTest for procedural purposes since alphaTestNode needs to deal with the current opacity.

@sunag sunag added this to the r177 milestone May 18, 2025
Copy link

📦 Bundle size

Full ESM build, minified and gzipped.

Before After Diff
WebGL 337.26
78.64
337.26
78.64
+0 B
+0 B
WebGPU 550.12
152.5
550.2
152.54
+78 B
+37 B
WebGPU Nodes 549.47
152.34
549.55
152.38
+78 B
+36 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Before After Diff
WebGL 468.12
113.14
468.12
113.14
+0 B
+0 B
WebGPU 625.49
169.28
625.57
169.31
+78 B
+28 B
WebGPU Nodes 580.34
158.59
580.42
158.62
+78 B
+34 B

@sunag sunag marked this pull request as ready for review May 19, 2025 04:10
@sunag sunag merged commit e07583b into mrdoob:dev May 19, 2025
12 checks passed
@sunag sunag deleted the dev-shape branch May 19, 2025 04:10
Comment on lines +141 to +143
material.opacityNode = shapeCircle();
material.alphaToCoverage = true;
material.transparent = true;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need alphaToCoverage when we are using opacityNode?

@mrdoob
Copy link
Owner

mrdoob commented May 20, 2025

How's maskNode different from opacityNode and/or alphaTestNode?

@sunag
Copy link
Collaborator Author

sunag commented May 20, 2025

Do we need alphaToCoverage when we are using opacityNode?

The circle that shapeCircle() creates when using alphaToCoverage is not completely hard, it has shades of opacity.
This could be a function parameter too like: shapeCircle( alphaToCoverage )

How's maskNode different from opacityNode and/or alphaTestNode?

alphaTestNode depends on the opacity of diffuseColor/opacity. maskNode takes a boolean value as input and is processed before diffuseColor.

RuthySheffi pushed a commit to RuthySheffi/three.js that referenced this pull request Jun 5, 2025
…ob#31127)

* always check `alphaTest` but optimize uniform to constant if necessary

* Introduce `.maskNode`

* improve `shapeCircle`

* `webgpu_compute_particles`: use `shapeCirle()`
RuthySheffi pushed a commit to RuthySheffi/three.js that referenced this pull request Jun 5, 2025
…ob#31127)

* always check `alphaTest` but optimize uniform to constant if necessary

* Introduce `.maskNode`

* improve `shapeCircle`

* `webgpu_compute_particles`: use `shapeCirle()`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants