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

Change CurveModifier splineTexture filtering to Linear for smoother path #28375

Merged
merged 1 commit into from
May 14, 2024

Conversation

manthrax
Copy link
Contributor

@manthrax manthrax commented May 14, 2024

Related issue: #28376

A clear and concise description of what the problem was and how this pull request solves it.

In the CurveModifier examples there is a lot of jitter and distortionwhen meshes go around the sharper curves:

In the:
https://threejs.org/examples/?q=curve#webgl_modifier_curve_instanced
and:
https://136.24.178.125/three.js/examples/webgl_modifier_curve.html

examples, you can see shimmering as the text instances are curved along their paths around corners.

This is because the splineTexture magFilter is explicitly set to NearestFilter instead of LinearFilter , causing snapping in the splineTexture sampling.

This PR changes the default splineTexture .magFiltering to LinearFiltering to fix this issue.

Here is a glitch that allows changing the magFilter between Linear and Nearest to show the issue:

https://atlantic-warp-sweater.glitch.me/

This contribution is funded by Example

@Mugen87 Mugen87 merged commit 0f4df91 into mrdoob:dev May 14, 2024
11 checks passed
@Mugen87 Mugen87 added this to the r165 milestone May 14, 2024
@Mugen87
Copy link
Collaborator

Mugen87 commented May 14, 2024

Indeed, much smoother!

@Mugen87
Copy link
Collaborator

Mugen87 commented May 14, 2024

I think NearestFilter was originally used to support more platforms because linear filtering floating point textures is not supported on all hardware. However, the previous quality wasn't good and it seems LinearFiltering is a better default.

If users have to support incompatible hardware, they can still set the filtering via the flow reference back to NearestFilter.

flow.splineTexure.magFilter = THREE.NearestFilter;

@Mugen87
Copy link
Collaborator

Mugen87 commented May 14, 2024

One possible improvement would be to use a half float texture in CurveModifier. That would require the usage of Uint16Array and DataUtils.toHalfFloat() when updating values into the spline texture. I guess the precision of half float should be enough for this use case.

Linear filtering half float textures always works in WebGL 2.

@Mugen87
Copy link
Collaborator

Mugen87 commented May 14, 2024

BTW: Why is only magFilter set to LinearFilter? Shouldn't we do the same for minFilter (which is still NearestFilter).

@manthrax manthrax deleted the curvemodifier-improvement branch May 14, 2024 22:05
@manthrax
Copy link
Contributor Author

BTW: Why is only magFilter set to LinearFilter? Shouldn't we do the same for minFilter (which is still NearestFilter).

I saw that but I wasn't clear on the semantics of using LinearFilter for minFilter..

But I think its valid.. so lgtm?

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