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

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)

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

This is a Fiddle I set up:

Thank you for any help! :slight_smile:

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:

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 );

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

1 Like

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

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

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

1 Like

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:

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

It should be receiveShadow and shadowMap.enabled.

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:

1 Like