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

Question

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

Answer 1

OpenGL ES 2.0 编程指南第 224 页有一节关于使用着色器复制固定功能雾。源代码可在 google 代码项目（MIT 许可证）中找到。这是一个巨大的 rendermonkey XML 文件，但嵌入其中的着色器源非常简单（我会直接在这里复制它，但不确定是否可以）。

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

然后他们做一个简单的线性雾函数。有一些最小距离是零雾色，还有一些最大距离是输出全是雾色。通过像素距离落在最大值和最小值之间的位置混合（线性插值）雾颜色和片段颜色。

正如书中提到的，一旦你开始工作，就没有理由将自己限制在线性雾中。您可以轻松地使其指数化，依赖于其他变量（例如到地板的距离，由于纹理查找或噪声函数而产生的变量），使上帝射线穿过它等。

从你的问题中不清楚你到底在追求什么，所以如果你想要真正的动态，那就是另一回事了（并不总是值得为你获得的效果付出开发努力和性能成本）。对于现有的 WebGL 代码，您可能会尝试类似“黑三梦”的加载屏幕，您可以在源代码的某处找到它，或者您可以通过将雾实际建模为 3d 流体来更加基于模拟。