{"id":15930,"date":"2025-04-26T23:03:42","date_gmt":"2025-04-26T14:03:42","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=15930"},"modified":"2025-04-26T23:20:57","modified_gmt":"2025-04-26T14:20:57","slug":"fragment-shader%ec%97%90%ec%84%9c-3d-%ec%b9%b4%eb%a9%94%eb%9d%bc","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=15930","title":{"rendered":"Fragment Shader\uc5d0\uc11c 3D \uce74\uba54\ub77c"},"content":{"rendered":"<p>\uc2dc\uc791\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nuniform vec3 uResolution;\r\nuniform float uTime;\r\nuniform vec4 uMouse;\r\n\r\nvoid main() {\r\n   ?\r\n}\r\n<\/pre>\n<p>\ud504\ub808\uadf8\uba3c\ud2b8\uc758 uv \uc88c\ud45c\ub294 \uc88c\uce21\ud558\ub2e8\uc774 \uc6d0\uc810\uc778\ub370, \uc6d0\uc810\uc744 \ud654\uba74 \uc911\uc2ec\uc73c\ub85c \uc7a1\uae30 \uc704\ud574 \ub2e4\uc74c \ucf54\ub4dc\uac00 \ud544\uc694\ud558\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy \/ uResolution.xy;\r\n  uv -= .5;\r\n  uv.x *= uResolution.x \/ uResolution.y;\r\n\r\n  float t = uTime; \/\/ \uadf8\ub0e5 \ud758\ub7ec\uac00\ub294 \uc2dc\uac04\uac12\r\n}\r\n<\/pre>\n<p>\ud504\ub808\uadf8\uba3c\ud2b8\uc5d0\uc11c \ubb34\uc5b8\uac00\ub97c \uc758\ubbf8\uc788\uac8c \ud45c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 \uadf8 \ubb34\uc5b8\uac00\uac00 \ud53d\uc140\uc5d0\uc11c \uc5bc\ub9c8\ub098 \ub5a8\uc5b4\uc838\uc788\ub294\uc9c0\uc758 \uac70\ub9ac\uac12\uc744 \ub9e4\uc6b0 \uc758\ubbf8\uc788\uac8c \uc0ac\uc6a9\ud55c\ub2e4. \uc774\ub97c \uc704\ud574 Ray\uac00 \ud544\uc694\ud55c\ub370, Ray\ub294 \uc2dc\uc791\uc810(ro)\uacfc \ubc29\ud5a5(rd)\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nvoid main() {\r\n  ..\r\n\r\n  float t = uTime; \/\/ \uadf8\ub0e5 \ud758\ub7ec\uac00\ub294 \uc2dc\uac04\uac12\r\n\r\n  \/\/ Left-Hand (Z\ucd95\uc740 \ubaa8\ub2c8\ud130\uc5d0\uc11c \uc0ac\ub78c\uc744 \ud5a5\ud558\ub294 \ubc29\ud5a5\uc774 \ub9c8\uc774\ub108\uc2a4\uc784)\r\n  vec3 ro = vec3(3. * sin(t), 1., -3. * cos(t)); \/\/ Ray\uc758 \uc2dc\uc791\uc810(\uce74\uba54\ub77c\uc758 \uc704\uce58), \uc77c\ub2e8 \uc2dc\uac04\uc5d0 \ub530\ub77c Y\ucd95\uc73c\ub85c \ud68c\uc804\uc2dc\ucf1c\ubcf8\ub2e4.\r\n}\r\n<\/pre>\n<p>Ray\uc758 \uc2dc\uc791\uc810\uc778 ro\ub294 \ubcf4\uc774\ub294\ub370, \ubc29\ud5a5\uc778 rd\ub294 \uc544\uc9c1 \ubcf4\uc774\uc9c0 \uc54a\ub294\ub2e4. rd\ub97c \uc815\ud558\uae30 \uc704\ud574 \uce74\uba54\ub77c \uac1c\ub150\uc744 \uc774\uc6a9\ud55c\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nvoid main() {\r\n  ...\r\n\r\n  vec3 ro = vec3(3. * sin(t), 1., -3. * cos(t)); \/\/ Ray\uc758 \uc2dc\uc791\uc810(\uce74\uba54\ub77c\uc758 \uc704\uce58), \uc77c\ub2e8 \uc2dc\uac04\uc5d0 \ub530\ub77c Y\ucd95\uc73c\ub85c \ud68c\uc804\uc2dc\ucf1c\ubcf8\ub2e4.\r\n\r\n  vec3 lookAt = vec3(.0); \/\/ \uce74\uba54\ub77c\uac00 \ubc14\ub77c\ubcf4\ub294 \uc9c0\uc810\r\n  vec3 f = normalize(lookAt - ro); \/\/ \uce74\uba54\ub77c\uac00 \ubc14\ub77c\ubcf4\ub294 \ubc29\ud5a5 \ubca1\ud130\r\n  vec3 u = vec3(0,1,0); \/\/ \uce74\uba54\ub77c\uc758 Up \ubca1\ud130 \r\n  vec3 r = normalize(cross(u, f)); \/\/ \uce74\uba54\ub77c\uc758 Right \ubca1\ud130 \r\n\r\n  float zoom = 1.; \/\/ \ud655\ub300 \ubc30\uc728\r\n  vec3 c = ro + f * zoom;\r\n  vec3 i = c + uv.x * r + uv.y * u; \/\/ \uad50\ucc28\ud558\ub294 \uc9c0\uc810\r\n\r\n  vec3 rd = normalize(i - ro); \/\/ Ray\uc758 \ubc29\ud5a5 \ubca1\ud130\r\n<\/pre>\n<p>\uc774\uc81c \uc815\uc721\uba74\uccb4\uc758 \uad6c\uc131 \uc815\uc810 8\uac1c\ub97c \ud504\ub808\uadf8\uba3c\ud2b8\uc5d0 \uc2dc\uac01\ud654\ud558\uae30\ub9cc \ud558\uba74 \ub41c\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nvoid main() {\r\n  ...\r\n\r\n  vec3 rd = normalize(i - ro); \/\/ Ray\uc758 \ubc29\ud5a5 \ubca1\ud130\r\n\r\n  float d = 0.;  \r\n  float off = .5;\r\n  d += drawPoint(ro, rd, vec3(0.-off, 0.-off, 0.-off));\r\n  d += drawPoint(ro, rd, vec3(0.-off, 0.-off, 1.-off));\r\n  d += drawPoint(ro, rd, vec3(0.-off, 1.-off, 0.-off));\r\n  d += drawPoint(ro, rd, vec3(0.-off, 1.-off, 1.-off));\r\n  d += drawPoint(ro, rd, vec3(1.-off, 0.-off, 0.-off));\r\n  d += drawPoint(ro, rd, vec3(1.-off, 0.-off, 1.-off));\r\n  d += drawPoint(ro, rd, vec3(1.-off, 1.-off, 0.-off));\r\n  d += drawPoint(ro, rd, vec3(1.-off, 1.-off, 1.-off));\r\n\r\n  gl_FragColor = vec4(d);\r\n}\r\n<\/pre>\n<p>drawPoint\ub294 \ud3ec\uc778\ud2b8\ub97c \uadf8\ub9ac\ub294 \ud568\uc218\uc774\uace0 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nfloat drawPoint(vec3 ro, vec3 rd, vec3 p) {\r\n  float d = distLine(ro, rd, p);\r\n  d = smoothstep(.04, .03, d);\r\n  return d;\r\n}\r\n<\/pre>\n<p>distLine\uc740 ro\uc640 rd\ub85c \uc815\uc758\ub418\ub294 Ray\uc5d0\uc11c \ud504\ub85c\uadf8\uba3c\ud2b8 \uc88c\ud45c \uac04\uc758 \uac70\ub9ac\ub97c \uc5bb\ub294 \ud568\uc218\uc778\ub370 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nfloat distLine(vec3 ro, vec3 rd, vec3 p) {\r\n  return length(cross(p - ro, rd)) \/ length(rd);\r\n}\r\n<\/pre>\n<p>\ub05d.<\/p>\n<div style=\"width: 525px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-15930-1\" width=\"525\" height=\"335\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/04\/2025-04-26-23-15-46.mp4?_=1\" \/><a href=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/04\/2025-04-26-23-15-46.mp4\">http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/04\/2025-04-26-23-15-46.mp4<\/a><\/video><\/div>\n<p>\uc704\uc758 \ucf54\ub4dc \uc791\uc131\uc744 \uc704\ud574 \ud559\uc2b5\ud55c \ub0b4\uc6a9<\/p>\n<p><iframe loading=\"lazy\" title=\"ShaderToy Tutorial - The simplest 3D\" width=\"525\" height=\"295\" src=\"https:\/\/www.youtube.com\/embed\/dKA5ZVALOhs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><br \/>\n<iframe loading=\"lazy\" title=\"How to create a camera in ShaderToy\" width=\"525\" height=\"295\" src=\"https:\/\/www.youtube.com\/embed\/PBxuVlp7nuM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc2dc\uc791\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4. uniform vec3 uResolution; uniform float uTime; uniform vec4 uMouse; void main() { ? } \ud504\ub808\uadf8\uba3c\ud2b8\uc758 uv \uc88c\ud45c\ub294 \uc88c\uce21\ud558\ub2e8\uc774 \uc6d0\uc810\uc778\ub370, \uc6d0\uc810\uc744 \ud654\uba74 \uc911\uc2ec\uc73c\ub85c \uc7a1\uae30 \uc704\ud574 \ub2e4\uc74c \ucf54\ub4dc\uac00 \ud544\uc694\ud558\ub2e4. void main() { vec2 uv = gl_FragCoord.xy \/ uResolution.xy; uv -= .5; uv.x *= uResolution.x \/ uResolution.y; float t = uTime; \/\/ \uadf8\ub0e5 \ud758\ub7ec\uac00\ub294 \uc2dc\uac04\uac12 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=15930\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Fragment Shader\uc5d0\uc11c 3D \uce74\uba54\ub77c&#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":[152],"tags":[],"class_list":["post-15930","post","type-post","status-publish","format-standard","hentry","category-glsl"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15930","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=15930"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15930\/revisions"}],"predecessor-version":[{"id":15936,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15930\/revisions\/15936"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15930"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}