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

[tabetVercetti]

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

Hey @vis-prime . I am implementing this again but using r3f. I am facing the same issue again. you provided a fix for vanilla, but how can we adjust the discard Mat side in r3f

[vis-prime]

try this approach (just a guess, i haven't tried it )

add ref to the accu shadows component

console log the ref and inspect the keys

you should find the a variable name 'discardMat' or something like that ,
then do the same approach ref.xxx.xxx.discardMat.side = THREE.DoubleSide
put this in a useEffect so it happens as soon as the component is mounted

[tabetVercetti]

thanks for the reply!
i tried that but found no key or property inside accRef relating to discardMat or its sides.
im not sure what to do. i wonder if cloning Drei's AccumulativeShadows and adding "this.discardMat.side = THREE.DoubleSide " after line 367 would fix this, but it feels like overkill and too much work for something that took one line in vanilla.
let me know your thoughts when you have the time :)

[vis-prime]

yeah, the only quick fix is to copy the file into your project and just add that one line and fix the imports paths.