{"id":17284,"date":"2026-09-21T12:43:36","date_gmt":"2026-09-21T03:43:36","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=17284"},"modified":"2026-09-21T12:43:36","modified_gmt":"2026-09-21T03:43:36","slug":"three-js-webgpu%ec%9d%98-storage-%eb%8d%b0%ec%9d%b4%ed%84%b0%eb%a5%bc-cpu%ec%99%80-gpu%ec%97%90%ec%84%9c-%eb%b3%80%ea%b2%bd%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=17284","title":{"rendered":"three.js, WebGPU\uc758 storage \ub370\uc774\ud130\ub97c CPU\uc640 GPU\uc5d0\uc11c \ubcc0\uacbd\ud558\uae30"},"content":{"rendered":"<p>\uc77c\ub2e8 GPU \ub2e8\uc5d0 storage\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud574\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"javascript\">\r\nimport * as THREE from 'three\/webgpu';\r\nimport { storage, compute, float, Fn } from 'three\/tsl';\r\n\r\nconst count = 4;\r\nconst initialData = new Float32Array([1.0, 2.0, 3.0, 4.0]);\r\nconst storageAttr = new THREE.StorageBufferAttribute(initialData, 1);\r\nconst storageNode = storage(storageAttr, 'float', count);\r\n<\/pre>\n<p>\uc774 \uc0c1\ud0dc\uc5d0\uc11c CPU\uc5d0\uc11c storage\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\uae30 \uc704\ud55c \ucf54\ub4dc \uc608\uc2dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"javascript\">\r\n\/\/ CPU \ubc30\uc5f4\uc758 \uccab \ubc88\uc9f8 \uac12\uc744 100.0\uc73c\ub85c \ubcc0\uacbd\r\nstorageAttr.array[0] = 100.0;\r\n    \r\n\/\/ \ubcc0\uacbd \uc0ac\ud56d\uc774 \uc788\uc74c\uc744 \ub80c\ub354\ub7ec\/GPU\uc5d0 \uc54c\ub9bc\r\nstorageAttr.needsUpdate = true; \r\n<\/pre>\n<p>GPU\uc5d0\uc11c \ubcc0\uacbd\ud558\ub294 \ucf54\ub4dc \uc608\uc2dc\ub294 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"javascript\">\r\n\/\/ \uccab \ubc88\uc9f8 \uac12\uc5d0 1\uc744 \ub354\ud568\r\nstorageNode.element(0).addAssign(1.0);\r\n<\/pre>\n<p>\ub2e4\uc74c \ucf54\ub4dc\ub294 storage \ub370\uc774\ud130 \uc804\uccb4\ub97c CPU\uc5d0\uc11c \uc811\uadfc\ud560 \uc218 \uc788\ub3c4\ub85d \ube44\ub3d9\uae30\uc801\uc73c\ub85c \uc77d\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"javascript\">\r\nasync function readDataFromGPU(renderer) {\r\n    \/\/ GPU \ubc84\ud37c \ub370\uc774\ud130\ub97c CPU TypedArray\ub85c \uac00\uc838\uc634\r\n    const arrayBuffer = await renderer.getArrayBufferAsync(storageAttr);\r\n    const cpuResultArray = new Float32Array(arrayBuffer);\r\n    \r\n    console.log(\"CPU\uc5d0\uc11c \uc77d\uc5b4\uc628 GPU \uc2a4\ud1a0\ub9ac\uc9c0 \uac12:\", cpuResultArray);\r\n}\r\n<\/pre>\n<p>(\ucf54\ub4dc \uac80\uc99d\uc774 \ud544\uc694\ud568)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc77c\ub2e8 GPU \ub2e8\uc5d0 storage\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud574\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. import * as THREE from &#8216;three\/webgpu&#8217;; import { storage, compute, float, Fn } from &#8216;three\/tsl&#8217;; const count = 4; const initialData = new Float32Array([1.0, 2.0, 3.0, 4.0]); const storageAttr = new THREE.StorageBufferAttribute(initialData, 1); const storageNode = storage(storageAttr, &#8216;float&#8217;, count); \uc774 \uc0c1\ud0dc\uc5d0\uc11c CPU\uc5d0\uc11c storage\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\uae30 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=17284\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;three.js, WebGPU\uc758 storage \ub370\uc774\ud130\ub97c CPU\uc640 GPU\uc5d0\uc11c \ubcc0\uacbd\ud558\uae30&#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-17284","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\/17284","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=17284"}],"version-history":[{"count":2,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17284\/revisions"}],"predecessor-version":[{"id":17286,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17284\/revisions\/17286"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17284"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}