ko: clip space -> 클립 공간

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);
 
-      // 이 행렬은 픽셀에서 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`라는 이미지를 그리는 용도의 굉장히 
 
       ...
 
-      // 이 행렬은 픽셀에서 clip space로 변환합니다.
+      // 이 행렬은 픽셀에서 클립 공간으로 변환합니다.
       var projectionMatrix = m3.projection(canvas.width, canvas.height, 1);
 
     *  // 이 행렬은 사각형을 1단위에서 dstWidth,dstHeight 단위로 크기 조정합니다.
@@ -312,7 +312,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
 
       ...
 
-      // 이 행렬은 픽셀에서 clip space로 변환합니다.
+      // 이 행렬은 픽셀에서 클립 공간으로 변환합니다.
       var projectionMatrix = m3.projection(canvas.width, canvas.height, 1);
 
       // 이 행렬은 사각형을 1단위에서 dstWidth,dstHeight 단위로 크기 조정합니다.
@@ -362,7 +362,7 @@ Canvas 2D API에서 최선의 경우 에러거나 최악의 경우 정의되지
 
 텍스처 행렬 코드를 이걸로 변경합니다.
 
-    *  // Clip space가 texture space(0 ~ 1)을 대신한 걸 제외하고는 2D 투영 행렬과 같습니다.
+    *  // 클립 공간이 텍스처 공간(0 ~ 1)을 대신한 것 외에는 2D 투영 행렬과 같습니다.
     *  // 이 행렬은 우리를 픽셀 공간에 둡니다.
     *  var texMatrix = m4.scaling(1 / texWidth, 1 / texHeight, 1);
     *

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

@@ -373,7 +373,7 @@ matrix = m3.multiply(matrix, moveOriginMatrix);
 이제 Photoshop이나 Flash에서 어떻게 회전점을 이동시키는지 알게 되었습니다.
 
 더 끝내주는 걸 해봅시다.
-첫 번째 글인 [WebGL 기초](webgl-fundamentals.html)로 돌아가 보면, 셰이더에 픽셀을 clip space으로 변환하는 코드가 있다는 걸 기억하실 겁니다.
+첫 번째 글인 [WebGL 기초](webgl-fundamentals.html)로 돌아가 보면, 셰이더에 픽셀을 클립 공간으로 변환하는 코드가 있다는 걸 기억하실 겁니다.
 
 ```js
 ...
@@ -383,7 +383,7 @@ vec2 zeroToOne = position / u_resolution;
 // 0->1에서 0->2로 변환
 vec2 zeroToTwo = zeroToOne * 2.0;
 
-// 0->2에서 -1->+1로 변환 (clip space)
+// 0->2에서 -1->+1로 변환 (클립 공간)
 vec2 clipSpace = zeroToTwo - 1.0;
 
 gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
@@ -527,25 +527,25 @@ matrix = m3.scale(matrix, scale[0], scale[1]);
 
     translatedRotatedScaledPosition = translationMat * rotatedScaledPosition
 
-마지막으로 clip space의 위치를 얻기 위해 projection matrix에 곱하는데
+마지막으로 클립 공간의 위치를 얻기 위해 projection matrix에 곱하는데
 
     clipspacePosition = projectioMatrix * translatedRotatedScaledPosition
 
 두 번째 방법은 행렬을 왼쪽에서 오른쪽으로 읽는 건데요.
 이 경우 각각의 행렬은 캔버스에 표시되는 *space*를 변경합니다.
-캔버스는 각 방향에서 clip space(-1 ~ +1)를 표시하는 것으로 시작하는데요.
+캔버스는 각 방향에서 클립 공간(-1 ~ +1)을 표시하는 것으로 시작하는데요.
 왼쪽에서 오른쪽으로 적용된 각 행렬은 캔버스에 표시되는 space를 변경합니다.
 
 1단계: 행렬 없음 (혹은 단위 행렬)
 
-> {{{diagram url="resources/matrix-space-change.html?stage=0" caption="clip space" }}}
+> {{{diagram url="resources/matrix-space-change.html?stage=0" caption="클립 공간" }}}
 >
-> 흰색 영역은 캔버스입니다. 파랑색은 캔버스 바깥입니다. 우리는 clip space에 있습니다.
-> 전달된 위치는 clip space에 있어야 합니다.
+> 흰색 영역은 캔버스입니다. 파랑색은 캔버스 바깥입니다. 우리는 클립 공간에 있습니다.
+> 전달된 위치는 클립 공간에 있어야 합니다.
 
 2단계:  `matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);`
 
-> {{{diagram url="resources/matrix-space-change.html?stage=1" caption="clip space에서 픽셀 공간으로" }}}
+> {{{diagram url="resources/matrix-space-change.html?stage=1" caption="클립 공간에서 픽셀 공간으로" }}}
 >
 > 이제 픽셀 공간에 있습니다. X = 0에서 400, Y = 0에서 300, 왼쪽 상단은 0,0 입니다.
 > 이 행렬을 사용하여 전달된 위치는 픽셀 공간에 있어야 합니다.
@@ -590,7 +590,7 @@ matrix = m3.scale(matrix, scale[0], scale[1]);
 왜일까요?
 </p>
 <p>
-Projection matrix은 clip space(각 치수마다 -1 ~ +1)를 가져와서 다시 픽셀로 변환하는 방법과 관련이 있습니다.
+투영 행렬은 클립 공간(각 치수마다 -1 ~ +1)를 가져와서 다시 픽셀로 변환하는 방법과 관련이 있습니다.
 하지만 브라우저에는 두 가지 type의 픽셀이 있는데요.
 하나는 캔버스 자체의 픽셀 수입니다.
 예를 들어 이렇게 정의된 캔버스가 있습니다.

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

@@ -109,7 +109,7 @@ MatrixStack.prototype.scale = function(x, y, z) {
 이전 강의인 [`drawImage`](webgl-2d-drawimage.html)에 이런 코드들이 있었습니다.
 
 ```
