关于前端:WebGL实践实践树的半透阴影

楔子

置信很多人都晓得，通过 ShadowMap 能够产生暗影，通过渲染暗影能够减少场景渲染的对比度，减少渲染的实在成果。如下图所示：

然而对于通明或者半透明的对象，WebGL 在解决暗影成果的时候，会把他当成一个不通明的对象来解决，这也渲染的暗影成果就显得很假。比方上面树得暗影成果：

实在物理得成果中，树可能会有一些透光得间歇，所以暗影个别都不是一整块得成果。而是有些透光得亮点，如下图所示：

场景中，多家一些树，这种比照会更加明细，如上面两幅图所示，后面一个是整片暗影，前面一个是有半透暗影得成果：

半透暗影成果原来

实现半透暗影，能够通过透明度测试（alphaTest）性能来实现。一般来说，一张半透明得图片中，一部分中央是很通明得，opacity 靠近与零，咱们心愿在 opacity 小于某个值得时候，不生成暗影，能够通过 alphaTest，把小于阈值得片元在生成暗影贴图的时候抛弃掉，天然就不会生成暗影。所以流程大抵如此：

• 绘制暗影贴图的时候，生成一个深度材质，设置深度材质 alpahTest(=[ 阈值]) 和 map，map 是本来材质的贴图。如果本来材质有 alphaMap, 也须要思考在深度材质下面加上 alphaMap。
• 失常绘制场景流程。

threejs 实际

通过 three 实际，首先在材质下面减少要给属性 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 彪叔”能够增加作者微信进行交换，及时收到更多有价值的文章。