SSAO turns meshes transparent / something wrong with back face culling and SSAO?

Questions
1

Hey Three JS Forum :slight_smile:
I am totally new to Three JS and ran into an interesting problem :smiley: When adding ssao to a scene with an imported mesh I get a strange effect where it seems like some meshes are transparent or the ssao effects are drawn even if they should not be visible (see Screenshot)

image
image896×604 57 KB

This is the view from below the room, and the ssao effects are drawn anyway…

This is a Fiddle I set up: https://jsfiddle.net/wdt4he0o/

Thank you for any help! :slight_smile:

2

It seems some objects have flipped faces and SAOPass has issues with such objects. This becomes obvious if you force your scene to render everything with THREE.FrontSide. Screenshot without post-processing:

image
image1786×1246 53.2 KB

It would be preferable to fix such modeling issues in any event since none of the 3D objects require double sided rendering.

Besides, avoid doing this:

renderer.render( scene, camera );
composer.render();

WebGLRenderer.render() is not required in this setup.

2 Likes
3

Thank you, I’ll look into it :slight_smile:
I come from Babylon and had no problems with this, so far :smiley:

4

Could you please tell me what exactly you did with the FrontSide attribute?

5

Check out this updated fiddle: Edit fiddle - JSFiddle - Code Playground

1 Like
6

I just experienced another problem… Could the inverted normals also cause problems when dealing with shadow casting/receiving?

I tried this to implement lighting, but it does not seem to work: Edit fiddle - JSFiddle - Code Playground

please excuse the followup question :smiley:

7

You have two typos in your code. Fixed version: Edit fiddle - JSFiddle - Code Playground

It should be receiveShadow and shadowMap.enabled.

8

I am so sorry! As I said, I am new to Three and I don’t have code correction yet…

Thank you so much for your patience and help! :heart:

2 Likes
9

In case someone, like me, cannot fix the mesh topology and needs to render both sides of the triangles you can do this which seems to work:

saoPass.normalMaterial.side = THREE.DoubleSide;

and the same can be done for the SsaoPass

1 Like