ko: vocabulary

Author: 태재영

webgl/lessons/ko/vocabulary.md

@@ -0,0 +1,50 @@
+추후 번역하실 분들을 위해 정리합니다.
+
+shader 셰이더
+vertex 정점
+fragment 프래그먼트
+space 공간
+texture 텍스처
+varying 베링
+attachment 어태치먼트
+geometry 지오메트리
+rasterization 래스터화
+primitive 프리미티브
+attribute 속성
+uniform 유니폼
+buffer 버퍼
+viewport 뷰포트
+bind 바인드(명사)/바인딩(동사)
+boilerplate 상용구
+orientation 오리엔테이션
+translation 평행 이동
+rotation 회전
+scale 스케일(명사)/크기 조정(동사)
+fallback 폴백
+stride 스트라이드
+normalize 정규화
+sampler 샘플러
+unit 유닛
+hue 색조
+saturation 채도
+luminance 휘도
+brightness 밝기
+contrast 대비
+sine 사인
+cosine 코사인
+radian 라디안
+projection 투영
+culling 컬링
+fudge factor 퍼지 팩터
+scene 장면
+shininess 광택
+specular 반사
+getter 접근자
+setter 설정자
+shape 도형
+material 머티리얼
+lathe 선반 가공
+smoothing group 스무딩 그룹
+method 메서드
+mipmap 밉맵
+decal 데칼

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

@@ -3,7 +3,7 @@ Description: WebGL에서 Canvas 2D의 drawImage 함수를 구현하는 방법
 TOC: 2D - DrawImage
 
 
-이 글은 [WebGL orthographic 3D](webgl-3d-orthographic.html)에서 이어집니다.
+이 글은 [WebGL 3D 직교 투영](webgl-3d-orthographic.html)에서 이어집니다.
 아직 읽지 않았다면 [거기](webgl-3d-orthographic.html)부터 시작하는 게 좋습니다.
 또한 텍스처와 텍스처 좌표가 어떻게 작동하는지 알아야 하기 때문에 [WebGL 3D 텍스처](webgl-3d-textures.html)를 읽어주세요.
 
@@ -33,7 +33,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
 비슷한 WebGL 기반의 함수를 만들기 위해 `x, y`, `x + width, y`, `x, y + height`, `x + width, y + height`에 대한 정점을 업로드한 다음, 다른 위치에 다른 이미지를 그릴 때 다른 정점 세트를 생성합니다.
 
 하지만 더 일반적인 방법은 단위 사각형을 사용하는 겁니다.
-1단위 크기의 사각형 하나를 업로드합니다.
+크기가 1인 사각형 하나를 업로드합니다.
 그런 다음 [행렬 수학](webgl-2d-matrices.html)을 사용하여 해당 단위 사각형의 크기를 조정하고 이동시켜 원하는 위치에 있도록 합니다.
 
 먼저 간단한 정점 셰이더가 필요합니다.
@@ -71,7 +71,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
       // 셰이더 프로그램 쌍을 사용하도록 WebGL에 지시
       gl.useProgram(program);
 
-      // 버퍼에서 데이터를 가져오기 위한 attribute 설정
+      // 버퍼에서 데이터를 가져오기 위한 속성 설정
       gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
       gl.enableVertexAttribArray(positionLocation);
       gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
@@ -85,7 +85,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
       // 이 행렬은 사각형을 dstX,dstY로 이동시킵니다.
       matrix = m4.translate(matrix, dstX, dstY, 0);
 
-      // 이 행렬은 사각형을 1단위에서 texWidth,texHeight 단위로 크기를 조정합니다.
+      // 이 행렬은 사각형을 1유닛에서 texWidth,texHeight 유닛으로 크기를 조정합니다.
       matrix = m4.scale(matrix, texWidth, texHeight, 1);
 
       // 행렬 설정
@@ -224,7 +224,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
       // 이 행렬은 픽셀에서 클립 공간으로 변환합니다.
       var projectionMatrix = m3.projection(canvas.width, canvas.height, 1);
 
-    *  // 이 행렬은 사각형을 1단위에서 dstWidth,dstHeight 단위로 크기 조정합니다.
+    *  // 이 행렬은 사각형을 1유닛에서 dstWidth,dstHeight 유닛으로 크기 조정합니다.
     *  var scaleMatrix = m4.scaling(dstWidth, dstHeight, 1);
 
       // 이 행렬은 사각형을 dstX,dstY로 이동시킵니다.
@@ -315,7 +315,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
       // 이 행렬은 픽셀에서 클립 공간으로 변환합니다.
       var projectionMatrix = m3.projection(canvas.width, canvas.height, 1);
 
