具有 alpha 遮罩其他对象的着色器

Shader with alpha masking other objects

我正在尝试制作一个非常简单的阴影着色器，它由一个平面和一个在颜色和 alpha 上显示径向渐变的着色器组成。

在这个阴影下面是另一个平面，它具有相同类型的着色器但是线性的。作为这一切的背景，从深蓝色到浅蓝色的线性渐变。

问题是当我的相机接近地面时，阴影平面会遮住地板。

为什么会发生这种情况，我该怎么做才能防止这种情况发生？

您需要 post 代码来确定，但这很可能发生，因为 three.js 根据对象的中心及其与相机的距离对绘制事物的顺序进行排序。

您可以通过设置 Object3D.renderOrder

强制执行不同的顺序

three.js 通常在透明事物之前绘制不透明事物所以我猜你的地平面和阴影平面都设置为 transparent: true 但地面可以设置为 transparent: false在这种情况下，它将首先绘制。

您可能会发现 this article 有用。它显示了一个类似的例子。

至于为什么有洞是因为深度缓冲。如果前面的东西先被绘制，那么后面的像素就不会被绘制。所以如果阴影恰好先被绘制它最终看起来像一个洞因为它后面的平面像素没有被绘制。