THREE.js：远处光源投射的阴影答案

【问题标题】：THREE.js: Shadows cast by distant Light sourcesTHREE.js：远处光源投射的阴影
【发布时间】：2016-02-01 20:23:28
【问题描述】：

我正在尝试创建一个包含太阳系尺度对象的场景。

我想要的一些例子是：

-When a small (on the order of 10m in diameter) object, crosses behind
a large object (earth sized), which blocks the light source
(THREE.DirectionalLight), the smaller object is shadowed by the larger 
object. 

-When a moon crosses between the light source and a planet, 
a shadow is cast on the planet.

-All objects must cast, and receive shadows (except stars, which only    cast).

我知道我应该尽可能多地拍摄“煎饼”我的影子相机，但是由于我需要的比例可变，这变得非常困难。

在以这种可变比例创建阴影场景时，可以使用哪些技术或技巧？

是否有某种用于阴影的对数深度缓冲区（例如用于渲染）？

或者我能否以某种方式利用相机/轨迹球控制事件来动态调整阴影相机的截锥体？（随着相机（场景）越来越远，使用更粗糙的缓冲区/扩展阴影相机平截头体）

查看这个 JSfiddle 以了解我的问题的相关但不同的示例。这是两个小物体，靠得很近，光源很远。

http://jsfiddle.net/mtcq070x/6/

注意阴影是如何闪烁的，球体前面有阴影（不应该有）。

编辑：我更改了 jsfiddle 以使用适当的偏差，球现在接收并投射阴影。请注意阴影暗度的增加如何使自阴影恶化。降低阴影暗度不是一种选择，因为投射到位面的阴影会消失。

这正是我正在研究的样子（缩放太阳系）

【问题讨论】：

标签： javascript 3d three.js webgl

【解决方案1】：

您在 jsfiddle 中看到的是所谓的阴影痤疮。这可以通过使用非零、小的正阴影偏差值来解决。设置light.shadowBias = 0.01; 似乎可以解决您的问题：http://jsfiddle.net/mtcq070x/4/。另见https://msdn.microsoft.com/en-us/library/windows/desktop/ee416324(v=vs.85).aspx

【讨论】：

这有助于那些没有接收阴影的东西，也可以投射它们。我意识到小提琴与我的场景不完全匹配，因为飞机前面的球体也必须接收阴影。这是更新后的小提琴，它接收并投射阴影：jsfiddle.net/mtcq070x/6 当它接收阴影时，我认为它是自我阴影。
@Boogiechillin 我不太明白新小提琴有什么问题。但是编辑中的图片可能是由于阴影贴图截锥体相对于您的场景太大，因此您仅有效地使用了阴影贴图中的几个像素。您需要使用较小的 shadowleft、right 等值（尽可能小以真正适合场景）。是的，这意味着您可能必须动态计算仅捕获您感兴趣的对象的阴影截头体。
jsfiddle 的问题实际上与我在图片中看到的问题相同：球体前面有阴影。如果你在 hud 中弄乱了阴影黑暗，前面的阴影就会消失，但球体投射到平面上的阴影也会消失。我尽可能地煎了截锥体，但仍然得到了上面显示的内容。此外，将球体的材质切换为 Phong（它是 Lambert）似乎可以平滑前阴影的锐利边缘。
阴影暗度会影响阴影中的像素这一事实对我来说是一种非常奇怪的行为。我的预期是阴影偏差（连同阴影截头体参数）决定了哪个像素处于阴影中，然后如果像素处于阴影中，阴影暗度会影响阴影阻挡的光量。我不知道阴影暗度是否会影响阴影中的哪些像素应该被视为特征还是错误。
是的，阴影偏差需要针对不同的视图进行调整，这是 ThreeJS 在后台实现的阴影映射技术的一个已知限制。有多种技术可以修复阴影贴图的各种伪影，例如级联阴影贴图。