-      // 이 행렬은 사각형을 1단위에서 dstWidth,dstHeight 단위로 크기 조정합니다.
+      // 이 행렬은 사각형을 1유닛에서 dstWidth,dstHeight 유닛으로 크기 조정합니다.
       var scaleMatrix = m4.scaling(dstWidth, dstHeight, 1);
 
       // 이 행렬은 사각형을 dstX,dstY로 이동시킵니다.
@@ -349,7 +349,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
 
 Canvas 2D API와 달리 WebGL 버전은 Canvas 2D `drawImage`가 처리하지 않는 경우를 처리합니다.
 
-한 가지 경우로 source나 dest에 대해 음수 너비와 높이를 전달할 수 있습니다.
+한 가지 경우로 `source`나 `dest`에 대해 음수 너비와 높이를 전달할 수 있습니다.
 음수 `srcWidth`는 `srcX`의 왼쪽에 있는 픽셀을 선택합니다.
 음수 `dstWidth`는 `dstX`의 왼쪽에 그려집니다.
 Canvas 2D API에서 최선의 경우 에러거나 최악의 경우 정의되지 않은 동작이 발생할 수 있습니다.
@@ -372,7 +372,7 @@ Canvas 2D API에서 최선의 경우 에러거나 최악의 경우 정의되지
     *  var texMatrix = m4.zRotate(texMatrix, srcRotation);
     *  var texMatrix = m4.translate(texMatrix, texWidth * -0.5, texHeight * -0.5, 0);
     *
-    *  // 픽셀 공간에 있기 때문에 scale과 translation은 이제 픽셀 단위입니다.
+    *  // 픽셀 공간에 있기 때문에 "scale"과 "translation"은 이제 픽셀 단위입니다.
     *  var texMatrix = m4.translate(texMatrix, srcX, srcY, 0);
     *  var texMatrix = m4.scale(texMatrix, srcWidth, srcHeight, 1);
 
@@ -422,7 +422,7 @@ Canvas 2D API에서 최선의 경우 에러거나 최악의 경우 정의되지
            v_texcoord.y < 0.0 ||
            v_texcoord.x > 1.0 ||
            v_texcoord.y > 1.0) {
-    *     gl_FragColor = vec4(0, 0, 1, 1); // blue
+    *     gl_FragColor = vec4(0, 0, 1, 1); // 파란색
     +     return;
        }
        gl_FragColor = texture2D(texture, v_texcoord);
@@ -442,7 +442,7 @@ Canvas 2D API에서 최선의 경우 에러거나 최악의 경우 정의되지
 WebGL은 제공하는 기능의 창의적인 사용이 전부기 때문에 오히려 더 창의적인 방법을 권장하고 싶습니다.
 </p>
 <p>
-아마 위치에 단위 사각형을 사용하고 이러한 단위 사각형의 위치가 텍스처 좌표와 정확히 일치한다는 걸 눈치채셨을 겁니다.
+아마 위치에 단위 사각형을 사용하고 이러한 단위 사각형의 위치가 텍스처 좌표와 정확히 일치한다는 것을 눈치채셨을 겁니다.
 따라서 위치를 텍스처 좌표처럼 사용할 수 있습니다.
 </p>
 <pre class="prettyprint showlinemods">

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

@@ -540,7 +540,7 @@ matrix = m3.scale(matrix, scale[0], scale[1]);
 
 > {{{diagram url="resources/matrix-space-change.html?stage=0" caption="클립 공간" }}}
 >
-> 흰색 영역은 캔버스입니다. 파랑색은 캔버스 바깥입니다. 우리는 클립 공간에 있습니다.
+> 흰색 영역은 캔버스입니다. 파란색은 캔버스 바깥입니다. 우리는 클립 공간에 있습니다.
 > 전달된 위치는 클립 공간에 있어야 합니다.
 
 2단계:  `matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);`

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

@@ -1,22 +1,22 @@
 Title: WebGL 행렬 스택 구현
-Description: WebGL에서 Canvas 2D의 translate/rotate/scale 함수를 구현하는 방법
+Description: WebGL에서 Canvas 2D의 평행 이동/회전/스케일 함수를 구현하는 방법
 TOC: 2D - 행렬 스택
 
 
 이 글은 [WebGL 2D DrawImage](webgl-2d-drawimage.html)에서 이어집니다.
 아직 읽지 않았다면 [거기](webgl-2d-drawimage.html)부터 시작하는 게 좋습니다.
 
