소개

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의 라이브러리이므로 여기를 참고로
htps : // 기주 b. 코 m / 자미 에오 / glsl-b ぇ d

참고

블렌드 모드의 구조는 이쪽을 참고로
Photoshop의 그리기 모드 (블렌드 모드)를 이해하기위한 이미지 합성은 계산이라는 이야기

주의점

연속적으로 합성하는 경우 Photoshop과 같은 결과를 기대한다면 합성 후 saturate=clamp(x,0.,1.)를 반드시 곱해 주세요. 부동 소수점이므로 1.0을 넘어도 표시 결과는 변하지 않지만 데이터 자체는 보존되어 있기 때문에 의도하지 않은 결과가 될 수 있습니다. 기본적으로 사고를 방지하기 위해 합성 후에는 반드시 saturate를 걸어 두는 것이 좋습니다. 반대로 의도하고 saturate를 곱하지 않을 수 있습니다.

가면

알파로 곱하기만 하면
매우 간단

구름 패턴

밸류 노이즈를 만듭니다.