Three.js: Ambient Occlusion is not working great with antialiasing

[kapilgp]

HI Team,

I have tried https://threejs.org/examples/?q=ssa#webgl_postprocessing_ssao for ambient occlusion. It is showing shadow but antialias is not working with that.

As I applied ambient occlusion it added some lines at outer side of the model and renderer loose antialias.

Is it known issue or is there anything where we can do something else.

Three.js version

• [x] prod
• [x] r83
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS

Hardware Requirements (graphics card, VR Device, ...)

[bhouston]

Our SSAO is completely broken, it isn't even a proper SSAO algorithm. It appears to just to use the normal compared to the forward direction and makes things darker the more these two directions differ. That isn't SSAO. I think the code broke a years ago and never got fixed.

[kapilgp]

So is there any chance to fix it?

And can you please let me know the other way for the same effect. It is
great help for me.

On Tue, Jan 31, 2017 at 9:58 PM, Ben Houston (Clara.io) <
[email protected]> wrote:

Our SSAO is completely broken, it isn't even a proper SSAO algorithm. It
appears to just to use the normal compared to the forward direction and
makes things darker the more these two directions differ. That isn't SSAO.
I think the code broke a years ago and never got fixed.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mrdoob/three.js/issues/10688#issuecomment-276413655,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHw6G61bCTVcLlLigF_HlKxhT-hPld8wks5rX2FFgaJpZM4LyUuY
.

--
Many Thanks,
Kapil Gupta
Call me: [phone]
Email: kapil.[email protected]
Web: http://www.aboutbharat.info

[makc]

@bhouston

use the normal compared to the forward direction and makes things darker the more these two directions differ

but then this should not have any need to work as postprocessing and thereby cause antialiasing issues

[makc]

@kapilgp postprocessing uses rendering to texture and that operation ignores antialiasing setting. your only option is to use higher resolution texture there, but that will slow things down by a lot.

[makc]

@bhouston btw, this ticket gave me an idea: why not have some util that bakes ao into vertex attribute (not sure if belongs in main repo, though)? should be perfect for static scenery, such as buildings/furniture. edit: although it will need dense grids, simple cube will not work, for example

[kapilgp]

@makc using aoMap texture is also in my mind, but due to performance I am not preferring.

@bhouston that idea seems good, if we can bake ao through vertex. As I also have static car model so I think it will be fit in that.

Please update me as you can create utility for that.

[bhouston]

There is already Substance Designer that can bake AO, etc. I'd suggest that.

[mrdoob]

@makc https://www.clicktorelease.com/code/codevember-2016/7/

[bhouston]

I think @mrdoob is referring to the SSAO example here: https://www.clicktorelease.com/code/codevember-2016/12/

[makc]

@mrdoob well, for AO you would only have to check maybe a dozen of rays per vertex, to see how far they go, no need to constantly render stuff and pause to read it back

[makc]

@bhouston I think he replies to baked AO comment

[kapilgp]

Thanks @mrdoob, Let me try the same.

[pailhead]

is rendering the ao before the main image and then using it as a mask of sorts out of the question? Adds the texture fetching and for possibly invisible fragments but it should work better with AA

[makc]

@pailhead I guess you could do that manually if you change every material you use in the scene.

[bhouston]

@pailhead you mean this approach: https://github.com/mrdoob/three.js/issues/7424

[pailhead]

@bhouston,

I guess, but it could be applied either way.

Right now, with the material defines available, one could override a few chunks. It's clunky, but basically you can say #define MY_AO_THING and branch the chunks. So on one of the last ones present in all the surface shaders (probably fog) you add gl_FragColor.xyz *= myAOMask;.

I couldnt figure out a way to attach a custom uniform, but i was thinking it could probably work with some other map, like the regular AO map, but mapped differently and branched with the define ( #ifdef MY_AO_THING skip the regular logic that uses the map.

I just realized though, for the mapping you'd probably need a canvas size uniform.

[ButzYung]

@bhouston Talking about ambient occlusion, I wonder if there is any progress/update on your Scalable Ambient Occlusion filter.

https://github.com/mrdoob/three.js/pull/8605

The demo link inside appears to be broken right now, but I was lucky enough to grab it before it was gone. I have been using it for a while in my project (with some minor twists) and the effect is great.

[Mugen87]

Talking about ambient occlusion, I wonder if there is any progress/update on your Scalable Ambient Occlusion filter.

The code was by #11458. Here is the example: webgl_postprocessing_sao.

Our SSAO is completely broken, it isn't even a proper SSAO algorithm.

This was fixed via #15243 by introducing a new implementation.

In any event, general questions about the usage of AO should go to the forum now.