ko: shader -> 셰이더

Author: 태재영

webgl/lessons/ko/webgl-2-textures.md

@@ -9,7 +9,7 @@ TOC: 2개 이상의 텍스처 사용
 "어떻게 2개 이상의 텍스처를 사용할 수 있나요?"라는 질문에 답하기 좋은 시점인 것 같군요.
 
 꽤 간단합니다.
-하나의 이미지를 그리고 2개의 이미지로 업데이트하는 첫 번째 shader에 대한 [몇 가지 수업](webgl-image-processing.html)으로 돌아가 봅시다.
+하나의 이미지를 그리고 2개의 이미지로 업데이트하는 첫 번째 셰이더에 대한 [몇 가지 수업](webgl-image-processing.html)으로 돌아가 봅시다.
 
 먼저 해야할 일은 2개의 이미지를 로딩할 수 있도록 코드를 수정하는 겁니다.
 이건 실제로 WebGL이 아니라, HTML5 JavaScript가 할 일이지만, 우리가 다룰 수 있습니다.
@@ -71,7 +71,7 @@ function main() {
 }
 ```
 
-다음으로 2개의 텍스처를 사용하도록 shader를 수정합니다.
+다음으로 2개의 텍스처를 사용하도록 셰이더를 수정합니다.
 이 경우 하나의 텍스처에 다른 텍스처를 곱할 겁니다.
 
 ```
