{"id":16289,"date":"2025-09-29T08:17:35","date_gmt":"2025-09-28T23:17:35","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16289"},"modified":"2025-09-29T11:57:10","modified_gmt":"2025-09-29T02:57:10","slug":"instanced-mesh","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16289","title":{"rendered":"Instanced Mesh in Shader"},"content":{"rendered":"<p>\uc778\uc2a4\ud134\uc2a4\ub4dc \ub9e4\uc2dc\ub294 \ub2e4\uc74c\ucc98\ub7fc \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc9c0\uc624\uba54\ud2b8\ub9ac\uc758 \uc88c\ud45c \uad6c\uc131\uc744 \uc704\ud574 BoxGeometry\uc758 \uac83\uc744 \uac00\uc838\ub2e4 \uc4f0\ub294 \uacbd\uc6b0\uc785\ub2c8\ub2e4. \uc9c0\uc624\uba54\ud2b8\ub9ac\uc758 index\uc640 position\ub9cc\uc744 \ud544\uc694\ub85c \ud558\ub2c8 \uc544\ub798\ucc98\ub7fc \ud588\uace0, \uadf8\ub0e5 new THREE.InstancedBufferGeometry.copy(baseGeometry)\ub85c \ud558\uba74 \uc9c0\uc624\uba54\ud2b8\ub9ac\ub97c \uadf8\ub300\ub85c \ubcf5\uc0ac\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst baseGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);\r\nconst geometry = new THREE.InstancedBufferGeometry();\r\n\r\ngeometry.index = baseGeometry.index;\r\ngeometry.attributes.position = baseGeometry.attributes.position;\r\n\r\n\/\/ \uc704\uc758 \ucf54\ub4dc\ub294 \ucc38\uc870\uc778\uc9c0\ub77c \uc544\ub798\uc758 \ucf54\ub4dc\ub85c \ub300\uccb4\ud558\ub294\uac8c \ub9de\uc8e0.\r\n\/\/ geometry.setIndex(baseGeometry.index);\r\n\/\/ geometry.setAttribute(\"position\", baseGeometry.attributes.position);\r\n<\/pre>\n<p>\uc778\uc2a4\ud134\uc2a4\ub85c \ub9cc\ub4e4 \uac1c\uc218\ub97c \uc9c0\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst count = 100;\r\ngeometry.instanceCount = count;\r\n<\/pre>\n<p>\uc778\uc2a4\ud134\uc2a4\ud654\ub41c \uac83\ub4e4\uc5d0 \ub300\ud55c \uac1c\ubcc4 \uc694\uc18c\ub4e4\uc740 \uc704\uce58, \ud68c\uc804, \ud06c\uae30, \uc0c9\uc0c1\uc5d0 \ub300\ud574 \uac1c\ubcc4\uc801\uc73c\ub85c \uc9c0\uc815\uc774 \uac00\ub2a5\ud55c\ub370 \uc704\uce58\uc640 \uc0c9\uc0c1\uc5d0 \ub300\ud55c \uc9c0\uc815 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst offsets = new Float32Array(count * 3);\r\nfor (let i = 0; i < count; i++) {\r\n  offsets[i * 3 + 0] = (Math.random() - 0.5) * 10; \/\/ x\r\n  offsets[i * 3 + 1] = (Math.random() - 0.5) * 10; \/\/ y\r\n  offsets[i * 3 + 2] = (Math.random() - 0.5) * 10; \/\/ z\r\n}\r\ngeometry.setAttribute(\"instanceOffset\", new THREE.InstancedBufferAttribute(offsets, 3));\r\n\r\nconst colors = new Float32Array(count * 3);\r\nfor (let i = 0; i < count; i++) {\r\n  colors[i * 3 + 0] = Math.random(); \/\/ R\r\n  colors[i * 3 + 1] = Math.random(); \/\/ G\r\n  colors[i * 3 + 2] = Math.random(); \/\/ B\r\n}\r\ngeometry.setAttribute(\"instanceColor\", new THREE.InstancedBufferAttribute(colors, 3));\r\n<\/pre>\n<p>\uc250\uc774\ub354\ub97c \ud1b5\ud574 \uc9c1\uc811 \uc778\uc2a4\ud134\uc2a4 \ub9e4\uc2dc\ub97c \ub80c\ub354\ub9c1\ud558\uae30 \uc704\ud574 \uc7ac\uc9c8\uc744 \uc124\uc815\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst material = new THREE.ShaderMaterial({\r\n  vertexShader: \/*glsl*\/ `\r\n    attribute vec3 instanceOffset;\r\n    attribute vec3 instanceColor;\r\n    varying vec3 vColor;\r\n    \r\n    void main() {\r\n      vec3 transformed = position + instanceOffset;\r\n      vColor = instanceColor;\r\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\r\n    }\r\n  `,\r\n  fragmentShader: \/*glsl*\/ `\r\n    varying vec3 vColor;\r\n    void main() {\r\n      gl_FragColor = vec4(vColor, 1.0);\r\n    }\r\n  `\r\n});\r\n<\/pre>\n<p>\uc774\uc81c \uc7a5\uba74\uc5d0 \ub9e4\uc2dc\ub97c \ub123\uc73c\uba74 \ud654\uba74\uc5d0 \ub531... \ud45c\uc2dc\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nthis._scene.add(mesh);\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/09\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-09-29-08.15.18.png\" alt=\"\" width=\"1554\" height=\"1140\" class=\"aligncenter size-full wp-image-16291\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc778\uc2a4\ud134\uc2a4\ub4dc \ub9e4\uc2dc\ub294 \ub2e4\uc74c\ucc98\ub7fc \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc9c0\uc624\uba54\ud2b8\ub9ac\uc758 \uc88c\ud45c \uad6c\uc131\uc744 \uc704\ud574 BoxGeometry\uc758 \uac83\uc744 \uac00\uc838\ub2e4 \uc4f0\ub294 \uacbd\uc6b0\uc785\ub2c8\ub2e4. \uc9c0\uc624\uba54\ud2b8\ub9ac\uc758 index\uc640 position\ub9cc\uc744 \ud544\uc694\ub85c \ud558\ub2c8 \uc544\ub798\ucc98\ub7fc \ud588\uace0, \uadf8\ub0e5 new THREE.InstancedBufferGeometry.copy(baseGeometry)\ub85c \ud558\uba74 \uc9c0\uc624\uba54\ud2b8\ub9ac\ub97c \uadf8\ub300\ub85c \ubcf5\uc0ac\ud569\ub2c8\ub2e4. const baseGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); const geometry = new THREE.InstancedBufferGeometry(); geometry.index = baseGeometry.index; geometry.attributes.position = baseGeometry.attributes.position; \/\/ \uc704\uc758 \ucf54\ub4dc\ub294 \ucc38\uc870\uc778\uc9c0\ub77c \uc544\ub798\uc758 \ucf54\ub4dc\ub85c \ub300\uccb4\ud558\ub294\uac8c \ub9de\uc8e0. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=16289\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Instanced Mesh in Shader&#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":[145],"tags":[],"class_list":["post-16289","post","type-post","status-publish","format-standard","hentry","category-three-js"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16289","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=16289"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16289\/revisions"}],"predecessor-version":[{"id":16320,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16289\/revisions\/16320"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16289"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}