ko: pixel -> 픽셀

Author: 태재영

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

@@ -79,7 +79,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
       gl.enableVertexAttribArray(texcoordLocation);
       gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0);
 
-      // 이 행렬은 pixel에서 clip space로 변환합니다.
+      // 이 행렬은 픽셀에서 clip space로 변환합니다.
       var matrix = m4.orthographic(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
 
       // 이 행렬은 사각형을 dstX,dstY로 이동시킵니다.
@@ -221,7 +221,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
 
       ...
 
-      // 이 행렬은 pixel에서 clip space로 변환합니다.
+      // 이 행렬은 픽셀에서 clip space로 변환합니다.
       var projectionMatrix = m3.projection(canvas.width, canvas.height, 1);
 
     *  // 이 행렬은 사각형을 1단위에서 dstWidth,dstHeight 단위로 크기 조정합니다.
@@ -312,7 +312,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
 
       ...
 
-      // 이 행렬은 pixel에서 clip space로 변환합니다.
+      // 이 행렬은 픽셀에서 clip space로 변환합니다.
       var projectionMatrix = m3.projection(canvas.width, canvas.height, 1);
 
       // 이 행렬은 사각형을 1단위에서 dstWidth,dstHeight 단위로 크기 조정합니다.

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

@@ -545,7 +545,7 @@ matrix = m3.scale(matrix, scale[0], scale[1]);
 
 2단계:  `matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);`
 
-> {{{diagram url="resources/matrix-space-change.html?stage=1" caption="clip space에서 pixel space으로" }}}
+> {{{diagram url="resources/matrix-space-change.html?stage=1" caption="clip space에서 픽셀 공간으로" }}}
 >
 > 이제 픽셀 공간에 있습니다. X = 0에서 400, Y = 0에서 300, 왼쪽 상단은 0,0 입니다.
 > 이 행렬을 사용하여 전달된 위치는 픽셀 공간에 있어야 합니다.

webgl/lessons/ko/webgl-2d-matrix-stack.md

@@ -109,7 +109,7 @@ MatrixStack.prototype.scale = function(x, y, z) {
 이전 강의인 [`drawImage`](webgl-2d-drawimage.html)에 이런 코드들이 있었습니다.
 
 ```
-// 이 행렬은 pixel에서 clip space로 변환합니다.
+// 이 행렬은 픽셀에서 clip space로 변환합니다.
 var matrix = m4.orthographic(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
 
 // 이 행렬은 사각형을 dstX,dstY로 이동시킵니다.
@@ -128,7 +128,7 @@ var matrixStack = new MatrixStack();
 그리고 스택의 최상단 행렬에 곱합니다.
 
 ```
-// 이 행렬은 pixel에서 clip space로 변환합니다.
+// 이 행렬은 픽셀에서 clip space로 변환합니다.
 var matrix = m4.orthographic(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
 
 +// 이 행렬은 원점을 current matrix stack에 해당하는 곳으로 이동시킵니다.

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-orthographic.md

@@ -309,7 +309,7 @@ X 회전
 ```
 
 또한 투영 함수를 업데이트해야 합니다.
-다음은 pixel에서 clip space로 변환하는 기존 코드입니다.
+다음은 픽셀에서 clip space로 변환하는 기존 코드입니다.
 
 ```
   projection: function (width, height) {
@@ -337,7 +337,7 @@ X 회전
   },
 ```
 
-X와 Y를 pixel space에서 clip space로 변환해야 했던 것처럼 Z도 동일한 작업을 수행해야 합니다.
+X와 Y를 픽셀 공간에서 clip space로 변환해야 했던 것처럼 Z도 동일한 작업을 수행해야 합니다.
 이 경우에는 Z축 픽셀 단위도 만들게 되는데요.
 `depth`에 `width`와 비슷한 값을 전달할 것이므로, 공간은 0px에서 `width`px의 너비와, 0px에서 `height`px의 높이가 되지만, `depth`는 `-depth / 2`에서 `+depth / 2`가 됩니다.
 
@@ -553,7 +553,7 @@ CULL_FACE를 켜면 얻는 결과입니다.
 
 DEPTH BUFFER를 입력해봅시다.
 
-때때로 Z-Buffer라고 불리는 depth buffer는 *depth* pixel의 사각형인데, 각 color pixel에 대한 depth pixel은 이미지를 만드는 데에 사용됩니다.
+때때로 Z-Buffer라고 불리는 depth buffer는 *depth pixel*의 사각형인데, 각 color pixel에 대한 depth pixel은 이미지를 만드는 데에 사용됩니다.
 WebGL은 각 color pixel을 그리기 때문에 depth pixel도 그릴 수 있는데요.
 이건 Z축에 대해 정점 셰이더에서 반환한 값을 기반으로 합니다.
 X와 Y를 clip space로 변환해야 했던 것처럼 Z도 clip space(-1에서 +1)에 있습니다.
@@ -589,7 +589,7 @@ WebGL은 color pixel을 그리기 전에 대응하는 depth pixel을 검사하
 3D를 얻게 됩니다!
 
 한 가지 사소한 게 남았는데요.
-대부분의 3D 수학 라이브러리에는 clip space에서 pixel space로 변환하는 `투영` 함수가 없습니다.
+대부분의 3D 수학 라이브러리에는 clip space에서 픽셀 공간으로 변환하는 `projection` 함수가 없습니다.
 그보다는 보통 `ortho`나 `orthographic`이라 불리는 함수가 있습니다.
 
     var m4 = {

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

@@ -365,9 +365,9 @@ matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);
 왜 그렇게 멀리 옮겨야 했을까요?
 </p>
 <p>
-그 이유는 마지막 샘플까지 <code>m4.projection</code> 함수가 pixel에서 clip space로 투영을 만들었기 때문입니다.
+그 이유는 마지막 샘플까지 <code>m4.projection</code> 함수가 픽셀에서 clip space로 투영을 만들었기 때문입니다.
 이는 우리가 표시하고 있던 영역이 400x300px을 나타냈다는 걸 의미하는데요.
-3D에서 'pixel'을 사용하는 건 정말 의미가 없습니다.
+3D에서 '픽셀'을 사용하는 건 정말 의미가 없습니다.
 </p>
 <p>다시말해 0,0,0에서 F를 그리려고 했지만 회전하지 않는다면</p>
 <div class="webgl_center"><img src="resources/f-big-and-wrong-side.svg" style="width: 500px;"></div>

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

@@ -16,7 +16,7 @@ JavaScript에서 텍스처 데이터를 생성하는 것은 굉장히 간단합
 <div class="webgl_center">
   <table class="tabular-data tabular-data1">
     <thead>
-      <tr><td>Format</td><td>Type</td><td>Channels</td><td>Bytes per pixel</td></tr>
+      <tr><td>포맷</td><td>타입</td><td>채널</td><td>픽셀당 바이트</td></tr>
     </thead>
     <tbody>
       <tr><td>RGBA</td><td>UNSIGNED_BYTE</td><td>4</td><td>4</td></tr>
@@ -31,7 +31,7 @@ JavaScript에서 텍스처 데이터를 생성하는 것은 굉장히 간단합
   </table>
 </div>
 
-3x2 pixel `LUMINANCE` 텍스처를 생성해봅시다.
+3x2 픽셀 `LUMINANCE` 텍스처를 생성해봅시다.
 `LUMINANCE` 텍스처이기 때문에 픽셀 당 1개의 값만 있고 각각의 R, G, B 채널로 반복됩니다.
 
 [지난 글](webgl-3d-textures.html)에서 샘플을 가져올 겁니다.

webgl/lessons/ko/webgl-render-to-texture.md

@@ -160,7 +160,7 @@ function drawScene(time) {
     // 3x2 텍스처로 큐브 렌더링
     gl.bindTexture(gl.TEXTURE_2D, texture);
 
-    // WebGL에 clip space에서 pixel로 변환하는 방법 지시
+    // WebGL에 clip space에서 픽셀로 변환하는 방법 지시
     gl.viewport(0, 0, targetTextureWidth, targetTextureHeight);
 
     // Attachment 지우기
@@ -178,7 +178,7 @@ function drawScene(time) {
     // 방금 렌더링한 텍스처로 큐브 렌더링
     gl.bindTexture(gl.TEXTURE_2D, targetTexture);
 
-    // Clip space에서 pixel로 변환하는 방법을 WebGL에 지시
+    // Clip space에서 픽셀로 변환하는 방법을 WebGL에 지시
     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
     // 캔버스와 depth buffer 지우기

webgl/lessons/ko/webgl-shaders-and-glsl.md

@@ -32,7 +32,7 @@ TOC: 셰이더와 GLSL
 
 1.  [Attribute](#attribute) (버퍼에서 가져온 데이터)
 2.  [Uniform](#uniform) (단일 그리기 호출의 모든 정점에 대해 동일하게 유지되는 값)
-3.  [Texture](#vertex-shader-texture) (pixel/texel의 데이터)
+3.  [Texture](#vertex-shader-texture) (픽셀/텍셀 데이터)
 
 ### Attribute
 
@@ -195,7 +195,7 @@ uniform은 여러 type을 가질 수 있는데요.
 3가지 방법으로 데이터를 가져올 수 있습니다.
 
 1.  [Uniform](#uniform) (단일 그리기 호출의 모든 정점에 대해 동일하게 유지되는 값)
-2.  [Texture](#fragment-shader-texture) (pixel/texel의 데이터)
+2.  [Texture](#fragment-shader-texture) (픽셀/텍셀 데이터)
 3.  [Varying](#varying) (정점 셰이더에서 전달되고 보간된 데이터)
 
 ### 프래그먼트 셰이더의 Uniform

webgl/lessons/ko/webgl-smallest-programs.md

@@ -184,7 +184,7 @@ void main() {
 이제 이를 단순하게 유지하기 위해 [데이터 텍스처에 대한 글](webgl-data-textures.html)에서 다룬 것처럼 원본 데이터로 만들어 보겠습니다.
 
 ```js
-// 2x2 pixel data
+// 2x2 픽셀 데이터
 const pixels = new Uint8Array([
   0xFF, 0x00, 0x00, 0xFF,  // 빨간색
   0x00, 0xFF, 0x00, 0xFF,  // 초록색