THREE.ShaderMaterial is seen inverted by the shadow Camera

0
votes

I have a mesh that i am loading from 3d studio max into three.js. I modified three.js to hold another typed array for the binormal data. It all seems to be working fine and dandy until shadows are involved. For some reason, the shadow map is wrong, and it seems as if its rendering the mesh with faces flipped.

In this example, the shadows are showing up correctly on the floor, because the renderer has

.shadowMapCullFace = THREE.CullFaceBack

http://dusanbosnjak.com/test/webGL/new/StojadinCeo/stojadinCeo.html

I can get other shadows to show up on my shader, but self shadowing leads to horrible artifacts, and the shadow that my mesh casts on other meshes is always inverted.

I've tried reversing the order in which the face indecis come in, (acb instead of abc), which flips the faces. This creates proper shadow cast, but the mesh shows flipped.

What im thinking of doing at the moment is exporting a flipped mesh, and reversing the cull order in the shaderMaterial, but it would be wonderful to find out why this is happening.

I basically connected the phong and shadow mapping shader chunks with what i've had.

edit

Here is an updated scene with some shadow casters and receive shadows on imported meshes

http://dusanbosnjak.com/test/webGL/new/StojadinCeo/stojadinCeo2.html

light = new THREE.SpotLight(0xaaaaaa);
light.position.set(10,10,10);

light.shadowCameraVisible = true;
light.shadowDarkness = .5;
light.castShadow = true; 
light.shadowCameraNear = 1;
light.shadowCameraFar = 250;
light.shadowCameraFov = 57;  
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;  
scene.add(light);

the rest of the meshes just have receiveShadow and castShadow set to true

The shadow shows on the shaderMaterial (i copied the shadowfrag chunk) THREE.Mesh() with THREE.CubeGeometry() both casts shadows and receives shadows properly, but the shadow cast by the shaderMaterial mesh is inverted.

I can't really isolate this to 50 lines of code as it's a whole import/export process from max.

I don't understand why would the shadow camera render this one particular mesh inverted, while the normal camera renders it correctly, if that is what is happening?

You can zoom out and move the car using wasd

1
three.js
(1) What is your question? (2) Can you provide a simple, 50-line program that demonstrates the problem? (3) Can you demonstrate the problem on a simple, one-component model? – WestLangley
(1)What could i have done to cause this one mesh to show inverted in the shadow projection?(2) I updated the example to demonstrate the problem (culling is at default) but i cannot demonstrate it on a a simpler case since it's a part of the importer/exporter i was working on. Is there somewhere you can point me based on the updated example, and maybe i could isolate the code down to something meaningful? – pailhead
Sorry, I have tried and tried, but I have no idea what your question is about, nor what the problem is, nor what you mean by "inverted in the shadow projection." – WestLangley
If you take a look at the wheels (you can drive the car around) you will see that that the shadow is not being cast correctly. It is as if shadow camera sees flipped faces. The roof is not casting a shadow on the floor, and the wheels are casting inside out. – pailhead
OK. Now I understand your issue... Unless you changed the default settings, only back-faces cast shadows. Every mesh needs to have thickness. Avoid planes, like the car roof. A work-around: renderer.shadowMapCullFace = THREE.CullFaceBack; or THREE.CullFaceNone. – WestLangley

1 Answers

3
votes

Unless you changed the default settings in three.js, only back-faces cast shadows. A work-around is to set:

renderer.shadowMapCullFace = THREE.CullFaceBack;

or

renderer.shadowMapCullFace = THREE.CullFaceNone;

But these options can lead to other issues.

The best approach is to make sure every mesh has depth. Avoid planes, like the car roof. For example, you can add an interior liner to the car roof to give it depth.

Shadow mapping in WebGL can be tricky, so read all you can about it so you will be familiar with the issues involved.

three.js r.66