Merge pull request #1 from gfxfundamentals/master

sync

Author: yuangang123

build/templates/analytics.template

@@ -1,32 +1,3 @@
 <script>
-(function() {
-  if (window.location.hostname.indexOf("webglfundamentals.org") < 0) {
-      return;
-  }
-
-  function addScript(src, type, fn) {
-    const script = document.createElement('script');
-    const firstScript = document.getElementsByTagName('script')[0];
-    script.async = true;
-    script.defer = true;
-    script.type = type || 'javascript';
-    if (fn) {
-      script.addEventListener('load', fn);
-    }
-    script.src = src;
-    firstScript.parentNode.insertBefore(script, firstScript);
-  }
-
-  // can't do this because it would eat contexts
-  //addScript('//gpustats.org/stats.js', 'module');
-
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
-  ga('create', 'UA-59804936-1', 'auto');
-  ga('send', 'pageview');
-}());
 </script>
 

package.json

@@ -4,7 +4,7 @@
   "description": "Some WebGL Tutorials designed for real WebGL and not 20yr old OpenGL",
   "main": "index.js",
   "devDependencies": {
-    "@gfxfundamentals/lesson-builder": "git+https://github.com/gfxfundamentals/lesson-builder.git#v1.17.5",
+    "@gfxfundamentals/lesson-builder": "github:gfxfundamentals/lesson-builder#v1.17.6",
     "@gfxfundamentals/live-editor": "github:gfxfundamentals/live-editor#v1.3.1",
     "eslint-plugin-google-camelcase": "0.0.2",
     "eslint-plugin-html": "6.1.1",

webgl/lessons/ko/langinfo.hanson

@@ -6,10 +6,10 @@
   description: '처음부터 배우는 WebGL',
   link: 'https://webglfundamentals.org/webgl/lessons/ko/',
   commentSectionHeader: `
-    <div>이슈/버그는? <a href="https://github.com/gfxfundamentals/webgl-fundamentals/issues">Github</a>에 이슈를 만들어주세요.</div>
-    <div class="lesson-comment-notes">
-      코드 블록은 <b>&lt;pre&gt;&lt;code&gt;</b>여기에 코드 입력<b>&lt;/code&gt;&lt;/pre&gt;</b>를 사용해주세요
-    </div>
+<div>이슈/버그는? <a href="https://github.com/gfxfundamentals/webgl-fundamentals/issues">Github</a>에 이슈를 만들어주세요.</div>
+<div class="lesson-comment-notes">
+  코드 블록은 <b>&lt;pre&gt;&lt;code&gt;</b>여기에 코드 입력<b>&lt;/code&gt;&lt;/pre&gt;</b>를 사용해주세요
+</div>
   `,
   missing: "죄송하지만 이 글은 아직 번역 전입니다.\n\n[번역](https://github.com/gfxfundamentals/webgl-fundamentals) 환영합니다! 😄\n\n영어 원문은 [여기]({{{origLink}}})에 있습니다.",
   toc: '목차',

webgl/lessons/ko/vocabulary.md

@@ -27,11 +27,11 @@ TOC: 2D 행렬
 <img src="../resources/f-translation-rotation-scale.svg" class="webgl_center" width="400" />
 
 결과는 완전히 다릅니다.
-심지어 더 안 좋은 점은, 두 번째 예제가 필요하다면 우리가 원하는 새로운 순서로 평행 이동, 회전, 스케일을 적용한 다른 셰이더를 작성해야 한다는 겁니다.
+심지어 더 안 좋은 점은 두 번째 예제가 필요하다면 우리가 원하는 새로운 순서로 평행 이동, 회전, 스케일을 적용한 다른 셰이더를 작성해야 한다는 겁니다.
 
 저보다 훨씬 더 똑똑한 사람들은 행렬 수학으로 동일한 모든 작업을 할 수 있다는 걸 밝혀냈는데요.
 2D의 경우 3x3 행렬을 사용합니다.
-3x3 행렬은 상자 9개가 있는 그리드와 같습니다.
+이는 상자 9개가 있는 그리드와 동일합니다.
 
 <link href="resources/webgl-2d-matrices.css" rel="stylesheet">
 <div class="glocal-center"><table class="glocal-center-content glocal-mat"><tr><td>1.0</td><td>2.0</td><td>3.0</td></tr><tr><td>4.0</td><td>5.0</td><td>6.0</td></tr><tr><td>7.0</td><td>8.0</td><td>9.0</td></tr></table></div>
@@ -123,10 +123,10 @@ newY = y * sy;
 이건 [스케일 샘플](webgl-2d-scale.html)과 동일합니다.
 
 아마 아직 "그래서 뭐요? 요점이 뭔데요?"라고 생각하고 계실 것 같습니다.
-그냥 이미 하고 있던 동일한 것들을 수행하기 위한 여러 작업처럼 보입니다.
+그냥 이미 하고 있던 것들을 수행하기 위한 여러 작업처럼 보이는데요.
 
 여기가 마법이 들어오는 곳입니다.
-행렬을 함께 곱하고 모든 변환을 한 번에 적용하는거죠.
+행렬을 함께 곱해서 모든 변환을 한 번에 적용하는거죠.
 두 행렬을 받아서 곱하고 결과를 반환하는 함수 `m3.multiply`가 있다고 가정해봅시다.
 
 ```js
@@ -166,7 +166,7 @@ var m3 = {
 }
 ```
 
-더 명확하게 하기 위해 평행 이동, 회전, 스케일을 위한 행렬을 만드는 함수를 만들어봅시다.
+더 명확하게 하기 위해 평행 이동, 회전, 스케일을 위한 행렬을 만드는 함수를 만듭니다.
 
 ```js
 var m3 = {
@@ -239,7 +239,7 @@ void main() {
   ...
 ```
 
-그리고 어떻게 사용하냐면,
+그리고 다음과 같이 사용합니다.
 
 ```js
 // 장면 그리기
@@ -289,7 +289,7 @@ matrix = m3.multiply(matrix, translationMatrix);
 {{{example url="../webgl-2d-geometry-matrix-transform-trs.html" }}}
 
 이와 같은 행렬을 적용할 수 있다는 것은 신체의 팔, 태양 주변에 있는 행성의 위성, 나무의 가지같은 계층적 애니메이션에 특히 중요합니다.
-계층적 애니메이션의 간단한 예제로 'F'를 5번 그리지만 매번 이전의 'F' 행렬로 시작해봅시다.
+계층적 애니메이션의 간단한 예제로 'F'를 5번 그리지만 매번 이전의 'F' 행렬을 재사용해봅시다.
 
 ```js
 // 장면 그리기
@@ -343,15 +343,15 @@ var m3 = {
   ...
 ```
 
-다음은 5개의 F입니다.
+그리고 5개의 F를 그리는 예제입니다.
 
 {{{example url="../webgl-2d-geometry-matrix-transform-hierarchical.html" }}}
 
 예제를 한 가지 더 봐봅시다.
 지금까지 모든 샘플에서 'F'는 왼쪽 상단 모서리(예제를 제외하고는 위의 순서를 반대로 했음)를 기준으로 회전했는데요.
 이건 우리가 사용하는 수식이 항상 원점을 기준으로 회전하고 'F'의 왼쪽 상단 모서리(0, 0)가 원점에 있기 때문입니다.
 
-하지만 이제 행렬 수학을 할 수 있고 변환이 적용되는 순서를 선택할 수 있기 때문에 원점을 이동할 수 있습니다.
+하지만 이제 행렬 수학을 할 수 있고 변환이 적용되는 순서를 선택할 수 있기 때문에 원점을 이동시킬 수 있습니다.
 
 ```js
 // 'F'의 원점을 중심으로 이동할 행렬 만들기
@@ -369,7 +369,7 @@ matrix = m3.multiply(matrix, moveOriginMatrix);
 
 {{{example url="../webgl-2d-geometry-matrix-transform-center-f.html" }}}
 
-이 기술을 사용하면 어떤 지점에서든 회전이나 크기를 조정할 수 있는데요.
+이 기술을 사용하면 어떤 지점에서든 회전이나 크기 조정을 할 수 있는데요.
 이제 포토샵이나 플래시에서 어떻게 회전점을 이동시키는지 알게 되었습니다.
 
 더 끝내주는 걸 해봅시다.
@@ -391,15 +391,14 @@ gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
 
 이 단계들을 차례대로 살펴보자면, 첫 단계, "픽셀을 0.0에서 1.0사이로 변환", 이건 실제 스케일링 작업입니다.
 두 번째 역시 스케일링 작업입니다.
-다음은 평행 이동이고 마지막으로 Y를 -1로 스케일링 하는데요.
+세 번째는 평행 이동이고 마지막으로 Y를 -1로 스케일링 하는데요.
 실제로 우리가 셰이더에 전달한 행렬로 모든 걸 수행할 수 있습니다.
 2개의 스케일 행렬을 만들 수 있는데,
 하나는 (1.0/해상도)로 스케일링하는 것이고,
 다른 하나는 2.0으로 스케일링하는 것이며,
 세 번째는 (-1.0,-1.0)으로 평행 이동하고,
 네 번째는 Y를 -1로 스케일링한 뒤 모든 값을 함께 곱하지만,
-대신 수식이 간단하기 때문에,
-직접 주어진 해상도에 대한 '투영 행렬'을 생성하는 함수를 바로 만들어 봅시다.
+수식이 간단하기 때문에 직접 주어진 해상도에 대한 '투영 행렬'을 생성하는 함수를 바로 만들어 봅시다.
 
 ```js
 var m3 = {
@@ -483,7 +482,7 @@ var m3 = {
 };
 ```
 
-위의 행렬 코드 7줄을 이렇게 4줄로 바꿀 수 있으며,
+위의 행렬 코드 7줄을 이렇게 4줄로 바꿀 수 있습니다.
 
 ```js
 // 행렬 계산
@@ -519,15 +518,15 @@ matrix = m3.scale(matrix, scale[0], scale[1]);
 
     scaledPosition = scaleMat * position
 
-그런 다음 `rotatedScaledPosition`을 얻기 위해 `scaledPosition`에 회전 행렬을 곱하며,
+`rotatedScaledPosition`을 얻기 위해 `scaledPosition`에 회전 행렬을 곱한 다음,
 
     rotatedScaledPosition = rotationMat * scaledPosition
 
-다음으로 `translatedRotatedScaledPosition`를 얻기 위해 `rotatedScaledPositon`에 평행 이동 행렬을 곱한 뒤,
+`translatedRotatedScaledPosition`를 얻기 위해 `rotatedScaledPositon`에 평행 이동 행렬을 곱한 뒤,
 
     translatedRotatedScaledPosition = translationMat * rotatedScaledPosition
 
-마지막으로 클립 공간의 위치를 얻기 위해 투영 행렬에 곱하는데,
+마지막으로 클립 공간의 위치를 얻기 위해 투영 행렬을 곱합니다.
 
     clipspacePosition = projectioMatrix * translatedRotatedScaledPosition
 
@@ -543,27 +542,27 @@ matrix = m3.scale(matrix, scale[0], scale[1]);
 > 흰색 영역은 캔버스입니다. 파란색은 캔버스 바깥입니다. 우리는 클립 공간에 있습니다.
 > 전달된 위치는 클립 공간에 있어야 합니다.
 
-2단계:  `matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);`
+2단계: `matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);`
 
 > {{{diagram url="resources/matrix-space-change.html?stage=1" caption="클립 공간에서 픽셀 공간으로" }}}
 >
 > 이제 픽셀 공간에 있습니다. X = 0에서 400, Y = 0에서 300, 왼쪽 상단은 0,0 입니다.
 > 이 행렬을 사용하여 전달된 위치는 픽셀 공간에 있어야 합니다.
 > 공간이 +Y = 상단에서 -Y = 하단으로 뒤집힐 때의 순간을 보실 수 있습니다.
 
-3단계:  `matrix = m3.translate(matrix, tx, ty);`
+3단계: `matrix = m3.translate(matrix, tx, ty);`
 
 > {{{diagram url="resources/matrix-space-change.html?stage=2" caption="원점을 tx, ty로 이동" }}}
 >
 > 원점은 이제 tx, ty (150, 100)로 이동됐습니다. 공간도 이동했습니다.
 
-4단계:  `matrix = m3.rotate(matrix, rotationInRadians);`
+4단계: `matrix = m3.rotate(matrix, rotationInRadians);`
 
 > {{{diagram url="resources/matrix-space-change.html?stage=3" caption="33도 회전" }}}
 >
-> 공간이 tx, ty를 중심으로 회전됐습니다. 
+> 공간이 tx, ty를 중심으로 회전됐습니다.
 
-5단계:  `matrix = m3.scale(matrix, sx, sy);`
+5단계: `matrix = m3.scale(matrix, sx, sy);`
 
 > {{{diagram url="resources/matrix-space-change.html?stage=4" caption="공간 크기 조정" }}}
 >
@@ -578,7 +577,7 @@ matrix = m3.scale(matrix, scale[0], scale[1]);
 2D를 계속 하고 싶다면 [Canvas 2D의 drawImage 함수 재현](webgl-2d-drawimage.html)과 [Canvas 2D의 행렬 스택 재현](webgl-2d-matrix-stack.html)을 봐주세요.
 
 그게 아니라면 다음은 [3D](webgl-3d-orthographic.html)로 넘어갑니다.
-3D에서 행렬 수학은 동일한 원리과 사용법을 따르는데요.
+3D에서도 행렬 수학은 동일한 원리와 사용법을 따르는데요.
 2D부터 시작해서 이해하기 쉽도록 만들었습니다.
 
 또한 정말로 행렬 수학의 전문가가 되고 싶다면 [이 놀라운 영상](https://www.youtube.com/watch?v=kjBOesZCoqc&list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab)을 확인하세요.
@@ -628,8 +627,7 @@ CSS는 캔버스가 표시되는 크기를 정의합니다.
 여기 캔버스의 CSS 표시 크기를 100%로 설정해서 캔버스가 페이지를 채우도록 늘어나는 두 예제가 있습니다.
 첫 번째는 <code>canvas.width</code>와 <code>canvas.height</code>를 사용하는 겁니다.
 새로운 창을 열고 창 크기를 조절해보세요.
-'F'가 올바른 모양을 가지는지 확인해봅시다.
-왜곡되고 있는데요.
+'F'가 올바른 모양을 가지지 못 하고 왜곡되고 있습니다.
 </p>
 {{{example url="../webgl-canvas-width-height.html" width="500" height="150" }}}
 <p>

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

@@ -9,7 +9,7 @@ TOC: 2D 회전
 솔직히 이걸 어떻게 설명해야 할지 모르겠지만 뭐 어때요.
 시도는 해봅시다.
 
-먼저 "단위원"이라 불리는 걸 소개하려고 합니다.
+먼저 "단위원"에 대해 소개하려고 합니다.
 중학교 수학을 기억해보면(저처럼 졸지 마세요!) 원은 반지름을 가지는데요.
 원의 반지름은 원의 중심에서 가장자리까지의 거리입니다.
 단위원은 반지름이 1.0인 원입니다.
@@ -137,7 +137,7 @@ TOC: 2D 회전
 자바스크립트 콘솔에 코드를 복사하고 `printSineAndCosignForAngle(30)`이라고 치면 `s = 0.49 c = 0.87`이 출력됩니다. (참고: 숫자는 반올림했습니다.)
 
 전부 합치면 지오메트리를 원하는 각도로 회전할 수 있습니다.
-그저 돌리고 싶은 각도의 사인과 코사인으로 `rotation`을 설정하면 됩니다. 
+그저 돌리고 싶은 각도의 사인과 코사인으로 `rotation`을 설정하면 됩니다.
 
       ...
       var angleInRadians = angleInDegrees * Math.PI / 180;
@@ -149,7 +149,7 @@ TOC: 2D 회전
 
 {{{example url="../webgl-2d-geometry-rotation-angle.html" }}}
 
-이 방법은 회전을 수행하는 일반적인 방법이 아니지만 2개의 글에서 더 다룰 것이므로 계속 읽어주세요.
+회전을 수행하는 일반적인 방법은 아니지만 2개의 글에서 더 다룰테니 계속 읽어주세요.
 다음은 더 간단한 [스케일](webgl-2d-scale.html)입니다.
 
 <div class="webgl_bottombar"><h3>라디안이 뭔가요?</h3>

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

@@ -8,7 +8,7 @@ TOC: 2D 스케일
 
 스케일은 [평행 이동](webgl-2d-translation.html)만큼이나 쉽습니다.
 
-원하는 스케일로 위치를 곱하면 되는데요.
+위치에 원하는 스케일을 곱하면 되는데요.
 [이전 예제](webgl-2d-rotation.html)에서 변경된 사항들은 다음과 같습니다.
 
 ```
