\uc5b8\uc5b4\ub294 C#\uc778\uac00 C\uc778\uac00.. Java\uc778\uac00.. \ub2e4 \ud574\ub2f9\ub418\ub294\uac70 \uac19\uae30\ub3c4 \ud55c\ub370.. \uc5ec\ud2bc \uc6cc\ub099 \uae30\ucd08 \ucf54\ub4dc\ub85c \uc791\uc131\ub41c \ud568\uc218\uc774\ub2c8 \uc800\uc7a5\ud574 \ub450\uace0 three.js\uc758 \uc250\uc774\ub354 \uc791\uc131 \ucf54\ub4dc\uc5d0\uc11c \uc801\uc6a9\ud55c \uc608\ub97c \uc0b4\ud3b4\ubd05\ub2c8\ub2e4.<\/p>\n
\r\nfloat Lerp(float a, float b, float t) { \/\/ \ub0b4\uc7a5 \ud568\uc218 mix\uc640 \ub3d9\uc77c\r\n return (1.0f - t) * a + b * t;\r\n}\r\n\r\nfloat InvLerp(float a, float b, float v) {\r\n return (v-a) \/ (b-a);\r\n}\r\n\r\nfloat Remap(float iMin, float iMax, float oMin, float oMax, float v) {\r\n float t = InvLerp(iMin, iMax, v);\r\n return Lerp(oMin, oMax, t);\r\n}\r\n<\/pre>\n\ub9cc\uc57d Remap \ud568\uc218\ub9cc \ud544\uc694\ud560 \uacbd\uc6b0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n
\r\nfloat remap(float iMin, float iMax, float oMin, float oMax, float v) {\r\n float t = (v-iMin) \/ (iMax-iMin);\r\n return mix(oMin, oMax, t);\r\n}\r\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\ub294 Shader \uc911 glsl \uc5b8\uc5b4\ub85c\ub3c4 \uc0ac\uc6a9\ub418\ub294\ub370\uc694. \uc800 \uac19\uc740 \uacbd\uc6b0 three.js\uc5d0\uc11c \uc0ac\uc6a9\ud55c \uacbd\uc6b0\ub97c \uc18c\uac1c\ud574 \ubd05\ub2c8\ub2e4. \ucc38\uace0\ub85c three.js\uc740 WebGL \uae30\uc220\uc744 \ub7a9\ud551\ud55c js \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4.<\/p>\n
Shader\ub294 Vertex\uc640 Fragment\uc5d0 \ub300\ud55c \ucc98\ub9ac\uac00 \uc788\uace0.. \uc7ac\uc9c8(Material)\uc5d0 \uc9c0\uc815\ub418\ub294\ub370\uc694. \ub2e4\uc2dc \uc7ac\uc9c8\uc740 \uc801\uc6a9\ub420 \uc9c0\uc624\uba54\ud2b8\ub9ac(Geometry)\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc9c0\uc624\uba54\ud2b8\ub9ac\uc640 \uc7ac\uc9c8\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\nconst geometry = new THREE.BoxGeometry(1, 1, 1, 10, 10, 10);\r\n\r\nfetch(\"shader4.glsl\").then(response => {\r\n return response.text();\r\n}).then(text => {\r\n const fragmentShaerCode = text;\r\n const material = new THREE.ShaderMaterial({\r\n side: THREE.DoubleSide,\r\n transparent: true,\r\n\r\n uniforms: {\r\n iTime: { value: 0 },\r\n iResolution: { value: new THREE.Vector3() },\r\n },\r\n\r\n vertexShader: `\r\n uniform float iTime; \r\n \r\n varying vec2 vUv;\r\n\r\n void main() {\r\n vUv = uv;\r\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);\r\n \/\/gl_Position = projectionMatrix*(modelViewMatrix*vec4(0.,0.,0.,1.)+vec4(position.x,position.y,0.,0.)); \/\/ <- billboard\r\n }\r\n `,\r\n \r\n fragmentShader: fragmentShaerCode\r\n });\r\n\r\n const cube = new THREE.Mesh(geometry, material);\r\n this._scene.add(cube);\r\n\r\n this._material = material;\r\n\r\n ....\r\n}).catch(function (error) {\r\n console.warn(error);\r\n});\r\n<\/pre>\nfragmentShaerCode\ub294 shader4.glsl \ud30c\uc77c\ub85c\ubd80\ud130 \ubd88\ub7ec\uc640\uc9c0\ub294\ub370, \ud574\ub2f9 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nuniform vec3 iResolution;\r\nuniform float iTime;\r\n\r\nvarying vec2 vUv;\r\n\r\nfloat rect(vec2 uv, vec2 p0, vec2 p1, float blur) {\r\n float maskX = smoothstep(p0.x-blur, p0.x+blur, uv.x);\r\n maskX -= smoothstep(p1.x-blur, p1.x+blur, uv.x);\r\n\r\n float maskY = smoothstep(p0.y-blur, p0.y+blur, uv.y);\r\n maskY -= smoothstep(p1.y-blur, p1.y+blur, uv.y);\r\n\r\n float mask = maskX * maskY;\r\n return mask;\r\n}\r\n\r\n\/\/ t = a -> return 0., t = b -> return 1.\r\nfloat invLerp(float a, float b, float t) {\r\n return (a - t) \/ (a - b);\r\n}\r\n\r\nfloat remap(float a, float b, float c, float d, float t) {\r\n return invLerp(a, b, t) * (d - c) + c;\r\n}\r\n\r\nvoid main() {\r\n vec2 cUv = vUv;\r\n\r\n cUv -= .5;\r\n float x = cUv.x;\r\n\r\n float m = sin(iTime+x*8.) * .1;\r\n float y = cUv.y - m;\r\n\r\n float blur = remap(-.5, .5, .01, .25, x);\r\n blur = pow(blur*3., 3.);\r\n float mask = rect(vec2(x, y), vec2(-.5,-.1), vec2(.5,.1), blur);\r\n\r\n vec3 col = vec3(1., 1., 0.) * mask;\r\n gl_FragColor = vec4(col, 1. ); \r\n}\r\n<\/pre>\n\ucd94\ud6c4 \uc774 \ub0b4\uc6a9\uc744 \uc81c \uc2a4\uc2a4\ub85c\ub3c4 \ucc38\uc870\ud558\uae30 \uc704\ud574 \uc7ac\uc9c8\uc5d0 \ub300\ud55c uniforms \ub370\uc774\ud130\ub97c \uc9c0\uc815\ud558\uace0 \uc788\ub294\ub370\uc694. \uad00\ub828 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nupdate(time) {\r\n time *= 0.001; \/\/ second unit\r\n this._material.uniforms.iTime.value = time;\r\n}\r\n\r\nresize() {\r\n const width = this._divContainer.clientWidth;\r\n const height = this._divContainer.clientHeight;\r\n\r\n ...\r\n\r\n this._material.uniforms.iResolution.value.set(width, height, 1);\r\n}\r\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\uc5d0 \ub300\ud55c \uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n