ko: pulling vertices

Author: 태재영

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

@@ -116,9 +116,9 @@ void main() {
   }
 ```
 
-WebGL에는 "texture unit"이라는 것이 있습니다.
+WebGL에는 "텍스처 유닛"이 있습니다.
 이는 텍스처에 대한 레퍼런스 배열이라 생각할 수 있습니다.
-각 sampler에 대해 사용할 texture unit을 셰이더에 알려줍니다.
+각 sampler에 대해 사용할 텍스처 유닛을 셰이더에 알려줍니다.
 
 ```
   // Sampler location 탐색
@@ -127,15 +127,15 @@ WebGL에는 "texture unit"이라는 것이 있습니다.
 
   ...
 
-  // 함께 렌더링할 texture unit 설정
-  gl.uniform1i(u_image0Location, 0);  // texture unit 0
-  gl.uniform1i(u_image1Location, 1);  // texture unit 1
+  // 함께 렌더링할 텍스처 유닛 설정
+  gl.uniform1i(u_image0Location, 0);  // 텍스처 유닛 0
+  gl.uniform1i(u_image1Location, 1);  // 텍스처 유닛 1
 ```
 
-그런 다음 텍스처를 각각의 texture unit에 할당해야 합니다.
+그런 다음 텍스처를 각각의 텍스처 유닛에 할당해야 합니다.
 
 ```
-  // 특정 텍스처를 사용하도록 각각의 texture unit 설정
+  // 특정 텍스처를 사용하도록 각각의 텍스처 유닛 설정
   gl.activeTexture(gl.TEXTURE0);
   gl.bindTexture(gl.TEXTURE_2D, textures[0]);
   gl.activeTexture(gl.TEXTURE1);
@@ -153,9 +153,9 @@ WebGL에는 "texture unit"이라는 것이 있습니다.
 
 몇 가지 살펴봐야 할 것이 있습니다.
 
-Texture unit을 생각하는 간단한 방법: 모든 텍스처 함수는 "active texture unit"에서 작동한다.
-"active texture unit"은 작업하려는 texture unit의 전역 변수입니다.
-각 texture unit은 2가지 target을 가지는데요.
+텍스처 유닛을 생각하는 간단한 방법: 모든 텍스처 함수는 "active texture unit"에서 작동한다.
+"active texture unit"은 작업하려는 텍스처 유닛의 전역 변수입니다.
+각 텍스처 유닛은 2가지 target을 가지는데요.
 TEXTURE_2D target과 TEXTURE_CUBE_MAP target입니다.
 모든 텍스처 함수는 current active texture unit에서 지정된 target과 함께 작동합니다.
 JavaScript로 WebGL을 구현한다면 다음과 같을 겁니다.
@@ -199,15 +199,15 @@ var getContext = function() {
 };
 ```
 
-셰이더는 index를 texture unit으로 가져옵니다.
+셰이더는 인덱스를 텍스처 유닛으로 가져옵니다.
 이 두 줄이 더 명료하게 만들어주길 바랍니다.
 
 ```
-  gl.uniform1i(u_image0Location, 0);  // texture unit 0
-  gl.uniform1i(u_image1Location, 1);  // texture unit 1
+  gl.uniform1i(u_image0Location, 0);  // 텍스처 유닛 0
+  gl.uniform1i(u_image1Location, 1);  // 텍스처 유닛 1
 ```
 
-한 가지 유의해야할 점은, uniform을 사용할 때 texture unit에 대한 index를 사용하지만, gl.activeTexture를 호출할 때는 특수 상수 gl.TEXTURE0, gl.TEXTURE1 등을 전달해야 한다는 겁니다.
+한 가지 유의해야할 점은, 유니폼을 사용할 때 텍스처 유닛에 대한 인덱스를 사용하지만, gl.activeTexture를 호출할 때는 특수 상수 gl.TEXTURE0, gl.TEXTURE1 등을 전달해야 한다는 겁니다.
 다행히 상수는 연속적이므로 이렇게 대체할 수 있습니다.
 
 ```

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

@@ -91,7 +91,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
       // 행렬 설정
       gl.uniformMatrix4fv(matrixLocation, false, matrix);
 
-      // texture unit 0에서 텍스처를 가져오도록 셰이더에 지시
+      // 텍스처 유닛 0에서 텍스처를 가져오도록 셰이더에 지시
       gl.uniform1i(textureLocation, 0);
 
       // 사각형 그리기 (삼각형 2개, 정점 6개)
@@ -237,7 +237,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
       // 행렬 설정
       gl.uniformMatrix4fv(matrixLocation, false, matrix);
 
-      // texture unit 0에서 텍스처를 가져오도록 셰이더에 지시
+      // 텍스처 유닛 0에서 텍스처를 가져오도록 셰이더에 지시
       gl.uniform1i(textureLocation, 0);
 
       // 사각형 그리기 (삼각형 2개, 정점 6개)
@@ -335,7 +335,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
     +  // 텍스처 행렬 설정
     +  gl.uniformMatrix4fv(textureMatrixLocation, false, texMatrix);
 
-      // texture unit 0에서 텍스처를 가져오도록 셰이더에 지시
+      // 텍스처 유닛 0에서 텍스처를 가져오도록 셰이더에 지시
       gl.uniform1i(textureLocation, 0);
 
       // 사각형 그리기 (삼각형 2개, 정점 6개)

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

