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彪叔” 可以添加作者微信进行交流,及时收到更多有价值的文章。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhhbfbe
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22