如何使用Open GL ES 2.0或WebGL创建雾?

时间:2012-07-27 19:28:15

标签: glsl opengl-es-2.0 webgl

我想为我的游戏创建一个雾效果,但我找不到任何关于如何使用OpenGL ES 2.0进行操作的教程。如果有人有教程的链接,可以提供解释或源代码,我将不胜感激。

1 个答案:

答案 0 :(得分:4)

在OpenGL ES 2.0编程指南(第224页)中有一个关于使用着色器复制固定功能雾的部分。源代码可在Google代码项目(MIT许可证)上找到。这是一个巨大的rendermonkey XML文件,但是the shader source embedded in it is pretty straightforward(我会在这里直接复制它,但不确定是否可以)。

这个想法是使用到特定像素的距离作为某个雾函数的输入。在该示例中,他们计算顶点着色器中的眼睛到顶点距离,然后通过将其作为变化传递给每个片段提供插值距离。

然后他们做一个简单的线性雾化功能。有一些最小距离,其中雾颜色为零,一些最大距离,其中输出将是所有雾颜色。混合(线性插值)雾颜色和碎片颜色,像素距离在最大值和最小值之间。

正如书中所提到的,一旦你有了工作,就没有理由把自己局限于线性雾。您可以轻松地使其成为指数,取决于其他变量(例如,到地板的距离,由于纹理查找或噪声函数引起的变量),通过它制作神光等等。

从你的问题中不清楚你究竟追求的是什么,所以如果你想要真正有活力,那就是另一场球赛(并不总是值得你获得的效果的开发努力和性能成本)。对于现有的WebGL代码,您可以尝试使用Three Dreams of Black的加载屏幕,您可以在source code中的某处找到它,或者您可以通过实际modeling the fog as a 3d fluid更多地基于模拟。< / p>