{"id":12416,"date":"2022-07-14T11:45:47","date_gmt":"2022-07-14T02:45:47","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12416"},"modified":"2022-10-30T08:37:49","modified_gmt":"2022-10-29T23:37:49","slug":"three-js%ec%97%90%ec%84%9c-hdr-%eb%8d%b0%ec%9d%b4%ed%84%b0%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%eb%b0%b0%ea%b2%bd-%eb%b0%8f-%ea%b4%91%ec%9b%90%ec%9c%bc%eb%a1%9c-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=12416","title":{"rendered":"three.js\uc5d0\uc11c HDR \ub370\uc774\ud130\ub97c \uc774\uc6a9\ud55c \ubc30\uacbd \ubc0f \uad11\uc6d0\uc73c\ub85c \uc0ac\uc6a9\ud558\uae30"},"content":{"rendered":"

HDR\uc740 High Dynamic Range\uc758 \uc57d\uc790\ub85c \ubc1d\uc740 \ubd80\ubd84\uacfc \uc5b4\ub450\uc6b4 \ubd80\ubd84\uc758 \ucc28\uc774\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \ubcf4\uc815\ud558\uc5ec \uc804\ubc18\uc801\uc73c\ub85c \uade0\ud615\uc788\uac8c \ucd9c\ub825\ud560 \uc218 \uc788\ub294 \uae30\uc220\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4. \ub2e4\ub974\uac8c \uc124\uba85\ud558\uba74 \ubcf4\ub2e4 \ub354 \uc0ac\uc2e4\uc801\uc778 \uba85\uc554(\ubc1d\uae30\uc640 \uc5b4\ub450\uc6c0)\ub97c \ud45c\ud604\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub418\ub294 \uae30\uc220\uc774\ub77c\uace0\ub3c4 \ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \uc5f0\uc18d\ub41c 3\uac1c\uc758 \uc774\ubbf8\uc9c0 \uc911 \uac00\uc7a5 \uc624\ub978\ucabd\uc774 HDR \uae30\uc220\uc774 \uc801\uc6a9\ub41c \uc774\ubbf8\uc9c0\uc785\ub2c8\ub2e4. \uc67c\ucabd \uc774\ubbf8\uc9c0\ub294\ub545 \ubd80\ubd84\uc774 \uc18c\uc2e4\ub418\uc5c8\uace0 \uac00\uc6b4\ub370 \uc774\ubbf8\uc9c0\ub294 \ud558\ub298 \ubd80\ubd84\uc774 \uc18c\uc2e4\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc624\ub978\ucabd \uc774\ubbf8\uc9c0\ub294 HDR \uae30\uc220\uc744 \uc801\uc6a9\ud574 \ub9cc\ub4e0 \uac83\uc73c\ub85c \uc804\ubc18\uc801\uc73c\ub85c \uad70\ud615\uc788\uac8c \ud45c\ud604\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\"\"<\/p>\n

\uc6d0\ub798 \uc77c\ubc18\uc801\uc778 \uc774\ubbf8\uc9c0 \ub370\uc774\ud130\ub294 \uac00\uc7a5 \uc5b4\ub450\uc6b4 \uc0c9\uc758 \uac12\uc744 0, \uac00\uc7a5 \ubc1d\uc740 \uc0c9\uc758 \uac12\uc744 1\uc774\ub77c\ub294 \ubc94\uc704\ub85c \uc815\ud558\uace0 \ubaa8\ub4e0 \uc0c9\uc0c1\uc744 0~1\uc0ac\uc774\ub85c \ub9de\ucda5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc HDR\uc774 \uc801\uc6a9\ub418\uc5b4 \ub9cc\ub4e4\uc5b4\uc9c4 \uc774\ubbf8\uc9c0 \ub370\uc774\ud130\ub294 0~1 \uc0ac\uc774\uc758 \ud55c\uc815\ub41c \ubc94\uc704\uac00 \uc544\ub2cc \ud6e8\uc52c \ub354 \ub113\uc740 \ubc94\uc704\ub97c \uac16\uc2b5\ub2c8\ub2e4. \uc989 \uc0ac\uc6a9\ud558\ub294 \ub370\uc774\ud130 \ud06c\uae30\uac00 \ub354 \ud07d\ub2c8\ub2e4. HDR \ub370\uc774\ud130\uc758 \ud06c\uae30\ub9cc \ubd10\ub3c4 \uc218\uc2ed\uc5d0\uc11c \uc218\ubc31 MB\uac00 \ub418\ub294 \uac83\uc744 \ubcf4\uba74 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

three.js\uc5d0\uc11c\ub3c4 HDR \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294\ub370, \uadf8 \uc6a9\ub3c4\ub294 \ud06c\uac8c \ub450 \uac00\uc9c0\uc785\ub2c8\ub2e4. \uccab\ubc88\uc9f8\ub294 3\ucc28\uc6d0 \ubc30\uacbd\uc73c\ub85c\uc368\uc758 \uc0ac\uc6a9\uacfc \ub450\ubc88\uc9f8\ub294 HDR \ub370\uc774\ud130 \uc790\uccb4\ub97c \uad11\uc6d0\uc73c\ub85c\uc368 \uc0ac\uc6a9\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. HDR \ub370\uc774\ud130\ub294 \uc778\ud130\ub137\uc5d0\uc11c \uac80\uc0c9\uc744 \ud1b5\ud574 \uc27d\uac8c \ub2e4\uc6b4\ub85c\ub4dc \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc800 \uac19\uc740 \uacbd\uc6b0 polyhaven<\/a>\uc774\ub77c\ub294 \uc0ac\uc774\ud2b8\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubc1b\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n

three.js\uc5d0\uc11c HDR \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\ub294 \uc8fc\uc694 \ucf54\ub4dc\ub9cc\uc744 \uc815\ub9ac\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \ud544\uc694\ud55c \ubaa8\ub4c8\uacfc HDR \ub370\uc774\ud130\ub97c \ub85c\ub529\ud558\ub294 \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\r\nimport { RGBELoader } from \"..\/examples\/jsm\/loaders\/RGBELoader.js\"\r\n\r\nclass App {\r\n    ...\r\n\r\n    _setupBackground() {\r\n        new RGBELoader()\r\n            .load(\".\/data\/brown_photostudio_03_8k.hdr\", (texture) => {\r\n                texture.mapping = THREE.EquirectangularReflectionMapping;\r\n                this._scene.background = texture; \/\/ 3\ucc28\uc6d0 \ubc30\uacbd\uc73c\ub85c \uc0ac\uc6a9\r\n                this._scene.environment = texture; \/\/ \uad11\uc6d0\uc73c\ub85c \uc0ac\uc6a9\r\n\r\n                \/\/texture.dispose();\r\n            }\r\n        );\r\n    }\r\n\r\n    _setupModel() {\r\n        const geometry = new THREE.TorusKnotGeometry(1, 0.3, 256, 64, 2, 3);\r\n        \/\/ HDR\uc744 \uad11\uc6d0\uc73c\ub85c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc7ac\uc9c8\uc744 MeshStandardMaterial \ub610\ub294 \ud30c\uc0dd \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud574\uc57c \uac00\ub2a5\ud568\r\n        const material = new THREE.MeshStandardMaterial({color: 0xffffff}); \r\n\r\n        const cube = new THREE.Mesh(geometry, material);\r\n        this._scene.add(cube);\r\n    }\r\n\r\n    ...\r\n}\r\n<\/pre>\n
\uc704 \ucf54\ub4dc\uc5d0 \ub300\ud55c \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n
\uc704\uc758 \uc774\ubbf8\uc9c0\ub294 three.js\uc5d0 \uc5b4\ub5a0\ud55c \uad11\uc6d0(Light) \uac1d\uccb4\ub3c4 \uc7a5\uba74\uc5d0 \ucd94\uac00\ud558\uc9c0 \uc54a\uc740 \uacb0\uacfc\uc785\ub2c8\ub2e4. \ubcf4\uc2dc\uba74 TorusKnot \ubaa8\ub378\uc774 \ub108\ubb34 \ubc1d\uac8c \ud45c\ud604\ub418\uc5b4 \ubc31\uc0c9\uc73c\ub85c \ubb49\uac8c\uc838 \ubcf4\uc785\ub2c8\ub2e4. \uc774\ub294 \ud1a4\ub9f5\ud551 \uc124\uc815\uc774 \ubc14\ub974\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \ud1a4\ub9f5\ud551(Tone Mapping)\uc740 HDR \uc601\uc5ed\uc758 \uc0c9\uc0c1 \ud45c\ud604\uc744 \ubaa8\ub2c8\ud130\uc758 \uc0c9\uc0c1 \ud45c\ud604(SDR)\uc73c\ub85c \ub9f5\ud551\uc2dc\ucf1c\uc900\ub2e4\ub294 \uac1c\ub150\uc785\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 \ub2e4\uc74c \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n
\r\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\r\nrenderer.toneMappingExposure = 1;\r\n<\/pre>\n
\uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n
toneMappingExposure \uac12\uc744 \uc801\uc808\ud558\uac8c \uc870\uc815\ud558\uba74 \ubc1d\uae30\uac12\uc774 \uc870\uc815\ub429\ub2c8\ub2e4.<\/p>\n
HDR\uc740 3\ucc28\uc6d0 \ubc30\uacbd\uc73c\ub85c\uc368 \uc0ac\uc6a9\ub420 \uc218\ub3c4 \uc788\uc9c0\ub9cc \uad11\uc6d0\uc5d0 \ub300\ud55c \ub9e4\uc6b0 \ud6a8\uacfc\uc801\uc778 \ud574\uacb0\ucc45\uc785\ub2c8\ub2e4. 3\ucc28\uc6d0 \ubc30\uacbd\uc73c\ub85c\ub294 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 \uad11\uc6d0\uc73c\ub85c\uc368 HDR\ub97c \uc0ac\uc6a9\ud558\uace0\uc790 \ud55c\ub2e4\uba74 this._scene.background = texture \ucf54\ub4dc\ub97c \uc81c\uac70\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4. <\/p>\n","protected":false},"excerpt":{"rendered":"
HDR\uc740 High Dynamic Range\uc758 \uc57d\uc790\ub85c \ubc1d\uc740 \ubd80\ubd84\uacfc \uc5b4\ub450\uc6b4 \ubd80\ubd84\uc758 \ucc28\uc774\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \ubcf4\uc815\ud558\uc5ec \uc804\ubc18\uc801\uc73c\ub85c \uade0\ud615\uc788\uac8c \ucd9c\ub825\ud560 \uc218 \uc788\ub294 \uae30\uc220\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4. \ub2e4\ub974\uac8c \uc124\uba85\ud558\uba74 \ubcf4\ub2e4 \ub354 \uc0ac\uc2e4\uc801\uc778 \uba85\uc554(\ubc1d\uae30\uc640 \uc5b4\ub450\uc6c0)\ub97c \ud45c\ud604\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub418\ub294 \uae30\uc220\uc774\ub77c\uace0\ub3c4 \ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \uc5f0\uc18d\ub41c 3\uac1c\uc758 \uc774\ubbf8\uc9c0 \uc911 \uac00\uc7a5 \uc624\ub978\ucabd\uc774 HDR \uae30\uc220\uc774 \uc801\uc6a9\ub41c \uc774\ubbf8\uc9c0\uc785\ub2c8\ub2e4. \uc67c\ucabd \uc774\ubbf8\uc9c0\ub294\ub545 \ubd80\ubd84\uc774 \uc18c\uc2e4\ub418\uc5c8\uace0 \uac00\uc6b4\ub370 \uc774\ubbf8\uc9c0\ub294 \ud558\ub298 \ubd80\ubd84\uc774 \uc18c\uc2e4\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc624\ub978\ucabd \uc774\ubbf8\uc9c0\ub294 HDR \uae30\uc220\uc744 … <\/p>\n
\ub354 \ubcf4\uae30 “three.js\uc5d0\uc11c HDR \ub370\uc774\ud130\ub97c \uc774\uc6a9\ud55c \ubc30\uacbd \ubc0f \uad11\uc6d0\uc73c\ub85c \uc0ac\uc6a9\ud558\uae30”<\/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-12416","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\/12416","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=12416"}],"version-history":[{"count":12,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12416\/revisions"}],"predecessor-version":[{"id":12432,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12416\/revisions\/12432"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12416"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}