n8python / n8ao Goto Github PK

I am seeing that my lastTime is sometimes double what my entire total frame render time is? How is this possible?

I am running at 60FPS, but the lastTime variable in debug mode is showing 20-30ms which would put me out of 60FPS.

Also, thank you so much for this incredible work. I have been trying everything available for literally years and this is the first thing to actually work and have good documentation! Kudos!

My understanding is that AO is about darkening, but this isn't always the case in your new AO color implementation.

gl_FragColor = vec4( mix(sceneTexel.rgb, color, 1.0 - finalAo), sceneTexel.a);

If color is black (default), everything is fine. However, imagine the scenario when color is brighter than the sceneTexel. The AO color would actually lighten up the pixel. Shouldn't the AO color be a "multiply" operation, something like this?

gl_FragColor = vec4( sceneTexel.rgb * mix(color, vec3(1.0), finalAo), sceneTexel.a);

I found that when there are linesegment models in the scene, there are many jagged lines that cannot be eliminated...

code
let child = [];
sponza.traverse(object => {
if (object.material) {
object.material.envMap = environment;
child.push(object)
}
})
child.forEach(m=>{
m.add(new THREE.LineSegments(new THREE.EdgesGeometry(m.geometry,90)))
})

such as

heyyyy !!! 👋

so I'm testing the pass and I got this warning WARNING: Multiple instances of Three.js being imported.

so checked the node modules folder and there's another node modules inside your npm package

and the package.json has

 "dependencies": {
        "three": "^0.152.2"
    },

I guess three should be peerDependency instead of regular dependency like in https://github.com/pmndrs/postprocessing/blob/3e6ea9d8fddd2ca2d269e2182752f8199b8248af/package.json#L88-L89

Awesome work as always !!

Nice work on this, it's performing very well when testing so far.

One potential issue I'm encountering is that the AO effect is drawn over the top of any fog in the scene. I'm assuming because this effect is a screen space one it's not possible to actually draw it onto the material shaders before the fog. But I wondered if there was some depth information available and we could fade the opacity of the effect based on distance from the camera or something else that would give a reasonable approximation?

Is this kind of thing possible currently or any plans to implement?

Thank you for your amazing work! Would it be possible to exclude certain objects from AO? I have several PNG Sprites that have transparent backgrounds. the AO effect makes the transparent backgrounds "visible". Would be great if I could exclude these sprites from the AO pass.

Hello,
I've been using N8AO with THREE.js r150.
After upgrade to THREE.js r156 the colors are washed out, is there anything that can be done on my side or is it an incompatibility with this release?

Hello, my wall materials side is THREE.FrontSide, when i move camera to outside of room, AO calculate wrong, sample picture is attached, how we can ignore single side materials for AO,

best regards,

I love the look of N8AO! However, the render performance for low end machines isn't really good enough even on very low settings, I want to hit 60fps ideally across all devices which is critical for my usage case. At the moment I would have to turn off N8AO if the FPS dropped below this level.

Now, if the render window is much smaller, the render performance improves dramatically. This is as you would expect - half the resolution reduces the pixel count by a factor of 4, quarter resolution reduces it by a factor of 16, etc.

So, I would love an option where you can change the resolution of the AO, but the regular render pass images stays at the normal resolution. Ideally, the AO shading would then be applied with bilinear filtering so it doesn't look pixelated on top of the regular image. The performance would ROCKET and any drop in image quality would be acceptable for these low end devices.

Not only that, but being able to adjust the quality modes AND the AO resolution would allow for more flexibility. In some use cases, a combination of using a lower AO resolution with higher quality mode (less noise) may look aesthetically more pleasing.

Hi @N8python, I'm trying to use n8ao in a scene on a custom mapbox layer and running into the following two errors, would you have any idea what these may be and how to resolve?

I am using N8AO via @react-three/postprocessing. On most devices - both mobile and desktop - it works well.

