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

MeshVelocityMaterial: render a scene's velocity field to a buffer (useful for motion blur, TRAA post effects) #23784

Merged
merged 17 commits into from
Oct 25, 2022

Conversation

bhouston
Copy link
Contributor

@bhouston bhouston commented Mar 24, 2022

Related issue: #14050

Description

This adds a MeshVelocityMaterial to Three.js in the spirit of MeshNormalMaterial and MeshDepthMaterial. This enables one to render meshes into a velocity field buffer. This is useful for a number of advanced post effects including Motion Blur and Temporal Reprojection Anti-Aliasing.

This implementation only supports a few different methods of inducing velocity in the scene. Here is what it supports and what it doesn't:

  • camera movement changes - SUPPORTED.
  • node movement changes - SUPPORTED.
  • skinning changes - NOT SUPPORTED.
  • blend shape changes - NOT SUPPORTED.
  • displacement changes - NOT SUPPORTED.

I have added a "velocity" mode to the channel example to show this off.

This is what it looks like:

three.js.examples.-.Google.Chrome.2022-03-24.17-46-50.mp4

I have separated out this MeshVelocityMaterial into its own PR so that people can give feedback on this design in isolation rather than combining it with TRAA in general or a Motion Blur post effect.

This contribution is funded by Threekit.

@bhouston bhouston force-pushed the velocity-material branch from bdcf7f1 to 9b42696 Compare March 24, 2022 21:58
@WestLangley
Copy link
Collaborator

WestLangley commented Mar 25, 2022

Setting material.needsUpdate = true; is not necessary when changing material.side.

However, toggling between BasicDepthPacking and RGBADepthPacking does not update the material.

EDiT: It appears the renderer treats parameters.depthPacking as a boolean, and it is not.

src/core/Object3D.js Outdated Show resolved Hide resolved
@mrdoob mrdoob added this to the r140 milestone Mar 28, 2022
@bhouston bhouston force-pushed the velocity-material branch from ce60fca to 2a211ff Compare March 31, 2022 18:59
@bhouston bhouston force-pushed the velocity-material branch from 2a211ff to fd04378 Compare March 31, 2022 19:01
@bhouston
Copy link
Contributor Author

I believe I have cleaned up this PR so that it meets the various suggestions made in its review. Let me know what else I should do.

I would like next to contribute a TRAA method that uses this material.

@mrdoob mrdoob modified the milestones: r140, r141 Apr 30, 2022
@mrdoob mrdoob modified the milestones: r141, r142 May 26, 2022
@AdaRoseCannon
Copy link
Contributor

There is an upcoming WebXR proposal, to allow fewer frames to be rendered, called space warp being lead by @cabanier this would be required for that to work https://twitter.com/rcabanier/status/1537210613318811648

@mrdoob mrdoob modified the milestones: r142, r143 Jun 29, 2022
@mrdoob mrdoob modified the milestones: r143, r144 Jul 28, 2022
@mrdoob mrdoob modified the milestones: r144, r145 Aug 31, 2022
@mrdoob mrdoob modified the milestones: r145, r146 Sep 29, 2022
@Mugen87
Copy link
Collaborator

Mugen87 commented Oct 22, 2022

@bhouston I've updated the PR to remove the merge conflicts and to honor the remaining feedback. Just one question: Is it normal when the rendered velocity sometimes affects only parts of the mesh? This is a screenshot from the front:

image

I can see this behavior before my latest commits, too.

@bhouston
Copy link
Contributor Author

If parts of the mesh are not moving left or right, then yes, they will not have colors.

@Mugen87 Mugen87 merged commit 20c13f1 into mrdoob:dev Oct 25, 2022
@Mugen87
Copy link
Collaborator

Mugen87 commented Oct 25, 2022

Let's merge this! Having a velocity material in the examples is really useful. When the material is going be used in more and more components (like WebXR), we can still move MeshVelocityMaterial into the core.

@joshuaellis joshuaellis mentioned this pull request Oct 31, 2022
19 tasks
@cabanier
Copy link
Contributor

If parts of the mesh are not moving left or right, then yes, they will not have colors.

@bhouston Since the whole mesh is moving when you rotate it, shouldn't it all light up?

@cabanier
Copy link
Contributor

I think I understand now. If one of the colors/velocities goes negative, it gets clipped to black.

@bhouston
Copy link
Contributor Author

Honestly, it all depends on how things are being visualized. If it is hard to tell if it is correct with the current visualization method, maybe we need to switch to a different one? Maybe we could draw little lines to indicate flow or something on screen?

@WestLangley
Copy link
Collaborator

For visualization only, something along these lines... but better:

vec2 vel = ( ndcPositionCurrent - ndcPositionPrevious ) * 0.5;

vel *= 100.0; // values are too small to see

vel = vel * 0.5 + 0.5;

gl_FragColor = vec4( vel, 1.0, 1.0 );

Tip: Allowing panning in the example is illustrative.

@cabanier
Copy link
Contributor

FYI I'm using your velocity shader to implement space warp on quest and it works great.

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.

6 participants