如何使用Open GL ES 2.0或WebGL創建霧？

Question

我想爲我的遊戲創建一個霧效果，但我找不到任何有關如何使用OpenGL ES 2.0的教程。如果任何人有鏈接教程，可以提供解釋或源代碼，我將不勝感激。

Answer 1

在OpenGL ES 2.0編程指南（第202頁）中，有一節介紹使用着色器複製固定功能霧。源代碼可在谷歌代碼項目（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。