Strange shadow on shadow plane when using EffectComposer

Questions
, ,
1

Hello,

I’m working on a project where I’d like to add ambient occlusion to my scene with a SAO pass. I read up on the documentation and learned that I need to add a render pass to my EffectComposer before adding the SAOpass. However, when I add my render pass, something strange happens to my scene as you can see in the pictures below. I’m using three as a custom layer inside mapbox and to catch the shadows of the buildings I’m using a planar mesh with a shadow material under the buildings. The things that happen to the shadows when I’m using the render pass are:

  1. I get a strange halo around the shadows as can be seen here:

    image
    image988×632 64.2 KB

  2. My whole shadow plane is visible, even the parts that are not in shadow (as can be seen in the comparison below).

With the render pass:

image
image995×594 97.2 KB

Without the render pass:

image
image869×516 107 KB

Does anyone have any idea what the cause of this might be? I’m using this code to add my render pass:


export function createRenderer(map: { getCanvas: () => any }, gl: any, camera: THREE.Camera) {
  rendererTracker.dispose()

  const renderer = trackRenderer(
    new THREE.WebGLRenderer({
      canvas: map.getCanvas(),
      context: gl,
      antialias: true,
    })
  )

  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.VSMShadowMap
  renderer.autoClear = false
  renderer.toneMappingExposure = 1.0

  const composer = new EffectComposer(renderer)
  const renderPass = new RenderPass(scene, camera)

  return composer
}

//and then in another file where I call my renderer
const composer = createRenderer(map, gl, camera)
composer.render(scene, camera)

Thank you!
Best,
Erik

2

Have you tried a larger shadowMap size? Try 2048

3

May I know whether you modified the renderPass? From my experience, it will erase all the mapbox content if using composer and renderPass for rendering three as customLayer in mapbox gl.