Skip to content

Rendering refactor for anti-aliasing#880

Merged
elalish merged 47 commits intomasterfrom
alias
Nov 19, 2019
Merged

Rendering refactor for anti-aliasing#880
elalish merged 47 commits intomasterfrom
alias

Conversation

@elalish
Copy link
Contributor

@elalish elalish commented Nov 9, 2019

Fixes #724

This is the big one I've been working on for weeks now, and I believe it solves the rest of this umbrella issue that has represented our various rendering artifacts. The normal map detail is back, we have a new roughness mipmapper to anti-alias the normal map, as well as anti-aliasing on the geometry normals. I've also updated PMREM to simplify its shader, remove some blur artifacts, and remap the roughness. I've also made a new fidelity test, DirectionalLightTest, which compares Filament's directional light to our PMREM using a single white pixel as input, scaled to be the same 1 lux of illuminance. This is a very hard test, since a directional light can make much more precise calculations, and I'm quite happy with the result. Note some of the difference is also due to modeling multiscattering differently in three vs filament.

You can still find aliasing here and there, but it's much improved and some I can't do much about (like where triangles don't share normals; MSAA handles this pretty well, but it's not always enough).

@elalish elalish requested a review from cdata November 18, 2019 18:06
@cdata cdata added this to the v0.8.0 milestone Nov 18, 2019
@cdata
Copy link
Contributor

cdata commented Nov 18, 2019

Marked as a breaking change due to Three.js version bump, and also rendering changes.

cdata
cdata previously approved these changes Nov 18, 2019
Copy link
Contributor

@cdata cdata left a comment

Choose a reason for hiding this comment

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

You left out a semi-colon 😱

Seriously though, amazing work on this. Can't wait to see it on some real sites 👍

}
}

export let renderer = new Renderer({debug: isDebugMode()});
Copy link
Contributor

Choose a reason for hiding this comment

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

Moving renderer into here has consequences, but we will only realize them in tests for now. The move means new Renderer happens (every) first time that this module gets imported from somewhere, regardless of why it was imported. So, in our test that tests Renderer, we will create an extra instance of it and that instance will just sit around and do nothing.

Just putting this out there, since it is bound to come up down the road. No action requested.

const helper = new CameraHelper(scene.shadow.shadow.camera);
scene.add(helper);
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Missing semi-colon here

Copy link
Contributor

@cdata cdata left a comment

Choose a reason for hiding this comment

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

🎉

@elalish elalish merged commit 3fb2fc3 into master Nov 19, 2019
@elalish elalish deleted the alias branch November 19, 2019 00:18
@mrdoob
Copy link
Collaborator

mrdoob commented Nov 19, 2019

🔥🔥🔥🔥🔥🔥

@pushmatrix
Copy link
Contributor

🎉 🎉 🎉 🎉 🎉

@mrdoob
Copy link
Collaborator

mrdoob commented Nov 19, 2019

Spectacular work Emmett!

For comparing:
https://model-viewer-tester.glitch.me/
https://model-viewer-tester.glitch.me/0.7.2.html

This looks much better with all my local models.
0.7.2 was in fact a bit too bright sometimes and a bit too dark other times.

@mrdoob
Copy link
Collaborator

mrdoob commented Nov 19, 2019

@pushmatrix

Comparing master with 0.5.1... 😁

0.5.1
Screen Shot 2019-11-19 at 1 08 31 PM

master
Screen Shot 2019-11-19 at 1 08 46 PM

@mrdoob
Copy link
Collaborator

mrdoob commented Nov 19, 2019

Actually, that's not fair. I should add experimental-pmrem to 0.5.1...

@mrdoob
Copy link
Collaborator

mrdoob commented Nov 19, 2019

0.5.1
Screen Shot 2019-11-19 at 1 15 07 PM

master
Screen Shot 2019-11-19 at 1 08 46 PM

@mrdoob
Copy link
Collaborator

mrdoob commented Nov 19, 2019

WatterBottle is perhaps the most obvious one.

0.5.1
Screen Shot 2019-11-19 at 1 22 04 PM

master
Screen Shot 2019-11-19 at 1 22 36 PM

@cdata
Copy link
Contributor

cdata commented Nov 19, 2019

It's pretty incredible to see how far we have come 😮

BTW it might be better in the comparison to also set stage-light-intensity="0", because that is what is causing that bright spot in the top-center of the model. Of course, since our calibration was relatively messed up in v0.5.1, you might have to up other values to compensate...

@pushmatrix
Copy link
Contributor

I'm so happy the models have had time to "dry off". 0.5.1 had lots of models look really wet.

@mrdoob Check out this model in your tool:
https://github.com/GoogleWebComponents/model-viewer/files/3273850/fabricball.gltf.zip

This is what it used to look like:
image

@mrdoob
Copy link
Collaborator

mrdoob commented Nov 20, 2019

@pushmatrix Nice! Is it okay if I add that model to model-viewer-tester?

@pushmatrix
Copy link
Contributor

@mrdoob Of course! Just hope people don't get confused why they are looking at a sphere :P

@mrdoob
Copy link
Collaborator

mrdoob commented Nov 20, 2019

Done!

@elalish elalish mentioned this pull request Dec 19, 2019
7 tasks
@hybridherbst
Copy link
Contributor

@mrdoob great to see that there's a simple testing page for model-viewer! After trying it out I found a slight bug:

https://model-viewer-tester.glitch.me/ does not allow changing the environment map (nothing happens when selecting something in the dropdown)
https://model-viewer-tester.glitch.me/0.7.2.html does allow changing the env map

@elalish
Copy link
Contributor Author

elalish commented Dec 19, 2019

@soraryu @mrdoob This is because of a breaking change (API rename): #923. Should be easy to fix the glitch. Also, we might want to consider moving that glitch into our docs, as it's quite useful!

elalish added a commit to elalish/model-viewer that referenced this pull request Feb 4, 2020
 
Rendering refactor for anti-aliasing (google#880)

* removed normalmap blur

* added roughnessmipmapper

* need to change strategies

* roughness shader runs

* changing roughness mips, but not saving the texture properly

* texture saving working, but seems to have a race condition

* commented out debugging

* roughness mipmapper sort of working but may have a race

* working better now; equation needs work

* mipmapping and saving work, equation should be tweaked

* merging master

* roughness mipmapper working

* cleanup

* added vertex normal antialiasing

* fixed skybox

* disaligned blur axes to remove pole artifact

* added uniform mip level

* moved geometry antialiasing up to affect main roughness value

* using two roughness values

* moved debugging function

* fixed black PMREM corner pixels

* added directional light fidelity test

* remapped roughness

* best yet

* first cleanup

* second cleanup

* more cleanup

* fixed unlit model bug

* reverting index

* bumped threejs version

* cleanup

* cleaning spaces

* added docs, shader improvement

* updated goldens

* slight update of PMREM parameters to match analysis

* updated goldens

* addressing feedback

* renderer -> threeRenderer

* moved debug to utilities

* added comma
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Textures are blurring when in the distance in 0.6.0

6 participants