{"id":13926,"date":"2023-07-24T09:04:59","date_gmt":"2023-07-24T00:04:59","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=13926"},"modified":"2025-02-24T12:24:40","modified_gmt":"2025-02-24T03:24:40","slug":"r3f%ec%97%90%ec%84%9c-shader%eb%a5%bc-%ed%86%b5%ed%95%9c-material","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=13926","title":{"rendered":"R3F\uc5d0\uc11c Shader\ub97c \ud1b5\ud55c Material"},"content":{"rendered":"<p>\uba3c\uc800 \ub2e4\uc74c\ucc98\ub7fc drei\uc758 shaderMaterial\ub97c \uc774\uc6a9\ud574 GLSL\ub85c \uc7ac\uc9c8\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nimport { shaderMaterial } from '@react-three\/drei'\r\n\r\nconst WaveShaderMaterial = shaderMaterial(\r\n  {\r\n    uColor: new THREE.Color(1, 0, 0)\r\n  },\r\n\r\n  \/* glsl *\/`\r\n    varying vec2 vUv;\r\n\r\n    void main() {\r\n      vUv = uv;\r\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n    }\r\n  `,\r\n\r\n  \/* glsl *\/`\r\n    uniform vec3 uColor;\r\n    varying vec2 vUv;\r\n\r\n    void main() {\r\n      gl_FragColor = vec4(vUv.y * uColor, 1.0);\r\n    }\r\n  `\r\n)\r\n<\/pre>\n<p>\ub9ac\uc5d1\ud2b8\ub294 \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d(?) \ubc29\uc2dd\uc744 \uad8c\uc7a5\ud558\ubbc0\ub85c \uc704\uc5d0\uc11c \ub9cc\ub4e0 WaveShaderMaterial\uc744 Tag\ucc98\ub7fc \uc120\uc5b8\ud574\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub54c R3F\uc758 extend\uac00 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nimport { Canvas, extend } from '@react-three\/fiber'\r\n\r\nextend({ WaveShaderMaterial })\r\n<\/pre>\n<p>\uc2e4\uc81c \uc0ac\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"jsx\">\r\nconst MyCanvas = () => {\r\n  return (\r\n    &lt;Canvas>\r\n      &lt;pointLight position={[10,10,10]} \/>\r\n      &lt;mesh>\r\n        &lt;planeGeometry args={[5,5]} \/>\r\n        &lt;waveShaderMaterial uColor={\"white\"} \/>\r\n      &lt;\/mesh>\r\n    &lt;\/Canvas>\r\n  )\r\n}\r\n\r\nfunction App() {\r\n  return (\r\n    &lt;MyCanvas \/>\r\n  )\r\n}\r\n<\/pre>\n<p>\uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2023\/07\/r3f_shader.png\" alt=\"\" width=\"1820\" height=\"1254\" class=\"alignnone size-full wp-image-13932\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uba3c\uc800 \ub2e4\uc74c\ucc98\ub7fc drei\uc758 shaderMaterial\ub97c \uc774\uc6a9\ud574 GLSL\ub85c \uc7ac\uc9c8\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. import { shaderMaterial } from &#8216;@react-three\/drei&#8217; const WaveShaderMaterial = shaderMaterial( { uColor: new THREE.Color(1, 0, 0) }, \/* glsl *\/` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, \/* glsl *\/` uniform vec3 uColor; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=13926\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;R3F\uc5d0\uc11c Shader\ub97c \ud1b5\ud55c Material&#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":[153,145,1],"tags":[],"class_list":["post-13926","post","type-post","status-publish","format-standard","hentry","category-shader","category-three-js","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13926","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=13926"}],"version-history":[{"count":6,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13926\/revisions"}],"predecessor-version":[{"id":13928,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13926\/revisions\/13928"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13926"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}