{"id":12247,"date":"2022-05-05T16:30:48","date_gmt":"2022-05-05T07:30:48","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12247"},"modified":"2022-10-30T08:37:50","modified_gmt":"2022-10-29T23:37:50","slug":"blooming-earth","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=12247","title":{"rendered":"[THREE.JS] Blooming Earth"},"content":{"rendered":"

\uc6d0\ud558\ub294 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\"\"<\/p>\n

\uc7a5\uba74\uc5d0 \ucd94\uac00\ub41c \ubaa8\ub378\uc740 3\uac1c\uc785\ub2c8\ub2e4. \uc9c0\uad6c \ubcf8\uccb4, \uc9c0\uad6c \uc8fc\ubcc0\uc758 \ud478\ub978 \ube5b(Blooming Light), \uc9c0\uad6c \uc8fc\uc704\uc758 \ud558\uc580 \uc791\uc740 \ubb34\uc218\ud55c \ubcc4\ub4e4.<\/p>\n

\uba3c\uc800 \uc9c0\uad6c \ubcf8\uccb4\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n

\r\nconst sphere = new THREE.Mesh(\r\n    new THREE.SphereGeometry(5, 50, 50), \r\n    new THREE.ShaderMaterial({\r\n        uniforms: {\r\n            globeTexture: {\r\n                value: new THREE.TextureLoader().load(\"data\/earth.jpg\")\r\n            }\r\n        },\r\n        vertexShader: `\r\n            varying vec2 vertexUV;\r\n            varying vec3 vertexNormal;\r\n\r\n            void main() {\r\n                vertexUV = uv;\r\n                vertexNormal = normalize(normalMatrix * normal);\r\n\r\n                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n            }\r\n        `,\r\n        fragmentShader: `\r\n            uniform sampler2D globeTexture;\r\n\r\n            varying vec2 vertexUV;\r\n\r\n            void main() {\r\n                vec4 color = texture2D(globeTexture, vertexUV);\r\n                gl_FragColor = vec4(color.xyz, 1.);\r\n            }\r\n        `\r\n    })\r\n);\r\n<\/pre>\n
\uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n
\uc9c0\uad6c \uac00\uc7a5\uc790\ub9ac\uac00 \uc5b4\ub450\uc6cc\uc11c \uac00\uc7a5\uc790\ub9ac\ub97c \ubc1d\uac8c \ub9cc\ub4e4\uae30 \uc704\ud574 \uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c fragmentShader \ucf54\ub4dc\ub97c \ub2e4\uc74c\ucc98\ub7fc \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n
\r\nfragmentShader: `\r\n    uniform sampler2D globeTexture;\r\n\r\n    varying vec2 vertexUV;\r\n    varying vec3 vertexNormal;\r\n\r\n    void main() {\r\n        float intensity = 1.05 - dot(vertexNormal, vec3(0.,0.,1.));\r\n        vec3 atmosphere = vec3(0.3, 0.6, 1.0) * pow(intensity, 1.5);\r\n\r\n        vec4 color = texture2D(globeTexture, vertexUV);\r\n        gl_FragColor = vec4(atmosphere + color.xyz, 1.);\r\n    }\r\n`,\r\n<\/pre>\n
\uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n
\uc9c0\uad6c \uc8fc\ubcc0\uc758 \ud478\ub978 \ube5b(Blooming Light)\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\nconst atmosphere = new THREE.Mesh(\r\n    new THREE.SphereGeometry(5, 50, 50),\r\n    new THREE.ShaderMaterial({\r\n        vertexShader: `\r\n            varying vec3 vertexNormal;\r\n\r\n            void main() {\r\n                vertexNormal = normalize(normalMatrix * normal);\r\n                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n            }\r\n        `,\r\n        fragmentShader: `\r\n            varying vec3 vertexNormal;\r\n\r\n            void main() {\r\n                float intensity = pow(0.76 - dot(vertexNormal, vec3(0,0,1.)), 2.0);\r\n                gl_FragColor = vec4(0.3, 0.6, 1.0, 1) * intensity;\r\n            }\r\n        `,\r\n        transparent: true,\r\n        blending: THREE.AdditiveBlending,\r\n        side: THREE.BackSide\r\n    })\r\n);\r\natmosphere.scale.set(1.2, 1.2, 1.2);\r\n<\/pre>\n
\uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n
\uc774\uc81c \uc9c0\uad6c \uc8fc\uc704\uc758 \ud558\uc580 \uc791\uc740 \ubb34\uc218\ud55c \ubcc4\ub4e4\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\nconst starGeometry = new THREE.BufferGeometry();\r\n\r\nconst starVertices = [];\r\nfor(let i=0; i<10000; i++) {\r\n    const x = (Math.random() - 0.5) * 1000; \r\n    const y = (Math.random() - 0.5) * 1000; \r\n    const z = (Math.random() - 0.5) * 1000; \r\n    starVertices.push(x, y, z);\r\n}\r\n\r\nstarGeometry.setAttribute(\"position\", new THREE.Float32BufferAttribute(starVertices, 3));\r\n\r\nconst starMaterial = new THREE.PointsMaterial({color: 0xffffff});\r\nconst stars = new THREE.Points(starGeometry, starMaterial);\r\nthis._scene.add(stars);\r\n<\/pre>\n
\uacb0\uacfc\ub294 \uc774 \uae00\uc758 \uac00\uc7a5 \uccab\ubc88\uc9f8 \uc774\ubbf8\uc9c0\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
\uc6d0\ud558\ub294 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \uc7a5\uba74\uc5d0 \ucd94\uac00\ub41c \ubaa8\ub378\uc740 3\uac1c\uc785\ub2c8\ub2e4. \uc9c0\uad6c \ubcf8\uccb4, \uc9c0\uad6c \uc8fc\ubcc0\uc758 \ud478\ub978 \ube5b(Blooming Light), \uc9c0\uad6c \uc8fc\uc704\uc758 \ud558\uc580 \uc791\uc740 \ubb34\uc218\ud55c \ubcc4\ub4e4. \uba3c\uc800 \uc9c0\uad6c \ubcf8\uccb4\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4. const sphere = new THREE.Mesh( new THREE.SphereGeometry(5, 50, 50), new THREE.ShaderMaterial({ uniforms: { globeTexture: { value: new THREE.TextureLoader().load(“data\/earth.jpg”) } }, vertexShader: ` varying vec2 vertexUV; varying vec3 vertexNormal; void … <\/p>\n
\ub354 \ubcf4\uae30 “[THREE.JS] Blooming Earth”<\/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,8],"tags":[],"class_list":["post-12247","post","type-post","status-publish","format-standard","hentry","category-three-js","category-webgl","category-programming"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12247","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=12247"}],"version-history":[{"count":6,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12247\/revisions"}],"predecessor-version":[{"id":12257,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12247\/revisions\/12257"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12247"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}