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

标签 glsl opengl-es-2.0 webgl

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

最佳答案

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

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

然后他们做了一个简单的线性雾函数。雾色为零的最小距离和输出全为雾色的最大距离。您可以根据像素距离介于最大和最小之间的位置混合(线性插值)雾颜色和片段颜色。

正如书中提到的,一旦您完成了这项工作,就没有理由将自己局限于线性雾。您可以很容易地使它成为指数,依赖于其他变量(例如到地板的距离,由于纹理查找或噪声函数而变化),使上帝光线穿过它,等等。

从您的问题中并不清楚您到底在追求什么,所以如果您想要变得真正动态,那就完全是另一回事了(并不总是值得为获得的效果付出开发努力和性能成本)。对于现有的 WebGL 代码,您可以尝试类似 Three Dreams of Black 的加载屏幕,你可以在 source code 的某处找到它,或者你可以通过实际更多地基于模拟 modeling the fog as a 3d fluid .

关于glsl - 如何使用 Open GL ES 2.0 或 WebGL 创建雾?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11694458/

相关文章:

javascript - WebGl 片段着色器 channel 数组

opengl-es - 如何在 GLSL ES 中确定纹理的偶数/奇数线

android - 透明纹理帧缓冲区 (OpenGL ES 2)

Android OpenGLES 2.0 加载更多纹理

webgl - iOS 8 safari webgl 没有抗锯齿功能

javascript - 关于 JavaScript、WebSockets、WebGL 的问题

opengl - 如何在 openGL 中显示 2 个或更多对象(模型 - View - 投影矩阵和着色器)

opengl - 骨骼动画顶点着色器的性能问题

opengl - 如何获取片段着色器中当前多边形的顶点?

Android OpenGL|ES 2.0 纹理