-// 이 행렬은 픽셀에서 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();
 그리고 스택의 최상단 행렬에 곱합니다.
 
 ```
-// 이 행렬은 픽셀에서 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

@@ -32,7 +32,7 @@ Translation을 업데이트한 후에 이 함수를 호출할 수 있습니다.
   function drawScene() {
     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
 
-    // Clip space에서 픽셀로 변환하는 방법을 WebGL에 지시
+    // 클립 공간에서 픽셀로 변환하는 방법을 WebGL에 지시
     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
     // 캔버스 지우기

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

@@ -171,9 +171,9 @@ WebGL에는 depth sorting을 훨씬 더 쉽게 만드는 depth buffer가 있습
 수학 라이브러리인거죠.
 해당 수학이 1D, 2D, 3D인 것에 상관없이 수식에 사용합니다.
 하지만 궁극적으로 WebGL은 래스터화만 하는데요.
-그리려는 걸 나타내는 clip space 좌표를 제공해야 합니다.
+그리려는 걸 나타내는 클립 공간 좌표를 제공해야 합니다.
 물론 x,y,z,w를 제공하고, 렌더링하기 전에 W로 나누지만, 그걸로 WebGL을 3D 라이브러리로 한정하기엔 충분하지 않습니다.
-3D 라이브러리에 3D 데이터를 제공하면 라이브러리는 3D에서 clip space point를 계산합니다.
+3D 라이브러리에 3D 데이터를 제공하면 라이브러리는 3D에서 클립 공간 포인트를 계산합니다.
 
 몇 가지 참고할만한 사항들을 더 드리자면, [emscripten](https://emscripten.org/)은 WebGL 위에서 돌아가는 OpenGL 에뮬레이션을 제공합니다.
 해당 코드는 [여기](https://github.com/emscripten-core/emscripten/blob/master/src/library_glemu.js)에 있는데요.

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

@@ -8,7 +8,7 @@ TOC: 3D Orthographic
 아직 읽지 않으셨다면 해당 글들을 먼저 읽어주세요.
 
 마지막 포스트에서 우리는 2D 행렬이 어떻게 동작하는지 살펴봤습니다.
-translation, rotation, scale, 그리고 픽셀에서 clip space으로 투영하는 것까지 하나의 행렬과 행렬 수학으로 처리할 수 있는 방법에 대해 얘기했었는데요.
+이동, 회전, 크기 조정, 그리고 픽셀에서 클립 공간으로 투영하는 것까지 하나의 행렬과 행렬 수학으로 처리할 수 있는 방법에 대해 얘기했었는데요.
 거기서 한 걸음만 더 나아가면 3D를 할 수 있습니다.
 
 이전 2D 예제에서는 3x3 행렬을 곱한 2D point(x, y)를 가졌었는데요.
@@ -309,7 +309,7 @@ X 회전
 ```
 
 또한 투영 함수를 업데이트해야 합니다.