@@ -425,7 +425,7 @@ attribute vec2 a_position;
 uniform mat3 u_matrix;
 
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
   gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
 }
 </script>

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

@@ -198,7 +198,7 @@ function setGeometry(gl) {
 
   // 위치를 넣을 버퍼 생성
   var positionBuffer = gl.createBuffer();
-  // ARRAY_BUFFER에 할당 (ARRAY_BUFFER = positionBuffer)
+  // ARRAY_BUFFER에 바인딩 (ARRAY_BUFFER = positionBuffer)
   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 +  // 버퍼에 geometry 데이터 넣기
 +  setGeometry(gl);

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

@@ -261,7 +261,7 @@ function setNormals(gl) {
     +varying vec3 v_normal;
 
     void main() {
-      // 위치를 행렬로 곱하기
+      // 위치에 행렬 곱하기
       gl_Position = u_matrix * a_position;
 
     -  // 색상을 프래그먼트 셰이더로 전달
@@ -353,7 +353,7 @@ attribute vec3 a_normal;
 varying vec3 v_normal;
 
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
 *  gl_Position = u_worldViewProjection * a_position;
 
 *  // 법선의 방향을 정하고 프래그먼트 셰이더로 전달
@@ -423,7 +423,7 @@ uniform mat4 u_worldViewProjection;
 varying vec3 v_normal;
 
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
   gl_Position = u_worldViewProjection * a_position;
 
   // 법선의 방향을 정하고 프래그먼트 셰이더로 전달

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

@@ -51,7 +51,7 @@ TOC: 점 조명
     +varying vec3 v_surfaceToLight;
 
     void main() {
-      // 위치를 행렬로 곱하기
+      // 위치에 행렬 곱하기
       gl_Position = u_worldViewProjection * a_position;
 
       // 법선의 방향을 정하고 프래그먼트 셰이더로 전달
@@ -171,7 +171,7 @@ surface -> light 벡터는 단위 벡터가 아니기 때문에 프래그먼트
     +varying vec3 v_surfaceToView;
 
     void main() {
-      // 위치를 행렬로 곱하기
+      // 위치에 행렬 곱하기
       gl_Position = u_worldViewProjection * a_position;
 
       // 법선의 방향을 정하고 프래그먼트 셰이더로 전달

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

@@ -27,7 +27,7 @@ attribute vec2 a_position;
 uniform mat3 u_matrix;
 
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
   gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
 }
 </script>
@@ -42,7 +42,7 @@ void main() {
 *uniform mat4 u_matrix;
 
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
 *  gl_Position = u_matrix * a_position;
 }
 </script>
@@ -402,7 +402,7 @@ uniform mat4 u_matrix;
 +varying vec4 v_color;
 
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
   gl_Position = u_matrix * a_position;
 
 +  // 프래그먼트 셰이더로 색상 전달

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

@@ -238,7 +238,7 @@ uniform mat4 u_matrix;
 varying vec2 v_texcoord;
 
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
   gl_Position = u_matrix * a_position;
 
 +  // 수동으로 W 나누기

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

@@ -58,7 +58,7 @@ Z가 증가할수록, 멀어질수록, 더 작게 그려지는 걸 볼 수 있
 +uniform float u_fudgeFactor;
 ...
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
   vec4 position = u_matrix * a_position;
 
 +  // 나누려는 z 조정
@@ -112,7 +112,7 @@ WebGL은 정점 셰이더의 `gl_Position`에 할당한 x,y,z,w 값을 가져와
 uniform float u_fudgeFactor;
 ...
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
   vec4 position = u_matrix * a_position;
 
   // 나누려는 z 조정
@@ -233,7 +233,7 @@ w_out = z_in * fudgeFactor + 1;
 uniform mat4 u_matrix;
 
 void main() {
-  // 위치를 행렬로 곱하기
+  // 위치에 행렬 곱하기
   gl_Position = u_matrix * a_position;
   ...
 }

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

@@ -22,7 +22,7 @@ WebGL에서 어떻게 텍스처를 적용할까요?
     *varying vec2 v_texcoord;
 
     void main() {
-      // 위치를 행렬로 곱하기
+      // 위치에 행렬 곱하기
       gl_Position = u_matrix * a_position;
 
     *  // texcoord를 프래그먼트 셰이더로 전달
@@ -460,7 +460,7 @@ WebGL이 "texture complete"여야 하는데요.
 이게 가장 좋은 이유는 로드하는 텍스처가 하나뿐이기 때문에 셰이더는 하나의 텍스처만을 참조하여 단순하게 유지되며, 평면으로 나누는 경우처럼 텍스처당 한 번씩 그리기 호출을 하는 대신에 단 한번의 그리기 호출만 필요하기 때문입니다.
 
 여기서 다룬 것 이외에 알고 싶을 수 있는 텍스처 관련 글들이 있는데요.
-먼저 [texture unit state 작동 방식](webgl-texture-units.html)입니다.
+먼저 [텍스처 유닛 상태 작동 방식](webgl-texture-units.html)입니다.
 그리고 [한 번에 2개 이상의 텍스처를 사용하는 방법](webgl-2-textures.html)입니다.
 또 다른 것은 [다른 도메인의 이미지를 사용하는 방법](webgl-cors-permission.html)이 있습니다.
 마지막으로 어찌보면 사소하지만 알아두면 좋은 [원근 교정 텍스처 매핑](webgl-3d-perspective-correct-texturemapping.html)입니다.