{"id":15752,"date":"2025-04-18T08:11:45","date_gmt":"2025-04-17T23:11:45","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=15752"},"modified":"2025-04-27T09:57:04","modified_gmt":"2025-04-27T00:57:04","slug":"glsl-%ed%80%b5-%eb%a0%88%ed%8d%bc%eb%9f%b0%ec%8a%a4","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=15752","title":{"rendered":"GLSL \ud035 \ub808\ud37c\ub7f0\uc2a4"},"content":{"rendered":"<h3>\uc5b4\ub5a4 \uc9c0\uc810(p)\uc5d0\uc11c Ray(r)\uc5d0 \uac00\uc7a5 \uac00\uae4c\uc6b4 r \uc704\uc758 \uc88c\ud45c \uc5bb\uae30<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nstruct ray {\r\n  vec3 o, d;\r\n};\r\n\r\nvec3 ClosestPoint(ray r, vec3 p) {\r\n  return r.o + max(0., dot(p-r.o, r.d)) * r.d;\r\n}\r\n<\/pre>\n<p>\uc704\uc758 ClosePoint\ub97c \uc774\uc6a9\ud558\uba74 ray\uc640 \uc5b4\ub5a4 \uc9c0\uc810\uc5d0 \ub300\ud55c \ucd5c\ub2e8 \uac70\ub9ac\ub97c \uc544\ub798 \ud568\uc218\ub97c \uc774\uc6a9\ud574 \uad6c\ud560 \uc218 \uc788\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nfloat DistRay(ray r, vec3 p) {\r\n  return length(p - ClosestPoint(r, p));\r\n}\r\n<\/pre>\n<h3>\uc120 \uadf8\ub9ac\uae30 \ud568\uc218<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nfloat line(vec2 p, vec2 a, vec2 b) {\r\n  vec2 pa = p - a, ba = b - a;\r\n  float t = clamp(dot(pa, ba)\/dot(ba, ba), 0., 1.);\r\n  vec2 c = a + ba * t;\r\n  float d = length(c - p);\r\n  return smoothstep(fwidth(d), 0., d - .001);\r\n}\r\n<\/pre>\n<h3>0 ~ 1 \uc0ac\uc774\uc758 \uac12\uc744 \uac16\ub294 \uac04\ub2e8\ud55c \ub178\uc774\uc988 \ud568\uc218<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nfloat random (in vec2 st) {\r\n    return fract(sin(dot(st.xy,\r\n        vec2(12.9898,78.233)))*\r\n        43758.5453123);\r\n}\r\n\r\n\/\/ Based on Morgan McGuire @morgan3d\r\n\/\/ https:\/\/www.shadertoy.com\/view\/4dS3Wd\r\nfloat noise (in vec2 st) {\r\n    vec2 i = floor(st);\r\n    vec2 f = fract(st);\r\n\r\n    \/\/ Four corners in 2D of a tile\r\n    float a = random(i);\r\n    float b = random(i + vec2(1.0, 0.0));\r\n    float c = random(i + vec2(0.0, 1.0));\r\n    float d = random(i + vec2(1.0, 1.0));\r\n\r\n    vec2 u = f * f * (3.0 - 2.0 * f);\r\n\r\n    return mix(a, b, u.x) +\r\n            (c - a)* u.y * (1.0 - u.x) +\r\n            (d - b) * u.x * u.y;\r\n}\r\n<\/pre>\n<h3>-1 ~ 1 \uc0ac\uc774\uc758 \uac12\uc744 \uac16\ub294 Simplex \ub178\uc774\uc988 \ud568\uc218<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\n\/\/ Some useful functions\r\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 \/ 289.0)) * 289.0; }\r\nvec2 mod289(vec2 x) { return x - floor(x * (1.0 \/ 289.0)) * 289.0; }\r\nvec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }\r\n\r\n\/\/\r\n\/\/ Description : GLSL 2D simplex noise function\r\n\/\/      Author : Ian McEwan, Ashima Arts\r\n\/\/  Maintainer : ijm\r\n\/\/     Lastmod : 20110822 (ijm)\r\n\/\/     License :\r\n\/\/  Copyright (C) 2011 Ashima Arts. All rights reserved.\r\n\/\/  Distributed under the MIT License. See LICENSE file.\r\n\/\/  https:\/\/github.com\/ashima\/webgl-noise\r\n\/\/\r\nfloat snoise(vec2 v) {\r\n\r\n    \/\/ Precompute values for skewed triangular grid\r\n    const vec4 C = vec4(0.211324865405187,\r\n                        \/\/ (3.0-sqrt(3.0))\/6.0\r\n                        0.366025403784439,\r\n                        \/\/ 0.5*(sqrt(3.0)-1.0)\r\n                        -0.577350269189626,\r\n                        \/\/ -1.0 + 2.0 * C.x\r\n                        0.024390243902439);\r\n                        \/\/ 1.0 \/ 41.0\r\n\r\n    \/\/ First corner (x0)\r\n    vec2 i  = floor(v + dot(v, C.yy));\r\n    vec2 x0 = v - i + dot(i, C.xx);\r\n\r\n    \/\/ Other two corners (x1, x2)\r\n    vec2 i1 = vec2(0.0);\r\n    i1 = (x0.x > x0.y)? vec2(1.0, 0.0):vec2(0.0, 1.0);\r\n    vec2 x1 = x0.xy + C.xx - i1;\r\n    vec2 x2 = x0.xy + C.zz;\r\n\r\n    \/\/ Do some permutations to avoid\r\n    \/\/ truncation effects in permutation\r\n    i = mod289(i);\r\n    vec3 p = permute(\r\n            permute( i.y + vec3(0.0, i1.y, 1.0))\r\n                + i.x + vec3(0.0, i1.x, 1.0 ));\r\n\r\n    vec3 m = max(0.5 - vec3(\r\n                        dot(x0,x0),\r\n                        dot(x1,x1),\r\n                        dot(x2,x2)\r\n                        ), 0.0);\r\n\r\n    m = m*m ;\r\n    m = m*m ;\r\n\r\n    \/\/ Gradients:\r\n    \/\/  41 pts uniformly over a line, mapped onto a diamond\r\n    \/\/  The ring size 17*17 = 289 is close to a multiple\r\n    \/\/      of 41 (41*7 = 287)\r\n\r\n    vec3 x = 2.0 * fract(p * C.www) - 1.0;\r\n    vec3 h = abs(x) - 0.5;\r\n    vec3 ox = floor(x + 0.5);\r\n    vec3 a0 = x - ox;\r\n\r\n    \/\/ Normalise gradients implicitly by scaling m\r\n    \/\/ Approximation of: m *= inversesqrt(a0*a0 + h*h);\r\n    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0+h*h);\r\n\r\n    \/\/ Compute final noise value at P\r\n    vec3 g = vec3(0.0);\r\n    g.x  = a0.x  * x0.x  + h.x  * x0.y;\r\n    g.yz = a0.yz * vec2(x1.x,x2.x) + h.yz * vec2(x1.y,x2.y);\r\n    return 130.0 * dot(m, g);\r\n}\r\n<\/pre>\n<h3>\uc880\ub354 \uace0\ub978 \ubd84\ud3ec\uc758 \ub79c\ub358 hash<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nuvec2 murmurHash21(uint src) {\r\n  const uint M = 0x5bd1e995u;\r\n  uvec2 h = uvec2(1190494759u, 2147483647u);\r\n  src *= M;\r\n  src ^= src>>24u;\r\n  src *= M;\r\n  h *= M;\r\n  h ^= src;\r\n  h ^= h>>13u;\r\n  h *= M;\r\n  h ^= h>>15u;\r\n  return h;\r\n}\r\n\r\n\/\/ 2 outputs, 1 input\r\nvec2 hash21(float src) {\r\n  uvec2 h = murmurHash21(floatBitsToUint(src));\r\n  return uintBitsToFloat(h & 0x007fffffu | 0x3f800000u) - 1.0;\r\n}\r\n<\/pre>\n<h3>smoothstep\uc758 \ubcf4\uac04\uc2dd<\/h3>\n<p>\uc544\ub798\uc758 a\uc640 b\ub294 \ub3d9\uc77c\ud55c \uac12\uc774\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nfloat f = uv.x;\r\nfloat a = smoothstep(0., 1., f);\r\nfloat b = f * f * (3. - 2. * f);\r\n<\/pre>\n<p>\uc704\uc758 \ubcf4\uac04\uc2dd\uc744 cubic Hermite curve(\ud050\ube45 \ud5e4\ub974\ubbf8\ud2b8 \uace1\uc120)\ub77c\uace0 \ud55c\ub2e4. 0~1 \uc0ac\uc774\uc758 \uc601\uc5ed\uc5d0\uc11c \uc2dc\uc791\uacfc \ub05d\uc744 \uc880\ub354 \ud3b8\ud3c9\ud558\uac8c \ub9cc\ub4e4\uc5b4\uc8fc\ub294 quintic interpolation cuver(\ud038\ud2f1 \ubcf4\uac04 \uace1\uc120)\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nfloat f = uv.x;\r\nfloat b = f * f * f * (6. * f * f - 15. * f + 10.);\r\n<\/pre>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/03\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-03-28-09.26.11.png\" alt=\"\" width=\"600\" class=\"aligncenter size-full wp-image-15811\" \/><\/p>\n<h3>modelMatrix\ub85c \ubcc0\ud658\ub41c normal \uc5bb\uae30<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nvarying vec3 vNormal;\r\n\r\n...\r\n\r\nvNormal = mat3(transpose(inverse(modelMatrix))) * normal;\r\n<\/pre>\n<p>\ud504\ub808\uadf8\uba3c\ud2b8 \uc250\uc774\ub354\uc5d0\uc11c\ub294 \ubc1b\uc740 vNormal\uc744 \ubc18\ub4dc\uc2dc \uc815\uaddc\ud654(normalize)\ud574\uc57c \ud55c\ub2e4.<\/p>\n<h3>3\ucd08 \uc8fc\uae30\ub85c 0 ~ 1 \uc0ac\uc774\uc758 \uc5f0\uc18d\ub41c \uac12 \uc5bb\uae30<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nuniform float u_time; \/\/ 0, 1, 2, ...\uc758 \uac12\uc774\uba70 \uac01\uac01 0\ucd08, 1\ucd08, 2\ucd08, ...\ub97c \ub098\ud0c0\ub0c4\r\n\r\n...\r\n\r\nfloat period = 3.; \/\/ 3\ucd08 \uc8fc\uae30\r\nfloat t = mod(u_time, period) \/ period; \/\/ 0 ~ 1 \uc0ac\uc774\uc758 \uc5f0\uc18d\ub41c \uac12\r\n\r\n\/\/ sin \ud568\uc218\uc5d0 3.1415\ub97c \uacf1\ud558\ub294 \uc774\uc720\ub294 sin \ud568\uc218\uc758 \ud55c \uc8fc\uae30\uac00 360\ub3c4\uc774\uae30 \ub54c\ubb38\uc784\r\nvec3 color = mix(vec3(0), vec3(1), abs(sin(3.1415 * t)));\r\n\/\/ or\r\nvec3 color = mix(vec3(0), vec3(1), sin(3.1415 * t) * .5 + .5); \r\n<\/pre>\n<h3>\uc6d0\ud558\ub294 \uac01\ub3c4\ub97c \uc774\ub8e8\ub294 \uc120<\/h3>\n<p>\uc544\ub798\uc758 \uc774\ubbf8\uc9c0\ub294 45\ub3c4\ub97c \uc774\ub8e8\ub294 \uc120\uc778\ub370, \uc774\ucc98\ub7fc \uc6d0\ud558\ub294 \uac01\ub3c4\ub97c \uc774\ub8e8\ub294 \uc120\uc744 \ub9cc\ub4e4\uae30 \uc704\ud55c \ucf54\ub4dc\uc774\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/02\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-02-27-09.31.57.png\" alt=\"\" width=\"400\" class=\"aligncenter size-full wp-image-15760\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nuniform vec3 uResolution;\r\nuniform float uTime;\r\nuniform vec4 uMouse;\r\n\r\n#define PI (3.141592)\r\n\r\nvoid main() {\r\n  vec2 st = gl_FragCoord.xy \/ uResolution.xy;\r\n  st = (gl_FragCoord.xy - .5 * uResolution.xy) \/ uResolution.y;\r\n\r\n  float w = fwidth(st.y);\r\n  float a = (45.) * PI \/ 180.0;\r\n  float d = dot(st, vec2(cos(a), sin(a)));\r\n  d = smoothstep(-w, w, abs(d));\r\n\r\n  gl_FragColor = vec4(vec3(1. - d), 1.);\r\n}\r\n<\/pre>\n<h3>\ub2e4\uac01\ud615 \uadf8\ub9ac\uae30<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nuniform vec3 uResolution;\r\nuniform float uTime;\r\nuniform vec4 uMouse;\r\n\r\n#define PI 3.14159265359\r\n#define TWO_PI 6.28318530718\r\n\r\nvoid main(){\r\n  vec2 st = gl_FragCoord.xy\/uResolution.xy * 2. - 1.; \/\/-1-1\r\n  st.x *= uResolution.x\/uResolution.y;\r\n  vec3 color = vec3(0.0);\r\n  float d = 0.0;\r\n\r\n  \/\/ Number of sides of your shape\r\n  int N = 6;\r\n  \/\/ int N = int(floor(mod(uTime * 10., 20.))) + 3;\r\n\r\n  \/\/ Angle and radius from the current pixel\r\n  float a = atan(st.x,st.y)+PI;\r\n  float r = TWO_PI\/float(N);\r\n\r\n  \/\/ Shaping function that modulate the distance\r\n  d = cos(floor(.5+a\/r)*r-a)*length(st);\r\n\r\n  \/\/ color = vec3(d); \/\/ Distance Field\r\n  color = vec3(1.0-step(.5, d)); \/\/ Fill\r\n  \/\/ color = vec3(step(.5,d) * step(d,.51)); \/\/ Only outline\r\n\r\n  gl_FragColor = vec4(color,1.0);\r\n}\r\n<\/pre>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/02\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-03-09-10.39.01.png\" alt=\"\" width=\"400\" class=\"aligncenter size-full wp-image-15774\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc5b4\ub5a4 \uc9c0\uc810(p)\uc5d0\uc11c Ray(r)\uc5d0 \uac00\uc7a5 \uac00\uae4c\uc6b4 r \uc704\uc758 \uc88c\ud45c \uc5bb\uae30 struct ray { vec3 o, d; }; vec3 ClosestPoint(ray r, vec3 p) { return r.o + max(0., dot(p-r.o, r.d)) * r.d; } \uc704\uc758 ClosePoint\ub97c \uc774\uc6a9\ud558\uba74 ray\uc640 \uc5b4\ub5a4 \uc9c0\uc810\uc5d0 \ub300\ud55c \ucd5c\ub2e8 \uac70\ub9ac\ub97c \uc544\ub798 \ud568\uc218\ub97c \uc774\uc6a9\ud574 \uad6c\ud560 \uc218 \uc788\ub2e4. float DistRay(ray r, vec3 p) { return length(p &#8211; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=15752\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;GLSL \ud035 \ub808\ud37c\ub7f0\uc2a4&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,153,145,139],"tags":[],"class_list":["post-15752","post","type-post","status-publish","format-standard","hentry","category-opengl","category-shader","category-three-js","category-webgl"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15752"}],"version-history":[{"count":17,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15752\/revisions"}],"predecessor-version":[{"id":15888,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15752\/revisions\/15888"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15752"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}