-다음은 픽셀에서 clip space로 변환하는 기존 코드입니다.
+다음은 픽셀에서 클립 공간으로 변환하는 기존 코드입니다.
 
 ```
   projection: function (width, height) {
@@ -337,7 +337,7 @@ X 회전
   },
 ```
 
-X와 Y를 픽셀 공간에서 clip space로 변환해야 했던 것처럼 Z도 동일한 작업을 수행해야 합니다.
+X와 Y를 픽셀 공간에서 클립 공간으로 변환해야 했던 것처럼 Z도 동일한 작업을 수행해야 합니다.
 이 경우에는 Z축 픽셀 단위도 만들게 되는데요.
 `depth`에 `width`와 비슷한 값을 전달할 것이므로, 공간은 0px에서 `width`px의 너비와, 0px에서 `height`px의 높이가 되지만, `depth`는 `-depth / 2`에서 `+depth / 2`가 됩니다.
 
@@ -512,7 +512,7 @@ WebGL은 삼각형의 앞면 혹은 뒷면만 그릴 수도 있는데요.
 해당 기능을 켜면 WebGL은 기본적으로 삼각형 뒷면을 "culling"으로 설정하는데요.
 이 경우 "culling"은 "그리지 않음"을 의미하는 단어입니다.
 
-참고로 WebGL에서 삼각형이 시계 혹은 반시계 방향으로 진행되는지는 clip space에 있는 해당 삼각형의 정점에 따라 달라집니다.
+참고로 WebGL에서 삼각형이 시계 혹은 반시계 방향으로 진행되는지는 클립 공간에 있는 해당 삼각형의 정점에 따라 달라집니다.
 즉 WebGL은 정점 셰이더에서 정점에 수식을 적용한 후에 삼각형이 앞면인지 뒷면인지 파악합니다.
 이건 X에서 -1로 크기가 조정되거나 180도 회전한 시계 방향 삼각형은 반시계 방향 삼각형이 된다는 걸 의미하는데요.
 CULL_FACE를 꺼놨기 때문에 시계 방향(앞면)과 반시계 방향(뒷면) 삼각형을 모두 볼 수 있었습니다.
@@ -556,7 +556,7 @@ DEPTH BUFFER를 입력해봅시다.
 때때로 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)에 있습니다.
+X와 Y를 클립 공간으로 변환해야 했던 것처럼 Z도 클립 공간(-1에서 +1)에 있습니다.
 해당 값은 depth space 값(0에서 +1)으로 변환됩니다.
 WebGL은 color pixel을 그리기 전에 대응하는 depth pixel을 검사하는데요.
 그릴 픽셀의 depth 값이 대응하는 depth pixel의 값보다 클 경우 WebGL은 새로운 color pixel을 그리지 않습니다.
@@ -589,7 +589,7 @@ WebGL은 color pixel을 그리기 전에 대응하는 depth pixel을 검사하
 3D를 얻게 됩니다!
 
 한 가지 사소한 게 남았는데요.
-대부분의 3D 수학 라이브러리에는 clip space에서 픽셀 공간으로 변환하는 `projection` 함수가 없습니다.
+대부분의 3D 수학 라이브러리에는 클립 공간에서 픽셀 공간으로 변환하는 `projection` 함수가 없습니다.
 그보다는 보통 `ortho`나 `orthographic`이라 불리는 함수가 있습니다.
 
     var m4 = {

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

@@ -17,8 +17,8 @@ TOC: 원근 교정 텍스처 매핑
 
 {{{diagram url="resources/fragment-shader-anim.html" width="600" height="400" caption="v_color는 v0, v1, v2 사이에서 보간" }}}
 
-[첫 번째 글](webgl-fundamentals.html)로 돌아가보면 우리는 clip space에서 삼각형을 그렸는데요.
-다음과 같이 간단한 정점 셰이더에 clip space 좌표를 전달했습니다.
+[첫 번째 글](webgl-fundamentals.html)로 돌아가보면 우리는 클립 공간에서 삼각형을 그렸는데요.
+다음과 같이 간단한 정점 셰이더에 클립 공간 좌표를 전달했습니다.
 
       // Attribute는 버퍼에서 데이터를 받음
       attribute vec4 a_position;
@@ -41,7 +41,7 @@ TOC: 원근 교정 텍스처 매핑
         gl_FragColor = vec4(1, 0, 0.5, 1); // 붉은 보라색 반환
       }
 
