Open tabetVercetti opened 4 months ago
Tested on r3f
confirmed same issue exists
https://github.com/pmndrs/drei-vanilla/assets/119810373/9adba5ef-40c3-4712-a9c1-2ee99f1356b6
for vanilla
one fix i found is
change the plm.disacardMat.side
to THREE.BackSide
or THREE.DoubleSide
https://github.com/pmndrs/drei-vanilla/assets/119810373/cb01a88a-d773-4ff8-a66a-ef396d032edc
https://github.com/pmndrs/drei-vanilla/assets/119810373/edf6d188-a15b-4f23-9592-dd99b587fb96
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!
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,
};
https://github.com/pmndrs/drei-vanilla/assets/119810373/9756bad6-a8b4-4c82-b2df-0c3eed6bdc57
alternately you could also try https://threejs.org/examples/?q=shadow#webgl_shadow_contact approach
three
version: 150.0@pmndrs/vanilla
version: 1.14.2Hello 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!