{"id":16864,"date":"2026-06-09T10:22:39","date_gmt":"2026-06-09T01:22:39","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16864"},"modified":"2026-06-09T10:23:09","modified_gmt":"2026-06-09T01:23:09","slug":"three-interleavedbuffer-%ec%84%a4%eb%aa%85-%eb%b0%8f-%ec%98%88%ec%a0%9c%ec%bd%94%eb%93%9c","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16864","title":{"rendered":"THREE.InterleavedBuffer \uc124\uba85 \ubc0f \uc608\uc81c\ucf54\ub4dc"},"content":{"rendered":"<p>THREE.InterleavedBuffer\ub294 \ub2e8\uc77c \ubc30\uc5f4\uc5d0 \uc6a9\ub3c4\uac00 \ub2e4\ub978 \ub370\uc774\ud130\ub97c \uc11e\uc5b4 \uc800\uc7a5\ud574 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc8fc\ub294 \ud074\ub798\uc2a4\ub85c\uc368 \uba54\ubaa8\ub9ac\uc640 \ud37c\ud3ec\uba3c\uc2a4 \uc591\ucabd \uce21\uba74 \ubaa8\ub450\uc5d0 \ub300\ud574 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc608\ub97c\ub4e4\uc5b4 \ub2e4\uc74c\ucc98\ub7fc \ud558\ub098\uc758 \ubc30\uc5f4\uc5d0 \uc815\uc810\uc758 \uc704\uce58\uc640 \uc0c9\uc0c1 \uac12\uc744 \uc800\uc7a5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ 1. \ud558\ub098\uc758 \ubc30\uc5f4\uc5d0 \uc704\uce58(3)\uc640 \uc0c9\uc0c1(3) \ub370\uc774\ud130\ub97c \uad50\ucc28\ud574\uc11c \ub123\uc2b5\ub2c8\ub2e4.\r\n\/\/ \uad6c\uc870: [ X, Y, Z,  R, G, B, ... ]\r\nconst arrayBuffer = new Float32Array([\r\n  \/\/ \uc88c\ud558\ub2e8 \uc815\uc810\r\n  -1.0, -1.0, 0.0, 1.0, 0.0, 0.0, \/\/ Pos(XYZ), Color(RGB)\r\n  \/\/ \uc6b0\ud558\ub2e8 \uc815\uc810\r\n  1.0, -1.0, 0.0, 0.0, 1.0, 0.0,\r\n  \/\/ \uc6b0\uc0c1\ub2e8 \uc815\uc810\r\n  1.0, 1.0, 0.0, 0.0, 0.0, 1.0,\r\n  \/\/ \uc88c\uc0c1\ub2e8 \uc815\uc810\r\n  -1.0, 1.0, 0.0, 1.0, 1.0, 0.0\r\n]);\r\n<\/pre>\n<p>\uc704\uc758 \ubc30\uc5f4 \ud558\ub098\uc5d0 \ub300\ud574 \uc815\uc810\uacfc \uc0c9\uc0c1\uc5d0 \ub300\ud55c \ub370\uc774\ud130\ub97c \ubcc4\ub3c4\uc758 Attribute\ub85c \ucabc\uac1c GPU\uc5d0 \uc804\ub2ec\ud558\uae30 \uc704\ud574 THREE.InterleavedBuffer \uac1d\uccb4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ 2. InterleavedBuffer \uc0dd\uc131\r\n\/\/ \ud558\ub098\uc758 \uc815\uc810 \ub370\uc774\ud130 \ud06c\uae30(Stride)\ub294 6 (XYZ + RGB)\uc785\ub2c8\ub2e4.\r\nconst interleavedBuffer = new THREE.InterleavedBuffer(arrayBuffer, 6);\r\n<\/pre>\n<p>\uc774\uc81c \uc9c0\uc624\uba54\ud2b8\ub9ac \uac1d\uccb4\ub97c \uc0dd\uc131\ud574\uc11c \uc55e\uc11c \ub9cc\ub4e0 THREE.InterleavedBuffer \uac1d\uccb4\ub97c \ud1b5\ud574 \uc815\uc810\uacfc \uc0c9\uc0c1\uc5d0 \ub300\ud55c Attribute \ub370\uc774\ud130\ub97c \uc8fc\uc785\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ 3. BufferGeometry \uc0dd\uc131 \ubc0f InterleavedBufferAttribute \uc5f0\uacb0\r\nconst geometry = new THREE.BufferGeometry();\r\n\r\n\/\/ \uc704\uce58(position) \uc18d\uc131: \ub370\uc774\ud130 \ud06c\uae30\ub294 3(XYZ), \uc2dc\uc791 \uc624\ud504\uc14b\uc740 0\r\ngeometry.setAttribute('position', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 0));\r\n\r\n\/\/ \uc0c9\uc0c1(color) \uc18d\uc131: \ub370\uc774\ud130 \ud06c\uae30\ub294 3(RGB), \uc2dc\uc791 \uc624\ud504\uc14b\uc740 3 (XYZ \ub2e4\uc74c\uc774\ubbc0\ub85c)\r\ngeometry.setAttribute('color', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 3));\r\n<\/pre>\n<p>\uc778\ub371\uc2a4 \ub370\uc774\ud130\ub3c4 \uc8fc\uc785\ud574\uc57c\uaca0\uc8e0.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ 4. \uc778\ub371\uc2a4 \ubc84\ud37c \uc124\uc815 (\uc0bc\uac01\ud615 2\uac1c\ub85c \uc0ac\uac01\ud615 \uad6c\uc131)\r\nconst indices = new Uint16Array([\r\n  0, 1, 2,\r\n  0, 2, 3\r\n]);\r\ngeometry.setIndex(new THREE.BufferAttribute(indices, 1));\r\n<\/pre>\n<p>\uc774\uc81c Mesh\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ 5. \uba54\uc26c \uc0dd\uc131 (\uc815\uc810 \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 vertexColors: true \uc124\uc815)\r\nconst material = new THREE.MeshBasicMaterial({ vertexColors: true, side: THREE.DoubleSide });\r\nconst mesh = new THREE.Mesh(geometry, material);\r\n\r\nthis.scene.add(mesh);\r\n<\/pre>\n<p>THREE.InterleavedBufferd\uc758 \uc7a5\uc810\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>GPU \uce90\uc2dc \ud6a8\uc728\uc131: GPU\uac00 \ud654\uba74\uc5d0 \uc810\uc744 \uadf8\ub9b4 \ub54c, \ud2b9\uc815 \uc815\uc810\uc758 \uc704\uce58\ub97c \uc77d\uc5b4\uc624\uba74\uc11c \ubc14\ub85c \uc606\uc5d0 \uc788\ub294 \uc0c9\uc0c1 \ub370\uc774\ud130\ub3c4 \ud568\uaed8 \uce90\uc2dc\uc5d0 \ub85c\ub4dc\ud558\ubbc0\ub85c \uba54\ubaa8\ub9ac \uc811\uadfc \uc18d\ub3c4\uac00 \ube68\ub77c\uc9d1\ub2c8\ub2e4.<\/li>\n<li>\ub2e8\uc77c \ubc84\ud37c \uad00\ub9ac: \uc5ec\ub7ec \uac1c\uc758 \ubc84\ud37c\ub97c \ubc14\uc778\ub529\ud560 \ud544\uc694 \uc5c6\uc774 \ud558\ub098\uc758 \ud070 \ubc84\ud37c\ub9cc GPU\uc5d0 \ub118\uaca8\uc8fc\uba74 \ub418\ubbc0\ub85c \uc624\ubc84\ud5e4\ub4dc\uac00 \uc904\uc5b4\ub4ed\ub2c8\ub2e4.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>THREE.InterleavedBuffer\ub294 \ub2e8\uc77c \ubc30\uc5f4\uc5d0 \uc6a9\ub3c4\uac00 \ub2e4\ub978 \ub370\uc774\ud130\ub97c \uc11e\uc5b4 \uc800\uc7a5\ud574 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc8fc\ub294 \ud074\ub798\uc2a4\ub85c\uc368 \uba54\ubaa8\ub9ac\uc640 \ud37c\ud3ec\uba3c\uc2a4 \uc591\ucabd \uce21\uba74 \ubaa8\ub450\uc5d0 \ub300\ud574 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \ub2e4\uc74c\ucc98\ub7fc \ud558\ub098\uc758 \ubc30\uc5f4\uc5d0 \uc815\uc810\uc758 \uc704\uce58\uc640 \uc0c9\uc0c1 \uac12\uc744 \uc800\uc7a5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \/\/ 1. \ud558\ub098\uc758 \ubc30\uc5f4\uc5d0 \uc704\uce58(3)\uc640 \uc0c9\uc0c1(3) \ub370\uc774\ud130\ub97c \uad50\ucc28\ud574\uc11c \ub123\uc2b5\ub2c8\ub2e4. \/\/ \uad6c\uc870: [ X, Y, Z, R, G, B, &#8230; ] const arrayBuffer = &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=16864\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;THREE.InterleavedBuffer \uc124\uba85 \ubc0f \uc608\uc81c\ucf54\ub4dc&#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-16864","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\/16864","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=16864"}],"version-history":[{"count":3,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16864\/revisions"}],"predecessor-version":[{"id":16867,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16864\/revisions\/16867"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16864"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}