javascript - 在体素地形上点亮/转换阴影的有效方法

Question

我正在使用 BufferGeometry 和一些预定义的数据来创建一个类似于 Minecraft block 的对象(由体素构成并包含类似洞穴的结构)。我在有效点亮此对象时遇到问题。

目前，我正在使用 MeshLambertMaterial 和 DirectionalLight，这使我能够在没有光线的情况下在体素上转换阴影，但这效率不高用于大地形，因为它需要非常大的阴影贴图，因此通常会导致出现故障的阴影伪影。

这是我用来将索引和顶点添加到 BufferGeometry 的代码:

// Add indices to BufferGeometry
for ( var i = 0; i < section.indices.length; i ++ ) {
    var j = i * 3;
    var q = section.indices[i];

    indices[ j ]     = q[0] % chunkSize;
    indices[ j + 1 ] = q[1] % chunkSize;
    indices[ j + 2 ] = q[2] % chunkSize;
}

// Add vertices to BufferGeometry
for ( var i = 0; i < section.vertices.length; i ++ ) {
    var q = section.vertices[i];

    // There's 1 color for every 4 vertices (square)
    var hexColor = section.colors[i / 4];

    addVertex( i, q[0], q[1], q[2], hexColor );
}

还有我的“ block ”示例: http://jsfiddle.net/9sSyz/4/

屏幕截图:

如果我要从我的例子中移除阴影，即使另一个体素阻挡了光线，正确一侧的所有体素也会被照亮。我只需要另一种可扩展的方式来产生阴影的幻觉。如果不考虑光线，也许通过改变顶点颜色？它不必像当前阴影实现一样准确，因此更改顶点颜色(以提供 block 状顶点绑定(bind)阴影)就足够了。

将不胜感激任何帮助或建议。谢谢。

Answer 1

一般来说，如果你有大地形，我们的想法是将场景分成更多的级联，每个级联都有自己的阴影贴图。技术称为 CSM - 级联阴影贴图。问题是，我还没有听说过实现这种技术的 webGL 示例。 CSM 用于动态场景。但我不确定使用 Three.js 实现它有多容易。

第二个选项是按照 WestLagnley 的建议添加环境遮挡，但这只是一个遮挡，而不是阴影。结果大不相同。

第三个选项，如果您的场景大部分是静态的 - 烘焙阴影。因此，您只需将预处理的纹理应用于地形等。要支持动态对象，只需渲染它们的阴影贴图并将它们应用于一些仅模拟阴影区域的几何体(也许，一个略微悬停在地面上方并接收阴影的平面等) .

上述技术的任意组合也是一种选择。

附言你能不能也提供一个屏幕截图， fiddle 无法加载。