如何使用Open GL ES 2.0或WebGL创建雾? [英] How to create fog using Open GL ES 2.0 or WebGL?

问题描述

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

I would like to create a fog effect for my game but I can't find any tutorials on how to do it using OpenGL ES 2.0. If anyone has links to tutorials, can provide an explanation, or source code I would be grateful.

推荐答案

第224页的《 OpenGL ES 2.0编程指南》中有一节介绍了使用着色器复制固定功能雾.源代码可在google代码项目上找到( MIT许可证).这是一个巨大的rendermonkey XML文件，但 the嵌入其中的着色器源非常简单(我会直接在此处复制它，但不确定是否可以).

There's a section on replicating fixed-function fog using shaders in the OpenGL ES 2.0 Programming Guide on page 224. The source code is available on the google code project (MIT License). It's a gigantic rendermonkey XML file, but the shader source embedded in it is pretty straightforward (I would copy it directly here, but not sure if that's OK).

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

The idea is to use the distance to a particular pixel as the input to some fog function. In that example, they calculate the eye to vertex distance in the vertex shader, then provide the interpolated distance to each fragment by passing it as a varying.

然后它们执行简单的线性雾功能.有一些最小距离，其中雾色为零，而有一些最大距离，其中输出都是雾色.通过将像素距离落在最大值和最小值之间的位置来混合(线性插值)雾色和片段颜色.

They then do a simple linear fog function. There's some minimum distance where there would be zero fog color, and some maximum distance where the output would be all fog color. You mix (linearly interpolate) the fog color and the fragment color by where the pixel distance falls between the max and the min.

正如书中提到的那样，一旦进行了工作，就没有理由将自己局限于线性雾了.您可以根据其他变量(例如，到地板的距离，由于纹理查找或噪声函数而导致的变量)，使其通过上帝射线等，轻松地使其呈指数形式.

As mentioned in the book, once you have that working, there's no reason to limit yourself to linear fog. You can easily make it exponential, dependent on other variables (e.g. distance to a floor, variable due to a texture lookup or noise functions), make god rays through it, etc.

从您的问题中尚不清楚您到底在追求什么，因此，如果您想真正变得充满活力，那将是另外一回事(并不总是值得您为获得效果而付出开发努力和性能成本).对于现有的WebGL代码，您可以尝试使用三个黑梦的加载屏幕，您可以在某处找到它在源代码中，也可以通过以下方式进行更多基于模拟的操作:实际上将雾建模为3d流体.

It's not clear from your question what exactly you're after, so if you want to go really dynamic, that's a whole other ballgame (and not always worth the development effort and performance costs for the effect you get). For existing WebGL code, you might try something like the loading screen of Three Dreams of Black, which you can find somewhere in the source code, or you can go more simulation-based by actually modeling the fog as a 3d fluid.

这篇关于如何使用Open GL ES 2.0或WebGL创建雾?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！