ko: multiple views

Author: 태재영

webgl/lessons/ko/langinfo.hanson

@@ -16,16 +16,16 @@
   categoryMapping: {
     'fundamentals': "기초",
     'image-processing': "이미지 처리",
-    'matrices': "2D Translation, Rotation, Scale, 행렬 수학",
+    'matrices': "2D 평행 이동, 회전, 스케일링, 행렬 수학",
     'lighting': "조명",
     'organization': "구조와 구성",
-    'geometry': "Geometry",
+    'geometry': "지오메트리",
     'textures': "텍스처",
     'shadows': "그림자",
     'rendertargets': "텍스처 렌더링",
     'techniques': "기법",
-    'text': "Text",
-    'tips': "Tip",
+    'text': "텍스트",
+    'tips': "팁",
     'reference': "참고",
     'optimization': "최적화",
   },

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

@@ -12,11 +12,11 @@ TOC: 2개 이상의 텍스처 사용
 하나의 이미지를 그리고 2개의 이미지로 업데이트하는 첫 번째 셰이더에 대한 [몇 가지 수업](webgl-image-processing.html)으로 돌아가 봅시다.
 
 먼저 해야할 일은 2개의 이미지를 로딩할 수 있도록 코드를 수정하는 겁니다.
-이건 실제로 WebGL이 아니라, HTML5 JavaScript가 할 일이지만, 우리가 다룰 수 있습니다.
+이건 실제로 WebGL이 아니라, HTML5 자바스크립트가 할 일이지만, 우리가 다룰 수 있습니다.
 이미지는 비동기적으로 로드되기 때문에 익숙해지는 데에 약간의 시간이 걸릴 수 있습니다.
 
 기본적으로 처리할 수 있는 2가지 방법이 있습니다.
-텍스처 없이 실행되고 텍스처가 로드되면 program이 업데이트하도록 코드를 구조화할 수 있는데요.
+텍스처 없이 실행되고 텍스처가 로드되면 프로그램이 업데이트하도록 코드를 구조화할 수 있는데요.
 이후의 글을 위해 해당 method를 저장해두겠습니다.
 
 이 경우 그리기 전에 모든 이미지가 로드되는 걸 기다릴 겁니다.

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

