Issue with Baking a static shadowMap using accumulativeshadows

[tabetVercetti]

• three version: 150.0
• @pmndrs/vanilla version: 1.14.2

Hello all :) In my three js application, i would like users to be able to visualize .glb models that they upload. I would like a shadow on the floor to automatically be baked and displayed. Shadow baking is achieved in this demo; however, it is dynamic, meaning is it running on each animation frame. I would like to have it run only a single time, when the model is uploaded.

Using the demo as a reference, i tried to create just that. Here is a sandbox of what I have done. It seems to work fine for the threeJS torus geometry, but when i test is with a .glb model, it reveals an issue.

Here is a picture of the model i am using. It is a simple cube but with a hole in the bottom. The face normals are also visualized and pointing outwards; however, the resultant shadow (see second pic) shows that the wrong face sides are being considered for the shadow baking, even though, as shown in the sandbox, I have set both material.side and material.shadowSide to THREE.DoubleSide.

Any thoughts? I appreciate any help/support!

[vis-prime]

Tested on r3f

confirmed same issue exists

Sandbox

2024-03-03.13-53-06.mp4

[vis-prime]

for vanilla

one fix i found is

change the plm.disacardMat.side to THREE.BackSide or THREE.DoubleSide

2024-03-03.14-10-43.mp4

2024-03-03.14-07-49.mp4

[tabetVercetti]

Thanks for looking into this! I added plm.discardMat.side = THREE.DoubleSide ; to the setupAccumulativeShadows function right after plm's definition and it solved the issue aswell.

I've set shadowParams and lightParams to the default settings from the accumulativeShadows story and got this result:

I know that I have seen better looking ground shadows for this model, especially when it comes to the softness of the shadow. For reference I am comparing the ground shadows baked in blender (left) and the shadowcatcher in playcanvas' GLTF viewer (right):

I had a look at the helpful comments on shadowParams and lightParams found in accumulativeShadow's story and it seemed as if 'radius' and 'ambient' were the parameters i should play with. I played around with all the parameters, and the only one that made a significant improvement was 'size'. I switched it from 8 to 100 and got this:

The 'size' adjusts the scene's depth map as explained here. Although i don't fully understand this, I can tell that the shadow looks better.
I know that this isnt related to the discussed issue, but I'd like to get some feedback if this is even recommended or if I should look into something else. Thanks!

[vis-prime]

Reduce the lightParams.mapSize to lower value to get smoother gradients
alsotTry using renderer.shadowMap.type = THREE.PCFSoftShadowMap

Make sure that 0,0,0 is the ground , all the lights are pointing towards the 0,0,0. This should give darker shadows near the wheels
gPlane.position.y = 0;

These are the settings i used

const shadowParams = {
  temporal: false,
  frames: 60,
  limit: Infinity,
  blend: 40,
  scale: 5,
  opacity: 1,
  alphaTest: 0.75,
  colorBlend: 2,
};

const lightParams = {
  position: new THREE.Vector3(0, 2, 0),
  radius: 1,
  amount: 8,
  intensity: Math.PI ,
  ambient: 0.5,
  bias: 0.001,
  mapSize: 128,
  size: 4,
  near: 0.05,
  far: 200,
};

2024-03-05.12-18-09.mp4

alternately you could also try https://threejs.org/examples/?q=shadow#webgl_shadow_contact approach