Question

我不确定这是否可行，但我认为值得一提：是否有一个功能，选项或一些着色器，允许精灵投射和接收阴影？还包括该精灵的alpha通道不会呈现为阴影。

我的所有资产都是透明的PNG，我在three.js中使用sprite来将纹理映射到精灵上。除了阴影问题之外，这种方法很有效。理想情况下，精灵投射的阴影不包括PNG的alpha通道*会很好，因此光线会通过png的alpha通道，尽管我在threejs的文档中找不到这方面的研究。

也许这不可能在threejs之下，或者根本不可能，这是可以理解的，但感谢先进。

*我正在考虑与PaRappa Rapper或Adventure Xpress类似的风格。

Answer 1

three.js中的精灵不投射阴影。

解决方法是使用PlaneBufferGeometry并使其面向相机，如下所示：

scene.add( plane );

然后在渲染循环中，

plane.lookAt( camera.position );

如果您希望平面在平面纹理透明的任何地方都不投射阴影，则需要创建自定义深度材质。这样做的一个例子可以在this three.js示例中看到。

在不创建自定义深度材质的情况下，从光线的角度看，平面看起来是实心的。

three.js r.76

Answer 2

这些是我最终使用的着色器。

片段着色器。您可以更改pixel.a，它是像素的alpha值。如果alpha值低于0.5（因此使其看起来透明），则片段着色器将在此像素上被丢弃。

#include <packing>

uniform sampler2D texture;
varying vec2 vUV;

void main() {

    vec4 pixel = texture2D( texture, vUV );
    if ( pixel.a < 0.5 ) discard;
    gl_FragData[ 0 ] = packDepthToRGBA( gl_FragCoord.z );

}

顶点着色器。这没什么特别的，我想我会留下这个只是因为你的顶点着色器导致问题，这个我可以确认与上面的片段着色器兼容。

varying vec2 vUV;

void main() {

    vUV = uv;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1 );
    gl_Position = projectionMatrix * mvPosition;

}

three.js：如何让透明的png精灵投射和接收阴影？

2 个答案: