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

examples: post-processing material AO #27475

Merged
merged 6 commits into from
Jan 2, 2024

Conversation

Rabbid76
Copy link
Contributor

The incident light of a fragment is composed of ambient light, direct light and indirect light. Ambient Occlusion only occludes ambient light and environment light, but not direct light. Direct light is only occluded by geometry that casts shadows. And of course the emitted light should not be darkened by ambient occlusion either. This cannot be achieved if the AO post processing pass is simply blended with the diffuse render pass.

The aim of this mesh material is to use information from a post-processing pass in the diffuse color pass. This example material is based on MeshPhysicalMaterial.
In the example, the output of an AO pass is used to create AO with the same logic and the same effect on the material as from the aoMap. Actually, the output of any screen space AO (SSAO, GTAO) can be used, as it is only necessary to provide the AO in a color channel of a texture, however, the AO pass must be rendered prior to the color pass, which makes the post-processing pass somewhat of a pre-processing pass. This can still be achieved with the the standard EffectComposer features.
For this purpose a new map (aoPassMap) is added to the material. The map is used the same way as the aoMap.

@Rabbid76 Rabbid76 force-pushed the examples/postprocessing-material-ao branch from 608bd35 to 7819ad8 Compare December 31, 2023 10:39
@Mugen87
Copy link
Collaborator

Mugen87 commented Dec 31, 2023

For testing: https://rawcdn.githack.com/Rabbid76/three.js/examples/postprocessing-material-ao/examples/webgl_postprocessing_material_ao.html

@Mugen87
Copy link
Collaborator

Mugen87 commented Dec 31, 2023

Interesting PR!

About the GUI options: When configuring the output, why can you only select the diffuse pass for one side? I have the feeling it would be more clear to show the normal beauty pass for both sides.

Besides, selecting it disables AO on the left side, not right. Is the label wrong or do I miss something?

@Rabbid76
Copy link
Contributor Author

why can you only select the diffuse pass for one side?

because I would have to change the materials on the right side. Actually all that needs to be done is to deactivate the map. I will change that.

@Rabbid76
Copy link
Contributor Author

Besides, selecting it disables AO on the left side, not right.

You're absolutely right.

@Rabbid76 Rabbid76 force-pushed the examples/postprocessing-material-ao branch 2 times, most recently from 20e5e00 to d0bd191 Compare December 31, 2023 15:03
@Rabbid76 Rabbid76 force-pushed the examples/postprocessing-material-ao branch from d0bd191 to 8c8013b Compare December 31, 2023 15:07
@Mugen87 Mugen87 added this to the r161 milestone Jan 2, 2024
@Mugen87
Copy link
Collaborator

Mugen87 commented Jan 2, 2024

I wonder if we can simplify the example a bit....

Would it be possible and have just one scene using MeshPostProcessingMaterial and then use a checkbox to toggle between normal and "improved" AO? The renderer caches shader permutations so there should not be much overhead if you switch between composers and reconfigure the materials (adding/removing aoPassMap).

In this way, the slider can be removed as well.

@Rabbid76
Copy link
Contributor Author

Rabbid76 commented Jan 2, 2024

I wonder if we can simplify the example a bit....

@Mugen87 done

@Mugen87
Copy link
Collaborator

Mugen87 commented Jan 2, 2024

In any event, it's interesting how much better the material version looks compared with the standard AO approach.

@Rabbid76
Copy link
Contributor Author

Rabbid76 commented Jan 2, 2024

Actually, I never really liked screen space AO, because it always changes the whole scene and you always have to implement some hacks for emissive or transparent materials or find a compromise with the intensity. However, this offers new options.

@Mugen87 Mugen87 merged commit bad533f into mrdoob:dev Jan 2, 2024
11 checks passed
@Mugen87
Copy link
Collaborator

Mugen87 commented Jan 2, 2024

The way the demo conceptually connects FX outputs to material inputs should ideally match to a node based approach. Just saying because we recently started to support the first FX features with the new node material and WebGPURenderer. Can't wait to see GTAONode 😁 .

@gkjohnson
Copy link
Collaborator

A couple thoughts on this - the post processing effects have long been incorrect in the ways pointed out, but I'd really like to see some progress towards a deferred rendering system to help address these issues (or at least a proof of concept one). I feel the approach in this pr seems like much more of a workaround to that / demo than a practical solution for projects.

Generally a deferred renderer should use less memory, require fewer draws, and have less overdraw then what's being done now in this PR and other postprocessing effects. Effects like ambient occlusion, screen space reflections, contact shadows, and other effects all need to account for unique material properties.

I'm hoping node materials can help provide a more elegant solution to a deferred rendering compared to what's been available in the past but some validation would be nice to see.

Cc @RenaudRohlinger since you've been working on some of these post effect nodes.

@RenaudRohlinger
Copy link
Collaborator

@gkjohnson I believe the nodes I've been working on only works in with WebGPURenderer. Not sure what's the roadmap in regards to nodes and the WebGLRenderer but indeed a GTAONode sounds like a dream.

On that note to be honest after playing a bit with the new renderer I don't think I will be able to ever go back to the old renderer, it's just so good.
I've been doing things in 70 LOC of TSL that would have required 500+ LOC of custom shaders, with a bunch of FBOs, datatexture and texelFetch before. On top of that this month WebGPU support will basically go up to 50/60% support with Android... You should join the WebGPURenderer side Garrett 😏

AdaRoseCannon pushed a commit to AdaRoseCannon/three.js that referenced this pull request Jan 15, 2024
* examples: post-processing material AO

* examples: postprocessing material - use gl_FragCoord.xy for map lookup

* Examples: postprocessing material ao: show diffuse pass on both sides

* Examples: postprocessing material a - simplify example

* Examples: postprocessing material ao - simplify enironment texture
@Rabbid76 Rabbid76 deleted the examples/postprocessing-material-ao branch February 4, 2024 21:59
@Mugen87 Mugen87 mentioned this pull request Jul 11, 2024
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.

4 participants