-Clip space에 2개의 사각형을 그리도록 만들어봅시다.
+클립 공간에 2개의 사각형을 그리도록 만들어봅시다.
 각 정점의 `X`, `Y`, `Z`, `W`인 데이터를 전달할 겁니다.
 
     var positions = [
@@ -287,8 +287,8 @@ void main() {
 이는 위의 선형 보간 방정식과 동일합니다.
 
 이제 왜 WebGL이 4x4 행렬과 `X`, `Y`, `Z`, `W`가 있는 4개의 벡터를 사용하는지 이해가 되셨으면 좋겠습니다.
-`X`와 `Y`는 `W`로 나누어 clipspace 좌표를 얻습니다.
-`W`로 나누는 `Z`도 clipspace 좌표를 얻으며, `W`는 varying의 보간 중에 계속 사용되고 원근 교정 텍스처 매핑 기능을 제공합니다.
+`X`와 `Y`는 `W`로 나누어 클립 공간 좌표를 얻습니다.
+`W`로 나누는 `Z`도 클립 공간 좌표를 얻으며, `W`는 varying의 보간 중에 계속 사용되고 원근 교정 텍스처 매핑 기능을 제공합니다.
 
 <div class="webgl_bottombar">
 <h3>1990년대 중반 게임 콘솔</h3>

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

@@ -17,7 +17,7 @@ Perspective가 뭘까요?
 <img class="webgl_center noinvertdark" width="500" src="resources/perspective-example.svg" />
 
 위 예시를 보면 더 멀리 있는 것들이 더 작게 그려지는 걸 볼 수 있습니다.
-주어진 현재 샘플에서 더 멀리 있는 것들이 더 작게 보이도록 만드는 쉬운 방법은 clip space의 X와 Y를 Z로 나누는 겁니다.
+주어진 현재 샘플에서 더 멀리 있는 것들이 더 작게 보이도록 만드는 쉬운 방법은 클립 공간의 X와 Y를 Z로 나누는 겁니다.
 
 (10, 15)에서 (20,15)까지 길이가 10인 선이 있다고 생각해보세요.
 현재 샘플에서 이건 10px의 길이로 그려질 겁니다.
@@ -46,7 +46,7 @@ abs(3.333 - 6.666) = 3.333
 </pre>
 
 Z가 증가할수록, 멀어질수록, 더 작게 그려지는 걸 볼 수 있습니다.
-Clip space에서 나누면 Z가 더 작은 숫자(-1 ~ +1)이기 때문에 더 나은 결과를 얻을 수 있는데요.
+클립 공간에서 나누면 Z가 더 작은 숫자(-1 ~ +1)이기 때문에 더 나은 결과를 얻을 수 있는데요.
 나누기 전에 Z를 fudgeFactor와 곱하면 주어진 거리에 따라 얼마나 작게 할지 조정할 수 있습니다.
 
 한 번 해봅시다.
@@ -70,7 +70,7 @@ void main() {
 </script>
 ```
 
-참고로 Z가 -1에서 +1인 clip space에 있기 때문에, 0에서 +2 * fudgeFactor인 `zToDivideBy`를 얻기 위해 1을 더했습니다.
+참고로 Z가 -1에서 +1인 클립 공간에 있기 때문에, 0에서 +2 * fudgeFactor인 `zToDivideBy`를 얻기 위해 1을 더했습니다.
 
 또한 fudgeFactor를 설정할 수 있도록 코드를 업데이트해야 합니다.
 
@@ -282,7 +282,7 @@ function makeZToWMatrix(fudgeFactor) {
 
 어떻게 된거죠?
 F가 일찍 사라지는 이유는 뭘까요?
-WebGL은 X와 Y 혹은 +1에서 -1까지 clipping을 하는 것처럼 Z도 clipping을 하는데요.
+WebGL은 X와 Y 혹은 +1에서 -1까지 클리핑하는 것처럼 Z도 클리핑하는데요.
 여기서 우리가 보고 있는 건 Z < -1 입니다.
 
 이를 해결하기 위해 수학에 대한 자세한 설명을 할 수도 있지만 [2D 투영을 했던 것과 같은 방법](https://stackoverflow.com/a/28301213/128511)으로 도출할 수도 있습니다.
@@ -311,7 +311,7 @@ var m4 = {
 ```
 
 이 행렬이 모든 변환을 수행할 겁니다.
-단위가 clip space 안에 있도록 조정되며, 각도별로 시야각을 선택할 수 있고, Z-clipping space를 선택할 수 있게 되는데요.
+단위가 클립 공간 안에 있도록 조정되며, 각도별로 시야각을 선택할 수 있고, Z-clipping 공간을 선택할 수 있게 되는데요.
 원점(0, 0, 0)에 *눈*이나 *카메라*가 있다고 가정하고, `zNear`와 `fieldOfView`가 주어지면, `zNear`의 항목이 `Z = -1`이 되는데 필요한 값을 계산하며, 중심에서 위나 아래로 `fieldOfView`의 절반인 `zNear`의 항목은 각각 `Y = -1`과 `Y = 1`로 끝납니다.
 전달된 `aspect`를 곱하여 X에 사용할 값을 계산하는데요.
 일반적으로 디스플레이 영역의 `width / height`로 설정합니다.
@@ -322,7 +322,7 @@ var m4 = {
 {{{example url="../frustum-diagram.html" width="400" height="600" }}}
 
 내부에서 큐브가 회전하고 있는 4면 원뿔 모양을 "절두체"라고 합니다.
-행렬은 절두체 안에 있는 공간을 가져와서 clip space로 변환하는데요.
+행렬은 절두체 안에 있는 공간을 가져와서 클립 공간으로 변환하는데요.
 `zNear`은 물체의 앞쪽이 잘리는 곳을 정의하고, `zFar`은 물체의 뒤쪽이 잘리는 곳을 정의합니다.
 `zNear`을 23으로 설정하면 회전하는 큐브의 앞면이 잘리는 걸 볼 수 있죠.
 `zFar`을 24로 설정하면 큐브의 뒷면이 잘리는 걸 볼 수 있습니다.
@@ -365,7 +365,7 @@ matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);
 왜 그렇게 멀리 옮겨야 했을까요?
 </p>
 <p>
-그 이유는 마지막 샘플까지 <code>m4.projection</code> 함수가 픽셀에서 clip space로 투영을 만들었기 때문입니다.
+그 이유는 마지막 샘플까지 <code>m4.projection</code> 함수가 픽셀에서 클립 공간으로 투영을 만들었기 때문입니다.
 이는 우리가 표시하고 있던 영역이 400x300px을 나타냈다는 걸 의미하는데요.
 3D에서 '픽셀'을 사용하는 건 정말 의미가 없습니다.
 </p>

webgl/lessons/ko/webgl-cross-platform-issues.md

@@ -145,7 +145,7 @@ WebGL은 다양한 최소 지원 기능이 있지만 로컬 장치에서는 최
 </div>
 
 이건 전체 목록이 아닌데요.
-최대 점 크기와 최대 선 두께 등이 있지만 기본적으로 최대 선 두께는 1.0이고 POINTS는 [clipping issue](#points-lines-viewport-scissor-behavior)를 신경쓰지 않아도 되는 간단한 데모에서만 유용하다고 가정해야 합니다.
+최대 점 크기와 최대 선 두께 등이 있지만 기본적으로 최대 선 두께는 1.0이고 POINTS는 [클리핑 문제](#points-lines-viewport-scissor-behavior)를 신경쓰지 않아도 되는 간단한 데모에서만 유용하다고 가정해야 합니다.
 
 WebGL2는 몇 가지 더 추가합니다.
 몇 가지 일반적인 것들은
@@ -261,11 +261,11 @@ void main() {
 ## Points, Lines, Viewport, Scissor 동작
 
 WebGL의 `POINTS`와 `LINES`는 최대 크기 1을 가질 수 있고 현재 가장 일반적인 제한인 `LINES`의 경우입니다.
-또한 중심이 viewport 외부에 있을 때 point의 clipping 여부는 구현에 정의됩니다.
+또한 중심이 viewport 외부에 있을 때 포인트의 클리핑 여부는 구현에 정의됩니다.
 [이 글의 하단](webgl-drawing-without-data.html#pointissues)을 봐주세요.
 
-마찬가지로, viewport가 정점만 clipping을 하는지 혹은 픽셀도 clipping을 하는지 여부는 정의되지 않았습니다.
-Scissor는 항상 pixel clipping을 하므로 scissor 테스트를 켜고, 그리려는 것들과 그리고 있는 LINES나 POINTS보다 viewport를 작게 설정했다면 scissor 크기를 설정하세요.
+마찬가지로, viewport가 정점만 클리핑을 하는지 혹은 픽셀도 클리핑을 하는지 여부는 정의되지 않았습니다.
+Scissor는 항상 픽셀 클리핑하기 때문에 scissor 테스트를 켜고, 그리려는 것들과 그리고 있는 LINES나 POINTS보다 viewport를 작게 설정했다면 scissor 크기를 설정하세요.
 
 ## 사파리 버그