代码改变世界

WebGL学习笔记(十):雾化

2019-09-06 12:06 阿诚de窝 阅读(...) 评论(...) 编辑 收藏

雾化是指距离我们较远的物体看不清晰的情况,比如模拟大雾环境,或者模拟水下环境时会用到。

实现雾化的方式有很多种,我们这里使用的是线性雾化的方式;

线性雾化

线性雾化比较简单,我们算出每个像素点到摄像机的距离之后,就可以确定当前像素的雾化因子,用雾化因子就可以算出新的颜色值;

示例点击这里:https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_11/Fog.html

w 分量优化

直接在顶点着色器中使用 gl_Position.w 分量作为每个像素点到摄像机的距离,可以减少一步优化;

示例:https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_11/Fog_w.html