Matrix

Matrix

https://thndl.com/square-shaped-shaders.html

1. 도형의 위치를 바꾸는 방법

 

 

#ifdef GL_ES

precision mediump float;

#endif

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

 

float bar(vec2 loc, vec2 size, vec2 coord){

    vec2 sw = loc - size/2.;

    vec2 ne = loc + size/2.;

    

    vec2 rect = step(sw, coord) - step(ne, coord);

 

    return rect.x*rect.y;

}

 

float cross(vec2 loc, vec2 size, vec2 coord){

float bar1 = bar(loc, size, coord);

    float bar2 = bar(loc, vec2(size.y,size.x), coord);

    

    return max(bar1, bar2); 

 // 둘중 하나가 1이면은 리턴을 해서 십자가 모양이 완성된다.  

}

 

void main(){

vec2 coord = gl_FragCoord.xy/u_resolution;

    coord.x *= u_resolution.x/u_resolution.y;

    // coord -= .5;

    coord = coord*2. -1.;

    // 화면 끝이 1로 변경

    

    float rad = .5;

    vec2 loc = vec2(0.) + vec2(sin(u_time)*rad, cos(u_time)*rad);  

    vec3 col = vec3(cross(loc, vec2(0.580,0.200), coord));

    

    gl_FragColor = vec4(col,1.);

    

}

1. 좌표의 원점 자체를 변경하는 방법

 

#ifdef GL_ES

precision mediump float;

#endif

 

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

 

float bar(vec2 loc, vec2 size, vec2 coord){

    vec2 sw = loc - size/2.;

    vec2 ne = loc + size/2.;

    

    vec2 rect = step(sw, coord) - step(ne, coord);

 

    return rect.x*rect.y;

}

float cross(vec2 loc, vec2 size, vec2 coord){

float bar1 = bar(loc, size, coord);

    float bar2 = bar(loc, vec2(size.y,size.x), coord);

    

    return max(bar1, bar2);  // 둘중 하나가 1이면은 리턴을 해서 십자가 모양이 완성된다.  

}

void main(){

vec2 coord = gl_FragCoord.xy/u_resolution;

    coord.x *= u_resolution.x/u_resolution.y;

    // coord -= .5;

    coord = coord*2. -1.;

    // 화면 끝이 1로 변경

    coord += vec2(.0,.0);

    // 더해주는 방향의 반대    

    

    float rad = .5; 

    vec2 loc = vec2(0.) + vec2(sin(u_time)*rad, cos(u_time)*rad);

    coord += loc;

    

    vec3 col = vec3(cross(vec2(0.), vec2(0.580,0.200), coord));

    

    gl_FragColor = vec4(col,1.);    

}