Question

在我的项目中，我使用ShaderMaterial渲染地形。根据高度贴图纹理在顶点着色器中修改顶点位置：

vec4 mvPosition = modelViewMatrix * vec4( position + normal * heightMapScale, 1.0);
gl_Position = projectionMatrix * mvPosition;

地形看起来不错，但当我尝试在其上添加物体时，阴影很奇怪。似乎顶点不知道他们的新位置:(

请点击以下链接查看截图和现场演示（很抱歉我没有足够的声誉在这里发布图片）

屏幕截图：http://i.imgur.com/S2RmM5O.jpg

现场演示：http://jsfiddle.net/b2bfm8q3/2/

您可以看到左侧的立方体具有正确的阴影，而右侧的立方体没有，因为脸部在着色器中向上移动。

有什么想法解决这个问题吗？

由于

Answer 1

@gman，谢谢你的建议！确实应修改更多着色器。对于我的问题，worldpos_vertex中的worldPosition varable也应该更新：

// move the vertex position
"float fBump = position.x < 0. ? 0. : 350.;",
"vec4 newPosition = vec4( position + normal * fBump, 1.0);",
// to replace THREE.ShaderChunk[ "default_vertex" ]
"vec4 mvPosition = modelViewMatrix * newPosition;",
"gl_Position = projectionMatrix * mvPosition;",
// to replace THREE.ShaderChunk[ "worldpos_vertex" ]
"vec4 worldPosition = modelMatrix * newPosition;",

此处更新了演示：http://jsfiddle.net/b2bfm8q3/4/

使用ShaderMaterial更改顶点位置的three.js中的阴影贴图问题

1 个答案: