소개

GLSL 셰이더 스쿨 2017 의 강의 내용의 복습을 겸해, 복수의 강의 내용을 조합해 해 봅니다.

먼저 배경이 되는 체크 무늬 패턴을 만듭니다.

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);
    p*=4.;
    float l = mod(floor(p.x)+floor(p.y),2.0);
    gl_FragColor = vec4(vec3(l), 1.0);
}

다음으로 하이트맵을 만들자

이번에는 수면의 파문을 이미지하여 만들고 있습니다.

h tps://오. gl/hC2Mh

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);
    float d=sin(length(p)*30.-t*10.);
    gl_FragColor = vec4(vec3(d), 1.0);
}

주의점으로서는, 프로시쟈르에 헤이트 맵을 만드는 경우는, 텍스처로 준비하는 경우와 달리 -0.5 해 마이너스의 값을 만들 필요가 없다고 하는 것입니다.

합성합시다.

h tps://오. gl/1XmQ6Q

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);
    float d=sin(length(p)*30.-t*10.);
    p+=d*.1;
    p*=4.;
    float l = mod(floor(p.x)+floor(p.y),2.0);
    gl_FragColor = vec4(vec3(l), 1.0);
}

이대로라면 계속 파문의 높이가 함께 남아 있기 때문에 거리에 따라 감쇠하도록 해도 좋을 것입니다.

마지막으로

의사 디스플레이스먼트 맵 매우 간단하네요.

응용하여 노이즈 함수로 구름 모양을 만들어 헤이트 맵으로 적용하면 수면의 흔들림을 재현 할 수 있습니다.
헤이트 맵을 파티클로 하면, 물방울의 표현이나, 불꽃의 양염의 표현을 할 수 있거나 하기 때문에 여러가지로 해 봅시다!

참고

GLSL 사운드에 반응하는 리플 효과

마토이 연구실 제12회 무늬를 붙인다