{"id":16803,"date":"2026-03-30T11:02:21","date_gmt":"2026-03-30T02:02:21","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16803"},"modified":"2026-03-30T11:02:37","modified_gmt":"2026-03-30T02:02:37","slug":"3d-%eb%aa%a8%eb%8d%b8-%eb%8d%b0%ec%9d%b4%ed%84%b0%ec%97%90-%eb%8c%80%ed%95%9c-progressive-loading","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16803","title":{"rendered":"3D \ubaa8\ub378 \ub370\uc774\ud130\uc5d0 \ub300\ud55c Progressive Loading"},"content":{"rendered":"<p>three.js\uc5d0\uc11c \ubaa8\ub378 \ub370\uc774\ud130\ub97c \ub85c\ub529\ud560\ub54c, \uae30\ubcf8\uc801\uc73c\ub85c \ud574\ub2f9 \ubaa8\ub378 \ub370\uc774\ud130\uac00 \uc644\uc804\ud788 \ub85c\ub529\ub41c \uc774\ud6c4\uc5d0 \uc7a5\uba74\uc5d0 \ucd94\uac00\ub420 \uc218 \uc788\uace0 \uadf8\ub7fc\uc73c\ub85c\uc368 \ud654\uba74\uc5d0 \ub808\ub354\ub9c1\ub41c\ub2e4. \uc774\ub7ec\ud55c \ucc98\ub9ac\ub85c \uc778\ud574 \ubaa8\ub378 \ub370\uc774\ud130\uc758 \uc6a9\ub7c9\uc774 \ud074 \uacbd\uc6b0 \uc0ac\uc6a9\uc790\ub294 \ud574\ub2f9 \ubaa8\ub378 \ub370\uc774\ud130\uac00 \uc644\uc804\ud788 \ub85c\ub529\ub418\uae30\uae4c\uc9c0 \uae30\ub2e4\ub824\uc57c \ud55c\ub2e4. \uc544\ub798\ub294 \uc774\ub7ec\ud55c \uc0c1\ud669\uc744 \ubcf4\uc5ec\uc8fc\ub294 \ub3d9\uc601\uc0c1\uc774\ub2e4. \ub124\ud2b8\uc6cc\ud06c \uc18d\ub3c4\ub97c \ub290\ub9ac\uac8c \uc124\uc815\ud574\ub450\uc5c8\uace0 3\uac1c\uc758 \ubaa8\ub378 \ub370\uc774\ud130(\uac01\uac01\uc758 \uc6a9\ub7c9\uc740 32M, 50M, 54M \uc784)\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uacbd\uc6b0\uc774\ub2e4.<\/p>\n<p><center><video controls=\"controls\" width=\"100%\"><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2026\/03\/normal_loading.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n<p>\uc704\uc5d0\uc11c \ubcf4\ub294 \uac83\ucc98\ub7fc \uac01 \ubaa8\ub378 \ub370\uc774\ud130\uac00 \uc644\uc804\ud788 \ub85c\ub529\ub418\uc5b4\uc57c \ud654\uba74\uc5d0\uc11c \ubcfc \uc218 \uc788\uace0, \ud654\uba74\uc5d0 \ub80c\ub354\ub9c1\ub418\uae30\uae4c\uc9c0 \uc2dc\uac04\ub3c4 \uc81c\ubc95 \ub9ce\uc774 \uc18c\uc694\ub418\ub294\uac83\uc744 \uc54c \uc218 \uc788\ub2e4. \uc774\ub7ec\ud55c \ubb38\uc81c\uc810\uc744 \uac1c\uc120\ud558\uae30 \uc704\ud574 \uc810\uc9c4\uc801 \ub85c\ub529(Progressive Loading) \uae30\ubc95\uc774 \uc0ac\uc6a9\ub41c\ub2e4. \ubaa8\ub378 \ub370\uc774\ud130\uc5d0 \ub300\ud574 \uc5ec\ub7ec\uac1c\uc758 LOD \ub370\uc774\ud130\ub97c \ubbf8\ub9ac \uad6c\ucd95\ud574\ub450\uace0 \uc21c\ucc28\uc801\uc73c\ub85c \ub85c\ub529\ud558\ub294 \uac83\uc778\ub370, \uc774 LOD \ub370\uc774\ud130\uc5d0\ub294 \uc9c0\uc624\uba54\ud2b8\ub9ac \ubfd0\ub9cc \uc544\ub2c8\ub77c GPU\uc5d0 \ucd5c\uc801\ud654\ub41c \ud14d\uc2a4\uccd0 \uc774\ubbf8\uc9c0 \ub370\uc774\ud130\ub85c\uc758 \ucc98\ub9ac\uac00 \ub418\uc5b4 \ub9e4\uc6b0 \ube60\ub974\uac8c \ub80c\ub354\ub9c1\ub41c\ub2e4. \uadf8 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p><center><video controls=\"controls\" width=\"100%\"><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2026\/03\/progressive_loading.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n<p>\ub3d9\uc77c\ud55c \ub124\ud2b8\uc6cc\ud06c \ud658\uacbd\uc5d0\uc11c \uac19\uc740 \ud488\uc9c8\uc758 \ubaa8\ub378 \ub370\uc774\ud130\ub97c \ub85c\ub529\ud558\ub294 \uc0c1\ud669\uc778\ub370, \uc55e\uc11c \ubd24\ub358 \uac83\ubcf4\ub2e4 \ud6e8\uc52c \ub354 \ube60\ub974\uac8c \ubaa8\ub378\uc774 \ud45c\uc2dc\ub418\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4.<\/p>\n<p>\ub2e4\ud589\ud788\ub3c4 \ubaa8\ub378 \ub370\uc774\ud130\uc5d0 \ub300\ud55c \ud504\ub85c\uadf8\ub798\uc2dc\ube0c \ub85c\ub529\uc744 \uc704\ud574 \ucc98\uc74c\ubd80\ud130 \uac1c\ubc1c\ud560 \ud544\uc694\ub294 \uc5c6\ub2e4. @needle-tools\/gltf-progressive \ud328\uc9c0\ud0a4\ub97c \uc0ac\uc6a9\ud558\uba74 \ub9e4\uc6b0 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub2e4. \ud55c\ubc88 \uc54c\uc544\ubcf4\uc790.<\/p>\n<p>\uba3c\uc800 \ubaa8\ub378 \ub370\uc774\ud130\ub97c \uc810\uc9c4\uc801 \ub85c\ub529\uc774 \ub420 \uc218 \uc788\uac8c \ubcc0\ud658\ud574\uc918\uc57c \ud55c\ub2e4. \ubcc0\ud658 \ud504\ub85c\uadf8\ub7a8\uc740 \ub2e4\uc74c\ucc98\ub7fc \uc784\uc2dc\ub85c \uc124\uce58\ud574 \uc774\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"bash\">\r\nnpx @needle-tools\/gltf-build-pipeline@latest\r\n<\/pre>\n<p>\ubcc0\ud658\ud558\uace0\uc790 \ud558\ub294 \ubaa8\ub378 \ub370\uc774\ud130\uac00 MODEL1.glb\ub77c\uba74 \uc774\ub97c \uc810\uc9c4\uc801 \ub85c\ub529\uc744 \uc704\ud55c \ubaa8\ub378 \ub370\uc774\ud130\ub85c \uc0dd\uc131\ud558\uc5ec PROGRESSIVE_MODEL1 \ud3f4\ub354\uc5d0 \uc800\uc7a5\ud574 \uc8fc\ub294 \uba85\ub839\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"bash\">\r\nnpx @needle-tools\/gltf-build-pipeline@latest transform .\/public\/MODEL1.glb .\/PROGRESSIVE_MODEL1\r\n<\/pre>\n<p>\ud574\ub2f9 \ud3f4\ub354\uc5d0\ub294 \ub2e4\uc74c\ucc98\ub7fc \uc5ec\ub7ec \uac1c\uc758 glb \ud30c\uc77c\uc774 \uc0dd\uc131\ub41c\ub2e4. \ucd1d 5\uac1c\uc758 LOD \ub2e8\uacc4\ub85c \uc0dd\uc131\ub41c \uc9c0\uc624\uba54\ud2b8\ub9ac\uc640 \ud14d\uc2a4\uccd0\uc5d0 \ub300\ud55c \ub370\uc774\ud130\uc774\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2026\/03\/Untitled-1-copy.jpg\" alt=\"\" width=\"545\" height=\"590\" class=\"aligncenter size-full wp-image-16813\" \/><\/p>\n<p>\uc774\uc81c \uc774\ub807\uac8c \ub9cc\ub4e4\uc5b4\uc9c4 \ubaa8\ub378 \ub370\uc774\ud130\ub97c three.js\uc5d0\uc11c \ub80c\ub354\ub9c1\ud574\uc11c \uc2dc\uac01\ud654\ud558\ub294 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uc790. \uba3c\uc800 \ub2e4\uc74c\uacfc \uac19\uc740 \ud328\ud0a4\uc9c0\uc758 \uc124\uce58\uac00 \ud544\uc694\ud558\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"bash\">\r\nnpm i @needle-tools\/gltf-progressive\r\n<\/pre>\n<p>\uadf8\ub9ac\uace0 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nimport { GLTFLoader } from \"three\/addons\/loaders\/GLTFLoader.js\";\r\nimport { useNeedleProgressive } from \"@needle-tools\/gltf-progressive\";\r\n\r\nconst loader = new GLTFLoader();\r\nuseNeedleProgressive(loader, renderer); \/\/ \ud50c\ub7ec\uadf8\uc778 \ub4f1\ub85d (1\ud68c)\r\n\r\nloader.load('.\/PROGRESSIVE_MODEL1\/MODEL1.glb',\r\n  (gltf) => {\r\n    const model = gltf.scene;\r\n    this._scene.add(model);\r\n  }\r\n);\r\n<\/pre>\n<p>\uc801\uc6a9\uc774 \ub9e4\uc6b0 \uc27d\ub2e4. \ud558\uc9c0\ub9cc \uc548\ud0c0\uae5d\uac8c\ub3c4 @needle-tools\/gltf-progressive\ub294 WebGL \ud658\uacbd\ub9cc\uc744 \uc9c0\uc6d0\ud55c\ub2e4. WebGPU \ud658\uacbd\uc5d0 \ub300\ud55c \uc9c0\uc6d0\ub3c4 \uace7 \uae30\ub300\ud574\ubcf8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>three.js\uc5d0\uc11c \ubaa8\ub378 \ub370\uc774\ud130\ub97c \ub85c\ub529\ud560\ub54c, \uae30\ubcf8\uc801\uc73c\ub85c \ud574\ub2f9 \ubaa8\ub378 \ub370\uc774\ud130\uac00 \uc644\uc804\ud788 \ub85c\ub529\ub41c \uc774\ud6c4\uc5d0 \uc7a5\uba74\uc5d0 \ucd94\uac00\ub420 \uc218 \uc788\uace0 \uadf8\ub7fc\uc73c\ub85c\uc368 \ud654\uba74\uc5d0 \ub808\ub354\ub9c1\ub41c\ub2e4. \uc774\ub7ec\ud55c \ucc98\ub9ac\ub85c \uc778\ud574 \ubaa8\ub378 \ub370\uc774\ud130\uc758 \uc6a9\ub7c9\uc774 \ud074 \uacbd\uc6b0 \uc0ac\uc6a9\uc790\ub294 \ud574\ub2f9 \ubaa8\ub378 \ub370\uc774\ud130\uac00 \uc644\uc804\ud788 \ub85c\ub529\ub418\uae30\uae4c\uc9c0 \uae30\ub2e4\ub824\uc57c \ud55c\ub2e4. \uc544\ub798\ub294 \uc774\ub7ec\ud55c \uc0c1\ud669\uc744 \ubcf4\uc5ec\uc8fc\ub294 \ub3d9\uc601\uc0c1\uc774\ub2e4. \ub124\ud2b8\uc6cc\ud06c \uc18d\ub3c4\ub97c \ub290\ub9ac\uac8c \uc124\uc815\ud574\ub450\uc5c8\uace0 3\uac1c\uc758 \ubaa8\ub378 \ub370\uc774\ud130(\uac01\uac01\uc758 \uc6a9\ub7c9\uc740 32M, 50M, 54M \uc784)\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uacbd\uc6b0\uc774\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=16803\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;3D \ubaa8\ub378 \ub370\uc774\ud130\uc5d0 \ub300\ud55c Progressive Loading&#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,1],"tags":[],"class_list":["post-16803","post","type-post","status-publish","format-standard","hentry","category-three-js","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16803","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=16803"}],"version-history":[{"count":9,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16803\/revisions"}],"predecessor-version":[{"id":16817,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16803\/revisions\/16817"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16803"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}