Gecko [ dp-client.com ]

Name	Size	Permission
resources	[ DIR ]	drwxr-xr-x
align-html-elements-to-3d.html	34.71 KB	-rw-r--r--
backgrounds.html	14.09 KB	-rw-r--r--
billboards.html	16.08 KB	-rw-r--r--
cameras.html	30.68 KB	-rw-r--r--
canvas-textures.html	18.89 KB	-rw-r--r--
cleanup.html	18.02 KB	-rw-r--r--
custom-buffergeometry.html	23.81 KB	-rw-r--r--
debugging-glsl.html	7.45 KB	-rw-r--r--
debugging-javascript.html	31.93 KB	-rw-r--r--
fog.html	14.89 KB	-rw-r--r--
fundamentals.html	31.61 KB	-rw-r--r--
game.html	91.06 KB	-rw-r--r--
indexed-textures.html	31.35 KB	-rw-r--r--
lang.css	589 B	-rw-r--r--
lights.html	30.72 KB	-rw-r--r--
load-gltf.html	35.02 KB	-rw-r--r--
load-obj.html	37.24 KB	-rw-r--r--
material-table.html	1.86 KB	-rw-r--r--
materials.html	21.47 KB	-rw-r--r--
multiple-scenes.html	29.43 KB	-rw-r--r--
offscreencanvas.html	49.49 KB	-rw-r--r--
optimize-lots-of-objects-anima...	23.92 KB	-rw-r--r--
optimize-lots-of-objects.html	27.17 KB	-rw-r--r--
picking.html	22.34 KB	-rw-r--r--
post-processing-3dlut.html	27.84 KB	-rw-r--r--
post-processing.html	17.92 KB	-rw-r--r--
prerequisites.html	23.54 KB	-rw-r--r--
primitives.html	25.21 KB	-rw-r--r--
rendering-on-demand.html	12.77 KB	-rw-r--r--
rendertargets.html	8.71 KB	-rw-r--r--
responsive.html	16.99 KB	-rw-r--r--
scenegraph.html	31.44 KB	-rw-r--r--
setup.html	5.14 KB	-rw-r--r--
shadertoy.html	25.15 KB	-rw-r--r--
shadows.html	29.24 KB	-rw-r--r--
textures.html	35.63 KB	-rw-r--r--
tips.html	17.83 KB	-rw-r--r--
transparency.html	19.85 KB	-rw-r--r--
voxel-geometry.html	45.92 KB	-rw-r--r--
webxr-basics.html	21.66 KB	-rw-r--r--
webxr-look-to-select.html	22.26 KB	-rw-r--r--
webxr-point-to-select.html	17.58 KB	-rw-r--r--

Code Editor : debugging-glsl.html

<!DOCTYPE html><html lang="ko"><head>
    <meta charset="utf-8">
    <title>GLSL 디버깅</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 – GLSL 디버깅">
    <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)">

...

gl_FragColor = vec4(1, 0, 0, 1);  // 빨강
}
</pre>
<p>만약 저렇게 해서 요소가 보인다면 fragment 쉐이더에 문제가 있는 겁니다. 텍스처가 깨진 건지, 균등 변수(uniform)를 지정하지 않은 건지, 균등 변수에 잘못된 값을 지정한 건지는 알 수 없지만 적어도 어디서 문제를 찾아야 할지는 알 수 있죠.</p>
<p>어디가 틀렸는지 확인하기 위해 몇 가지 요소를 실제로 렌더링해볼 수 있습니다. 예를 들어 fragment 쉐이더의 법선(normal)을 사용한다면 저는 다음과 같은 코드를 추가할 겁니다.</p>
<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1);
</pre>
<p>법선의 값은 -1 에서 +1 사이이기에 0.5를 곱한 뒤 0.5를 더하면 값을 0.0 에서 0.1로 만들어 색으로 표현할 수 있습니다.</p>
<p>실행이 잘 된 예제에 이 쉐이더를 적용해보면 법선이 <em>보통(normally)</em> 어떻게 생겼는지 알 수 있습니다. 만약 법선이 정상적으로 보이지 않는다면 그게 다음 문제를 찾을 단서가 되겠죠. fragment 쉐이더에서 법선의 값을 변경하는 경우 같은 방법을 이용해 결과값을 렌더링할 수 있습니다.</p>
<div class="threejs_center"><img src="../resources/images/standard-primitive-normals.jpg" style="width: 650px;"></div>