@@ -21,10 +21,10 @@ uniform vec2 u_rotation;
 +uniform vec2 u_scale;
 
 void main() {
-+  // 위치 스케일링
++  // 위치에 스케일 적용
 +  vec2 scaledPosition = a_position * u_scale;
 
-  // 위치 회전
+  // 위치에 회전 적용
   vec2 rotatedPosition = vec2(
 *    scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
 *    scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);
@@ -77,7 +77,7 @@ void main() {
 
 지난 3개의 글이 [평행 이동](webgl-2d-translation.html), [회전](webgl-2d-rotation.html), 스케일을 이해하는데 도움이 되셨기를 바랍니다.
 
-다음에는 이 3가지 모두를 훨씬 간단하고 더 유용한 형태로 결합하는 [행렬](webgl-2d-matrices.html)을 살펴보겠습니다.
+다음에는 이 3가지 모두를 훨씬 간단하고 더 유용한 형태로 결합하는 [행렬](webgl-2d-matrices.html)에 대해 살펴보겠습니다.
 
 <div class="webgl_bottombar">
 <h3>왜 'F'인가요?</h3>

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

@@ -38,7 +38,7 @@ TOC: 2D 평행 이동
     // 캔버스 지우기
     gl.clear(gl.COLOR_BUFFER_BIT);
 
-    // 프로그램(셰이더 쌍) 사용 지시
+    // 프로그램(셰이더 쌍) 사용
     gl.useProgram(program);
 
     // 위치 속성 활성화
@@ -233,9 +233,9 @@ function setGeometry(gl) {
 `translation`을 설정하고 그려달라고 요청하는 게 우리가 하는 전부죠.
 심지어 지오메트리에 수만 개의 점들이 있더라도 주요 코드는 그대로 유지됩니다.
 
-원한다면 모든 점들을 업데이트하는 [복잡한 자바스크립트 버전](../webgl-2d-geometry-translate.html)과 비교할 수 있습니다.
+원한다면 모든 점들을 업데이트하는 [복잡한 자바스크립트 버전](../webgl-2d-geometry-translate.html)과 비교해 볼 수 있습니다.
 
 너무 뻔한 예제가 아니었기를 바랍니다.
-다른 한편으로 이걸 수행하는 훨씬 더 좋은 방법을 다룰 것이므로 계속 읽어주세요.
-다음 글에서는 [회전](webgl-2d-rotation.html)으로 넘어가겠습니다.
+앞으로 이걸 수행하는 훨씬 더 좋은 방법을 다룰테니 계속 읽어주세요.
+다음 글에서는 [회전](webgl-2d-rotation.html)에 대해 알아보겠습니다.
 

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

@@ -141,7 +141,7 @@ WebGL에 대해 필요한 코드를 작성하진 않을 겁니다.
 나머지는 이들이 모두 처리하죠.
 다시 말해 이들은 3D 라이브러리입니다.
 
-반면에 WebGL은 행렬 수학, 정규화된 좌표, 절두체, 벡터 곱, 스칼라 곱, 베링 보간, 조명 반사 계산, 이외에도 수개월 또는 수년이 걸리는 모든 걸 이해해야 합니다.
+반면에 WebGL은 행렬 수학, 정규화된 좌표, 절두체, 벡터 곱, 스칼라 곱, varying 보간, 조명 반사 계산, 이외에도 수개월 또는 수년이 걸리는 모든 걸 이해해야 합니다.
 
 3D 라이브러리의 핵심은 해당 지식들이 내장되어 있어서 지식을 필요로 하지 않고, 라이브러리에 의존하여 처리할 수 있다는 점입니다.
 위에서 본 OpenGL 예제가 그렇습니다.
@@ -176,9 +176,9 @@ WebGL에는 깊이 정렬을 훨씬 더 쉽게 만드는 깊이 버퍼가 있습
 3D 라이브러리에 3D 데이터를 제공하면 라이브러리는 3D에서 클립 공간 포인트를 계산합니다.
 
 몇 가지 참고할만한 사항들을 더 드리자면, [emscripten](https://emscripten.org/)은 WebGL 위에서 돌아가는 OpenGL 에뮬레이션을 제공합니다.
-해당 코드는 [여기](https://github.com/emscripten-core/emscripten/blob/master/src/library_glemu.js)에 있는데요.
+해당 코드는 [여기](https://github.com/emscripten-core/emscripten/blob/main/src/lib/libglemu.js)에 있는데요.
 코드를 살펴보면 OpenGL ES 2.0에서 제거된 OpenGL의 오래된 3D 부분을 에뮬레이트하기 위해 셰이더를 생성하는 경우가 많습니다.
-3D가 포함되지 않은 최신 OpenGL에서 3D가 포함된 오래된 OpenGL을 에뮬레이트하기 위해 NVidia가 시작한 프로젝트, [Regal](https://github.com/p3/regal/blob/184c62b7d7761481609ef1c1484ada659ae181b9/src/regal/RegalIff.cpp)에서 동일한 걸 볼 수 있습니다.
+3D가 포함되지 않은 최신 OpenGL에서 3D가 포함된 오래된 OpenGL을 에뮬레이트하기 위해 NVidia가 시작한 프로젝트, [Regal](https://chromium.googlesource.com/external/p3/regal/+/refs/heads/master/src/regal/RegalIff.cpp)에서 동일한 걸 볼 수 있습니다.
 또 하나의 예로, [여기](https://gist.github.com/greggman/41d93c00649cba78abdbfc1231c9158c) three.js가 3D를 제공하기 위해 사용하는 셰이더가 있습니다.
 많은 것들이 진행되고 있음을 알 수 있는데요.
 이 모든 것들 뿐만이 아니라 이를 지원하는 코드는 WebGL이 아닌 라이브러리에서 제공합니다.