ko: vertext shader -> 정점 셰이더

Author: 태재영

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

@@ -82,7 +82,7 @@ precision mediump float;
 uniform sampler2D u_image0;
 uniform sampler2D u_image1;
 
-// Vertex shader에서 전달된 texCoords 
+// 정점 셰이더에서 전달된 texCoords 
 varying vec2 v_texCoord;
 
 void main() {

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

@@ -36,7 +36,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
 1단위 크기의 사각형 하나를 업로드합니다.
 그런 다음 [행렬 수학](webgl-2d-matrices.html)을 사용하여 해당 단위 사각형의 크기를 조정하고 이동시켜 원하는 위치에 있도록 합니다.
 
-먼저 간단한 vertex shader가 필요합니다.
+먼저 간단한 정점 셰이더가 필요합니다.
 
     attribute vec4 a_position;
     attribute vec2 a_texcoord;
@@ -50,7 +50,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
        v_texcoord = a_texcoord;
     }
 
-간단한 fragment shader도 필요하죠.
+간단한 프래그먼트 셰이더도 필요합니다.
 
     precision mediump float;
 
@@ -258,7 +258,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
 텍스처 좌표가 작동하는 방식은 [텍스처에 대한 글](webgl-3d-textures.html)에서 다뤘습니다.
 해당 글에서는 텍스처 좌표를 수동으로 생성했지만 즉석으로 생성할 수도 있으며 행렬을 사용하여 위치를 조작한 것처럼 다른 행렬을 사용하여 비슷하게 텍스처 좌표를 조작할 수 있습니다.
 
-텍스처 행렬을 vertex shader에 추가하고, 텍스처 좌표에 이 텍스처 행렬을 곱해봅시다.
+텍스처 행렬을 정점 셰이더에 추가하고, 텍스처 좌표에 이 텍스처 행렬을 곱해봅시다.
 
     attribute vec4 a_position;
     attribute vec2 a_texcoord;

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