@@ -68,7 +68,7 @@ Canvas 2D API는 `drawImage`라는 이미지를 그리는 용도의 굉장히 
     function drawImage(tex, texWidth, texHeight, dstX, dstY) {
       gl.bindTexture(gl.TEXTURE_2D, tex);
 
-      // Shader program 쌍을 사용하도록 WebGL에 지시
+      // 셰이더 프로그램 쌍을 사용하도록 WebGL에 지시
       gl.useProgram(program);
 
       // 버퍼에서 데이터를 가져오기 위한 attribute 설정

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

@@ -7,7 +7,7 @@ TOC: 2D 행렬
 첫 번째는 [기초](webgl-fundamentals.html)로 시작했고, 이전에는 [2D geometry scale](webgl-2d-scale.html)에 관한 것이었습니다.
 
 <div class="webgl_bottombar">
-<h3>Math vs Programming vs WebGL</h3>
+<h3>수학 vs 프로그래밍 vs WebGL</h3>
 <p>선형 대수나 행렬로 작업한 경험이 있다면 시작하기 전에 <a href="webgl-matrix-vs-math.html"><b>이 글</b></a>을 먼저 읽어주세요.</p>
 <p>행렬에 대한 경험이 없다면 위의 링크를 건너뛰고 계속 읽으셔도 됩니다.</p>
 </div>
@@ -431,7 +431,7 @@ void main() {
 </script>
 ```
 
-그리고 javascript에서는 projection matrix로 곱해야 합니다.
+그리고 자바스크립트에서는 투영 행렬로 곱해야 합니다.
 
 ```js
 // 장면 그리기

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

@@ -49,7 +49,7 @@ TOC: 2D Rotation
       // Translation 추가
     *  vec2 position = rotatedPosition + u_translation;
 
-그리고 javascript를 업데이트해서 두 값을 전달할 수 있습니다.
+그리고 자바스크립트를 업데이트해서 두 값을 전달할 수 있습니다.
 
       ...
 
@@ -133,7 +133,7 @@ TOC: 2D Rotation
       console.log("s = " + s + " c = " + c);
     }
 
-Javascript console에 코드를 복사하고 `printSineAndCosignForAngle(30)`이라고 치면 `s = 0.49 c = 0.87`이 출력됩니다. (참고: 숫자는 반올림했습니다.)
+자바스크립트 콘솔에 코드를 복사하고 `printSineAndCosignForAngle(30)`이라고 치면 `s = 0.49 c = 0.87`이 출력됩니다. (참고: 숫자는 반올림했습니다.)
 
 전부 합치면 geometry를 원하는 각도로 회전할 수 있습니다.
 그저 돌리고 싶은 각도의 sine과 cosine으로 rotation을 설정하면 됩니다. 

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

@@ -33,7 +33,7 @@ void main() {
   vec2 position = rotatedPosition + u_translation;
 ```
 
-그리고 그릴 때 scale하기 위해 필요한 javascript를 추가합니다.
+그리고 그릴 때 scale하기 위해 필요한 자바스크립트를 추가합니다.
 
 ```
   ...

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

@@ -38,19 +38,19 @@ Translation을 업데이트한 후에 이 함수를 호출할 수 있습니다.
     // 캔버스 지우기
     gl.clear(gl.COLOR_BUFFER_BIT);
 
-    // program(셰이더 쌍) 사용 지시
+    // 프로그램(셰이더 쌍) 사용 지시
     gl.useProgram(program);
 
-    // position attribute 활성화
+    // 위치 속성 활성화
     gl.enableVertexAttribArray(positionLocation);
 
-    // position buffer 할당
+    // 위치 버퍼 할당
     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
     // 사각형 설정
     setRectangle(gl, translation[0], translation[1], width, height);
 
-    // positionBuffer(ARRAY_BUFFER)에서 데이터 가져오는 방법을 attribute에 지시
+    // positionBuffer(ARRAY_BUFFER)에서 데이터 가져오는 방법을 속성에 지시
     var size = 2;          // 반복마다 2개의 컴포넌트
     var type = gl.FLOAT;   // 데이터는 32비트 부동 소수점
     var normalize = false; // 데이터 정규화 안 함
@@ -125,8 +125,8 @@ function setGeometry(gl, x, y) {
 ```
 
 확장하기에 좋지 않겠다는 걸 눈치채셨을 겁니다.
-수백 수천 개의 선으로 이루어진 아주 복잡한 geometry를 그리려면 꽤 복잡한 코드를 작성해야 합니다.
-또한 javascript는 그릴 때마다 모든 점들을 업데이트해야 하는데요.
+수백 수천 개의 선으로 이루어진 아주 복잡한 지오메트리를 그리려면 꽤 복잡한 코드를 작성해야 합니다.
+또한 자바스크립트는 그릴 때마다 모든 점들을 업데이트해야 하는데요.
 
 더 간단한 방법이 있습니다.
 지오메트리를 업로드하고 셰이더에서 translation을 수행하면 됩니다.
@@ -233,7 +233,7 @@ function setGeometry(gl) {
 Translation을 설정하고 그려달라고 요청하는 게 우리가 하는 전부죠.
 심지어 geometry에 수만 개의 점들이 있더라도 주요 코드는 그대로 유지됩니다.
 
-원한다면 모든 점들을 업데이트하는 위의 [복잡한 javascript를 사용한 버전](../webgl-2d-geometry-translate.html)과 비교할 수 있습니다.
+원한다면 모든 점들을 업데이트하는 위의 [복잡한 자바스크립트를 사용한 버전](../webgl-2d-geometry-translate.html)과 비교할 수 있습니다.
 
 너무 뻔한 예제가 아니었기를 바랍니다.
 다른 한편으로 이걸 수행하는 훨씬 더 좋은 방법을 다룰 것이므로 계속 읽어주세요.

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

@@ -1,18 +1,18 @@
-Title: WebGL - Rasterization vs 3D 라이브러리
+Title: WebGL - 래스터화 vs 3D 라이브러리
 Description: 왜 WebGL은 3D 라이브러리가 아니며 그게 중요한 이유
 TOC: 2D vs 3D 라이브러리
 
 
 이 포스트는 WebGL 관련 시리즈의 부수적인 주제입니다.
 첫 번째는 [기초](webgl-fundamentals.html)로 시작했는데요.
 
-WebGL이 rasterization API이고 3D API가 아니라는 제 주장이 일부 사람들의 신경을 건드렸기 때문에 이걸 작성하고 있습니다.
-저는 WebGL을 rasterization API라고 불렀고 왜 그들이 위협을 느끼는지 혹은 무엇이 그렇게 화나게 만드는지 모르겠습니다.
+WebGL이 래스터화 API이고 3D API가 아니라는 제 주장이 일부 사람들의 신경을 건드렸기 때문에 이걸 작성하고 있습니다.
+저는 WebGL을 래스터화 API라고 불렀고 왜 그들이 위협을 느끼는지 혹은 무엇이 그렇게 화나게 만드는지 모르겠습니다.
 
 틀림없이 모든 건 관점의 문제일 겁니다.
 칼이 식기류라고 말할 수 있고, 다른 누군가는 칼이 도구라고 말할 수 있지만, 또 다른 사람은 칼이 무기라고 말할 수 있습니다.
 
-WebGL의 경우 rasterization API라고 부르는 게 중요하다고 생각한 이유가 있는데, 구체적으로는 WebGL을 사용해 3D로 무언가를 그리기 위해 필요한 3D 수학 지식의 양 때문입니다.
+WebGL의 경우 래스터화 API라고 부르는 게 중요하다고 생각한 이유가 있는데, 구체적으로는 WebGL을 사용해 3D로 무언가를 그리기 위해 필요한 3D 수학 지식의 양 때문입니다.
 
 저는 3D 라이브러리라고 부르는 모든 것이 여러분을 위한 3D 영역을 수행해야 한다고 생각합니다.
 라이브러리에 3D 데이터, 머티리얼 매개변수, 조명을 제공할 수 있어야 하며 3D를 그릴 수 있어야 합니다.
@@ -164,7 +164,7 @@ WebGL에 유입되는 사용자들은 "오, 3D 라이브러리다. 멋지다. 
 최종적으로 캔버스 버전은 정점을 반복하고, 우리가 제공한 수식을 수행하며 2D로 일부 선을 그립니다.
 WebGL 버전은 우리가 제공한 수식이 GLSL에 있고 GPU에 의해 실행된다는 걸 제외하면 동일한 작업을 수행합니다.
 
-마지막 데모의 요점은 WebGL이 사실상 Canvas 2D와 유사한 rasterization 엔진일 뿐이라는 걸 보여주는 겁니다.
+마지막 데모의 요점은 WebGL이 사실상 Canvas 2D와 유사한 래스터화 엔진일 뿐이라는 걸 보여주는 겁니다.
 물론 WebGL은 3D를 구현하는데 도움이 되는 기능들을 가지고 있는데요.
 WebGL에는 depth sorting을 훨씬 더 쉽게 만드는 depth buffer가 있습니다.
 또한 3D 수학을 처리하는데 유용한 수학 함수들이 내장되어 있지만 3D로 만드는 건 없습니다.

webgl/lessons/ko/webgl-3d-geometry-lathe.md

@@ -112,7 +112,7 @@ Lock 체크 박스를 해제한 다음 `P3`나 `P5`를 드래그해보면 별개
       return cpoints;
     }
 
-참고: `v2.mult`와 `v2.add`는 점으로 수식을 수행하는 데 유용하여 포함시킨 JavaScript 함수입니다.
+참고: `v2.mult`와 `v2.add`는 점으로 수식을 수행하는 데 유용하여 포함시킨 자바스크립트 함수입니다.
 
 {{{diagram url="resources/bezier-curve-diagram.html?maxDepth=0&showCurve=true&showPoints=true" }}}
 

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

@@ -497,7 +497,7 @@ mat3 방식이 더 깔끔해 보였지만 종종 이런 방식으로 해왔습
 또 다른 해결책은 <code>u_worldInverseTranspose</code>를 <code>mat3</code>로 만드는 겁니다.
 이렇게 하지 않은 2가지 이유가 있는데요.
 하나는 <code>u_worldInverseTranspose</code> 전체에 대한 다른 요구 사항이 있을 수 있으므로 <code>mat4</code> 전체를 전달하면 다른 요구 사항에 대해 사용할 수 있습니다.
-또 다른 이유로 JavaScript의 모든 행렬 함수는 4x4 행렬을 만듭니다.
+또 다른 이유로 자바스크립트의 모든 행렬 함수는 4x4 행렬을 만듭니다.
 3x3 행렬에 대해 완전히 다른 세트를 만들거나 4x4에서 3x3으로 변환하는 것은 더 설득력 있는 이유를 제외하면 안 하는 게 나은 작업입니다.
 </p>
 </div>