Three.js 中的阴影贴图问题，带有改变顶点位置的 ShaderMaterial答案

【问题标题】：shadow map issue in three.js with a ShaderMaterial that changes vertex positionsThree.js 中的阴影贴图问题，带有改变顶点位置的 ShaderMaterial
【发布时间】：2014-08-23 07:57:46
【问题描述】：

在我的项目中，我使用 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/

你可以看到左边的立方体有正确的阴影，而右边的没有，因为面在着色器中向上移动。

有办法解决这个问题吗？

谢谢

【问题讨论】：

我想这不是一个有用的答案，但您需要修改阴影渲染着色器以进行相同的高度图调整

标签： javascript three.js webgl

【解决方案1】：

@gman，感谢您的建议！事实上，应该修改更多的着色器。对于我的问题，worldpos_vertex 中的 worldPosition 变量也应该更新：

// 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/

【讨论】：