@@ -416,7 +416,7 @@ var m3 = {
 ```
 
 이제 셰이더를 더 단순하게 할 수 있습니다.
-여기 완전히 새로운 vertex shader입니다.
+여기 완전히 새로운 정점 셰이더입니다.
 
 ```html
 <script id="vertex-shader-2d" type="x-shader/x-vertex">

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

@@ -249,7 +249,7 @@ function setNormals(gl) {
 
 이제 셰이더가 이걸 사용하도록 만들어야 합니다.
 
-먼저 vertex shader를 통해 fragment shader로 normal을 전달합니다.
+먼저 정점 셰이더를 통해 fragment shader로 normal을 전달합니다.
 
     attribute vec4 a_position;
     -attribute vec4 a_color;
@@ -276,7 +276,7 @@ function setNormals(gl) {
 ```
 precision mediump float;
 
-// Vertex shader에서 전달
+// 정점 셰이더에서 전달
 -varying vec4 v_color;
 +varying vec3 v_normal;
 

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

@@ -65,11 +65,11 @@ TOC: 점 조명
     }
 
 surface -> light 벡터는 단위 벡터가 아니기 때문에 fragment shader에서 정규화해야 합니다.
-참고로 vertex shader에서 정규화할 수 있었지만 `varying`이기 때문에 위치 사이를 선형적으로 보간하기 때문에 완전한 단위 벡터가 아니게 됩니다.
+참고로 정점 셰이더에서 정규화할 수 있었지만 `varying`이기 때문에 위치 사이를 선형적으로 보간하기 때문에 완전한 단위 벡터가 아니게 됩니다.
 
     precision mediump float;
 
-    // Vertex shader에서 전달
+    // 정점 셰이더에서 전달
     varying vec3 v_normal;
     +varying vec3 v_surfaceToLight;
 
@@ -190,7 +190,7 @@ surface -> light 벡터는 단위 벡터가 아니기 때문에 fragment shader
 다음으로 fragment shader에서 surface -> view 벡터와 surface -> light 벡터 사이의 `halfVector`를 계산해야 합니다.
 그런 다음 `halfVector`와 법선의 스칼라곱을 구하여, 빛이 뷰로 반사되는지 확인할 수 있습니다.
 
-    // Vertex shader에서 전달
+    // 정점 셰이더에서 전달
     varying vec3 v_normal;
     varying vec3 v_surfaceToLight;
     +varying vec3 v_surfaceToView;

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

@@ -58,7 +58,7 @@ Limit로 *dot limit*를 계산하고, limit의 cosine을 구합니다.
 ```
 precision mediump float;
 
-// Vertex shader에서 전달
+// 정점 셰이더에서 전달
 varying vec3 v_normal;
 varying vec3 v_surfaceToLight;
 varying vec3 v_surfaceToView;

webgl/lessons/ko/webgl-3d-orthographic.md

@@ -17,8 +17,8 @@ translation, rotation, scale, 그리고 픽셀에서 clip space으로 투영하
 마지막 예제를 가져와서 3D로 바꿔봅시다.
 다시 F를 사용할 거지만 이번엔 3D 'F'입니다.
 
-먼저 해야할 일은 3D를 다루기 위해 vertex shader를 수정하는 겁니다.
-다음은 기존 vertex shader이고
+먼저 해야할 일은 3D를 다루기 위해 정점 셰이더를 수정하는 겁니다.
+다음은 기존 정점 셰이더이고
 
 ```
 <script id="vertex-shader-2d" type="x-shader/x-vertex">
@@ -388,9 +388,9 @@ X와 Y를 pixel space에서 clip space로 변환해야 했던 것처럼 Z도 동
 
 슬라이더를 움직여서 이걸 3D라고 부르기는 힘든데요.
 각 사각형에 다른 색상을 칠해봅시다.
-이를 위해 vertex shader에 또 다른 attribute와 이걸 vertex shader에서 fragment shader로 전달하기 위한 varying을 추가할 겁니다.
+이를 위해 정점 셰이더에 또 다른 attribute와 이걸 정점 셰이더에서 fragment shader로 전달하기 위한 varying을 추가할 겁니다.
 
-다음은 새로운 vertex shader 입니다.
+다음은 새로운 정점 셰이더입니다.
 
 ```
 <script id="vertex-shader-3d" type="x-shader/x-vertex">
@@ -417,7 +417,7 @@ Fragment shader에서 해당 색상을 사용해야 합니다.
 <script id="fragment-shader-3d" type="x-shader/x-fragment">
 precision mediump float;
 
-+// Vertex shader에서 전달
++// 정점 셰이더에서 전달
 +varying vec4 v_color;
 
 void main() {
@@ -513,7 +513,7 @@ WebGL은 삼각형의 앞면 혹은 뒷면만 그릴 수도 있는데요.
 이 경우 "culling"은 "그리지 않음"을 의미하는 단어입니다.
 
 참고로 WebGL에서 삼각형이 시계 혹은 반시계 방향으로 진행되는지는 clip space에 있는 해당 삼각형의 정점에 따라 달라집니다.
-즉 WebGL은 vertex shader에서 정점에 수식을 적용한 후에 삼각형이 앞면인지 뒷면인지 파악합니다.
+즉 WebGL은 정점 셰이더에서 정점에 수식을 적용한 후에 삼각형이 앞면인지 뒷면인지 파악합니다.
 이건 X에서 -1로 크기가 조정되거나 180도 회전한 시계 방향 삼각형은 반시계 방향 삼각형이 된다는 걸 의미하는데요.
 CULL_FACE를 꺼놨기 때문에 시계 방향(앞면)과 반시계 방향(뒷면) 삼각형을 모두 볼 수 있었습니다.
 이제 CULL_FACE를 켰기 때문에 scale이나 rotation 혹은 어떤 이유로든 앞면 삼각형이 뒤집히면 WebGL은 그리지 않을겁니다.
@@ -555,7 +555,7 @@ DEPTH BUFFER를 입력해봅시다.
 
 때때로 Z-Buffer라고 불리는 depth buffer는 *depth* pixel의 사각형인데, 각 color pixel에 대한 depth pixel은 이미지를 만드는 데에 사용됩니다.
 WebGL은 각 color pixel을 그리기 때문에 depth pixel도 그릴 수 있는데요.
-이건 Z축에 대해 vertex shader에서 반환한 값을 기반으로 합니다.
+이건 Z축에 대해 정점 셰이더에서 반환한 값을 기반으로 합니다.
 X와 Y를 clip space로 변환해야 했던 것처럼 Z도 clip space(-1에서 +1)에 있습니다.
 해당 값은 depth space 값(0에서 +1)으로 변환됩니다.
 WebGL은 color pixel을 그리기 전에 대응하는 depth pixel을 검사하는데요.
@@ -646,10 +646,10 @@ var offset = 0;               // 버퍼의 처음부터 시작
 gl.vertexAttribPointer(colorAttributeLocation, size, type, normalize, stride, offset);
 </pre>
 <p>
-해당 '3'은 vertex shader의 반복마다 각 attribute의 버퍼에서 3개의 값만 가져오라는 걸 말합니다.
-이게 동작하는 이유는 vertex shader에서 입력하지 않는 값에 대해 WebGL이 기본값을 제공하기 때문인데요.
+해당 '3'은 정점 셰이더의 반복마다 각 attribute의 버퍼에서 3개의 값만 가져오라는 걸 말합니다.
+이게 동작하는 이유는 정점 셰이더에서 입력하지 않는 값에 대해 WebGL이 기본값을 제공하기 때문인데요.
 기본값은 0, 0, 0, 1로 x = 0, y = 0, z= 0, w = 1 입니다.
-이게 기존 vertex shader에서 명시적으로 1을 입력해줘야 했던 이유입니다.
+이게 기존 정점 셰이더에서 명시적으로 1을 입력해줘야 했던 이유입니다.
 x와 y는 전달했고, z는 1이 필요했지만, z의 기본값은 0이므로, 명시적으로 1을 입력해야 했던 거죠.
 하지만 3D의 경우 'w'를 입력하지 않아도 수식이 작동하는데 필요한 값인 1을 기본값으로 가집니다.
 </p>

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

@@ -10,23 +10,23 @@ TOC: 원근 교정 텍스처 매핑
 또한 [varying과 그 기능](webgl-how-it-works.html)에 대해 알아야 하지만 여기서 간략하게 설명하겠습니다.
 
 "[동작 원리](webgl-how-it-works.html)"에서 varying이 어떻게 작동하는지 다뤘는데요.
-Vertex shader는 varying을 선언하고 어떤 값으로 설정할 수 있습니다.
-Vertex shader가 3번 호출되면 WebGL은 삼각형을 그립니다.
+정점 셰이더는 varying을 선언하고 어떤 값으로 설정할 수 있습니다.
+정점 셰이더가 3번 호출되면 WebGL은 삼각형을 그립니다.
 해당 삼각형을 그리는 동안 모든 픽셀에 대해 fragment shader를 호출하고 해당 픽셀을 어떤 색상으로 만들지 묻습니다.
 삼각형의 정점 3개 사이에서 3개의 값 사이를 보간한 varying을 전달할 겁니다.
 
 {{{diagram url="resources/fragment-shader-anim.html" width="600" height="400" caption="v_color는 v0, v1, v2 사이에서 보간" }}}
 
 [첫 번째 글](webgl-fundamentals.html)로 돌아가보면 우리는 clip space에서 삼각형을 그렸는데요.
-다음과 같이 간단한 vertex shader에 clip space 좌표를 전달했습니다.
+다음과 같이 간단한 정점 셰이더에 clip space 좌표를 전달했습니다.
 
       // Attribute는 버퍼에서 데이터를 받음
       attribute vec4 a_position;
 
       // 모든 셰이더는 main 함수를 가짐
       void main() {
 
-        // gl_Position은 vertex shader가 설정을 담당하는 특수 변수
+        // gl_Position은 정점 셰이더가 설정을 담당하는 특수 변수
         gl_Position = a_position;
       }
 
@@ -65,7 +65,7 @@ Clip space에 2개의 사각형을 그리도록 만들어봅시다.
 {{{example url="../webgl-clipspace-rectangles.html" }}}
 
 Varying float 하나를 추가해봅시다.
-해당 varying을 vertex shader에서 fragment shader로 전달할 겁니다.
+해당 varying을 정점 셰이더에서 fragment shader로 전달할 겁니다.
 
       attribute vec4 a_position;
     +  attribute float a_brightness;
@@ -83,7 +83,7 @@ Fragment shader에서는 해당 varying을 사용하여 색상을 설정할 겁
 
       precision mediump float;
 
-    +  // Vertex shader에서 전달받아 보간
+    +  // 정점 셰이더에서 전달받아 보간
     +  varying float v_brightness;  
 
       void main() {
@@ -226,7 +226,7 @@ UV 좌표를 양쪽에 0에서 1로 조정했고 4x4 픽셀 텍스처를 사용
 
 {{{example url="../webgl-perspective-correct-cube.html" }}}
 
-이제 해당 예제를 가져와 vertex shader를 변경하여 우리가 직접 `W`로 나눠봅시다.
+이제 해당 예제를 가져와 정점 셰이더를 변경하여 우리가 직접 `W`로 나눠봅시다.
 한 줄만 추가하면 됩니다.
 
 ```

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

@@ -50,7 +50,7 @@ Clip space에서 나누면 Z가 더 작은 숫자(-1 ~ +1)이기 때문에 더 
 나누기 전에 Z를 fudgeFactor와 곱하면 주어진 거리에 따라 얼마나 작게 할지 조정할 수 있습니다.
 
 한 번 해봅시다.
-먼저 "fudgeFactor"를 곱한 뒤 Z로 나누도록 vertex shader를 수정합니다.
+먼저 "fudgeFactor"를 곱한 뒤 Z로 나누도록 정점 셰이더를 수정합니다.
 
 ```
 <script id="vertex-shader-3d" type="x-shader/x-vertex">
@@ -102,7 +102,7 @@ void main() {
 <img class="webgl_center" src="resources/orthographic-vs-perspective.png" />
 <div class="webgl_center">orthographic vs perspective</div>
 
-WebGL은 vertex shader의 `gl_Position`에 할당한 x,y,z,w 값을 가져와 자동으로 w로 나눕니다.
+WebGL은 정점 셰이더의 `gl_Position`에 할당한 x,y,z,w 값을 가져와 자동으로 w로 나눕니다.
 
 이는 셰이더를 변경하여 직접 나누는 대신, `gl_Position.w`에 `zToDivideBy`를 넣어서 쉽게 증명할 수 있습니다.
 
@@ -226,7 +226,7 @@ w_out = z_in * fudgeFactor + 1;
 
 이제 행렬만 사용하도록 다시 프로그램을 수정해봅시다.
 
-먼저 vertex shader를 되돌립니다.
+먼저 정점 셰이더를 되돌립니다.
 
 ```
 <script id="vertex-shader-2d" type="x-shader/x-vertex">

webgl/lessons/ko/webgl-3d-textures.md

@@ -10,7 +10,7 @@ WebGL에서 어떻게 텍스처를 적용할까요?
 [이미지 처리](webgl-image-processing.html)에 대한 글을 읽으면 방법을 알 수 있지만 자세히 살펴보면 이해하기 더 쉬울 겁니다.
 
 먼저 해야할 일은 셰이더와 텍스처 조정입니다.
-다음은 vertex shader의 변경 사항인데요.
+다음은 정점 셰이더의 변경 사항인데요.
 텍스처 좌표를 전달해야 합니다.
 이 경우 fragment shader로 바로 전달하게 됩니다.
 
@@ -30,11 +30,11 @@ WebGL에서 어떻게 텍스처를 적용할까요?
     }
 
 Fragment shader에서 텍스처를 참조하게 해주는 uniform sampler2D를 선언합니다.
-그리고 vertex shader에서 전달된 텍스처 좌표를 사용하고 해당 텍스처에서 색상을 찾기 위해 `texture2D`를 호출합니다.
+그리고 정점 셰이더에서 전달된 텍스처 좌표를 사용하고 해당 텍스처에서 색상을 찾기 위해 `texture2D`를 호출합니다.
 
     precision mediump float;
 
-    // Vertex shader에서 전달
+    // 정점 셰이더에서 전달
     *varying vec2 v_texcoord;
 
     *// 텍스처
@@ -392,7 +392,7 @@ WebGL이 "texture complete"여야 하는데요.
 
 3가지 답이 떠오르는데요.
 
-1) 텍스처 6개를 참조하는 복잡한 셰이더를 만들고, 사용할 텍스처를 정하기 위해 vertex shader에 fragment shader로 전달되는 추가 정점 정보를 전달합니다.
+1) 텍스처 6개를 참조하는 복잡한 셰이더를 만들고, 사용할 텍스처를 정하기 위해 정점 셰이더에 fragment shader로 전달되는 추가 정점 정보를 전달합니다.
 이건 하지 마세요!
 조금만 생각해보면 더 많은 면을 가진 다른 모양에 대해 같은 작업을 수행하려는 경우 수많은 셰이더를 작성해야 한다는 것을 알 수 있습니다.