Photoshopを使いのためのglslメモ

はじめに

glslが使えれば、Photoshopで出来ることはなんでも出来ます。そう、理論上はね。

但し、Photoshopの機能を自分でglslで実装する必要があります。
このメモはPhotoshopのあの機能を実装するにはというメモです。

ブレンド(合成)モード

• レイヤーA(背景用)

• レイヤーB(重ね合わせ用)

• 普通

precision mediump float;
uniform vec2  m;       // mouse
uniform float t;       // time
uniform vec2  r;       // resolution
uniform sampler2D smp; // prev scene

void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    vec2 q = p;
    p*=4.;
    float a = mod(floor(p.x)+floor(p.y),2.0);
    float b = step(0.,1.-length(q));
    vec3 A = vec3(q.x*a,q.y*a,a);
    vec3 B = vec3((1.-q.x)*b,(1.-q.y)*b,b);
    //gl_FragColor = vec4(A*(1.-b)+B*b, 1.0);
    gl_FragColor = vec4(mix(A,B,b), 1.0);
}

普通は加算と比べると意外とめんどくさいです
mix関数使えば簡単でした!!

    gl_FragColor = vec4(mix(レイヤーA,レイヤーB,Bのアルファ), 1.0);

• 3つ通常合成する場合

precision mediump float;
uniform vec2  m;       // mouse
uniform float t;       // time
uniform vec2  r;       // resolution
uniform sampler2D smp; // prev scene

void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    vec2 q = p;
    p*=4.;
    float a = mod(floor(p.x)+floor(p.y),2.0);
    float b = step(0.,1.-length(q));
    float c = step(0.,1.-(abs(q.x)+abs(q.y)));
 
    vec3 A = vec3(q.x*a,q.y*a,a);
    vec3 B = vec3((1.-q.x)*b,(1.-q.y)*b,b);
    vec3 C = vec3(q.x*c,q.y*c,c);
    vec3 color = mix(A,B,b);
    color = mix(color,C,c);
    gl_FragColor = vec4(color, 1.0);
}

• 覆い焼き(加算)

float a;
float b;
float c;
c= a + b;

本当に加算するだけですね。

• 乗算

float a;
float b;
float c;
c= a * b;

本当に乗算するだけですね。

• その他

glslのライブラリになっているのでこちらを参考に
https://github.com/jamieowen/glsl-blend

• 参考

ブレンドモードの仕組みはこちらを参考に
Photoshopの描画モード(ブレンドモード)を理解するための、画像合成は計算だという話

• 注意点

連続して合成する場合でPhotoshopと同じ結果を期待するのであれば、合成後、saturate=clamp(x,0.,1.)を必ず掛けてください。浮動小数点なので、1.0を超えていても表示結果は変わりませんが、データ自体は保持されている為、意図しない結果になることがあります。基本的には、事故を防ぐため、合成後は必ず、saturateを掛けておくといいでしょう。逆に意図してsaturateを掛けない場合があります。

マスク

アルファで乗算するだけ
超簡単

雲模様

• ヴァリューノイズを作ります。