I found the blender’s Eevee AO (ambient occlusion) is awesome, and it’s real-time.
Is it possible for three.js(WebGL) to achieve real-time AO of equal quality?
------EDIT------
The same question for SSR (screen space reflection).
2 Likes
The difficulty equal other platform, but it’s light.
The first step in this process is to find out the technique on which Eevee’s AO is based on.
In any event, Eevee is uses latest OpenGL so it might not be possible not implement this AO technique in a reasonable way in WebGL (2) depending on which API commands are used.
3 Likes
Apparently GTAO:
2 Likes
Garrett Johnson is working on an implementation:
He has a lot of cool stuff in his sandbox 
7 Likes
@marcatec Thanks for sharing my project!
Getting good, high quality results out of GTAO can be a bit more intensive than other AO techniques but it looks really nice with enough samples. You can also using something like temporal AA to smooth samples over time. The core of the technique I used is based on Asylum_Tutorials implementation here with some changes and a normal and depth upscale blur to make it more scalable.
I also threw in support for bounce light accumulation, as well, but without getting more surface information by performing more passes it doesn’t look great on more detailed models.
You can check out the demo here.
More improvements could be made but I’m happy with the results so I’m not planning to do a lot more to it for the moment. I’m hoping that some day deferred rendering will be more viable across devices and effects like this will be easier to make more usable.
8 Likes
Ok, u can try to FXAA in post-process
See this demo ( need loading )
https://www.cwebgl.com/code/9b86a88f-baba-436c-8421-2af7b8c50ef9
Awsome! In my scene, relative to the default parameters, just increase the numSteps, get very good results, and the performance is still very good.I will try other adjustments to see if can get even better result.
Well, but mirror the scene to ground or environment is other one solution, it’s fine.
Glad to hear it! Increasing steps is a good improvement – increasing the number of direction iterations can help quite a bit, too. Keep in mind that these values are multiplicative, though, so the number of texture samples is a multiple of numSteps * numDirections.
I know that some of the parameter names in the demo aren’t necessarily self explanatory and I haven’t done a whole lot to document them so if you have questions let me know.
And if you can share screenshots or a demo of the project you’re using it in I’d love to see – it’s always great to see where my work is getting used!
@gkjohnson Thanks!
My own project is still in production, and I still need to judge whether to use real-time ao or baking ao.
However, through the test of the official blender demo scene Architectural Visualization, your gtao effect is almost the same as that of eevee ao!
gtao_view_1_high_numSteps
eevee_view_1
gtao_view_2_high_numSteps
eevee_view_2
gtao_view_1_default_numSteps
gtao_view_2_default_numSteps
ssao_view_1
ssao_view_2
5 Likes
@gonnavis Oh hey that does look close! 
Thanks for sharing!
I also just found a small issue with the plugin – I made a quick change so you’ll want to pull the latest one if you plan to use it.
I’ll look forward to hearing what you decide to use for your app!
@gkjohnson THANKS! I updated.
I am also very interested in your another project SSRPass. Compared to AOPass, I may need SSRPass more, because in my mostly static scene, AO can bake, but reflection can not, and Reflector.js’s usage scenarios are very limited.
However the effect of my local running of SSRPass is very poor, and I can’t adjust the parameters to a satisfactory level.
Could you please help me see what is the problem?
My computer setup:
Operating System: Win7
CPU: Intel Core i7 6820HK @ 2.70GHz 51 °C Skylake 14nm Technology
RAM: 32.0GB Dual-Channel Unknown @ 1330MHz (19-19-19-43)
Graphics: (1920x1080@60Hz) 4095MB NVIDIA GeForce GTX 980M (Dell) 52 °C ForceWare version: 397.64 SLI Disabled
your demo image
my local running result with default params(many stripes)
my local running result with blur on (almot no reflection effect)
1 Like
SSRR is generally in a much less useable state than GTAO at the moment. Since taking that original image I have changed the demo to correctly use normal maps (everything was smooth before), use additive blending for the reflections, and fixed the shadow map in sponza so it isn’t being clipped (which is why the lion head is bathed in light in the demo image). I’ll plan to update that image and the default parameters at some point.
If you want to improve the quality of the effect you can lowers “stride” down to 1 or 2, increase “steps” to be 100+, set “jitter” to 0, and increase the “raymarchTargetScale” to be 1.0. You’re really going to see more reflection in shadows than you will in lighter areas now because of the additive reflections, which tone mapping might be able to help with, but you won’t get anything like in that first image now. Of course you’re going to see a big performance decrease when changing these settings. There’s quite a bit that could be done to increase the quality and performance of the effect which I may get to at some point but I’m not putting time into it right now. It’s something I poke around in every once and awhile but without a usecase of my own it’s really just a toy project for me to learn – as goes with most of the work in that repo.
Having said all that I don’t know if I’d recommend screen space reflections even if it was more finished – it’s a pretty intensive effect that has a lot of limitations of its own. I’d recommend using an environment or reflection map from a file or one that you generate from the scene itself if needed.
@gkjohnson Thanks!
Oh yes, after some study, I realized that SSR can only use the previous frame color, so there is no side angle, let alone the back.
Though the effect in the same official blender demo scene Architectural Visualization looks very well, the useable state is very limited.
I’ll keep using reflection map, envMap and Reflector.js for reflection effect.
eevee demo scene ssr on
eevee demo scene ssr off
eevee my test scene srr side
eevee my test scene ssr back
eevee my test scene ssr side and back
I wrote my own and make a pr to three.js, but now just support OrthographicCamera, I’m trying to support PerspectiveCamera.
Demo Demo2
----------------EDIT----------------
Demo ScreenShot
Hello Mugen
I can run at 30fps at my win7 laptop with GTX 980M about 40% usage and 1920*1080 chrome maximized window.
The performance cost by the shader is mainly based on pixels count. May Mac retina monitor has too many pixels?
I’ll consider these factors.
I know it’s not look very well now, may need more advaced blur and anti-alias, and SSR has own limitations.
But I’m already satisfied with this reflection feeling.
My main goal now is to support PerspectiveCamera, after this, I will do in-depth study with the looking improvement.
Sorry, but I don’t think this implementations is acceptable for the three.js repo. Especially with such a bad performance on common devices and severe rendering glitches.
1 Like