Help us understand the problem. What is going on with this article?

Photoshopを使いのためのglslメモ

はじめに

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

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

ブレンド(合成)モード

  • レイヤーA(背景用)

layerA.png

https://goo.gl/Ex81hX

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

layerB.png

https://goo.gl/YvUmUu

  • 普通

blend_normal.png

https://goo.gl/VYrMEG

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つ通常合成する場合

3normal.png

https://goo.gl/aNqGqX

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を掛けない場合があります。

マスク

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

雲模様

  • ヴァリューノイズを作ります。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away