-지난 글에서 우리는 source rectangle과 destination rectangle을 모두 지정하는 기능을 포함하여 Canvas 2D의 `drawImage` 함수와 동일한 WebGL을 구현했습니다.
+지난 글에서 우리는 원본 사각형과 결과 사각형을 모두 지정하는 기능을 포함하여 Canvas 2D의 `drawImage` 함수와 동일한 WebGL을 구현했습니다.
 
 아직 하지 않은 것은 임의의 지점에서 회전 및 크기 조정하는 겁니다.
-더 많은 매개변수를 추가하여 이를 수행할 수 있으며, 최소한 중심점과 rotation 그리고 x와 y의 scale을 지정해야 합니다.
+더 많은 매개변수를 추가하여 이를 수행할 수 있으며, 최소한 중심점과 회전 그리고 x와 y의 스케일을 지정해야 합니다.
 다행히 더 일반적이고 유용한 방법이 있습니다.
 Canvas 2D API가 이를 수행하는 방법은 행렬 스택을 사용하는 겁니다.
 Canvas 2D API의 행렬 스택 함수는 `save`, `restore`, `translate`, `rotate`, `scale`이 있습니다.
 
 행렬 스택은 구현하기 매우 간단합니다.
 우선 행렬의 스택을 만듭니다.
-그리고 [이전에 만들었던 함수들](webgl-2d-matrices.html)을 이용하여 translation, rotation, scale 행렬로 스택의 최상단 행렬을 곱하는 함수를 만들면 되는데요.
+그리고 [이전에 만들었던 함수들](webgl-2d-matrices.html)을 이용하여 평행 이동, 회전, 스케일 행렬로 스택의 최상단 행렬을 곱하는 함수를 만들면 되는데요.
 
 다음은 구현입니다.
 
@@ -39,7 +39,7 @@ MatrixStack.prototype.restore = function() {
   }
 };
 
-// Current matrix의 복사본을 스택에 복사
+// 현재 행렬의 복사본을 스택에 복사
 MatrixStack.prototype.save = function() {
   this.stack.push(this.getCurrentMatrix());
 };
