隨便講講霧的原理以及舊版本的使用霧的方法。

效果

原理

霧效(fog)是游戲中常用的一種效果，根據(jù)遠近產(chǎn)生不同的深度的霧效果。

這個效果涉及兩個關(guān)鍵字。

• 距離
• 顏色

在著色器中，霧效的距離，一般轉(zhuǎn)換成計算霧效因素(factor_fog)，這個數(shù)字范圍是0-1。

• 1 表示完全不受霧影響
• 0 表示完全被霧籠罩

接著再根據(jù)這個霧效因素去計算顏色，混合當前顏色color和霧factor_fog的顏色即可。

mix(cc_fogColor.rgb, color.rgb, factor_fog)

接下來就是如何去計算這個霧效因素了。

霧效因素一般是通過由攝像機位置(cc_cameraPos)和當前點位置(世界坐標，由世界空間矩陣和模型坐標計算的wPos)的距離去計算的。

float cam_dis = distance(cc_cameraPos, wPos);

不同的霧效果，采用不同的方式去計算霧效因素。

線性霧

線性一般會有兩個參數(shù)去計算。霧開始的地方fogStart和霧最遠的地方fogEnd。

• 當距離小于霧開始的地方，表示沒有霧，即霧效因素為1
• 當距離大于霧最遠的地方，完全被霧給覆蓋了，即霧效因素為0

factor_fog = clamp((fogEnd - cam_dis) / (fogEnd - fogStart), 0., 1.);

當然也可以改造一下，在0-1之間平滑一些。

factor_fog = 1.0 - smoothstep(fogStart, fogEnd, fogDistance);

指數(shù)霧

指數(shù)霧就是用指數(shù)函數(shù)根據(jù)距離計算霧效因素。

一般會有一個霧濃度fogDensity去控制這個指數(shù)函數(shù)。

一般指數(shù)霧：

factor_fog = exp(-cam_dis * fogDensity);

平方指數(shù)霧：

factor_fog = exp(-cam_dis * cam_dis * fogDensity * fogDensity);

層級霧

層級霧計算過程相對復(fù)雜，大致過程就是計算水平面的距離和高度距離以及濃度參數(shù)，具體實現(xiàn)過程可以參考源代碼 cc-fog.chunk。

fDensity = (sqrt(1.0 + ((fDeltaD / fDeltaY) * (fDeltaD / fDeltaY)))) * fDensityIntegral;
factor_fog = exp(-fDensity);

移植

在 Cocos Creator 3D v1.2 版本之前還未提供霧效果，那么該如何移植或定制呢？

把控一個重點，霧效果的關(guān)鍵就是計算霧效因素。

因為材質(zhì)默認使用的是 builtin-standard.effect，可以拷貝一份重新寫個build-in-fog.effect，然后再將需要霧化的材質(zhì)選擇這個effect。

先在頂點著色器中加一個霧效因素的計算方法。

out float v_fogFactor;
float computeFogFactor(float fogDistance){
    const float start = 1000.0;
    const float end = 3000.0;
    const float density = 0.0002;
    // return clamp((end-fogDistance)/(end-start), 0.0, 1.0); //霧化因子線性變化
    return 1.0 - smoothstep(start,end,fogDistance); //霧化因子非線性變化
    // return exp(-(density*fogDistance)); // 指數(shù)霧
    // return exp(-density*density*fogDistance*fogDistance); // 指數(shù)霧2
}

把霧效因素傳給片元著色器。

v_fogFactor = computeFogFactor(length(cc_cameraPos.xyz - pos.xyz));

在片元著色器中接收霧效因素。

in float v_fogFactor;

計算混合顏色。

color.rgb = mix(fogColor, color.rgb, v_fogFactor);

效果預(yù)覽(示例項目可以加Q群 859642112 獲取)：

小結(jié)

霧 fog ！計算霧效系數(shù) ！混合顏色 ！shader ！

以上為白玉無冰講解 Cocos Creator 3D v1.2 中的 "霧效果(fog)原理解析" 的技術(shù)分享。歡迎分享給身邊的朋友！

天下事有難易乎？為之，則難者亦易矣；不為，則易者亦難矣。人之為學有難易乎？學之，則難者亦易矣；不學，則易者亦難矣。

更多

“點贊“ ”在看”?鼓勵一下▼