@@ -118,7 +118,7 @@ void main() {
 
 WebGL에는 "texture unit"이라는 것이 있습니다.
 이는 텍스처에 대한 레퍼런스 배열이라 생각할 수 있습니다.
-각 sampler에 대해 사용할 texture unit을 shader에 알려줍니다.
+각 sampler에 대해 사용할 texture unit을 셰이더에 알려줍니다.
 
 ```
   // Sampler location 탐색
@@ -199,7 +199,7 @@ var getContext = function() {
 };
 ```
 
-Shader는 index를 texture unit으로 가져옵니다.
+셰이더는 index를 texture unit으로 가져옵니다.
 이 두 줄이 더 명료하게 만들어주길 바랍니다.
 
 ```

webgl/lessons/ko/webgl-2d-drawimage.md

@@ -23,7 +23,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
 정점을 GPU로 보내는 것은 일반적으로 느린 작업입니다.
 
 이게 WebGL의 모든 요점이 작용하는 곳입니다.
-창의적으로 shader를 작성한 다음 해당 shader를 창의적으로 사용하여 문제를 해결하는 것이죠.
+창의적으로 셰이더를 작성한 다음 해당 셰이더를 창의적으로 사용하여 문제를 해결하는 것이죠.
 
 첫 번째 버전부터 시작해봅시다.
 
@@ -91,7 +91,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
       // 행렬 설정
       gl.uniformMatrix4fv(matrixLocation, false, matrix);
 
-      // texture unit 0에서 텍스처를 가져오도록 shader에 지시
+      // texture unit 0에서 텍스처를 가져오도록 셰이더에 지시
       gl.uniform1i(textureLocation, 0);
 
       // 사각형 그리기 (삼각형 2개, 정점 6개)
@@ -237,7 +237,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
       // 행렬 설정
       gl.uniformMatrix4fv(matrixLocation, false, matrix);
 
-      // texture unit 0에서 텍스처를 가져오도록 shader에 지시
+      // texture unit 0에서 텍스처를 가져오도록 셰이더에 지시
       gl.uniform1i(textureLocation, 0);
 
       // 사각형 그리기 (삼각형 2개, 정점 6개)
@@ -335,7 +335,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
     +  // 텍스처 행렬 설정
     +  gl.uniformMatrix4fv(textureMatrixLocation, false, texMatrix);
 
-      // texture unit 0에서 텍스처를 가져오도록 shader에 지시
+      // texture unit 0에서 텍스처를 가져오도록 셰이더에 지시
       gl.uniform1i(textureLocation, 0);
 
       // 사각형 그리기 (삼각형 2개, 정점 6개)
@@ -386,8 +386,8 @@ Canvas 2D API에서 최선의 경우 에러거나 최악의 경우 정의되지
 한 가지 문제가 있는데 회전 때문에 가끔씩 텍스처 가장자리의 바깥쪽을 볼 수 있습니다.
 `CLAMP_TO_EDGE`로 설정되어 있으므로 가장자리가 반복되는데요.
 
-Shader 내에서 0부터 1의 범위를 벗어난 픽셀을 버리면 해결할 수 있습니다.
-`discard`는 픽셀을 쓰지 않고 즉시 shader를 종료합니다.
+셰이더 내에서 0부터 1의 범위를 벗어난 픽셀을 버리면 해결할 수 있습니다.
+`discard`는 픽셀을 쓰지 않고 즉시 셰이더를 종료합니다.
 
     precision mediump float;
 
@@ -431,7 +431,7 @@ Shader 내에서 0부터 1의 범위를 벗어난 픽셀을 버리면 해결할
 {{{example url="../webgl-2d-drawimage-07.html" }}}
 
 한계란 없습니다.
-모든 것은 shader를 얼마나 창의적으로 사용하느냐에 달려있습니다.
+모든 것은 셰이더를 얼마나 창의적으로 사용하느냐에 달려있습니다.
 
 다음에는 [Canvas 2D의 행렬 스택을 구현](webgl-2d-matrix-stack.html)하겠습니다.
 

webgl/lessons/ko/webgl-2d-matrices.md

@@ -14,7 +14,7 @@ TOC: 2D 행렬
 
 지난 3개의 포스트에서 우리는 [Geometry Translation](webgl-2d-translation.html), [Geometry Rotation](webgl-2d-rotation.html), [Geometry Scale](webgl-2d-scale.html)에 대해 살펴봤습니다.
 Translation, Rotation, Scale은 각각 '변환'의 한 종류로 간주되는데요.
-각각의 변환은 shader의 변경이 필요하고 3개의 변환은 각각의 순서에 따라 달라집니다.
+각각의 변환은 셰이더의 변경이 필요하고 3개의 변환은 각각의 순서에 따라 달라집니다.
 [이전 예제](webgl-2d-scale.html)에서는 크기를 조정하고, 회전한 다음, 이동했는데요.
 만약 다른 순서로 적용한다면 다른 결과를 얻게 될 겁니다.
 
@@ -27,7 +27,7 @@ Translation, Rotation, Scale은 각각 '변환'의 한 종류로 간주되는데
 <img src="../resources/f-translation-rotation-scale.svg" class="webgl_center" width="400" />
 
 결과는 완전히 다릅니다.
-심지어 더 안 좋은 점은, 두 번째 예제가 필요하다면 우리가 원하는 새로운 순서로 translation, rotation, scale을 적용한 다른 shader를 작성해야 한다는 겁니다.
+심지어 더 안 좋은 점은, 두 번째 예제가 필요하다면 우리가 원하는 새로운 순서로 translation, rotation, scale을 적용한 다른 셰이더를 작성해야 한다는 겁니다.
 
 저보다 훨씬 더 똑똑한 사람들은 행렬 수학으로 동일한 모든 작업을 할 수 있다는 걸 밝혀냈는데요.
 2D의 경우 3x3 행렬을 사용합니다.
@@ -198,8 +198,8 @@ var m3 = {
 };
 ```
 
-이제 shader를 바꿔봅시다.
-기존 shader는 이렇게 되어 있었는데요.
+이제 셰이더를 바꿔봅시다.
+기존 셰이더는 이렇게 되어 있었는데요.
 
 ```html
 <script id="vertex-shader-2d" type="x-shader/x-vertex">
@@ -224,7 +224,7 @@ void main() {
   ...
 ```
 
-새로운 shader는 훨씬 더 간단해질 겁니다.
+새로운 셰이더는 훨씬 더 간단해질 겁니다.
 
 ```html
 <script id="vertex-shader-2d" type="x-shader/x-vertex">
@@ -266,14 +266,14 @@ function drawScene() {
 
 여기 새로운 코드를 사용한 샘플입니다.
 슬라이더는 동일하게 translation, rotation, scale 입니다.
-하지만 shader에서 사용되는 방식은 훨씬 더 간단해졌습니다.
+하지만 셰이더에서 사용되는 방식은 훨씬 더 간단해졌습니다.
 
 {{{example url="../webgl-2d-geometry-matrix-transform.html" }}}
 
 그래도 물어보실 수 있습니다.
 그래서 뭐요?
 그다지 이점이 많아 보이지 않는데요.
-하지만 이제 순서를 변경하려는 경우 새로운 shader를 작성하지 않아도 됩니다.
+하지만 이제 순서를 변경하려는 경우 새로운 셰이더를 작성하지 않아도 됩니다.
 그냥 수식만 바꿔주면 되죠.
 
 ```js
@@ -373,7 +373,7 @@ matrix = m3.multiply(matrix, moveOriginMatrix);
 이제 Photoshop이나 Flash에서 어떻게 회전점을 이동시키는지 알게 되었습니다.
 
 더 끝내주는 걸 해봅시다.
-첫 번째 글인 [WebGL 기초](webgl-fundamentals.html)로 돌아가 보면, shader에 픽셀을 clip space으로 변환하는 코드가 있다는 걸 기억하실 겁니다.
+첫 번째 글인 [WebGL 기초](webgl-fundamentals.html)로 돌아가 보면, 셰이더에 픽셀을 clip space으로 변환하는 코드가 있다는 걸 기억하실 겁니다.
 
 ```js
 ...
@@ -392,7 +392,7 @@ gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
 이 단계들을 차례대로 살펴보자면, 첫 단계, "픽셀을 0.0에서 1.0사이로 변환", 이건 실제 scale 작업입니다.
 두 번째 역시 scale 작업입니다.
 다음은 translation이고 마지막으로 Y를 -1로 scale 하는데요.
-실제로 우리가 shader에 전달한 행렬로 모든 걸 수행할 수 있습니다.
+실제로 우리가 셰이더에 전달한 행렬로 모든 걸 수행할 수 있습니다.
 2개의 scale 행렬을 만들 수 있는데,
 하나는 1.0/resolution으로 scale하는 것이고,
 다른 하나는 2.0으로 scale하는 것이며,
@@ -415,7 +415,7 @@ var m3 = {
   ...
 ```
 
-이제 shader를 더 단순하게 할 수 있습니다.
+이제 셰이더를 더 단순하게 할 수 있습니다.
 여기 완전히 새로운 vertex shader입니다.
 
 ```html
@@ -453,7 +453,7 @@ function drawScene() {
 ```
 
 또한 해상도를 설정하는 코드를 삭제했는데요.
-이 마지막 단계에서 우리는 행렬 수학의 마법 덕분에 6-7단계의 다소 복잡한 shader를 고작 1단계의 아주 간단한 shader로 바꿨습니다.
+이 마지막 단계에서 우리는 행렬 수학의 마법 덕분에 6-7단계의 다소 복잡한 셰이더를 고작 1단계의 아주 간단한 셰이더로 바꿨습니다.
 
 {{{example url="../webgl-2d-geometry-matrix-transform-with-projection.html" }}}
 
@@ -569,7 +569,7 @@ matrix = m3.scale(matrix, scale[0], scale[1]);
 >
 > 이전에 tx, ty을 중심으로 회전된 space는, x는 2로 y는 1.5로 scale 되었습니다.
 
-Shader에서 `gl_Position = matrix * position;`을 실행하는데요.
+셰이더에서 `gl_Position = matrix * position;`을 실행하는데요.
 `position` 값은 마지막 space에서 유효합니다.
 
 이해하기 더 쉽다고 느껴지는 방법을 사용하시면 됩니다.

webgl/lessons/ko/webgl-2d-rotation.md

@@ -31,7 +31,7 @@ TOC: 2D Rotation
 
 단위원의 어느 지점에서 X와 Y값을 가져와서 [이전 샘플](webgl-2d-translation.html)의 geometry에 곱할 겁니다.
 
-다음은 shader 변경 사항입니다.
+다음은 셰이더 변경 사항입니다.
 
     <script id="vertex-shader-2d" type="x-shader/x-vertex">
     attribute vec2 a_position;

webgl/lessons/ko/webgl-2d-translation.md

@@ -38,7 +38,7 @@ Translation을 업데이트한 후에 이 함수를 호출할 수 있습니다.
     // 캔버스 지우기
     gl.clear(gl.COLOR_BUFFER_BIT);
 
-    // program(shader 쌍) 사용 지시
+    // program(셰이더 쌍) 사용 지시
     gl.useProgram(program);
 
     // position attribute 활성화
@@ -129,9 +129,9 @@ function setGeometry(gl, x, y) {
 또한 javascript는 그릴 때마다 모든 점들을 업데이트해야 하는데요.
 
 더 간단한 방법이 있습니다.
-Geometry를 업로드하고 shader에서 translation을 수행하면 됩니다.
+Geometry를 업로드하고 셰이더에서 translation을 수행하면 됩니다.
 
-다음은 새로운 shader 입니다.
+다음은 새로운 셰이더 입니다.
 
 ```
 <script id="vertex-shader-2d" type="x-shader/x-vertex">

webgl/lessons/ko/webgl-2d-vs-3d-library.md

@@ -177,9 +177,9 @@ WebGL에는 depth sorting을 훨씬 더 쉽게 만드는 depth buffer가 있습
 
 몇 가지 참고할만한 사항들을 더 드리자면, [emscripten](https://emscripten.org/)은 WebGL 위에서 돌아가는 OpenGL 에뮬레이션을 제공합니다.
 해당 코드는 [여기](https://github.com/emscripten-core/emscripten/blob/master/src/library_glemu.js)에 있는데요.
-코드를 살펴보면 OpenGL ES 2.0에서 제거된 OpenGL의 오래된 3D 부분을 에뮬레이트하기 위해 shader를 생성하는 경우가 많습니다.
+코드를 살펴보면 OpenGL ES 2.0에서 제거된 OpenGL의 오래된 3D 부분을 에뮬레이트하기 위해 셰이더를 생성하는 경우가 많습니다.
 3D가 포함되지 않은 최신 OpenGL에서 3D가 포함된 오래된 OpenGL을 에뮬레이트하기 위해 NVidia가 시작한 프로젝트, [Regal](https://github.com/p3/regal/blob/184c62b7d7761481609ef1c1484ada659ae181b9/src/regal/RegalIff.cpp)에서 동일한 걸 볼 수 있습니다.
-또 하나의 예로, [여기](https://gist.github.com/greggman/41d93c00649cba78abdbfc1231c9158c) three.js가 3D를 제공하기 위해 사용하는 shader가 있습니다.
+또 하나의 예로, [여기](https://gist.github.com/greggman/41d93c00649cba78abdbfc1231c9158c) three.js가 3D를 제공하기 위해 사용하는 셰이더가 있습니다.
 많은 것들이 진행되고 있음을 알 수 있는데요.
 이 모든 것들 뿐만이 아니라 이를 지원하는 코드는 WebGL이 아닌 라이브러리에서 제공합니다.
 

webgl/lessons/ko/webgl-3d-lighting-directional.md

@@ -247,7 +247,7 @@ function setNormals(gl) {
 +gl.vertexAttribPointer(normalLocation, size, type, normalize, stride, offset)
 ```
 
-이제 shader가 이걸 사용하도록 만들어야 합니다.
+이제 셰이더가 이걸 사용하도록 만들어야 합니다.
 
 먼저 vertex shader를 통해 fragment shader로 normal을 전달합니다.
 
@@ -410,7 +410,7 @@ Scale이 극단적일 때 왼쪽의 법선(world)이 구의 표면에 수직으
 애매한 문제이기 때문에 어느 것이 맞다고 말하기는 힘들지만, 다른 시각화로 비교해봤을 때 worldInverseTranspose를 사용하는 것이 맞다는 건 분명합니다.
 
 예제에서 이를 구현하기 위해 이렇게 코드를 수정해봅시다.
-먼저 shader를 업데이트할 겁니다.
+먼저 셰이더를 업데이트할 겁니다.
 기술적으로는 `u_world`의 값만 업데이트할 수 있지만 혼란스러울 수 있기 때문에 실제 이름으로 바꿔주는 게 가장 좋습니다.
 
 ```
@@ -480,7 +480,7 @@ var m4 = {
 
 <div class="webgl_bottombar">
 <h3>mat3(u_worldInverseTranspose) * a_normal 대안</h3>
-<p>위 shader에는 이런 줄이 있습니다.</p>
+<p>위 셰이더에는 이런 줄이 있습니다.</p>
 <pre class="prettyprint">
 v_normal = mat3(u_worldInverseTranspose) * a_normal;
 </pre>

webgl/lessons/ko/webgl-3d-lighting-point.md

@@ -9,7 +9,7 @@ TOC: 점 조명
 마지막 글에서 우리는 같은 방향에서 빛이 균일하게 들어오는 방향성 조명을 살펴 봤는데요.
 렌더링 전에 해당 방향을 설정했었습니다.
 
-조명의 방향을 설정하는 대신 3D 공간의 한 점을 선택하고 shader에서 모델 표면의 임의의 지점에서 방향을 계산하면 어떨까요?
+조명의 방향을 설정하는 대신 3D 공간의 한 점을 선택하고 셰이더에서 모델 표면의 임의의 지점에서 방향을 계산하면 어떨까요?
 
 {{{diagram url="resources/point-lighting.html" width="500" height="400" className="noborder" }}}
 
@@ -250,7 +250,7 @@ surface -> light 벡터는 단위 벡터가 아니기 때문에 fragment shader
 빨간 선이 그래프 위쪽에 가까울수록 반사광이 추가되어 더 밝아집니다.
 반대로 `power`를 높이면 밝아지는 범위가 오른쪽으로 축소되죠.
 
-이걸 `shininess`라고 명명하고 shader에 추가합시다.
+이걸 `shininess`라고 명명하고 셰이더에 추가합시다.
 
     uniform vec4 u_color;
     +uniform float u_shininess;

webgl/lessons/ko/webgl-3d-lighting-spot.md

@@ -129,8 +129,8 @@ void main() {
 Uniform을 설정할 때 음수 방향을 전달할 수 있는데요.
 하지만 uniform을 `u_reverseLightDirection`이나 `u_negativeLightDirection` 대신 `u_lightDirection`이라 부르는 것이 덜 혼란스러울 것 같습니다.
 
-아마 개인 취향일 또 다른 것은 가능하면 shader에서 조건문 쓰고 싶지 않습니다.
-그 이유는 사실 shader에는 조건문이 없었기 때문입니다.
+아마 개인 취향일 또 다른 것은 가능하면 셰이더에서 조건문 쓰고 싶지 않습니다.
+그 이유는 사실 셰이더에는 조건문이 없었기 때문입니다.
 만약 조건문을 추가하면 코드에 실제 조건문이 없도록 만들기 위해 여기 저기에 0과 1로 곱하는 코드를 확장합니다.
 즉 조건문을 추가하면 조합의 확장으로 코드가 터질 수 있습니다.
 지금도 그런지는 모르겠지만 몇 가지 기술을 보여주기 위해 조건문을 제거합시다.
@@ -197,7 +197,7 @@ Inner limit과 outer limit 사이에 있다면 1.0과 0.0사이로 선형 보간
 
 한 가지 주의해야 할 것은 `u_innerLimit`과 `u_outerLimit`이 같으면 `limitRange`는 0.0이 됩니다.
 우리는 `limitRange`로 나누고 있고 0으로 나누는 것은 잘못되었거나 정의되지 않았습니다.
-여기서 더 이상 shader에 할 일은 없고 JavaScript에서 `u_innerLimit`가 `u_outerLimit`와 같지 않다는 걸 확인해야 합니다.
+여기서 더 이상 셰이더에 할 일은 없고 JavaScript에서 `u_innerLimit`가 `u_outerLimit`와 같지 않다는 걸 확인해야 합니다.
 (참고: 예제 코드는 이를 수행하지 않습니다)
 
 GLSL에는 이를 약간 단순화하기 위해 사용할 수 있는 함수도 있는데요.
@@ -239,7 +239,7 @@ GLSL의 여러 함수들이 어떤 값들에 대해 정의되지 않았습니다
 위에서 다른 예시인 <code>smoothstep</code>을 살펴봤습니다.
 </p>
 <p>
-이를 주의하지 않으면 shader가 컴퓨터에 따라 다른 결과를 얻을 수 있습니다.
+이를 주의하지 않으면 셰이더가 컴퓨터에 따라 다른 결과를 얻을 수 있습니다.
 <a href="https://www.khronos.org/files/opengles_shading_language.pdf">명세서의 섹션 8</a>에는 모든 내장 함수의 기능과 더불어 정의되지 않은 동작이 있는지 나열되어 있습니다.
 </p>
 <p>

webgl/lessons/ko/webgl-3d-perspective-correct-texturemapping.md

@@ -23,7 +23,7 @@ Vertex shader가 3번 호출되면 WebGL은 삼각형을 그립니다.
       // Attribute는 버퍼에서 데이터를 받음
       attribute vec4 a_position;
 
-      // 모든 shader는 main 함수를 가짐
+      // 모든 셰이더는 main 함수를 가짐
       void main() {
 
         // gl_Position은 vertex shader가 설정을 담당하는 특수 변수