Wedge相信很多人都知道可以通过ShadowMap生成阴影，通过渲染阴影可以增加场景渲染的对比度，增加渲染的真实效果。如下图所示：但是对于透明或者半透明的物体，WebGL在处理阴影效果的时候，会把它当成不透明的物体来处理，这样也会把阴影效果渲染的很假。比如下图树的阴影效果：在真实的物理效果中，树可能会有一些断断续续的透光，所以阴影一般不是整片效果。取而代之的是有透光的亮点，如下图：场景中，树木很多，对比会更细致一些，如下图两张，前面一张是全影，而后面的是半透明阴影得到的效果：半透明阴影效果本来就是实现了半透明阴影，可以通过透明度测试（alphaTest）函数来实现。一般来说，在半透明图像中，部分区域非常透明，不透明度接近于零。我们希望当不透明度小于一定值时，不产生阴影。我们可以使用alphaTest生成小于阈值的片段。当shadowmap被丢弃，自然就不会产生shadow了。所以流程大致是这样的：在绘制阴影贴图的时候，生成一个深度材质，设置深度材质alpahTest(=[threshold])和贴图，贴图就是原始材质贴图。如果原始材质有alphaMap，还需要考虑在深度材质中加入alphaMap。正常绘制场景流程。Threejs实践通过三个实践，首先给材质添加属性shadowAlphaTest，通过shadowAlphaTest动态指定绘制阴影时的alphaTest，如下图：this.shadowAlphaTest=undefined;在生成深度材质的地方，修改如下：result.alphaTest=material.shadowAlphaTest||material.alphaTest;result.map=material.map;result.alphaMap=material.alphaMap;然后在绘制的时候，可以动态修改shadowAlphaTest的值，达到控制半透明阴影的效果，如下图：child.material.transparent=true;child.material.opacity=1.0;child.material.shadowAlphaTest=0.5;最终效果如下：结语有任何问题，关注公众号“ITMan表叔”，加作者微信交流，及时收到更多有价值的文章。
