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.

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

Add sizeAttenuation to SpriteNodeMaterial #29269

Closed
segments-tobias opened this issue Aug 30, 2024 · 0 comments · Fixed by #29394
Closed

Add sizeAttenuation to SpriteNodeMaterial #29269

segments-tobias opened this issue Aug 30, 2024 · 0 comments · Fixed by #29394
Assignees
Milestone

Comments

@segments-tobias
Copy link
Contributor

segments-tobias commented Aug 30, 2024

Description

SpriteMaterial (and others such as PointsMaterial) has a sizeAttenuation flag which can be set to false to make sure the sprite maintains the same size on screen no matter where the camera is placed. This is very convenient to display cursors etc. in Three.js.
When switching to node materials, this option is unfortunately missing from SpriteNodeMaterial.
I wonder whether this could be added?

Solution

Add a sizeAttenuation variable on SpriteNodeMaterial that works like sizeAttenuation on SpriteMaterial. Here's an example of how it could be used: jsfiddle-latest-release WebGPURenderer

Alternatives

const baseSize = uniform(0.02);
const distanceToCamera = length(sub(cameraPosition, positionWorld));
const scale = mul(baseSize, distanceToCamera);
material.scaleNode = vec2(scale);

The problem with this approach is that there's a difference between the displayed sprite size in a PerspectiveCamera vs an OrthographicCamera, which wasn't a problem with sizeAttenuation: false in SpriteMaterial.

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants