{"id":16394,"date":"2025-11-14T10:39:23","date_gmt":"2025-11-14T01:39:23","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16394"},"modified":"2025-11-14T10:40:25","modified_gmt":"2025-11-14T01:40:25","slug":"webgpu-%eb%b0%a9%ec%8b%9d%ec%9d%98-%ed%8f%ac%ec%9d%b8%ed%8a%b8-%eb%a0%8c%eb%8d%94%eb%a7%81","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16394","title":{"rendered":"WebGPU \ubc29\uc2dd\uc758 \ud3ec\uc778\ud2b8 \ub80c\ub354\ub9c1"},"content":{"rendered":"<p>WebGL\uc740 \uacb0\uad6d WebGPU\ub85c \ub300\uccb4\ub420 \uae30\uc220\uc774\uae30\uc5d0 \uadf8\uac04 \uac1c\ubc1c\ub41c \ud504\ub85c\uc81d\ud2b8\ub97c WebGPU \uae30\ubc18\uc73c\ub85c \ubcc0\uacbd\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\ud589\ud788 \ub9ce\uc740 \ucf54\ub4dc\uac00 WebGL\uacfc WebGPU\uc5d0\uc11c\ub3c4 \ub3d9\uc77c\ud558\uac8c \uc791\ub3d9\ud558\uae30\ub294 \ud558\uc9c0\ub9cc \uc81c\ub300\ub85c \uc791\ub3d9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\ub3c4 \uc0c1\ub2f9\ud569\ub2c8\ub2e4. \ud2b9\ud788 \uc7ac\uc9c8\uacfc \uad00\ub828\ub41c \ubd80\ubd84\uc774 \ubb38\uc81c\uace0 \uc774\ub294 \uc7ac\uc9c8\uc774 \uc250\uc774\ub354\uc640 \uc9c1\uc811\uc801\uc73c\ub85c \uc5f0\uacb0\ub418\uc5b4 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. WebGL\uacfc WebGPU\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc250\uc774\ub354\ub294 \uadf8 \uc5b8\uc5b4\ubd80\ud130\uac00 \ub2e4\ub978\ub370 \uac01\uac01 GLSL\uacfc WGSL\uc785\ub2c8\ub2e4. \uc774 \uae00\uc740 WebGL\uc5d0\uc11c\ub294 \uc815\uc0c1\uc801\uc73c\ub85c \uc791\ub3d9\ud558\ub358 \ud3ec\uc778\ud2b8 \ub808\ub354\ub9c1 \ucf54\ub4dc\uac00 WebGPU\uc5d0\uc11c\ub294 \ub354 \uc774\uc0c1 \uc815\uc0c1\uc801\uc73c\ub85c \uc791\ub3d9\ud558\uc9c0 \uc54a\ub294 \ubd80\ubd84\uc5d0 \ub300\ud55c \uc815\ub9ac\uc785\ub2c8\ub2e4. \ubc14\ub85c \ud3ec\uc778\ud2b8\uc758 \ud06c\uae30\uc5d0 \ub300\ud55c \ubd80\ubd84\uc778\ub370\uc694. WebGPU\uc5d0\uc11c \ud3ec\uc778\ud2b8\uc5d0 \ub300\ud55c \ub80c\ub354\ub9c1 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nprivate setupModel() {\r\n  const count = 10000;\r\n  const positions = new Float32Array(count * 3);\r\n  for (let i = 0; i < count; i++) {\r\n    positions[i * 3 + 0] = THREE.MathUtils.randFloatSpread(5);\r\n    positions[i * 3 + 1] = THREE.MathUtils.randFloatSpread(5);\r\n    positions[i * 3 + 2] = THREE.MathUtils.randFloatSpread(5);\r\n  }\r\n  const positionAttribute = new THREE.InstancedBufferAttribute(positions, 3);\r\n\r\n  const material = new THREE.PointsNodeMaterial({\r\n    color: 0xffff00,\r\n    positionNode: instancedBufferAttribute(positionAttribute),\r\n    sizeNode: float(.1),\r\n    sizeAttenuation: true,\r\n\r\n    alphaTestNode: float(1).sub(shapeCircle()),\r\n  });\r\n\r\n  const points = new THREE.Sprite(material);\r\n  points.count = count;\r\n  this.scene.add(points);\r\n}\r\n<\/pre>\n<p>\uc774 \ucf54\ub4dc\ub294 10000\uac1c\uc758 \ud3ec\uc778\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac83\uc73c\ub85c WebGL\uc5d0\uc11c\ub294 THREE.Points \uc600\ub358 \uac83\uc774 WebGPU\uc5d0\uc11c\ub294 THREE.Sprite\ub85c.. THREE.PointsMaterial \uc600\ub358 \uac83\uc774 THREE.PointsNodeMaterial\ub85c.. \uadf8\ubc16\uc5d0 \ud3ec\uc778\ud2b8\ub4e4\uc758 \uc704\uce58\ub97c \uc815\uc758\ud558\ub294 \ubd80\ubd84\uc758 \ucf54\ub4dc \uc5ed\uc2dc\ub3c4 \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4. WebGPU \uae30\ubc18\uc5d0\uc11c\ub294 \uc0c1\ub2f9 \ubd80\ubd84\uc744 TSL\uc774\ub77c\ub294 \uac1c\ub150\uc774 \uc801\uc6a9\ub418\ub294\ub370 THREE.PointsNodeMaterial\uc744 \uc0dd\uc131\ud560\ub54c positionNode\uc640 sizeNode \uadf8\ub9ac\uace0 \uc0ac\uac01\ud615 \ubaa8\uc591\uc758 \ud3ec\uc778\ud2b8\uac00 \uc544\ub2cc \uc6d0 \ubaa8\uc591\uc758 \ud3ec\uc778\ud2b8\ub97c \ub9cc\ub4e4\uae30 \uc704\ud55c alphaTestNode\uc5d0\uc11c TSL\uac00 \uc0ac\uc6a9\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>WebGPU\ub294 WebGL\uc744 \ub300\uccb4\ud558\ub294 \uae30\uc220\uc774\uace0 \ubcf4\ub2e4 \ud6a8\uc728\uc801\uc774\uace0 \ubcf4\ub2e4 \ube60\ub985\ub2c8\ub2e4. \uc774\ubbf8 \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub3c4 \ubb38\uc81c\uc5c6\uc774 \uc798\uc791\ub3d9\ud558\uace0 \uc788\uad6c\uc694. \ub9cc\uc57d three.js\ub85c \uc0c8\ub85c\uc6b4 3D \ud504\ub85c\uc81d\ud2b8\ub97c \uae30\ud68d\ud558\uace0 \uc788\ub2e4\uba74 WebGPU\ub85c \ubc29\ud5a5\uc744 \uc7a1\uc544 \uc9c4\ud589\ud558\ub294 \uac83\uc744 \ucd94\ucc9c\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WebGL\uc740 \uacb0\uad6d WebGPU\ub85c \ub300\uccb4\ub420 \uae30\uc220\uc774\uae30\uc5d0 \uadf8\uac04 \uac1c\ubc1c\ub41c \ud504\ub85c\uc81d\ud2b8\ub97c WebGPU \uae30\ubc18\uc73c\ub85c \ubcc0\uacbd\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\ud589\ud788 \ub9ce\uc740 \ucf54\ub4dc\uac00 WebGL\uacfc WebGPU\uc5d0\uc11c\ub3c4 \ub3d9\uc77c\ud558\uac8c \uc791\ub3d9\ud558\uae30\ub294 \ud558\uc9c0\ub9cc \uc81c\ub300\ub85c \uc791\ub3d9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc\ub3c4 \uc0c1\ub2f9\ud569\ub2c8\ub2e4. \ud2b9\ud788 \uc7ac\uc9c8\uacfc \uad00\ub828\ub41c \ubd80\ubd84\uc774 \ubb38\uc81c\uace0 \uc774\ub294 \uc7ac\uc9c8\uc774 \uc250\uc774\ub354\uc640 \uc9c1\uc811\uc801\uc73c\ub85c \uc5f0\uacb0\ub418\uc5b4 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. WebGL\uacfc WebGPU\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc250\uc774\ub354\ub294 \uadf8 \uc5b8\uc5b4\ubd80\ud130\uac00 \ub2e4\ub978\ub370 \uac01\uac01 GLSL\uacfc WGSL\uc785\ub2c8\ub2e4. \uc774 \uae00\uc740 WebGL\uc5d0\uc11c\ub294 \uc815\uc0c1\uc801\uc73c\ub85c \uc791\ub3d9\ud558\ub358 \ud3ec\uc778\ud2b8 \ub808\ub354\ub9c1 \ucf54\ub4dc\uac00 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=16394\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;WebGPU \ubc29\uc2dd\uc758 \ud3ec\uc778\ud2b8 \ub80c\ub354\ub9c1&#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,139],"tags":[],"class_list":["post-16394","post","type-post","status-publish","format-standard","hentry","category-three-js","category-webgl"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16394","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=16394"}],"version-history":[{"count":3,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16394\/revisions"}],"predecessor-version":[{"id":16398,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16394\/revisions\/16398"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16394"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}