在体素地形上点亮/投射阴影的有效方法

时间:2014-02-06 22:40:01

标签: javascript three.js webgl shadow light

我正在使用BufferGeometry和一些预定义数据来创建一个类似于Minecraft块的对象(由体素组成并包含类似洞穴的结构)。我有一个问题很有效地照亮了这个物体。

目前我正在使用MeshLambertMaterialDirectionalLight这使得我可以在体素上投射阴影,而不是在光线的视野中,但这对于大地形使用效率不高因为它需要一个非常大的阴影贴图,因此通常会导致毛刺阴影瑕疵。

这是我用来将索引和顶点添加到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 );
}

以及我的“大块”示例: http://jsfiddle.net/9sSyz/4/

屏幕截图: enter image description here

如果我要删除示例中的阴影,即使另一个体素阻挡了光线,正确一侧的所有体素也会被点亮。我只需要另一种可扩展的方式来给出阴影的幻觉。也许通过改变顶点颜色,如果不是在光线下?它不必像当前的阴影实现一样精确,因此更改顶点颜色(以提供块状顶点边界阴影)就足够了。

感谢任何帮助或建议。感谢。

1 个答案:

答案 0 :(得分:2)

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

第二个选项是添加环境遮挡,正如WestLagnley所建议的那样,但它只是一个遮挡,而不是阴影。结果非常不同。

第三个选项,如果您的场景主要是静态的 - 烘焙阴影。因此,您只需应用于地形的预处理纹理等。为了支持动态对象,只需渲染它们的阴影贴图并将其应用于仅模仿阴影区域的某些几何体(可能是一个悬浮在地面上并接收阴影的平面等)

所提到的技术的任何组合也是一种选择。

P.S。你还可以提供截图,小提琴无法加载。