需求背景

在一些主流app上有一些比較特殊的濾鏡效果，例如灰塵、塑料封面、光影效果等。在此之前一直困惑這類濾鏡效果是如何實(shí)現(xiàn)的，單純glsl腳本來繪制難度似乎有點(diǎn)大。例如下面截取平臺(tái)的幾種效果像是在圖片上方覆蓋了一個(gè)透明圖層。

需求實(shí)現(xiàn)

glsl腳本實(shí)現(xiàn)其實(shí)特別簡單，加載兩個(gè)紋理同時(shí)對(duì)兩個(gè)紋理的rgb進(jìn)行相加即可。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    vec3 rgb = texture1.rgb + texture2.rgb;
    vec4 pixel = vec4(rgb,1.);
    gl_FragColor = pixel;
}

紋理1

紋理2

紋理3

紋理2是一個(gè)透明塑封封面，兩者rgb疊加即可呈現(xiàn)出最終希望達(dá)到的效果。這樣的效果似乎比通過腳本模擬更加簡易，同時(shí)也降低了開發(fā)成本。

功能拓展

另外對(duì)于素材和圖片尺寸的問題是可以通過腳本代碼來處理完成。對(duì)uv1和uv2進(jìn)行比例相乘計(jì)算處理即可實(shí)現(xiàn)圖片尺寸縮放操作，此外再通過smoothstep方法和算法控制紋理顯示區(qū)域大小實(shí)現(xiàn)了框中圖的效果。

void main()
{
    vec2 uv1 =  gl_FragCoord.xy / iResolution.xy;
    uv1.y = mod(uv1.y, 1.0);
    vec2 uv2 = uv1;

    uv1 -= 0.5;
    uv1 *= 2.;
    uv1 += 0.5;

    uv2 -= 0.5;
    uv2 *= 1.5;
    uv2 += 0.5;

    float l = 0.003;

    float k = smoothstep((1.0 - l), (1.0 - l) + 0.006, uv1.x);
    float k1 = smoothstep(l, l - 0.006, uv1.x);

    float m = smoothstep((1.0 - l), (1.0 - l) + 0.006, uv1.y);
    float m1 = smoothstep(l, l - 0.006, uv1.y);
    

    float i = smoothstep((1.0 - l), (1.0 - l) + 0.006, uv2.x);
    float i1 = smoothstep(l, l - 0.006, uv2.x);

    float j = smoothstep((1.0 - l), (1.0 - l) + 0.006, uv2.y);
    float j1 = smoothstep(l, l - 0.006, uv2.y);

    vec4 texture1 = texture(iChannel1, uv1)* (1.0 - k) * (1.0 - k1) * (1.0 - m) * (1.0 - m1);
    vec4 texture2 = texture(iChannel3, vec2(uv2.x,uv2.y)) * (1.0 - i) * (1.0 - i1) * (1.0 - j) * (1.0 - j1);
    gl_FragColor = 1.0 - (1.0 - texture1) * (1.0 - texture2);
}

此外還能對(duì)素材圖片進(jìn)行替換，從而達(dá)到不同效果場景氛圍。

高級(jí)實(shí)現(xiàn)

但不一定所有效果都需要借助于設(shè)計(jì)師素材來實(shí)現(xiàn)，高級(jí)玩法其實(shí)是可以通過腳本直接實(shí)現(xiàn)。例如下面光照效果實(shí)際上就是只通過代碼模擬來完成的，沒有增加外置任何其他素材資源。但是實(shí)現(xiàn)成本較高需要了解很多數(shù)學(xué)模擬公式以及技術(shù)背景，而且最終效果也不一定是產(chǎn)品和設(shè)計(jì)所能滿意的。

PS：具體實(shí)現(xiàn)是從shaderToy上找到，這里就不分享具體代碼了。

結(jié)果總結(jié)

有感而發(fā)在需求實(shí)現(xiàn)上原先因?yàn)樵O(shè)計(jì)希望實(shí)現(xiàn)彩虹、光照、物件等在原圖之上的濾鏡效果，在此調(diào)研之前一直覺得技術(shù)是可以完成所有任務(wù)的。最終通過實(shí)踐才發(fā)現(xiàn)有時(shí)候一些捷徑實(shí)現(xiàn)和更直接簡單的方法或許是最終最優(yōu)解。所以技術(shù)和設(shè)計(jì)還是息息相關(guān)，在時(shí)間和精力有限的情況下應(yīng)該借助其他方式快速達(dá)成需求目標(biāo)。

到此這篇關(guān)于OpenGL Shader實(shí)現(xiàn)物件材料效果詳解的文章就介紹到這了,更多相關(guān)OpenGL Shader物件材料效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論