However, I recently got a Pixel Fold device, and noticed that all of the objects utilizing n8ao are completely black. (It may be worth noting that the objects seem to be black specifically because I'm using the default black color for the AO. If I change the AO color, then the objects just become "tinted" with the chosen color.)

Inspecting the device, I see the following error(s):

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.

0:125: S0032: no default precision defined for variable 'vec2[4]'0:125: S0032: no default precision defined for variable 'vec2[4]'

If I remove this effect, the issue goes away (though I obviously lose my AO).

Based on the error, I tried setting a default precision on the whole gl object I'm providing to my r3f Canvas, but that doesn't seem to fix it. I also tried using a React error boundary around the effect so it could be disabled in cases where it wouldn't work, but I'm guessing the error is happening outside of what React sees, so it didn't fix it.

I verified that my device supports WebGL2.

I tried on Chrome, Firefox, and the Samsung browser on the Pixel Fold, and they all exhibit the same behavior on that device.

Working (Macbook Pro)	Not working (Pixel Fold)

Live website

I know there are several layers of abstraction at play (react-postprocessing, postprocessing, react-three-fiber), but it seems that using other effects don't exhibit the same issue, so I'm assuming it's something to do with this effect. I'm happy to file this elsewhere if the issue isn't here though.

The issue happens on both Chrome 112 and the Samsung browser in both the Example and our own software.
All other mobile devices are working fine, including both Android and iOS devices.

I've added a screenshot of what's happening.

very excited about this little package and it works perfectly — well almost!

• using postprocessing
• latest versions of postprocessing and three

works great when I'm applying it to a GLB model but in another scene with an OBJ, throws an error:

material.clone is not a function
    at OverrideMaterialManager.cloneMaterial (postprocessing.esm.js:5373:1)
    at OverrideMaterialManager.setMaterial (postprocessing.esm.js:5398:1)
    at new OverrideMaterialManager (postprocessing.esm.js:5315:1)
    at new RenderPass (postprocessing.esm.js:5525:1)

not the biggest deal, wanted to redo that scene either way, just wanted to let you know!

Basically i have this:

    this._renderer.clear();
    this._composer.render();

And this:

    const composer = new EffectComposer(this._renderer);
    const renderPass = new RenderPass(this.scene, this.activeCamera);
    composer.addPass(renderPass);
    const ssaoPass = new N8AOPass(this.scene, this.activeCamera, window.innerWidth, window.innerHeight);
    composer.addPass(ssaoPass);

I just swapped out the other ssao pass, and removed a couple of others from the composer. Im not sure which target i need to be clearing. This is three's own EffectComposer.

I am developing a map application based on three. js, and I need to set the camera far number very big ,such as 1e10,
At this point, the color of distant objects will turn black, such as "sky.js“, and I don't know what happened...

normal

with ao

I have a pmndrs/postprocessing setup that looks like this:

RenderPass
N8AOPass #1
N8AOPass #2
EffectPass with Bloom + SMAA

With composer.multisampling set to 0, it works as expected. If I set multisampling to anything other than 0, both N8AOPass #2 and the Bloom pass stop producing any results. (As if they're disabled.)

You mentioned in discord that multisampling sometimes causes artifacts with SSAO, but it would be nice to have the option.

I am developing a mapping software based on an open source project (https://github.com/tentone/geo-three) ,
I found When the height of my camera reaches a certain height, some of the map tiles will start to turn black, and eventually all tiles will turn black, but the sky.js background is not affected, i dont know what happened...

normal

add ao

Would it be possible to make the pass produce the shadows only, rather than doing the renderPass together? Essentially this would be like using .setDisplayMode("AO") but instead of white/black debug output we have transparent/black output onto the previous pass... you could call it something like .setDisplayMode("Overlay")

So in a project we could then have something like this:

• renderPass
• Some other passes and effects
• N8AO ❤
• Some other passes and effects

By having the option to separate it this way, we would have more flexibility with the final image.

But there is more! By having separate passes, N8AO could use a different scene, camera or camera.layers for it's pass. This would allow us to use different geometry/objects for N8AO, or make some objects include/exclude N8AO (e.g. if a static object has prebaked shading, it might be desirable for that to not use N8AO).

This would make N8AO the ultimate SSAO solution for everybodies three.js projects!

If you try n8ao in threejs r163 this error pops up if you enable configuration.halfRes

THREE.WebGLMultipleRenderTargets has been deprecated and will be removed in r172. Use THREE.WebGLRenderTarget and set the "count" parameter to enable MRT.

The background will then be rendered black.

When I integrated your AO plug-in into the map application, I found that the Ambient occlusion function failed. My test found that my model was located at a position far from the (0,0,0) point, such as (13487434.764630988, -6.397349827894406, -3741689.4034150834). At this time, my camera's observation position would also be at a large number of positions. When I moved the model to the (0,0,0) point, the Ambient occlusion function could work normally again, I think if the position of the camera is too large, it will cause the function to fail?

Hi, would it be possible to add an option to accumulate AO over multiple frames? Some models look quite bad with lower quality settings (especially light surfaces) & cranking up the quality isn't always an option for lower end devices. I would love to help on this but my knowledge on GLSL is lacking 😄

When TransformControls, ShadowMaterial, and/or GridHelper are rendering, the AO buffer seems to get overwritten or confused. The N8AO settings affect those effects.

If anyone can't get N8AO working no matter what they do, remove all helpers or shadowmaterial from your world and reload.

When I instantiate it like this:

const composer = new EffectComposer(renderer);
// N8AOPass replaces RenderPass
const n8aopass = new N8AOPass(
        scene,
        camera,
        width,
        height
    );
composer.addPass(n8aopass);

I get this error:

postprocessing.esm.js:7768 Uncaught TypeError: pass.setRenderer is not a function
    at EffectComposer.addPass (postprocessing.esm.js:7768:10)

I am using this packages:

"three": "^0.152.2",
"postprocessing": "^6.31.0",

The SSAO looks excellent, but it is rendering in direct lighting. Is there a way for luminance to affect the ssao in some way? Thanks for this library!