如何从透明材质投射阴影？答案

【问题标题】：How can I cast shadow from a transparent material?如何从透明材质投射阴影？
【发布时间】：2021-05-07 14:02:58
【问题描述】：

我正在尝试从透明材质投射阴影。
这是我在https://glitch.com/edit/#!/elite-invented-television上的简单代码
如您所见，我的树叶阴影很糟糕（我得到了飞机的阴影），我该如何改进这个渲染？

[编辑1] 已找到解决方案（感谢 Piotr Adam ;），请查看“已编辑”故障（第一个）...
[/edit1]

[编辑2] 好吧，我现在尝试将前面的技巧应用到色键材料上，但没有成功。这是另一个故障：https://glitch.com/edit/#!/aframe-chromakey
有什么想法吗？
[/edit2]

【问题讨论】：

我假设您只想获得不透明部分的阴影 - 而不是整个平面？我不知道这是否可能没有一些 js 魔术。也许这会有所帮助？ discourse.threejs.org/t/…

标签： aframe

【解决方案1】：

就像 Piotr Kolecki 在他的评论中提到的那样，一种方法是使用 custom depth material。

将其调整为a-frame 组件很简单，因为您可以重新使用材质加载的纹理：

// provided all is loaded:
const mesh = this.el.getObject3D("mesh");
var customDepthMaterial = new THREE.MeshDepthMaterial( {
  depthPacking: THREE.RGBADepthPacking,
  map: mesh.material.map
  alphaTest: 0.5
});
mesh.customDepthMaterial = this.customDepthMaterial;

一个简单的组件看起来很简洁，所以你可以使用我只是为了测试而做的this one (source)。它适用于.png 纹理和抽奖动画。

您只需将depth-material 组件添加到您的飞机即可使用它：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://gftruj.github.io/webzamples/aframe/depth-material/depth-material.js"></script>
<a-scene background="color: #ECECEC">
  <a-assets>
    <img id="foliage" src="https://cdn.glitch.com/9418ac7b-9d22-4434-9511-18282652475b%2Ffoliage.png?v=1620389632977">
  </a-assets>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="8" height="8" color="#7BC8A4" shadow></a-plane>
  <a-plane position="0 1 -1.5" material="src: #foliage; side: double; transparent: true" 
           shadow depth-material>
  </a-plane>
</a-scene>

【讨论】：

@Brun0oO 如果您没有其他问题，请随时标记答案:)
现在，如果我尝试将此组件应用于具有色键效果的材质，则不会应用深度材质技巧，知道吗？这是我的示例代码：glitch.com/edit/#!/aframe-chromakey
@Brun0oO 由于几个原因，它无法正常工作 - 1) chroma-key 组件隐藏了纹理，因此无法使用 material.map 访问它。 2）即使你抓取视频纹理，它也有绿色通道——没有部分是透明的。您看到的是着色器的最终结果，而不是准备好的纹理。
最简单的解决方案是反转视频上的颜色，使舞者变为绿色（并将其用作 alphaMap）glitch。一个更难的解决方案是在WebGLRenderTarget 中渲染舞者并将其用作纹理。另一种方法是修改色度键着色器以包含光/阴影信息。但这需要一些着色器知识。稍后我可以尝试使用 WebGLRenderTarget 准备一个示例。