{"id":16904,"date":"2026-07-06T14:13:12","date_gmt":"2026-07-06T05:13:12","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16904"},"modified":"2026-07-06T14:42:51","modified_gmt":"2026-07-06T05:42:51","slug":"three-js%ec%9d%98-webglrenderer-%ea%b0%9d%ec%b2%b4%ec%9d%98-%ec%83%9d%ec%84%b1%ec%97%90-%eb%8c%80%ed%95%9c-%ea%b6%8c%ec%9e%a5-%eb%b0%a9%ec%8b%9d%ec%9d%b4-%eb%b3%80%ea%b2%bd%eb%90%a8","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16904","title":{"rendered":"three.js\uc758 WebGLRenderer \uac1d\uccb4\uc758 \uc0dd\uc131\uc5d0 \ub300\ud55c \uad8c\uc7a5 \ubc29\uc2dd\uc774 \ubcc0\uacbd\ub428"},"content":{"rendered":"<p>\uae30\uc874\uc5d0 WebGLRenderer \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\nimport * as THREE from \"three\"\r\n\r\n...\r\n\r\nlet renderer = new THREE.WebGLRenderer({ antialias: true });\r\n<\/pre>\n<p>\uc704\uc758 \ubc29\uc2dd \ub300\uc2e0\uc5d0 \ub2e4\uc74c \ubc29\uc2dd\uc774 \uad8c\uc7a5\ub429\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\nimport * as THREE from \"three\/webgpu\"\r\nimport { WebGLRenderer } from 'three'\r\n\r\n...\r\n\r\nlet renderer = new WebGLRenderer({ antialias: true });\r\n<\/pre>\n<p>\uad8c\uc7a5\ub418\ub294 \ubc29\uc2dd\uc758 \uacbd\uc6b0 WebGL\uc5d0\uc11c\ub3c4 TSL\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e8, \ub2e4\uc74c\uacfc \uac19\uc740 \ucd94\uac00\uc801\uc778 \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\nimport { WebGLNodesHandler } from 'three\/addons\/tsl\/WebGLNodesHandler.js'\r\n\r\n...\r\n\r\nrenderer.setNodesHandler(new WebGLNodesHandler());\r\n<\/pre>\n<p>\uc2e4\uc81c\ub85c WebGL \ud658\uacbd\uc5d0\uc11c TSL\uc5d0 \ub300\ud55c \uc608\uc2dc \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\nimport { mx_fractal_noise_float, positionLocal, Fn } from 'three\/tsl';\r\n\r\nconst geometry = new THREE.TorusKnotGeometry(1, 0.4, 128, 32);\r\nconst material = new THREE.MeshStandardNodeMaterial({\r\n  color: 0x00ffff,\r\n  metalness: .9,\r\n});\r\n\r\nconst roughnessNode = mx_fractal_noise_float(positionLocal.mul(2), 6, 4, .7, 2).sin();\r\n\r\nmaterial.roughnessNode = roughnessNode;\r\n\r\nconst torusKnot = new THREE.Mesh(geometry, material);\r\nthis._scene.add(torusKnot);\r\n<\/pre>\n<p>\uc704 \ucf54\ub4dc\uc5d0 \ub300\ud55c \uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2026\/07\/WebGL_TSL.jpg\" alt=\"\" width=\"1400\" height=\"974\" class=\"aligncenter size-full wp-image-16910\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uae30\uc874\uc5d0 WebGLRenderer \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc558\uc2b5\ub2c8\ub2e4. import * as THREE from &#8220;three&#8221; &#8230; let renderer = new THREE.WebGLRenderer({ antialias: true }); \uc704\uc758 \ubc29\uc2dd \ub300\uc2e0\uc5d0 \ub2e4\uc74c \ubc29\uc2dd\uc774 \uad8c\uc7a5\ub429\ub2c8\ub2e4. import * as THREE from &#8220;three\/webgpu&#8221; import { WebGLRenderer } from &#8216;three&#8217; &#8230; let renderer = new WebGLRenderer({ antialias: true }); \uad8c\uc7a5\ub418\ub294 \ubc29\uc2dd\uc758 \uacbd\uc6b0 WebGL\uc5d0\uc11c\ub3c4 TSL\uc744 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=16904\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;three.js\uc758 WebGLRenderer \uac1d\uccb4\uc758 \uc0dd\uc131\uc5d0 \ub300\ud55c \uad8c\uc7a5 \ubc29\uc2dd\uc774 \ubcc0\uacbd\ub428&#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-16904","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\/16904","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=16904"}],"version-history":[{"count":6,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16904\/revisions"}],"predecessor-version":[{"id":16912,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16904\/revisions\/16912"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16904"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}