๐ŸŽ† ํ”„๋ก ํŠธ๊ฐœ๋ฐœ์ž ์—ฐ๋ด‰ ๋–ก์ƒํ•˜๋Š” ์Šคํ‚ฌ - GLSL

kimbyungchanยท2021๋…„ 4์›” 21์ผ
120
post-thumbnail

ํ•ด๋‹น ์ด๋ฏธ์ง€๋Š” 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);
}

uv.x๋ฅผ 0.5๋กœ stepํ•˜๋ฉด ์ด๋Ÿฐ ๋ชจ์–‘์ด๋ฉ๋‹ˆ๋‹ค.

๋งˆ์น˜๋ฉฐ

๊ธฐ๋ณธ์ ์ธ ์…ฐ์ด๋” ์ดํ•ด์™€ stepํ•จ์ˆ˜์‚ฌ์šฉ ๋ฐฉ๋ฒ•๋“ฑ์„ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ๊ฐ•์˜์—์„œ๋Š” ์…ฐ์ด๋”๋ฅผ ์กฐ๊ธˆ๋” ์œ ์šฉํ•˜๊ณ  ๊ณ ๊ธ‰์Šคํ‚ฌ์„ ์‚ฌ์šฉํ•ด๋ด…์‹œ๋‹ค.

๋‹ค์Œ๊ธ€


ํ˜„์žฌ WE-AR์—์„œ ์ฑ„์šฉ์„ ์ง„ํ–‰ํ•˜๊ณ ์žˆ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜ ๋งํฌ๋ฅผ ํ†ตํ•ด ๋งŽ์€ ์ง€์› ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์›น์‚ฌ์ดํŠธ, ์ฑ„์šฉ๊ณต๊ณ 

profile
๐Ÿ‘€ ์‹œ๊ฐ์ ์ธ ์š”์†Œ๋ฅผ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

10๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2021๋…„ 4์›” 22์ผ

wow

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2021๋…„ 4์›” 27์ผ

์ข‹์€๊ธ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ํ›„์†ํŽธ์ด ๊ธฐ๋Œ€๋˜๋„ค์š” :)

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
์•Œ ์ˆ˜ ์—†์Œ
2021๋…„ 4์›” 27์ผ
์ˆ˜์ •์‚ญ์ œ

์‚ญ์ œ๋œ ๋Œ“๊ธ€์ž…๋‹ˆ๋‹ค.

2๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 5์›” 1์ผ

์ข‹์€ ๊ธ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ •๋ง ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ์€ ํšจ๊ณผ์˜€์–ด์š”. ๋•๋ถ„์— ํ•œ๊ฐ€์ง€ ๋” ๋ฐฐ์›Œ๊ฐ‘๋‹ˆ๋‹ค. ๋‹ค์Œ๊ธ€์ด ๊ธฐ๋‹ค๋ ค์ง€๋„ค์š”๐Ÿ˜Œ

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
์•Œ ์ˆ˜ ์—†์Œ
2021๋…„ 5์›” 5์ผ
์ˆ˜์ •์‚ญ์ œ

์‚ญ์ œ๋œ ๋Œ“๊ธ€์ž…๋‹ˆ๋‹ค.

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 5์›” 13์ผ

์ž˜ ๋ดค์Šต๋‹ˆ๋‹ค.. ์ฝ”๋“œ๋กœ ์ž‘์„ฑ๋œ ์–ธ์–ด๊ฐ€ ๋ญ”๊ฐ€์š”??

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 5์›” 15์ผ

-_-;

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