THREE.ShaderMaterial 被阴影相机看到倒置 [英] THREE.ShaderMaterial is seen inverted by the shadow Camera

问题描述

我有一个网格，我正在从 3d studio max 加载到three.js.我修改了three.js 来保存另一个用于副法线数据的类型化数组.在涉及阴影之前，这一切似乎都运行良好.出于某种原因，阴影贴图是错误的，似乎它渲染了面翻转的网格.

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.

我试过颠倒面部不确定的顺序(acb 而不是 abc)，这会翻转面部.这会创建适当的阴影投射，但网格显示翻转.

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.

我现在想做的是导出一个翻转的网格，并在 shaderMaterial 中反转剔除顺序，但如果能找出为什么会发生这种情况会很棒.

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.

我基本上将 phong 和阴影映射着色器块与我所拥有的连接起来.

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

编辑

这是一个更新的场景，带有一些阴影投射器并在导入的网格上接收阴影

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);

其余的网格只是将 receiveShadow 和 castShadow 设置为 true

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

阴影显示在shaderMaterial上(我复制了shadowfrag块)THREE.Mesh() 和 THREE.CubeGeometry() 都可以正确投射阴影和接收阴影，但是 shaderMaterial 网格投射的阴影是反转的.

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.

我无法真正将其隔离为 50 行代码，因为它是从 max 开始的整个导入/导出过程.

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?

您可以使用 wasd 缩小和移动汽车

You can zoom out and move the car using wasd

推荐答案

除非您更改了three.js 中的默认设置，否则只有背面会投射阴影.解决方法是设置:

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

renderer.shadowMapCullFace = THREE.CullFaceBack;

或

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.

WebGL 中的阴影映射可能很棘手，因此请尽可能阅读有关它的所有内容，以便熟悉所涉及的问题.

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

three.js r.66

这篇关于THREE.ShaderMaterial 被阴影相机看到倒置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！