@@ -48,44 +48,44 @@ MatrixStack.prototype.save = function() {
 또한 최상단 행렬을 가져오고 설정하기 위한 함수가 필요합니다.
 
 ```
-// Current matrix(스택의 최상단)의 복사본 가져오기
+// 현재 행렬(스택의 최상단)의 복사본 가져오기
 MatrixStack.prototype.getCurrentMatrix = function() {
   return this.stack[this.stack.length - 1].slice();
 };
 
-// Current matrix 설정
+// 현재 행렬 설정
 MatrixStack.prototype.setCurrentMatrix = function(m) {
   return this.stack[this.stack.length - 1] = m;
 };
 ```
 
-마지막으로 이전의 행렬 함수를 이용하여`translate`, `rotate`, `scale`을 구현해야 합니다.
+마지막으로 이전의 행렬 함수를 이용하여 `translate`, `rotate`, `scale`을 구현해야 합니다.
 
 ```
-// Current matrix 이동
+// 현재 행렬 이동
 MatrixStack.prototype.translate = function(x, y, z) {
   var m = this.getCurrentMatrix();
   this.setCurrentMatrix(m4.translate(m, x, y, z));
 };
 
-// Z를 중심으로 current matrix 회전
+// Z를 중심으로 현재 행렬 회전
 MatrixStack.prototype.rotateZ = function(angleInRadians) {
   var m = this.getCurrentMatrix();
   this.setCurrentMatrix(m4.zRotate(m, angleInRadians));
 };
 
-// Current matrix 크기 조정
+// 현재 행렬 크기 조정
 MatrixStack.prototype.scale = function(x, y, z) {
   var m = this.getCurrentMatrix();
   this.setCurrentMatrix(m4.scale(m, x, y, z));
 };
 ```
 
 3D 행렬 수학 함수를 사용하고 있는데요.
-Translation의 `z`에 `0`을 사용하고 scale의 `z`에 `1`을 사용할 수 있지만, Canvas 2D의 2D 함수 사용에 너무 익숙해서 종종 `z`에 대한 지정을 까먹어서 코드가 끊기므로 `z`를 선택적으로 만들어봅시다.
+`translate`의 `z`에 `0`을 사용하고 `scale`의 `z`에 `1`을 사용할 수 있지만, Canvas 2D의 2D 함수 사용에 너무 익숙해서 종종 `z`에 대한 지정을 까먹어서 코드가 끊기므로 `z`를 선택적으로 만들어봅시다.
 
 ```
-// Current matrix 이동
+// 현재 행렬 이동
 MatrixStack.prototype.translate = function(x, y, z) {
 +  if (z === undefined) {
 +    z = 0;
@@ -96,7 +96,7 @@ MatrixStack.prototype.translate = function(x, y, z) {
 
 ...
 
-// Current matrix 크기 조정
+// 현재 행렬 크기 조정
 MatrixStack.prototype.scale = function(x, y, z) {
 +  if (z === undefined) {
 +    z = 1;
@@ -115,7 +115,7 @@ var matrix = m4.orthographic(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
 // 이 행렬은 사각형을 dstX,dstY로 이동시킵니다.
 matrix = m4.translate(matrix, dstX, dstY, 0);
 
-// 이 행렬은 사각형을 1단위에서 dstWidth,dstHeight 단위로 크기를 조정합니다.
+// 이 행렬은 사각형을 1유닛에서 dstWidth,dstHeight 유닛으로 크기를 조정합니다.
 matrix = m4.scale(matrix, dstWidth, dstHeight, 1);
 ```
 
@@ -131,13 +131,13 @@ var matrixStack = new MatrixStack();
 // 이 행렬은 픽셀에서 클립 공간으로 변환합니다.
 var matrix = m4.orthographic(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
 
-+// 이 행렬은 원점을 current matrix stack에 해당하는 곳으로 이동시킵니다.
++// 이 행렬은 원점을 현재 행렬 스택에 해당하는 곳으로 이동시킵니다.
 +matrix = m4.multiply(matrix, matrixStack.getCurrentMatrix());
 
 // 이 행렬은 사각형을 dstX,dstY로 이동시킵니다.
 matrix = m4.translate(matrix, dstX, dstY, 0);
 
-// 이 행렬은 사각형을 1단위에서 dstWidth,dstHeight 단위로 크기를 조정합니다.
+// 이 행렬은 사각형을 1유닛에서 dstWidth,dstHeight 유닛으로 크기를 조정합니다.
 matrix = m4.scale(matrix, dstWidth, dstHeight, 1);
 ```
 
@@ -309,6 +309,6 @@ matrixStack.rotateZ(time);
 새로운 원점이므로 스택에 텍스처가 없다면 텍스처가 그려질 위치를 기준으로 원점이 이동할 곳을 결정하면 됩니다.
 
 행렬 스택이 이전에 다뤘던 [장면 그래프](webgl-scene-graph.html)와 굉장히 비슷하다는 것을 알아채셨을 겁니다.
-장면 그래프는 node tree가 있으며 tree를 탐색하면서 각 node를 parent node로 곱했습니다.
+장면 그래프는 노드 트리가 있으며 트리를 탐색하면서 각 노드를 부모 노드로 곱했습니다.
 행렬 스택은 사실상 동일한 프로세스의 또 다른 버전입니다.
 

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

@@ -19,7 +19,7 @@ WebGL의 경우 래스터화 API라고 부르는 게 중요하다고 생각한 
 WebGL과 OpenGL ES 2.0+는 모두 3D를 그리는데 사용되지만 이 설명에는 맞지 않습니다.
 
 비유를 위해, C++은 기본적으로 "process word"를 하지 않습니다.
-C++을 "word processor"라고 부르진 않지만 word processor가 C++로 작성될 수는 있습니다.
+C++을 "word processor"라고 부르진 않지만 워드 프로세서가 C++로 작성될 수는 있습니다.
 비슷하게 WebGL은 기본적으로 3D 그래픽을 그리지 않습니다.
 WebGL로 3D 그래픽을 그리는 라이브러리를 작성할 수는 있지만 그 자체로 3D 그래픽을 수행하진 않습니다.
 
@@ -34,7 +34,7 @@ WebGL로 3D 그래픽을 그리는 라이브러리를 작성할 수는 있지만
   renderer.setSize(c.clientWidth, c.clientHeight);
   c.appendChild(renderer.domElement);
 
-  // Camera 만들기 및 설정
+  // 카메라 만들기 및 설정
   camera = new THREE.PerspectiveCamera(
       70, c.clientWidth / c.clientHeight, 1, 1000);
   camera.position.z = 400;
@@ -152,11 +152,11 @@ WebGL을 3D 라이브러리라고 부르는 건 잘못된 것 같습니다.
 WebGL에 유입되는 사용자들은 "오, 3D 라이브러리다. 멋지다. 이걸로 3D를 할 수 있을 거야"라고 생각한 다음, 전혀 그렇지 않다는 걸 알아 냅니다.
 
 한 걸음 더 나아갈 수도 있습니다.
-다음은 캔버스로 wireframe cube를 그립니다.
+다음은 캔버스로 와이어프레임 큐브를 그립니다.
 
 {{{example url="resources/3d-in-canvas.html" }}}
 
-그리고 여기는 WebGL로 wireframe cube를 그립니다.
+그리고 여기는 WebGL로 와이어프레임 큐브를 그립니다.
 
 {{{example url="resources/3d-in-webgl.html" }}}
 
@@ -166,7 +166,7 @@ WebGL 버전은 우리가 제공한 수식이 GLSL에 있고 GPU에 의해 실
 
 마지막 데모의 요점은 WebGL이 사실상 Canvas 2D와 유사한 래스터화 엔진일 뿐이라는 걸 보여주는 겁니다.
 물론 WebGL은 3D를 구현하는데 도움이 되는 기능들을 가지고 있는데요.
-WebGL에는 depth sorting을 훨씬 더 쉽게 만드는 depth buffer가 있습니다.
+WebGL에는 깊이 정렬을 훨씬 더 쉽게 만드는 깊이 버퍼가 있습니다.
 또한 3D 수학을 처리하는데 유용한 수학 함수들이 내장되어 있지만 3D로 만드는 건 없습니다.
 수학 라이브러리인거죠.
 해당 수학이 1D, 2D, 3D인 것에 상관없이 수식에 사용합니다.

webgl/lessons/ko/webgl-and-alpha.md

@@ -71,11 +71,11 @@ WebGL은 이걸 좀 더 OpenGL처럼 만들기 위한 여러 방법을 가지고
 
 알파가 있는 이미지를 WebGL로 로딩하는 경우 저의 기본값입니다.
 WebGL은 미리 곱하지 않은 색상 값인 PNG 파일 그대로의 값을 제공할 겁니다.
-pre-multiplied는 손실인 반면 이건 무손실이기 때문에 일반적으로 OpenGL 프로그램에 사용됩니다.
+`pre-multiplied`는 손실인 반면 이건 무손실이기 때문에 일반적으로 OpenGL 프로그램에 사용됩니다.
 
     1, 0.5, 0.5, 0  // RGBA
 
-`r`, `g`, `b`가 0이 되는 걸 의미하는 `a = 0`이기 때문에 un-premultiplied는 가능한 값인 반면 pre-multiplied는 불가능한 값입니다.
+`r`, `g`, `b`가 0이 되는 걸 의미하는 `a = 0`이기 때문에 `un-premultiplied`는 가능한 값인 반면 `pre-multiplied`는 불가능한 값입니다.
 
 원한다면 WebGL이 알파를 미리 곱하도록 할 수 있습니다.
 이렇게 `UNPACK_PREMULTIPLY_ALPHA_WEBGL`를 true로 설정하여 이를 수행하는데
@@ -85,9 +85,9 @@ pre-multiplied는 손실인 반면 이건 무손실이기 때문에 일반적으
 기본값은 un-premultiplied 입니다.
 
 대부분의 Canvas 2D 구현은 pre-multiplied 알파로 작동한다는 점에 유의하세요.
-이는 WebGL로 전송하고 `UNPACK_PREMULTIPLY_ALPHA_WEBGL`이 false일 때 WebGL이 다시 un-premultipiled로 전환할 것임을 의미합니다.
+이는 WebGL로 전송하고 `UNPACK_PREMULTIPLY_ALPHA_WEBGL`이 false일 때 WebGL이 다시 `un-premultipiled`로 전환할 것임을 의미합니다.
 
-### #6) pre-multiplied 알파와 함께 작동하는 blending equation 사용
+### #6) pre-multiplied 알파와 함께 작동하는 혼합 방정식 사용
 
 제가 작성하거나 작업한 거의 모든 OpenGL 앱들이 사용 중인데
 

webgl/lessons/ko/webgl-animation.md

@@ -81,7 +81,7 @@ WebGL에서 무언가에 애니메이션을 적용하려면 어떻게 해야 할
        ...
 
 초 단위의 `deltaTime`이 있으면 모든 계산은 초당 어떤 일이 일어나길 원하는 단위 수가 될 수 있습니다.
-이 경우 `rotationSpeed`는 1.2고 이는 초당 1.2radian씩 회전한다는 걸 의미합니다.
+이 경우 `rotationSpeed`는 1.2고 이는 초당 1.2라디안씩 회전한다는 걸 의미합니다.
 이는 1/5 회전, 즉 프레임률에 상관없이 완전히 회전하는데 5초가 걸립니다.
 
     *    rotation[1] += rotationSpeed * deltaTime;