{"id":12955,"date":"2022-10-22T10:22:02","date_gmt":"2022-10-22T01:22:02","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12955"},"modified":"2022-10-30T08:37:49","modified_gmt":"2022-10-29T23:37:49","slug":"three-js%ec%9d%98-rendertarget-%ec%a3%bc%ec%9a%94-%ec%bd%94%eb%93%9c-webglrendertarget","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=12955","title":{"rendered":"three.js\uc758 RenderTarget \uc8fc\uc694 \ucf54\ub4dc (WebGLRenderTarget)"},"content":{"rendered":"<p>\uc774 \uae00\uc740 \uc81c\uac00 \ucd94\ud6c4 \uac1c\ubc1c\uc2dc \ucc38\uc870\ud558\uae30 \uc704\ud574 \uc815\ub9ac\ud55c \uae00\ub85c \uc124\uba85\uc774 \ub9e4\uc6b0 \ud568\ucd95\uc801\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>three.js\uc758 RenderTarget\uc740 WebGLRenderTarget \ud0c0\uc785\uc73c\ub85c Texture \uac1d\uccb4\ub97c \ub0b4\ubd80\uc801\uc73c\ub85c \uac00\uc9c0\uace0 \uc788\ub294\ub370, \uc774 Texture\uc5d0 \uc7a5\uba74\uc744 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub2e4. \uc774\ub984\uc774 RenderTarget\uc778 \uc774\uc720\ub294 three.js\uc758 \ub80c\ub354\ub7ec(Renderer)\uc758 \ub80c\ub354\ub9c1 \ub300\uc0c1\uc73c\ub85c \uc9c0\uc815\ub420 \uc218 \uc788\uae30 \ub54c\ubb38\uc774\uba70 \ub80c\ub354\ub9c1 \ub300\uc0c1\uc73c\ub85c \uc9c0\uc815\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub418\ub294 \uba54\uc11c\ub4dc\ub294 setRenderTarget\uc774\ub2e4.<\/p>\n<p>\uc8fc\uc694 \ucf54\ub4dc\ub97c \uc815\ub9ac\ud55c\ub2e4. RenderTarget \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\uace0 \uc774 RenderTarget\uc5d0 \uadf8\ub824\ub123\uc744 \uc7a5\uba74\uacfc \uce74\uba54\ub77c \ub4f1\uc744 \uc900\ube44\ud558\ub294 \ucf54\ub4dc\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n_setupRenderTargets() {\r\n    const rtSize = new THREE.Vector2(1024, 1024);\r\n    const renderTarget = new THREE.WebGLRenderTarget(\r\n        rtSize.width, rtSize.height, \r\n        {\r\n            depthBuffer: false, stencilBuffer: false\r\n        }\r\n    );\r\n\r\n    const fov = 75;\r\n    const aspect = rtSize.width \/ rtSize.height;\r\n    const near = 0.1;\r\n    const far = 5;\r\n    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\r\n    camera.position.z = 4;\r\n        \r\n    const scene = new THREE.Scene();\r\n    scene.background = new THREE.Color(0x444444);\r\n\r\n    const color = 0xffffff;\r\n    const intensity = 1;\r\n    const light = new THREE.DirectionalLight(color, intensity);\r\n    light.position.set(-1, 2, 4);\r\n    scene.add(light);\r\n\r\n    const geometry = new THREE.BoxGeometry(1,4,1);\r\n    const makeInstance = (color, x) => {\r\n        const material = new THREE.MeshPhongMaterial({ color });\r\n        const cube = new THREE.Mesh(geometry, material);\r\n        scene.add(cube);\r\n        cube.position.x = x;\r\n        return cube;\r\n    };\r\n\r\n    const cubes = [\r\n        makeInstance(0xff0000, -2),\r\n        makeInstance(0x00ff00, 0),\r\n        makeInstance(0x0000ff, 2),\r\n    ];\r\n\r\n    this._renderTargetsObject = { camera, scene, renderTarget, cubes };\r\n}\r\n<\/pre>\n<p>RenderTarget\uc740 Texture\ub85c \uc0ac\uc6a9\ub420 \uc218 \uc788\uc73c\ubbc0\ub85c \ub2e4\uc74c\ucc98\ub7fc \uc7ac\uc9c8\uc758 map \uc18d\uc131\uc758 \uac12\uc73c\ub85c \uc9c0\uc815\ub420 \uc218 \uc788\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst material = new THREE.MeshPhongMaterial({ \r\n    map: this._renderTargetsObject.renderTarget.texture \r\n});\r\n<\/pre>\n<p>RenderTarget\ub3c4 \ub80c\ub354\ub7ec\uc5d0 \uc758\ud574 \ub80c\ub354\ub9c1\ub418\uc5b4\uc57c \ud558\ubbc0\ub85c \ub2e4\uc74c \ucf54\ub4dc\uac00 \ud544\uc694\ud558\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nthis._renderer.setRenderTarget(this._renderTargetsObject.renderTarget);\r\nthis._renderer.render(this._renderTargetsObject.scene, this._renderTargetsObject.camera);\r\nthis._renderer.setRenderTarget(null);\r\n<\/pre>\n<p>\uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2022\/10\/rendertarget.jpg\" alt=\"\" width=\"797\" height=\"572\" class=\"alignnone size-full wp-image-12958\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc774 \uae00\uc740 \uc81c\uac00 \ucd94\ud6c4 \uac1c\ubc1c\uc2dc \ucc38\uc870\ud558\uae30 \uc704\ud574 \uc815\ub9ac\ud55c \uae00\ub85c \uc124\uba85\uc774 \ub9e4\uc6b0 \ud568\ucd95\uc801\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. three.js\uc758 RenderTarget\uc740 WebGLRenderTarget \ud0c0\uc785\uc73c\ub85c Texture \uac1d\uccb4\ub97c \ub0b4\ubd80\uc801\uc73c\ub85c \uac00\uc9c0\uace0 \uc788\ub294\ub370, \uc774 Texture\uc5d0 \uc7a5\uba74\uc744 \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub2e4. \uc774\ub984\uc774 RenderTarget\uc778 \uc774\uc720\ub294 three.js\uc758 \ub80c\ub354\ub7ec(Renderer)\uc758 \ub80c\ub354\ub9c1 \ub300\uc0c1\uc73c\ub85c \uc9c0\uc815\ub420 \uc218 \uc788\uae30 \ub54c\ubb38\uc774\uba70 \ub80c\ub354\ub9c1 \ub300\uc0c1\uc73c\ub85c \uc9c0\uc815\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub418\ub294 \uba54\uc11c\ub4dc\ub294 setRenderTarget\uc774\ub2e4. \uc8fc\uc694 \ucf54\ub4dc\ub97c \uc815\ub9ac\ud55c\ub2e4. RenderTarget \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\uace0 \uc774 RenderTarget\uc5d0 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=12955\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;three.js\uc758 RenderTarget \uc8fc\uc694 \ucf54\ub4dc (WebGLRenderTarget)&#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-12955","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\/12955","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=12955"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12955\/revisions"}],"predecessor-version":[{"id":12957,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12955\/revisions\/12957"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12955"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}