<p>마찬가지로 텍스처를 사용하는 경우에는 텍스처 좌표가 있으니 그걸로 다음과 같이 활용할 수 있습니다.</p>
<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">gl_FragColor = vec4(fract(vUv), 0, 1);
</pre>
<p>텍스처 좌표를 사용하는 경우, <code class="notranslate" translate="no">fract</code>를 실행한 값은 0부터 1 사이의 값이 아닐 수 있습니다. 대상 물체가 텍스처보다 크고 <code class="notranslate" translate="no">texture.repeat</code>을 사용한 경우 1보다 큰 숫자가 나올 수 있겠죠.</p>
<div class="threejs_center"><img src="../resources/images/standard-primitive-uvs.jpg" style="width: 650px;"></div>

<p>fragment 쉐이더의 다른 값으로도 비슷한 방법을 사용할 수 있습니다. 해당 값의 범위를 알아낸 뒤 해당 값을 0.0부터 1.0 사이의 값으로 변환해 <code class="notranslate" translate="no">gl_FragColor</code>에 지정하는 거죠.</p>
<p>텍스처를 확인하려면 <a href="/docs/#api/ko/textures/CanvasTexture"><code class="notranslate" translate="no">CanvasTexture</code></a>나 <a href="/docs/#api/ko/textures/DataTexture"><code class="notranslate" translate="no">DataTexture</code></a>를 사용해보기 바랍니다.</p>
<p>만약 <code class="notranslate" translate="no">gl_FragColor</code>에 빨간색을 지정했는데도 아무것도 보이지 않는다면, vertex 쉐이더 관련 물체의 방향 문제일 수 있습니다. 특정 행렬 좌표(matrix)가 잘못되었거나 어떤 속성의 값이 잘못되었거나 설정이 이상할 수 있죠.</p>
<p>그럼 먼저 행렬 좌표를 살펴봐야 합니다. <code class="notranslate" translate="no">renderer.render(scene, camera)</code>를 한 번만 호출한 뒤 콘솔에서 객체를 펼쳐 보는 것이죠. 카메라의 전역 행렬 좌표나 투사 행렬 좌표에 <code class="notranslate" translate="no">NaN</code>이 있는 걸까요? 장면 객체를 펼쳐 <code class="notranslate" translate="no">children</code> 속성을 확인하니 전역 행렬 좌표는 멀쩡해 보입니다(<code class="notranslate" translate="no">NaN</code>이 없음). 또한 다른 행렬 좌표의 4가지 값들도 모두 멀쩡해 보입니다. 만약 장면의 크기가 50x50x50인데 어떤 좌표값이 552352623.123이라면 확실히 뭔가 잘못된 겁니다.</p>
<div class="threejs_center"><img src="../resources/images/inspect-matrices.gif"></div>

<p>fragment 쉐이더와 마찬가지로 vertex 쉐이더에서도 값을 fragment 쉐이더에 넘겨주는 방식으로 값을 시각화할 수 있습니다. 양 쉐이더에 동일하게 변수를 생성한 뒤, 의심되는 값을 넘겨주는 거죠. 저라면 fragment 쉐이더가 그 값을 표시하도록 의심되는 값을 <code class="notranslate" translate="no">vNormal</code>에 0.0에서 1.0 사이의 값으로 바꿔 지정할 겁니다. 그런 다음 결과를 보고 예상과 일치하는지 확인하는 것이죠.</p>
<p>이 방법이 통하지 않는다면 어떤 vertex 쉐이더가 geometry를 가장 간단하게 표시할 수 있을까요? 아주 간단하게 다음처럼 할 수 있을 겁니다.</p>
<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">gl_Position = projection * modelView * vec4(position.xyz, 1);
</pre>
<p>저 코드가 잘 작동한다면 변경사항을 조금씩 적용해보기 바랍니다.</p>
<p>추가로 <a href="https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob?hl=ko">크롬의 확장 프로그램 중 쉐이더 에디터</a>나 다른 브라우저의 비슷한 프로그램을 찾아 사용하는 방법도 있습니다. 이는 다른 쉐이더가 어떻게 작동하는지 볼 때도 유용하죠. 또한 위 변경 사항을 바로 적용해볼 수 있다는 것도 장점입니다.</p>

</div>
      </div>
    </div>
  
  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>

</body></html>

${this.title}

Code Editor : debugging-glsl.html