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

Temporal Reprojection Anti-Aliasing (TRAA) #14050

Open
bhouston opened this issue May 12, 2018 · 4 comments
Open

Temporal Reprojection Anti-Aliasing (TRAA) #14050

bhouston opened this issue May 12, 2018 · 4 comments

Comments

@bhouston
Copy link
Contributor

This is the method used by DICE's latest work as well as UE4.

There are two methods of doing this.

The first and simpler approach is to just use the delta camera transform to figure out the velocity vectors from the world positions.

The more advanced method is to render a velocity field for each object that also incorporates the camera transform, this allows capturing the object velocity of moving objects and the sub-object velocities of deforming objects (such as morphs and skins.) I would slowly build up to the more complex version of this.

The main implementation that people use is this one: https://github.com/playdeadgames/temporal

@bhouston
Copy link
Contributor Author

bhouston commented Jul 4, 2022

Myself and @Threekit are pleased to put a bounty of $1000 USD on an accepted PR of a full implementation of TRAA in the spirit of PlayDeadGames.

Bonus $250 USD for a anti-aliasing example that has patterns like this and allows you to switch between the various Three.js antialiasing techniques - this allows one to easily debug AA methods:

anti-aliasing_image_03

@0beqz
Copy link

0beqz commented Mar 5, 2023

I've implemented a TRAA effect shader using velocities for reprojection and neighborhood clamping as well as planar distance comparison to deal with disocclusions in order to prevent temporal lag and smearing.
It's using postprocessing.js to manage passes.

TRAA
Basic comparison scene:
screenshot-b73152bf-fb48-4be2-8124-3316e36594b3
Demo scene

You can also compare how this high-poly model looks using the different AA techniques:
screenshot-d3278c0a-17b2-4412-a712-cecf224fcde2
High-poly model demo scene

You can also compare the following AA methods: TRAA, MSAA, FXAA, SMAA and none/disabled
comp

The repo is here: https://github.com/0beqz/realism-effects and here's the implementation: https://github.com/0beqz/realism-effects/tree/main/src/traa

You can import it via its npm module and use it with postprocessing.js like described here: https://github.com/0beqz/realism-effects#usage

@bhouston
Copy link
Contributor Author

Here is some old TRAA code for Three.js as well: https://gist.github.com/bhouston/b43d81fa9751ee0d7172917c4cf43684. Feel free to incorporate it into Three.js.

@mrdoob
Copy link
Owner

mrdoob commented May 25, 2023

@0beqz I think the camera near/far needs to be adjusted:

Screenshot 2023-05-25 at 11 03 21

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

No branches or pull requests

5 participants