楔子
相信很多人都知道，通过ShadowMap可以产生阴影，通过渲染阴影可以增加场景渲染的对比度，增加渲染的真实效果。 如下图所示：
但是对于透明或者半透明的对象，WebGL在处理阴影效果的时候，会把他当成一个不透明的对象来处理，这也渲染的阴影效果就显得很假。 比如下面树得阴影效果：
真实物理得效果中，树可能会有一些透光得间歇，所以阴影一般都不是一整块得效果。而是有些透光得亮点，如下图所示：
场景中，多家一些树，这种对比会更加明细，如下面两幅图所示，前面一个是整片阴影，后面一个是有半透阴影得效果：
半透阴影效果原来
实现半透阴影，可以通过透明度测试（alphaTest）功能来实现。一般来说，一张半透明得图片中，一部分地方是很透明得，opacity接近与零，我们希望在opacity小于某个值得时候，不生成阴影，可以通过alphaTest，把小于阈值得片元在生成阴影贴图的时候丢弃掉，自然就不会生成阴影。 所以流程大致如此：
- 绘制阴影贴图的时候，生成一个深度材质，设置深度材质alpahTest(=[阈值])和map，map是原本材质的贴图。 如果原本材质有alphaMap,也需要考虑在深度材质上面加上alphaMap。
- 正常绘制场景流程。