{"id":17240,"date":"2026-09-11T20:24:27","date_gmt":"2026-09-11T11:24:27","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=17240"},"modified":"2026-09-11T20:26:15","modified_gmt":"2026-09-11T11:26:15","slug":"three-js-%ed%9b%84%ec%b2%98%eb%a6%ac-%ec%a0%81%ec%9a%a9%ec%8b%9c","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=17240","title":{"rendered":"three.js, \ud6c4\ucc98\ub9ac \uc801\uc6a9\uc2dc …"},"content":{"rendered":"

\ud6c4\ucc98\ub9ac\uac00 \uc801\uc6a9\ub418\uba74 GPU \ub2e8\uacc4\uc5d0\uc11c \uc801\uc6a9\ub418\ub294 \uc548\ud2f0\uc54c\ub9ac\uc544\uc2f1(MSAA) \uae30\ub2a5\uc774 \uc81c\ub300\ub85c \uc791\ub3d9\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc989, \ub2e4\uc74c \uc635\uc158\uc740 \ubd88\ud544\uc694\ud55c GPU \uc5f0\uc0b0\uc744 \uc720\ubc1c\ud569\ub2c8\ub2e4.<\/p>\n

\r\nconst renderer = new THREE.WebGPURenderer({\r\n    canvas: canvas,\r\n    antialias: true \/\/ \uc774 \uc635\uc158!\r\n});\r\n<\/pre>\n
GPU\uac00 \ud574\uc8fc\ub358 \uc548\ud2f0\uc54c\ub9ac\uc544\uc2f1\uc758 \ub300\uc548\uc73c\ub85c \ud6c4\ucc98\ub9ac\uac00 \ub300\uc2e0\ud574\uc918\uc57c \ud558\ub294\ub370\uc694. \ub2e4\uc74c\ucc98\ub7fc FXAA \uc54c\uace0\ub9ac\uc998\uc744 \uc0ac\uc6a9\ud558\ub294 \ub178\ub4dc\ub97c \ud1b5\ud574 \ucc98\ub9ac\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n
\r\nimport { fxaa } from 'three\/examples\/jsm\/tsl\/display\/FXAANode.js'\r\n\r\n\r\n...\r\n\r\nconst fxaaPass = fxaa(renderPipeline.outputNode);\r\nrenderPipeline.outputNode = fxaaPass;\r\n<\/pre>\n
\uadf8\ub7f0\ub370, \uaf3c\uaf3c\ud55c \uac1c\ubc1c\uc790\ub77c\uba74 \uc0c9\uc0c1\uc5d0 \ub300\ud55c \uc120\ud615\uac12\uc744 \uc6b0\ub9ac\uc758 \ub208\uc5d0 \uc775\uc219\ud55c \ube44\uc120\ud615\uac12\uc73c\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \ucc98\ub9ac\uac00 \uc548\ud2f0\uc54c\ub9ac\uc544\uc2f1\uc774 \uc801\uc6a9\ub418\uae30 \uc9c1\uc804\uc5d0 \uc218\ud589\ub418\ub3c4\ub85d \ud574\uc8fc\ub294 \uac83\uc774 \uc790\uc5f0\uc2a4\ub7fd\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uac12\uc740 \uc548\ud2f0\uc54c\ub9ac\uc544\uc2f1\uc774 \ucc98\ub9ac\ub41c \uc774\ud6c4 \uc0c9\uc0c1 \ubcc0\ud658\uc774 \uc791\ub3d9\ub418\uac70\ub4e0\uc694.<\/p>\n
\uc774\ub97c \uc704\ud574 \uba3c\uc800 \uc0c9\uc0c1\uac12\uc744 \ud654\uba74\uc5d0 \ud45c\uc2dc\ud560\ub54c \uc0c9\uc0c1 \ubcc0\ud658\uc774 \uc791\ub3d9\ud558\uc9c0 \uc54a\ub3c4\ub85d \ud574\uc918\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c\ucc98\ub7fc\uc694.<\/p>\n
\r\nconst renderPipeline = new THREE.RenderPipeline(renderer)\r\nrenderPipeline.outputColorTransform = false;\r\n<\/pre>\n
\uadf8\ub9ac\uace0 FXAA \ubc29\uc2dd\uc758 \uc548\ud2f0\uc54c\ub9ac\uc544\uc2f1\uc774 \uc801\uc6a9\ub418\uae30 \uc9c1\uc804\uc758 \ub80c\ub354\ub9c1 \ud30c\uc774\ud504\ub77c\uc778\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
\r\nimport { ..., renderOutput } from 'three\/tsl'\r\n\r\n...\r\n\r\n\/\/ Color transform pass\r\nrenderPipeline.outputNode = renderOutput(renderPipeline.outputNode);\r\n\r\nconst fxaaPass = fxaa(renderPipeline.outputNode)\r\n...\r\n<\/pre>\n
renderOutput\ub294 \ub80c\ub354\ub7ec\uc758 toneMapping \uc18d\uc131\uacfc toneMappingExposure \uc18d\uc131\uc744 \ucc98\ub9ac\ud574\uc8fc\ub294 \ub178\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud6c4\ucc98\ub9ac\uac00 \uc801\uc6a9\ub418\uba74 GPU \ub2e8\uacc4\uc5d0\uc11c \uc801\uc6a9\ub418\ub294 \uc548\ud2f0\uc54c\ub9ac\uc544\uc2f1(MSAA) \uae30\ub2a5\uc774 \uc81c\ub300\ub85c \uc791\ub3d9\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc989, \ub2e4\uc74c \uc635\uc158\uc740 \ubd88\ud544\uc694\ud55c GPU \uc5f0\uc0b0\uc744 \uc720\ubc1c\ud569\ub2c8\ub2e4. const renderer = new THREE.WebGPURenderer({ canvas: canvas, antialias: true \/\/ \uc774 \uc635\uc158! }); GPU\uac00 \ud574\uc8fc\ub358 \uc548\ud2f0\uc54c\ub9ac\uc544\uc2f1\uc758 \ub300\uc548\uc73c\ub85c \ud6c4\ucc98\ub9ac\uac00 \ub300\uc2e0\ud574\uc918\uc57c \ud558\ub294\ub370\uc694. \ub2e4\uc74c\ucc98\ub7fc FXAA \uc54c\uace0\ub9ac\uc998\uc744 \uc0ac\uc6a9\ud558\ub294 \ub178\ub4dc\ub97c \ud1b5\ud574 \ucc98\ub9ac\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4. import { fxaa } from ‘three\/examples\/jsm\/tsl\/display\/FXAANode.js’ … const fxaaPass = … <\/p>\n
\ub354 \ubcf4\uae30 “three.js, \ud6c4\ucc98\ub9ac \uc801\uc6a9\uc2dc …”<\/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-17240","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\/17240","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=17240"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17240\/revisions"}],"predecessor-version":[{"id":17243,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17240\/revisions\/17243"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17240"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}