🎆 프론트개발자 연봉 떡상하는 스킬 - GLSL

김병찬·2021년 4월 21일

Effect GLSL Shader WebGL canvas typescript

167

해당 이미지는 dissolve 효과를 셰이더로 구현한것이며

셰이더를 조금만 익혀도 쉽게 만들 수 있는 효과입니다.

요즘에 인터랙티브 웹, 마이크로 인터랙티브 등 UX를 위한 효과들이 중요해지고 있습니다.

기존 canvas, css로 표현하던 효과를 shader를 통해 극대화 시켜봅시다.

🤔 개요

이런 효과를 개발할 수 있는 개발자가 몇이나 있을까요!?

🤭 나는 언제 저렇게 멋있는 효과를 구현하지...

항상 예쁘게, 멋지게를 외치는 기획자와 임원진들의 니즈를 충족시키기 위한 GLSL 시간입니다.

저도 처음에는 머릿속으로 생각만해보고,

배워야지.. 배워야지.. 😥

하면서 지나쳐 왔지만 ...

이 글을 읽으시는 여러분들은 부디 저처럼 셰이더에 대해서 모른척하고 지나가지마시고,

잘 배워서 연봉 떡상 가즈아!

✍️ 이 글에서 다룰 내용

코드를 작성하기전에 간단하게 기본적인 셰이더를 이해합니다.
셰이더에 Vertex Shader, Fragment Shader ... 여러가지 종류가 있는데 이 글에서는 Fragment Shader (픽셀 셰이더)의 내용을 다룹니다.

🎆 셰이더란

셰이더란 색상을 그리는 함수인데 이 함수가

픽셀마다 모두 동시에 호출 된다고 생각하시면 됩니다.

생각해보면 병렬 프로그래밍과도 닮아, 아니 병렬 프로그래밍 입니다.

셰이더에 대한 자세한 내용은 여기를 참고하시면 됩니다.

🍴 개발환경

https://github.com/deeean/shader-starter-kit

제가 미리 만들어둔 shader-starter-kit 을 clone하시고 시작하시면 됩니다~

yarn
yarn dev

위 내용을 입력하면 webpack-dev-server가 실행됩니다.

이런 사각형이 그려진 화면이 나옵니다.

🎤 무작정 따라하기

/src/shaders/fragmentShader.glsl 파일로 이동해서

precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  gl_FragColor = vec4(vec3(uv.x), 1.0);
}

일단 무작정 위와 같이 입력해봅시다!

검은색에서 흰색으로 그라데이션이 생겼네요!?

글 초반에 말한것처럼 셰이더 함수는 픽셀마다 함수가 실행된다고 했습니다.

gl_FragCoord.xy는 현재 픽셀의 좌표이고 그 좌표를 해상도로 나누었습니다.

0 ~ 512까지 gl_FragCoord.xy에 값이 들어오고 그 좌표를 해상도로 나누었으니

uv라는 변수는 0 ~ 1까지 소수점 단위로 표현됩니다.

위 사진을 참고해서 이해하면 좋습니다. (정확히 이렇게 동작하는것은 아닙니다.)

precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  gl_FragColor = vec4(vec3(uv.y), 1.0);
}

uv.x 있던 자리에 uv.y를 넣어 봅시다.

제일 아래쪽부터 위 방향으로 그라데이션이 생겼습니다.

이번에는 대각선으로 그려볼까요?

precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  gl_FragColor = vec4(vec3(uv.x + uv.y), 1.0);
}

대각선으로 그려졌는데 뭔가 이상한것 같습니다.

사각형의 대각선 부분을 지나고 부터는 색상이 계속 하얀색입니다.

uv.x + uv.y를 더하면 최댓값이 2.0이 됩니다.

곱하기 0.5를 하면 최댓값이 1.0이 되겠네요?

precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  gl_FragColor = vec4(vec3((uv.x + uv.y) * 0.5), 1.0);
}

⚫️ 원 그리기

precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  float dist = distance(vec2(0.5), uv);

  gl_FragColor = vec4(vec3(dist), 1.0);
}

방사형 모양의 그라데이션이 생겼습니다.

왜 그런지 살펴봅시다.

0.5, 0.5좌표는 중앙이고

uv는 픽셀 모든곳

거리를 측정하고

현재 픽셀 위치와 0.5, 0.5의 거리의 색을 모든 픽셀에 넣어주었습니다.

자 이제 선명한 원을 만들어봅시다.

precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  float dist = distance(vec2(0.5), uv);
  dist = step(0.5, dist);

  gl_FragColor = vec4(vec3(dist), 1.0);
}

아주 선명한 원이 생겼습니다.

코드를 보면 step이 추가되었는데

// sample code
float step(float edge, float x) {
  if (x < edge) {
    return 0.0;
  }
  
  return 1.0;
}

내부적으로 위와 같이 작동합니다.

작성된 코드의 step(0.5, dist) 부분을 보면

dist가 0.5보다 작을때는 0.0 클때는 1을 반환하게 되어서 선명한 원이 됩니다.

precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  float dist = step(0.5, uv.x);

  gl_FragColor = vec4(vec3(dist), 1.0);
}