SSAO does nothing but other effects work perfectly

[normandeaup]

First of all thanks for the great lib, but I'm having some issues with SSAO.

Other effects work fine, I added a BLOOM and it's working perfectly, but for some reason SSAO doesn't work at all..

I tried to look at the demo but it is obfuscated (index.min.js), would be a lot easier to test stuff with a demo with raw code online.

I saw in the demo that there's a SMAA applied before the SSAO, is this required?

I can't test with SMAA because I'm not sure how to generate the SMAA images and the docs seems outdated (SMAAPassareaImageDataURL should be replaced with SMAAEffect.areaImageDataURL).

Here's my code:

                    this.composer = new EffectComposer(this.renderer);

        this.renderPass = new NormalPass(this.scene, this.camera, {
            resolutionScale: 1.0
        });

        this.bloomPass = new EffectPass(this.camera, new BloomEffect());

        this.ssaoPass = new SSAOEffect(this.camera, this.renderPass.renderTarget.texture, {
            blendFunction: BlendFunction.MULTIPLY,
            samples: 11,
            rings: 4,
            distanceThreshold: 0.6,
            distanceFalloff: 0.1,
            rangeThreshold: 0.0015,
            rangeFalloff: 0.01,
            luminanceInfluence: 0.7,
            radius: 18.25,
            scale: 1.0,
            bias: 0.5
        });

        this.ssaoPass.blendMode.opacity.value = 1.5;

        this.copyPass = new EffectPass(this.camera, this.ssaoPass);
        this.copyPass.renderToScreen = true;

        this.composer.addPass(new RenderPass(this.scene, this.camera));
        this.composer.addPass(this.bloomPass);
        this.composer.addPass(this.copyPass);

---

Any idea what's going on?

Thanks

[vanruesc]

Hi,

I tried to look at the demo but it is obfuscated

the demo source code can be found here. Alternatively, you can open index.debug.html to load non-minified code bundles.

the docs seems outdated (SMAAPass.areaImageDataURL should be replaced with SMAAEffect.areaImageDataURL).

That's interesting, thanks for pointing this out! It looks like ESDoc didn't remove some old documentation files. Could you tell me how you found this error? How are you using the docs?

I saw in the demo that there's a SMAA applied before the SSAO, is this required?

SMAA is used in every demo because the default antialiasing (MSAA) doesn't work on offscreen render targets in WebGL 1. SMAA implements efficient antialiasing for post processing pipelines and is not required.

I'm not sure how to generate the SMAA images

The SMAAEffect constructor requires two special data images that have to be loaded asynchronously. The actual image data is exposed to the user as SMAAEffect.searchImageDataURL and SMAAEffect.areaImageDataURL.

Here's an example of the SMAAEffect, BloomPass and SSAOEffect in action. It also shows how to load the SMAA images.

Note that depth-based effects depend on good depth values. Make sure that your near and far planes are configured properly for your scene. You could also enable the logarithmicDepthBuffer to avoid fiddling with the camera planes.

[normandeaup]

Thanks for the answer!

I'll checkout the fiddle and try to go from there.

I'll report my result and let you know where I saw that in the doc soon.

It's weird because the SSAO doesnt change a single pixel in the scene, like if it was not applied at all, but I'm sure I did everything correctly as the bloom gets applied correctly.

[vanruesc]

It's weird because the SSAO doesnt change a single pixel in the scene, like if it was not applied at all

In computer graphics development it's quite common to get unexpected visual output.

It seems that you simply forgot to add the NormalPass instance to your composer. Make sure your camera planes are configured properly or enable the logarithmicDepthBuffer. Ambient occlusion relies on scene normals and depth information. If those textures are busted, you'll see no occlusion.

I'll report my result and let you know where I saw that in the doc soon.

Please do. I'll clean up the docs afterwards.

Good luck!

[normandeaup]

Sorry for the delay

logarithmicDepthBuffer did the trick but the AO result was really weird, some bright shadows were floating above the meshes around the corners and seemed to follow the camera when I moved so I decided to just not use it for now.

My game is a voxel world, maybe SSAO just doesn't perform well for voxels?

I can't find the error in the docs anymore, maybe it was elsewhere? Not sure but it seems fine now

[vanruesc]

some bright shadows were floating above the meshes around the corners

Sounds like haloing, but it's hard to tell without seeing it. I might be able to help identify the issue if you provide a screenshot.

SSAO requires quite a bit of tweaking to make it look nice. You can suppress haloing by tweaking the rangeThreshold and rangeFalloff parameters.

My game is a voxel world, maybe SSAO just doesn't perform well for voxels?

It should work with any kind of geometry, but it highly depends on accurate depth and normals. If you are generating geometry, your normal vectors may be inaccurate. You could set the renderToScreen flag of the NormalPass to true to check if the normals look correct. You should also keep the resolutionScale of the NormalPass at 1.0 to avoid artifacts due to inaccuracy.

I can't find the error in the docs anymore, maybe it was elsewhere? Not sure but it seems fine now

Got it, thanks for checking!

[vanruesc]

The documentation has been cleaned up in postprocessing@5.3.2. Related scripts have been adjusted to keep the documentation clean in the future.

I'm closing this issue for now. If you encounter any bugs or if something's unclear, feel free to open a new issue.

[jojoghaida]

Hello Vanruesc, Great work on the library:

I've been trying to get SMAA to work for a few days now. I don't understand the inputs for the effect. Is it just two standard raw images? If so, why not just package them in the library. In my application it's quite cumbersome to set up loaders and then pass them to render etc etc. Is there a url to the images so that I can just download them and package with my app?

[vanruesc]

Hello Joe!

Is it just two standard raw images? If so, why not just package them in the library.

The SMAAEffect comes with two pre-generated data images which are included in the library as base64-encoded data strings (SMAAEffect.areaImageDataURL and SMAAEffect.searchImageDataURL).

The user must load these images asynchronously as described in the documentation. By doing this, the images are guaranteed to be ready before the render loop begins. Images cannot be loaded synchronously.

Check this answer for more details. Note that SMAAPass is now SMAAEffect.

In my application it's quite cumbersome to set up loaders and then pass them to render etc etc.

All I can say is that loading the images asynchronously is the proper way of doing it. How you do that is up to you.

Here's an example for your reference.

```js import { LoadingManager } from "three"; import { SMAAEffect } from "postprocessing"; function load() { const assets = new Map(); const loadingManager = new LoadingManager(); return new Promise((resolve, reject) => { loadingManager.onError = reject; loadingManager.onProgress = (item, loaded, total) => { if(loaded === total) { resolve(assets); } }; const searchImage = new Image(); const areaImage = new Image(); searchImage.addEventListener("load", function() { assets.set("smaa-search", this); loadingManager.itemEnd("smaa-search"); }); areaImage.addEventListener("load", function() { assets.set("smaa-area", this); loadingManager.itemEnd("smaa-area"); }); // Register the image assets. loadingManager.itemStart("smaa-search"); loadingManager.itemStart("smaa-area"); // Load the images asynchronously. searchImage.src = SMAAEffect.searchImageDataURL; areaImage.src = SMAAEffect.areaImageDataURL; }); } function initialize(assets) { const smaaEffect = new SMAAEffect( assets.get("smaa-search"), assets.get(smaa-area) ); } load().then(initialize).catch(console.error); ```