从部分透明的平面投射阴影答案

【问题标题】：cast shadow from partly transparent plane从部分透明的平面投射阴影
【发布时间】：2020-12-02 11:04:44
【问题描述】：

是否有可能从纹理播放带有色键着色器的视频的平面投射阴影？我的试验接缝回答否，但我猜我的着色器没有适应。该对象是一个简单的 PlabeBufferGeometry，着色器是：

vertexShader 是：

varying vec2 vUv;
void main() {vUv = uv; 
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_Position = projectionMatrix * mvPosition;
}

fragmentShader 是：

uniform sampler2D vidtexture;
uniform vec3 color;
varying vec2 vUv;
void main()
{   vec3 tColor = texture2D( vidtexture, vUv ).rgb;
    float a = (length(tColor - color) - 0.5) * 7.0;
    gl_FragColor = vec4(tColor, a);}

【问题讨论】：

标签： three.js shadow

【解决方案1】：

您是否尝试过使用discard 关键字？如果您的片段着色器遇到该关键字，它将不会渲染该片段，就好像它不存在一样。您可以使用它来创建由您的色键定义的阴影轮廓，而不是总是得到方形阴影。

void main(){
    vec3 tColor = texture2D( vidtexture, vUv ).rgb;
    float a = (length(tColor - color) - 0.5) * 7.0;

    // Do not render pixels that are less than 10% opaque
    if (a < 0.1) discard;

    gl_FragColor = vec4(tColor, a);
}

这与 Three.js uses for Material.alphaTest 在其所有内置材料中的方法相同。你可以看到GLSL source code for that command here。

【讨论】：

感谢您的建议。我对其进行了测试，但似乎阴影计算并不关心色键着色器的结果。即使我丢弃所有像素，对象也会完全消失，但阴影仍然是一个完整的矩形。我对阴影计算知之甚少，无法理解问题出在哪里。
我在three.js中找到了一个透明布的例子。他们将 THREE.MeshDepthMaterial 作为 CustomDepthMaterial 附加到对象；但在示例中，布料材质映射为静止图像。就我而言，它是一个视频，要映射的纹理实际上是色度键着色器的结果。不知道如何将每次迭代的色度键图像映射到 customDepthMaterial ？