You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
25 KiB
327 lines
25 KiB
<!DOCTYPE html><html lang="ko"><head>
|
|
<meta charset="utf-8">
|
|
<title>쉐이더토이(Shadertoy) 활용하기</title>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@threejs">
|
|
<meta name="twitter:title" content="Three.js – 쉐이더토이(Shadertoy) 활용하기">
|
|
<meta property="og:image" content="https://threejs.org/files/share.png">
|
|
<link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
|
|
<link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
|
|
|
|
<link rel="stylesheet" href="/manual/resources/lesson.css">
|
|
<link rel="stylesheet" href="/manual/resources/lang.css">
|
|
<!-- Import maps polyfill -->
|
|
<!-- Remove this when import maps will be widely supported -->
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "../../build/three.module.js"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/manual/ko/lang.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="lesson-title">
|
|
<h1>쉐이더토이(Shadertoy) 활용하기</h1>
|
|
</div>
|
|
<div class="lesson">
|
|
<div class="lesson-main">
|
|
<p><a href="https://shadertoy.com">쉐이더토이(Shadertoy)</a>는 다양한 쉐이더를 제공하는 유명한 사이트입니다. 시리즈를 진행하다보니 쉐이더토이에서 받은 쉐이더를 Three.js에 적용하는 법을 물어보시는 분들이 꽤 있더군요.</p>
|
|
<p>하지만 쉐이더<strong>토이</strong>라고 불리는 데는 이유가 있습니다. 쉐이더토이에 올라온 쉐이더는 정석대로 만들어진 쉐이더가 아닙니다. <a href="https://dwitter.net">드위터(dwitter)</a>(140자 내로 코드를 작성하는 사이트)나 <a href="https://js13kgames.com">js13kGames</a>(13kb 이하의 게임을 만드는 사이트)처럼 여러 사람이 쉐이더-챌린지를 진행하는 곳이죠.</p>
|
|
<p>쉐이더토이의 미션은 <em>주어진 픽셀 위치값으로 무언가 재밌는 것을 렌더링하는 함수를 만드는 것</em>입니다. 재밌는 미션이고 많은 결과물을 보면 대단하다는 소리가 절로 나옵니다. 하지만 초보자가 보고 배우기에 좋은 예제들은 아니죠.</p>
|
|
<p>아래의 <a href="https://www.shadertoy.com/view/XtsSWs">쉐이더로 도시 전체를 렌더링한 쉐이더토이 예제</a>를 한 번 봅시다.</p>
|
|
<div class="threejs_center"><img src="../resources/images/shadertoy-skyline.png"></div>
|
|
|
|
<p>제 컴퓨터에서 FHD 해상도를 기준으로 약 5 프레임 내외가 나옵니다. 이를 <a href="https://store.steampowered.com/app/255710/Cities_Skylines/">시티즈: 스카이라인(Cities: Skylines)</a> 같은 게임과 비교해보면</p>
|
|
<div class="threejs_center"><img src="../resources/images/cities-skylines.jpg" style="width: 600px;"></div>
|
|
|
|
<p>같은 컴퓨터에서 30-60 프레임이 나옵니다. 이 게임이 텍스처를 입힌 삼각형을 렌더링하는 등 좀 더 일반적인 기법을 사용했기 때문이죠.</p>
|
|
<p>뭐 그렇다고 해도 쉐이더토이의 쉐이더를 Three.js에 한 번 불러와보는 건 나쁘지 않을 겁니다.</p>
|
|
<p>아래는 쉐이더토이에서 <a href="https://www.shadertoy.com/new">"New"를 클릭했을 때</a> 나오는 기본 쉐이더입니다(2019년 1월 기준).</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">// By iq: https://www.shadertoy.com/user/iq
|
|
// license: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
|
|
void mainImage( out vec4 fragColor, in vec2 fragCoord )
|
|
{
|
|
// Normalized pixel coordinates (from 0 to 1)
|
|
vec2 uv = fragCoord/iResolution.xy;
|
|
|
|
// Time varying pixel color
|
|
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
|
|
|
|
// Output to screen
|
|
fragColor = vec4(col,1.0);
|
|
}
|
|
</pre>
|
|
<p>여기서 중요한 건 쉐이더는 GLSL(Graphic Library Shading Language)로 작성한다는 겁니다. GLSL은 3D 수학을 위해 C 언어 기반으로 고안된 상위 언어로, GLSL만의 고유한 타입이 있습니다. 위 코드의 <code class="notranslate" translate="no">vec4</code>, <code class="notranslate" translate="no">vec2</code>, <code class="notranslate" translate="no">vec3</code>이 그런 고유 타입들이죠. <code class="notranslate" translate="no">vec2</code>는 값이 2개, <code class="notranslate" translate="no">vec3</code>는 3개, <code class="notranslate" translate="no">vec4</code>는 4개인데, 이들은 각각 다양한 값으로 사용되지만 <code class="notranslate" translate="no">x</code>, <code class="notranslate" translate="no">y</code>, <code class="notranslate" translate="no">z</code> 그리고 <code class="notranslate" translate="no">w</code>로 사용하는 게 보통입니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">vec4 v1 = vec4(1.0, 2.0, 3.0, 4.0);
|
|
float v2 = v1.x + v1.y; // adds 1.0 + 2.0
|
|
</pre>
|
|
<p>GLSL은 자바스크립트와 달리 C나 C++처럼 변수를 선언할 때 해당 타입을 사용해야 합니다. 예를 들어 실수(float)를 변수에 담을 때 자바스크립트는 <code class="notranslate" translate="no">var v = 1.2;</code>와 같이 쓰지만, GLSL에서는 <code class="notranslate" translate="no">float v = 1.2;</code>와 같이 씁니다.</p>
|
|
<p>이 글에서 GLSL을 자세히 설명하는 건 주제에 벗어나니 <a href="https://webglfundamentals.org/webgl/lessons/ko/webgl-shaders-and-glsl.html">이 글</a>을 읽어보거나 <a href="https://thebookofshaders.com/?lan=kr">이 시리즈</a>를 정주행해보기 바랍니다.</p>
|
|
<p>또한 2019년 1월 기준으로 <a href="https://shadertoy.com">쉐이더토이</a>는 <em>fragment shaders</em>만 지원합니다. fragment shader는 아까 말한 미션처럼 픽셀의 좌표를 받아 해당 픽셀에 특정 색을 지정하는 역할을 하죠.</p>
|
|
<p>위 코드를 보면 <code class="notranslate" translate="no">mainImage</code> 함수에 <code class="notranslate" translate="no">fragColor</code>라는 이름의 <code class="notranslate" translate="no">out</code> 매개변수가 보일 겁니다. <code class="notranslate" translate="no">out</code>은 <code class="notranslate" translate="no">output</code>의 줄임말로, 바로 이 매개변수가 색상값을 지정할 변수 합니다.</p>
|
|
<p><code class="notranslate" translate="no">fragCoord</code>, <code class="notranslate" translate="no">in</code>(<code class="notranslate" translate="no">input</code>의 줄임말) 매개변수는 <code class="notranslate" translate="no">out</code>의 색상값을 사용할 픽셀의 좌표입니다. 이 픽셀 좌표로 새로운 색상값을 만들 수 있죠. 만약 400x300짜리 캔버스에 이 쉐이더를 적용한다면 이 함수는 400x300번, 그러니까 총 120,000번 호출되는 셈입니다.</p>
|
|
<p>코드에 선언부가 없긴 하지만 사용할 수 있는 변수가 2개 더 있습니다. 하나는 캔버스의 해상도를 설정하는 <code class="notranslate" translate="no">iResolution</code>으로, 캔버스를 400x300으로 만들려면 <code class="notranslate" translate="no">iResolution</code>을 <code class="notranslate" translate="no">400, 300</code>으로 설정해야 합니다. 그리고 <code class="notranslate" translate="no">iResolution</code>에 의해 픽셀 좌표가 바뀌면 <code class="notranslate" translate="no">uv</code> 변수는 텍스처 크기의 0.0에서 1.0만큼 위, 옆으로 갑니다. 이렇듯 어떤 값을 <em>정규화(normalize)</em>하는 것이 작업을 간단히 하는 데 도움이 되기에 쉐이더토이의 주 함수는 대개 저런 식으로 시작합니다.</p>
|
|
<p>다른 하나는 <code class="notranslate" translate="no">iTime</code>으로, 이는 페이지가 로드된 이후의 초 단위 시간값입니다.</p>
|
|
<p>쉐이더의 세계에서 이 전역 변수들은 <em>균등(uniform)</em> 변수라고 불립니다. <em>균등</em>이라고 불리는 이유는 쉐이더 한 루프 안에서는 전혀 변하지 않는 변수이기 때문이죠. 다만 위에서 언급한 변수들은 GLSL의 <em>표준</em> 변수가 아니라 쉐이더토이에서 자체적으로 제공하는 변수입니다.</p>
|
|
<p><a href="https://www.shadertoy.com/howto">쉐이더토이 공식 문서에는 몇 가지 변수를 더 언급</a>해 놓았지만, 일단은 위 두 변수를 활용해 예제를 하나 만들어보겠습니다.</p>
|
|
<p>먼저 캔버스 전체를 채울 평면을 하나 만듭니다. <a href="backgrounds.html">배경과 하늘상자 추가하기</a>에서 정육면체를 뺀 예제를 가져오겠습니다. 코드가 길지 않으니 아래에 전부 적도록 하죠.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
|
|
const canvas = document.querySelector('#c');
|
|
const renderer = new THREE.WebGLRenderer({ canvas });
|
|
renderer.autoClearColor = false;
|
|
|
|
const camera = new THREE.OrthographicCamera(
|
|
-1, // left
|
|
1, // right
|
|
1, // top
|
|
-1, // bottom
|
|
-1, // near,
|
|
1, // far
|
|
);
|
|
const scene = new THREE.Scene();
|
|
const plane = new THREE.PlaneGeometry(2, 2);
|
|
const material = new THREE.MeshBasicMaterial({
|
|
color: 'red',
|
|
});
|
|
scene.add(new THREE.Mesh(plane, material));
|
|
|
|
function resizeRendererToDisplaySize(renderer) {
|
|
const canvas = renderer.domElement;
|
|
const width = canvas.clientWidth;
|
|
const height = canvas.clientHeight;
|
|
const needResize = canvas.width !== width || canvas.height !== height;
|
|
if (needResize) {
|
|
renderer.setSize(width, height, false);
|
|
}
|
|
return needResize;
|
|
}
|
|
|
|
function render() {
|
|
resizeRendererToDisplaySize(renderer);
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
|
|
main();
|
|
</pre>
|
|
<p><a href="backgrounds.html">배경과 하늘상자 추가하기</a>에서도 설명했지만 위와 같이 <a href="/docs/#api/ko/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>를 설정하면 2칸짜리 평면이 캔버스 전체를 채우게 됩니다. 당장은 평면이 빨간 <a href="/docs/#api/ko/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>을 사용했기에 캔버스 전체가 빨갛게 보입니다.</p>
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/shadertoy-prep.html"></iframe></div>
|
|
<a class="threejs_center" href="/manual/examples/shadertoy-prep.html" target="_blank">새 탭에서 보기</a>
|
|
</div>
|
|
|
|
<p></p>
|
|
<p>이제 쉐이더토이에서 쉐이더를 가져와 적용해봅시다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fragmentShader = `
|
|
#include <common>
|
|
|
|
uniform vec3 iResolution;
|
|
uniform float iTime;
|
|
|
|
// By iq: https://www.shadertoy.com/user/iq
|
|
// license: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
|
|
void mainImage( out vec4 fragColor, in vec2 fragCoord )
|
|
{
|
|
// Normalized pixel coordinates (from 0 to 1)
|
|
vec2 uv = fragCoord/iResolution.xy;
|
|
|
|
// Time varying pixel color
|
|
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
|
|
|
|
// Output to screen
|
|
fragColor = vec4(col,1.0);
|
|
}
|
|
|
|
void main() {
|
|
mainImage(gl_FragColor, gl_FragCoord.xy);
|
|
}
|
|
`;
|
|
</pre>
|
|
<p>위 코드에서는 아까 설명했던 균등 변수 2개를 선언했습니다. 그런 다음 쉐이더토이에서 만든 GLSL 코드를 복사해 넣었죠. 그리고 하단에서 <code class="notranslate" translate="no">mainImage</code>에 <code class="notranslate" translate="no">gl_FragColor</code>와 <code class="notranslate" translate="no">gl_FragCoord.xy</code>를 넘겨 호출했습니다. 여기서 사용한 <code class="notranslate" translate="no">gl_FragColor</code>는 WebGL의 공식 전역 변수로, 쉐이더는 여기에 해당 픽셀의 색상값을 지정해야 합니다. <code class="notranslate" translate="no">gl_FragCoord</code> 또한 WebGL 공식 전역 변수로, 현재 색상을 적용해야 하는 픽셀의 좌표값을 나타내죠.</p>
|
|
<p>다음으로 쉐이더에 데이터를 전달할 전달해야 하니 Three.js 균등 변수를 생성합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const uniforms = {
|
|
iTime: { value: 0 },
|
|
iResolution: { value: new THREE.Vector3() },
|
|
};
|
|
</pre>
|
|
<p>Three.js의 균등 변수에는 <code class="notranslate" translate="no">value</code> 속성을 넣어야 합니다. 물론 값으로 들어가는 데이터도 균등 변수의 타입과 맞아야 하죠.</p>
|
|
<p>fragment 쉐이더와 균등 변수를 <a href="/docs/#api/ko/materials/ShaderMaterial"><code class="notranslate" translate="no">ShaderMaterial</code></a>에 넘겨줍니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({
|
|
- color: 'red',
|
|
-});
|
|
+const material = new THREE.ShaderMaterial({
|
|
+ fragmentShader,
|
|
+ uniforms,
|
|
+});
|
|
</pre>
|
|
<p>또한 매 프레임마다 균등 변수의 값을 변경하도록 합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function render() {
|
|
+function render(time) {
|
|
+ time *= 0.001; // 초 단위로 변환
|
|
|
|
resizeRendererToDisplaySize(renderer);
|
|
|
|
+ const canvas = renderer.domElement;
|
|
+ uniforms.iResolution.value.set(canvas.width, canvas.height, 1);
|
|
+ uniforms.iTime.value = time;
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
</pre>
|
|
<blockquote>
|
|
<p>참고: <a href="https://www.shadertoy.com/howto">쉐이더토이 공식 문서</a>를 뒤져봤지만 <code class="notranslate" translate="no">iResolution</code>가 왜 <code class="notranslate" translate="no">vec3</code>여야 하는지, 3번째 값은 어디에 쓰이는 건지 알아내지 못했습니다. 일단 예제에서는 쓰지 않는 값이니 1로 설정하고 넘어가야겠네요. ¯＼_(ツ)_/¯</p>
|
|
</blockquote>
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/shadertoy-basic.html"></iframe></div>
|
|
<a class="threejs_center" href="/manual/examples/shadertoy-basic.html" target="_blank">새 탭에서 보기</a>
|
|
</div>
|
|
|
|
<p></p>
|
|
<p><a href="https://www.shadertoy.com/new">쉐이더토이에서 "New"를 클릭했을 때 나왔던 결과</a>와 똑같네요. 물론 2019년 1월 기준으로 말이죠😉. 이 쉐이더는 어떻게 이런 결과를 만들어낸 걸까요?</p>
|
|
<ul>
|
|
<li><code class="notranslate" translate="no">uv</code>가 시간에 따라 서서히 0에서 1로 바뀝니다.</li>
|
|
<li><code class="notranslate" translate="no">cos(uv.xyx)</code>는 입력한 값에 코사인 함수를 적용해 <code class="notranslate" translate="no">vec3</code> 형식으로 반환합니다. 하나는 <code class="notranslate" translate="no">uv.x</code>에, 다른 하나는 <code class="notranslate" translate="no">uv.y</code>에, 마지막은 다시 <code class="notranslate" translate="no">uv.x</code>에 코사인 함수를 실행한 결과값이죠.</li>
|
|
<li>이전에 <code class="notranslate" translate="no">cos(iTime+uv.xyx)</code> 이렇게 시간값을 더해 애니메이션을 구현합니다.</li>
|
|
<li>이전에 <code class="notranslate" translate="no">vec3(0,2,4)</code>를 더해 <code class="notranslate" translate="no">cos(iTime+uv.xyx+vec3(0,2,4))</code>와 같이 하면 코사인 파도가 생깁니다.</li>
|
|
<li><code class="notranslate" translate="no">cos</code>의 결과값은 -1부터 1까지이므로, <code class="notranslate" translate="no">0.5 * 0.5 + cos(...)</code>을 적용하면 -1 <-> 1, 0.0 <-> 1.0 이런 식으로 바뀝니다.</li>
|
|
<li>이 결과값을 현재 픽셀에 대한 RGB 값으로 씁니다.</li>
|
|
</ul>
|
|
<p>코드를 조금 수정하면 코사인 파도가 더 잘 보일 겁니다. 지금은 <code class="notranslate" translate="no">uv</code>의 값이 0부터 1까지죠. 코사인의 주기는 2π이니 <code class="notranslate" translate="no">uv</code>에 40.0을 곱해 <code class="notranslate" translate="no">uv</code>값이 0부터 40까지 되도록 해보겠습니다. 이러면 화면에 파도가 약 6.3번 반복될 거예요.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">-vec3 col = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0,2,4));
|
|
+vec3 col = 0.5 + 0.5 * cos(iTime + uv.xyx * 40.0 + vec3(0,2,4));
|
|
</pre>
|
|
<p>아래 예제를 보니 파도가 약 6개 하고 1/3 정도 보입니다. 파란선 사이에 빨간선이 보이는 건 파란색의 위치를 <code class="notranslate" translate="no">+ vec3(0,2,4)</code>로 4만큼 옮겼기 때문이죠. 이렇게 하지 않았다면 빨강과 파랑이 완전히 겹쳐 자주색으로 보였을 겁니다.</p>
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/shadertoy-basic-x40.html"></iframe></div>
|
|
<a class="threejs_center" href="/manual/examples/shadertoy-basic-x40.html" target="_blank">새 탭에서 보기</a>
|
|
</div>
|
|
|
|
<p></p>
|
|
<p>주어지는 값이 이렇게 단순한데 이걸로 <a href="https://www.shadertoy.com/view/MdXGW2">도심 운하</a>, <a href="https://www.shadertoy.com/view/4ttSWf">숲</a>, <a href="https://www.shadertoy.com/view/ld3Gz2">달팽이</a>, <a href="https://www.shadertoy.com/view/4tBXR1">버섯</a> 등을 구현하다니 정말 놀랍네요. 다만 삼각형으로 장면을 구성하는 일반적인 방법에 비해 왜 이 방법이 안 좋은지 분명히 하지 않은 게 아쉽습니다. 한 픽셀 한 픽셀 정성들여 픽셀의 색상을 연산하니 그만큼 한 프레임을 만드는 데 시간이 많이 걸릴 수밖에 없죠.</p>
|
|
<p>쉐이더토이 쉐이더 중에는 <a href="https://www.shadertoy.com/view/MsXSzM">텍스처를 받아서 사용하는 경우</a>도 있습니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">// By Daedelus: https://www.shadertoy.com/user/Daedelus
|
|
// license: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
|
|
#define TIMESCALE 0.25
|
|
#define TILES 8
|
|
#define COLOR 0.7, 1.6, 2.8
|
|
|
|
void mainImage( out vec4 fragColor, in vec2 fragCoord )
|
|
{
|
|
vec2 uv = fragCoord.xy / iResolution.xy;
|
|
uv.x *= iResolution.x / iResolution.y;
|
|
|
|
vec4 noise = texture2D(iChannel0, floor(uv * float(TILES)) / float(TILES));
|
|
float p = 1.0 - mod(noise.r + noise.g + noise.b + iTime * float(TIMESCALE), 1.0);
|
|
p = min(max(p * 3.0 - 1.8, 0.1), 2.0);
|
|
|
|
vec2 r = mod(uv * float(TILES), 1.0);
|
|
r = vec2(pow(r.x - 0.5, 2.0), pow(r.y - 0.5, 2.0));
|
|
p *= 1.0 - pow(min(1.0, 12.0 * dot(r, r)), 2.0);
|
|
|
|
fragColor = vec4(COLOR, 1.0) * p;
|
|
}
|
|
</pre>
|
|
<p>쉐이더에 텍스처를 넘겨주는 건 <a href="textures.html">재질(material)에 텍스처를 넘겨주는 것</a>과 비슷하나, 대신 텍스처를 균등 변수에 지정해야 합니다.</p>
|
|
<p>먼저 쉐이더에 균등 변수를 추가합니다. 텍스처는 GLSL에서 <code class="notranslate" translate="no">sampler2D</code>라고 불립니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fragmentShader = `
|
|
#include <common>
|
|
|
|
uniform vec3 iResolution;
|
|
uniform float iTime;
|
|
+uniform sampler2D iChannel0;
|
|
|
|
...
|
|
</pre>
|
|
<p>다음으로 <a href="textures.html">이 글</a>에서 했던 것처럼 텍스처를 불러와 균등 변수에 지정합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const loader = new THREE.TextureLoader();
|
|
+const texture = loader.load('resources/images/bayer.png');
|
|
+texture.minFilter = THREE.NearestFilter;
|
|
+texture.magFilter = THREE.NearestFilter;
|
|
+texture.wrapS = THREE.RepeatWrapping;
|
|
+texture.wrapT = THREE.RepeatWrapping;
|
|
const uniforms = {
|
|
iTime: { value: 0 },
|
|
iResolution: { value: new THREE.Vector3() },
|
|
+ iChannel0: { value: texture },
|
|
};
|
|
</pre>
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/shadertoy-bleepy-blocks.html"></iframe></div>
|
|
<a class="threejs_center" href="/manual/examples/shadertoy-bleepy-blocks.html" target="_blank">새 탭에서 보기</a>
|
|
</div>
|
|
|
|
<p></p>
|
|
<p>여태까지는 <a href="https://shadertoy.com">쉐이더토이 사이트</a>에 나와있는 대로 캔버스 전체에 쉐이더를 구현했습니다. 하지만 쉐이더를 사용할 때 꼭 예제 형식에 얽매일 필요는 없겠죠. 쉐이더토이의 작가들은 대부분 <code class="notranslate" translate="no">fragCoord</code>와 <code class="notranslate" translate="no">iResolution</code>을 사용한다는 것만 기억하면 됩니다. <code class="notranslate" translate="no">fragCoord</code>가 꼭 픽셀의 좌표여야할 이유는 없다는 말입니다. 이를 텍스처 좌표로 바꿔 쉐이더를 텍스처처럼 사용할 수도 있죠. 이렇게 쉐이더 함수로 텍스처를 만드는 기법을 <a href="https://www.google.com/search?q=procedural+texture"><em>절차적 텍스처(procedural texture)</em></a>라고 합니다.</p>
|
|
<p>예제에 이 기법을 적용해봅시다. Three.js에서 텍스처 좌표를 받아 여기에 <code class="notranslate" translate="no">iResolution</code>을 곱해 <code class="notranslate" translate="no">fragCoord</code>에 넘기는 게 제일 간단할 듯하네요.</p>
|
|
<p>먼저 fragment 쉐이더에서 쓸 <em>varying</em>을 추가합니다. varying은 vertex(정점) 쉐이더에서 fragment 쉐이더에 넘겨주는 값으로, 각 정점 사이를 보간한(점진적으로 채운(varied)) 값입니다. Three.js가 텍스처 좌표를 <code class="notranslate" translate="no">uv</code> 앞에 <em>varying</em>을 이니셜인 <code class="notranslate" translate="no">v</code>를 붙여 표시하니 그 이름을 그대로 사용하겠습니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">...
|
|
|
|
+varying vec2 vUv;
|
|
|
|
void main() {
|
|
- mainImage(gl_FragColor, gl_FragCoord.xy);
|
|
+ mainImage(gl_FragColor, vUv * iResolution.xy);
|
|
}
|
|
</pre>
|
|
<p>추가로 vertex 쉐이더를 만들어야 합니다. 아래는 가장 간단한 형태의 Three.js vertex 쉐이더로, <code class="notranslate" translate="no">uv</code>, <code class="notranslate" translate="no">projectionMatrix</code>, <code class="notranslate" translate="no">modelViewMatrix</code>, <code class="notranslate" translate="no">position</code> 등의 변수는 Three.js가 선언해줄 겁니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const vertexShader = `
|
|
varying vec2 vUv;
|
|
void main() {
|
|
vUv = uv;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
}
|
|
`;
|
|
</pre>
|
|
<p>vertex 쉐이더도 같이 <a href="/docs/#api/ko/materials/ShaderMaterial"><code class="notranslate" translate="no">ShaderMaterial</code></a>에 넘겨줍니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.ShaderMaterial({
|
|
vertexShader,
|
|
fragmentShader,
|
|
uniforms,
|
|
});
|
|
</pre>
|
|
<p>텍스처의 크기는 바뀔 일이 없으니 <code class="notranslate" translate="no">iResolution</code> 균등 변수의 초기값을 미리 설정합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const uniforms = {
|
|
iTime: { value: 0 },
|
|
- iResolution: { value: new THREE.Vector3() },
|
|
+ iResolution: { value: new THREE.Vector3(1, 1, 1) },
|
|
iChannel0: { value: texture },
|
|
};
|
|
</pre>
|
|
<p><code class="notranslate" translate="no">render</code> 함수 안에 있던 코드도 삭제합니다.</p>
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const canvas = renderer.domElement;
|
|
-uniforms.iResolution.value.set(canvas.width, canvas.height, 1);
|
|
uniforms.iTime.value = time;
|
|
</pre>
|
|
<p>여기에 <a href="responsive.html">반응형 디자인에 관한 글</a>에서 카메라와 회전하는 정육면체 3개를 가져왔습니다. 이제 한 번 실행해보죠.</p>
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/shadertoy-as-texture.html"></iframe></div>
|
|
<a class="threejs_center" href="/manual/examples/shadertoy-as-texture.html" target="_blank">새 탭에서 보기</a>
|
|
</div>
|
|
|
|
<p></p>
|
|
<p>이 글이 Three.js에서 쉐이더토이의 쉐이더를 활용하는 데 도움이 되었으면 합니다. 누차 말하지만 쉐이더토이의 쉐이더는 실제 사용하기 위해 제작되었다기보다-함수 하나로 모든 요소를 만드는-연습용 챌린지에 가깝습니다. 하지만 그래도 쉐이더토이에 올라온 쉐이더들은 여전히 인상 깊고, 놀랍습니다. 배울 점도 굉장히 많죠.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/manual/resources/prettify.js"></script>
|
|
<script src="/manual/resources/lesson.js"></script>
|
|
|
|
|
|
|
|
|
|
</body></html>
|