快捷導(dǎo)航

OpenGL Shader實(shí)現(xiàn)光照發(fā)光體特效

更新時間：2022年02月11日 16:25:38 作者：JulyYu

這篇文章主要介紹了如何通過OpenGL Shader實(shí)現(xiàn)光照發(fā)光體特效，不同于陰影遮蓋，它是利用圓形繪制向內(nèi)部。感興趣的小伙伴可以了解一下

內(nèi)發(fā)光原理

內(nèi)發(fā)光原理簡單概況是：采樣周邊像素alpha取平均值疊加效果。概括來說似乎好像特別簡單，但需要一定的理解和消化。發(fā)光物體可以當(dāng)做是一個圓形對象，去采集圓形對象周邊像素值。例如已知圓形半徑是R，角度是Angle，然后根據(jù)半徑和角度推導(dǎo)算出當(dāng)前像素坐標(biāo)位置，用當(dāng)前像素坐標(biāo)位置得到透明度再去做計算。

但其實(shí)在陰影遮罩效果中似乎已經(jīng)介紹過了同樣能夠通過。不同點(diǎn)在于陰影遮蓋是利用圓形繪制向外部暈染而內(nèi)發(fā)光效果是作用于內(nèi)部。

發(fā)光體實(shí)現(xiàn)

首先采用繪制圓的方法實(shí)現(xiàn)RGB疊加。可以看到中心位置繪制圓的位置顏色較深，向外擴(kuò)散顏色逐漸暗淡。效果雖然不對但已經(jīng)知道下一步該怎么實(shí)現(xiàn)了。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    uv -= 0.5;
    uv.x *= iResolution.x/iResolution.y; 
    vec3 color = vec3(0.);
    float glow = length(uv);
    color += glow;
    gl_FragColor = vec4(color,1.);
}

通過取反操作，可用一個數(shù)除以length(uv)再相乘一個小數(shù)來稍微減小值的大小。從最終結(jié)果可以看到所期望的效果。對比之前效果展示相除相當(dāng)于對原結(jié)果取反，原先內(nèi)部是數(shù)值最小，相除之后內(nèi)部數(shù)值變成最大。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    uv -= 0.5;
    uv.x *= iResolution.x/iResolution.y; 
    vec3 color = vec3(0.);
    float glow = 0.05 * 3./length(uv);
    color += glow;
    gl_FragColor = vec4(color,1.);
}

但過渡效果泛白范圍似乎過大了一些繼續(xù)對原算法進(jìn)行優(yōu)化。增加pow方法將數(shù)值變得更小一些。

float getGlow(float dist, float radius, float intensity){
    return pow(radius/dist, intensity);
}

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    uv -= 0.5;
    uv.x *= iResolution.x/iResolution.y; 
    vec3 color = vec3(0.);
    float glow = 0.05 * getGlow(length(uv), 1., 2.);
    color += glow;
    gl_FragColor = vec4(color,1.);
}

擴(kuò)展效果

小太陽

改變發(fā)光位置和發(fā)光顏色模擬實(shí)現(xiàn)太陽光照的效果。

float getGlow(float dist, float radius, float intensity){
    return radius/dist;
}

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 color = vec3(0.);

    vec2 uv2 = uv;
    uv2 -=1.0;
    float glow = 0.09 * 3./length(uv2);
    color += (5.0 * vec3(0.02 * glow) + vec3(0.9686, 0.6941, 0.0) * glow);
    gl_FragColor = vec4(color,1.);
}

光源移動效果

float getGlow(float dist, float radius, float intensity){
    return radius/dist;
}

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 color = texture(iChannel1,uv).rgb;

    float position = sin(iTime) / 2.;
    vec2 uv2 = uv;
    uv2 -=0.5;
    uv2.x *= iResolution.x/iResolution.y; 
    uv2 += position;
    float glow = 0.09 * 3./length(uv2);
    color += (5.0 * vec3(0.02 * glow));
    gl_FragColor = vec4(color,1.);
}