ko: fragment shader -> 프래그먼트 셰이더

Author: 태재영

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

@@ -249,7 +249,7 @@ function setNormals(gl) {
 
 이제 셰이더가 이걸 사용하도록 만들어야 합니다.
 
-먼저 정점 셰이더를 통해 fragment shader로 normal을 전달합니다.
+먼저 정점 셰이더를 통해 프래그먼트 셰이더로 normal을 전달합니다.
 
     attribute vec4 a_position;
     -attribute vec4 a_color;
@@ -264,14 +264,14 @@ function setNormals(gl) {
       // 위치를 행렬로 곱하기
       gl_Position = u_matrix * a_position;
 
-    -  // 색상을 fragment shader로 전달
+    -  // 색상을 프래그먼트 셰이더로 전달
     -  v_color = a_color;
 
-    +  // 법선을 fragment shader로 전달
+    +  // 법선을 프래그먼트 셰이더로 전달
     +  v_normal = a_normal;
     }
 
-그리고 fragment shader는 빛의 방향과 법선의 스칼라곱을 이용한 수식을 수행할 겁니다.
+그리고 프래그먼트 셰이더는 빛의 방향과 법선의 스칼라곱을 이용한 수식을 수행할 겁니다.
 
 ```
 precision mediump float;
@@ -356,7 +356,7 @@ void main() {
   // 위치를 행렬로 곱하기
 *  gl_Position = u_worldViewProjection * a_position;
 
-*  // 법선의 방향을 정하고 fragment shader로 전달
+*  // 법선의 방향을 정하고 프래그먼트 셰이더로 전달
 *  v_normal = mat3(u_world) * a_normal;
 }
 ```
@@ -426,7 +426,7 @@ void main() {
   // 위치를 행렬로 곱하기
   gl_Position = u_worldViewProjection * a_position;
 
-  // 법선의 방향을 정하고 fragment shader로 전달
+  // 법선의 방향을 정하고 프래그먼트 셰이더로 전달
 *  v_normal = mat3(u_worldInverseTranspose) * a_normal;
 }
 ```

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

@@ -54,17 +54,17 @@ TOC: 점 조명
       // 위치를 행렬로 곱하기
       gl_Position = u_worldViewProjection * a_position;
 
-      // 법선의 방향을 정하고 fragment shader로 전달
+      // 법선의 방향을 정하고 프래그먼트 셰이더로 전달
       v_normal = mat3(u_worldInverseTranspose) * a_normal;
 
     +  // 표면의 world position 계산
     +  vec3 surfaceWorldPosition = (u_world * a_position).xyz;
     +
-    +  // surface -> light 벡터를 계산하고 fragment shader로 전달
+    +  // surface -> light 벡터를 계산하고 프래그먼트 셰이더로 전달
     +  v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
     }
 
-surface -> light 벡터는 단위 벡터가 아니기 때문에 fragment shader에서 정규화해야 합니다.
+surface -> light 벡터는 단위 벡터가 아니기 때문에 프래그먼트 셰이더에서 정규화해야 합니다.
 참고로 정점 셰이더에서 정규화할 수 있었지만 `varying`이기 때문에 위치 사이를 선형적으로 보간하기 때문에 완전한 단위 벡터가 아니게 됩니다.
 
     precision mediump float;
@@ -153,7 +153,7 @@ surface -> light 벡터는 단위 벡터가 아니기 때문에 fragment shader
 
 {{{diagram url="resources/specular-lighting.html" width="500" height="400" className="noborder" }}}
 
-먼저 뷰/눈/카메라의 위치를 전달하고, surface -> view 벡터를 계산한 다음 fragment shader로 전달해야 합니다.
+먼저 뷰/눈/카메라의 위치를 전달하고, surface -> view 벡터를 계산한 다음 프래그먼트 셰이더로 전달해야 합니다.
 
     attribute vec4 a_position;
     attribute vec3 a_normal;
@@ -174,20 +174,20 @@ surface -> light 벡터는 단위 벡터가 아니기 때문에 fragment shader
       // 위치를 행렬로 곱하기
       gl_Position = u_worldViewProjection * a_position;
 
-      // 법선의 방향을 정하고 fragment shader로 전달
+      // 법선의 방향을 정하고 프래그먼트 셰이더로 전달
       v_normal = mat3(u_worldInverseTranspose) * a_normal;
 
       // 표면의 world position 계산
       vec3 surfaceWorldPosition = (u_world * a_position).xyz;
 
-      // surface -> light 벡터를 계산하고 fragment shader로 전달
+      // surface -> light 벡터를 계산하고 프래그먼트 셰이더로 전달
       v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
 
-    +  // surface -> view/camera 벡터를 계산하고 fragment shader로 전달
+    +  // surface -> view/camera 벡터를 계산하고 프래그먼트 셰이더로 전달
     +  v_surfaceToView = u_viewWorldPosition - surfaceWorldPosition;
     }
 
-다음으로 fragment shader에서 surface -> view 벡터와 surface -> light 벡터 사이의 `halfVector`를 계산해야 합니다.
+다음으로 프래그먼트 셰이더에서 surface -> view 벡터와 surface -> light 벡터 사이의 `halfVector`를 계산해야 합니다.
 그런 다음 `halfVector`와 법선의 스칼라곱을 구하여, 빛이 뷰로 반사되는지 확인할 수 있습니다.
 
     // 정점 셰이더에서 전달

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

@@ -53,7 +53,7 @@ Limit로 *dot limit*를 계산하고, limit의 cosine을 구합니다.
 
 그렇게 해봅시다.
 
-먼저 [지난 글](webgl-3d-lighting-point.html)의 fragment shader를 수정합니다.
+먼저 [지난 글](webgl-3d-lighting-point.html)의 프래그먼트 셰이더를 수정합니다.
 
 ```
 precision mediump float;

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

@@ -388,7 +388,7 @@ X와 Y를 pixel space에서 clip space로 변환해야 했던 것처럼 Z도 동
 
 슬라이더를 움직여서 이걸 3D라고 부르기는 힘든데요.
 각 사각형에 다른 색상을 칠해봅시다.
-이를 위해 정점 셰이더에 또 다른 attribute와 이걸 정점 셰이더에서 fragment shader로 전달하기 위한 varying을 추가할 겁니다.
+이를 위해 정점 셰이더에 또 다른 attribute와 이걸 정점 셰이더에서 프래그먼트 셰이더로 전달하기 위한 varying을 추가할 겁니다.
 
 다음은 새로운 정점 셰이더입니다.
 
@@ -405,13 +405,13 @@ void main() {
   // 위치를 행렬로 곱하기
   gl_Position = u_matrix * a_position;
 
-+  // Fragment shader로 색상 전달
++  // 프래그먼트 셰이더로 색상 전달
 +  v_color = a_color;
 }
 </script>
 ```
 
-Fragment shader에서 해당 색상을 사용해야 합니다.
+프래그먼트 셰이더에서 해당 색상을 사용해야 합니다.
 
 ```
 <script id="fragment-shader-3d" type="x-shader/x-fragment">
@@ -560,7 +560,7 @@ X와 Y를 clip space로 변환해야 했던 것처럼 Z도 clip space(-1에서 +
 해당 값은 depth space 값(0에서 +1)으로 변환됩니다.
 WebGL은 color pixel을 그리기 전에 대응하는 depth pixel을 검사하는데요.
 그릴 픽셀의 depth 값이 대응하는 depth pixel의 값보다 클 경우 WebGL은 새로운 color pixel을 그리지 않습니다.
-아니면 fragment shader의 색상으로 새로운 color pixel을 모두 그리고, 새로운 depth 값으로 depth pixel을 그립니다.
+아니면 프래그먼트 셰이더의 색상으로 새로운 color pixel을 모두 그리고, 새로운 depth 값으로 depth pixel을 그립니다.
 이는 다른 픽셀 뒤에 있는 픽셀은 그려지지 않는다는 걸 의미합니다.
 
 이렇게 culling을 켰던 것처럼 간단하게 이 기능을 사용할 수 있습니다.

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

@@ -12,7 +12,7 @@ TOC: 원근 교정 텍스처 매핑
 "[동작 원리](webgl-how-it-works.html)"에서 varying이 어떻게 작동하는지 다뤘는데요.
 정점 셰이더는 varying을 선언하고 어떤 값으로 설정할 수 있습니다.
 정점 셰이더가 3번 호출되면 WebGL은 삼각형을 그립니다.
-해당 삼각형을 그리는 동안 모든 픽셀에 대해 fragment shader를 호출하고 해당 픽셀을 어떤 색상으로 만들지 묻습니다.
+해당 삼각형을 그리는 동안 모든 픽셀에 대해 프래그먼트 셰이더를 호출하고 해당 픽셀을 어떤 색상으로 만들지 묻습니다.
 삼각형의 정점 3개 사이에서 3개의 값 사이를 보간한 varying을 전달할 겁니다.
 
 {{{diagram url="resources/fragment-shader-anim.html" width="600" height="400" caption="v_color는 v0, v1, v2 사이에서 보간" }}}
@@ -30,14 +30,14 @@ TOC: 원근 교정 텍스처 매핑
         gl_Position = a_position;
       }
 
-일정한 색상으로 그리는 간단한 fragment shader가 있습니다.
+일정한 색상으로 그리는 간단한 프래그먼트 셰이더가 있습니다.
 
-      // fragment shader는 기본 정밀도를 가지고 있지 않으므로 하나를 선택해야 합니다.
+      // 프래그먼트 셰이더는 기본 정밀도를 가지고 있지 않으므로 하나를 선택해야 합니다.
       // mediump은 좋은 기본값으로 "중간 정밀도"를 의미합니다.
       precision mediump float;
 
       void main() {
-        // gl_FragColor는 fragment shader가 설정을 담당하는 특수 변수
+        // gl_FragColor는 프래그먼트 셰이더가 설정을 담당하는 특수 변수
         gl_FragColor = vec4(1, 0, 0.5, 1); // 붉은 보라색 반환
       }
 
@@ -65,7 +65,7 @@ Clip space에 2개의 사각형을 그리도록 만들어봅시다.
 {{{example url="../webgl-clipspace-rectangles.html" }}}
 
 Varying float 하나를 추가해봅시다.
-해당 varying을 정점 셰이더에서 fragment shader로 전달할 겁니다.
+해당 varying을 정점 셰이더에서 프래그먼트 셰이더로 전달할 겁니다.
 
       attribute vec4 a_position;
     +  attribute float a_brightness;
@@ -75,11 +75,11 @@ Varying float 하나를 추가해봅시다.
       void main() {
         gl_Position = a_position;
 
-    +    // Fragment shader로 밝기 전달
+    +    // 프래그먼트 셰이더로 밝기 전달
     +    v_brightness = a_brightness;
       }
 
-Fragment shader에서는 해당 varying을 사용하여 색상을 설정할 겁니다.
+프래그먼트 셰이더에서는 해당 varying을 사용하여 색상을 설정할 겁니다.
 
       precision mediump float;
 
@@ -194,7 +194,7 @@ WebGL이 `W`로 나누기 때문에 똑같은 결과를 얻을 수 있겠죠?
 
 WebGL은 `W`를 사용하여 원근 교정 텍스처 매핑을 구현하거나 varying의 원근 교정 보간을 수행합니다.
 
-실제로 이걸 더 쉽게 볼 수 있도록 fragment shader를 해킹해봅시다.
+실제로 이걸 더 쉽게 볼 수 있도록 프래그먼트 셰이더를 해킹해봅시다.
 
     gl_FragColor = vec4(fract(v_brightness * 10.), 0, 0, 1);  // 빨강
 
@@ -244,7 +244,7 @@ void main() {
 +  // 수동으로 W 나누기
 +  gl_Position /= gl_Position.w;
 
-  // fragment shader로 texcoord 전달
+  // 프래그먼트 셰이더로 texcoord 전달
   v_texcoord = a_texcoord;
 }
 ```

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

@@ -121,7 +121,7 @@ void main() {
   // x, y, z를 zToDivideBy로 나누기
 *  gl_Position = vec4(position.xyz, zToDivideBy);
 
-  // Fragment shader로 color 전달
+  // 프래그먼트 셰이더로 color 전달
   v_color = a_color;
 }
 </script>

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

@@ -12,7 +12,7 @@ WebGL에서 어떻게 텍스처를 적용할까요?
 먼저 해야할 일은 셰이더와 텍스처 조정입니다.
 다음은 정점 셰이더의 변경 사항인데요.
 텍스처 좌표를 전달해야 합니다.
-이 경우 fragment shader로 바로 전달하게 됩니다.
+이 경우 프래그먼트 셰이더로 바로 전달하게 됩니다.
 
     attribute vec4 a_position;
     *attribute vec2 a_texcoord;
@@ -25,11 +25,11 @@ WebGL에서 어떻게 텍스처를 적용할까요?
       // 위치를 행렬로 곱하기
       gl_Position = u_matrix * a_position;
 
-    *  // texcoord를 fragment shader로 전달
+    *  // texcoord를 프래그먼트 셰이더로 전달
     *  v_texcoord = a_texcoord;
     }
 
-Fragment shader에서 텍스처를 참조하게 해주는 uniform sampler2D를 선언합니다.
+프래그먼트 셰이더에서 텍스처를 참조하게 해주는 uniform sampler2D를 선언합니다.
 그리고 정점 셰이더에서 전달된 텍스처 좌표를 사용하고 해당 텍스처에서 색상을 찾기 위해 `texture2D`를 호출합니다.
 
     precision mediump float;
@@ -392,7 +392,7 @@ WebGL이 "texture complete"여야 하는데요.
 
 3가지 답이 떠오르는데요.
 
-1) 텍스처 6개를 참조하는 복잡한 셰이더를 만들고, 사용할 텍스처를 정하기 위해 정점 셰이더에 fragment shader로 전달되는 추가 정점 정보를 전달합니다.
+1) 텍스처 6개를 참조하는 복잡한 셰이더를 만들고, 사용할 텍스처를 정하기 위해 정점 셰이더에 프래그먼트 셰이더로 전달되는 추가 정점 정보를 전달합니다.
 이건 하지 마세요!
 조금만 생각해보면 더 많은 면을 가진 다른 모양에 대해 같은 작업을 수행하려는 경우 수많은 셰이더를 작성해야 한다는 것을 알 수 있습니다.
 

webgl/lessons/ko/webgl-attributes.md

@@ -104,7 +104,7 @@ void main() {
 }
 ```
 
-`gl.linkProgram(someProgram)`를 호출하여 정점 셰이더와 fragment shader를 연결할 때 WebGL(driver/GPU/browser)은 각 attribute에 사용할 index/location를 자체적으로 결정하는데요.
+`gl.linkProgram(someProgram)`를 호출하여 정점 셰이더와 프래그먼트 셰이더를 연결할 때 WebGL(driver/GPU/browser)은 각 attribute에 사용할 index/location를 자체적으로 결정하는데요.
 수동(아래 참조)으로 location을 지정하지 않는 한 어떤 location을 선택할지 알 수 없습니다.
 오직 browser/driver/GPU에 달려있죠.
 따라서 position, texcoord, normal에 어떤 attribute를 사용했는지 물어봐야 합니다.

webgl/lessons/ko/webgl-boilerplate.md

@@ -7,7 +7,7 @@ TOC: Boilerplate
 대부분의 WebGL 강의들은 모든걸 한 번에 다루기 때문에 배우기 복잡해 보이기도 하는데요.
 가능한 한 그것을 피하기 위해 더 작게 나눠보려고 합니다.
 
-WebGL을 복잡해 보이도록 만드는 것들 중 하나는 정점 셰이더와 fragment shader, 두 가지 작은 함수가 있다는 겁니다.
+WebGL을 복잡해 보이도록 만드는 것들 중 하나는 정점 셰이더와 프래그먼트 셰이더, 두 가지 작은 함수가 있다는 겁니다.
 이 두 함수는 일반적으로 최대 속도가 나오는 GPU에서 실행되는데요.
 그렇기 때문에 GPU에서 수행할 수 있는 언어, 커스텀 언어로 작성됩니다.
 이 두 함수는 컴파일되고 연결되어야 하는데요.
@@ -50,7 +50,7 @@ WebGL을 복잡해 보이도록 만드는 것들 중 하나는 정점 셰이더
      *
      * @param {!WebGLRenderingContext) gl은 WebGL Context
      * @param {!WebGLShader} vertexShader는 정점 셰이더
-     * @param {!WebGLShader} fragmentShader는 fragment shader
+     * @param {!WebGLShader} fragmentShader는 프래그먼트 셰이더
      * @return {!WebGLProgram} program
      */
     function createProgram(gl, vertexShader, fragmentShader) {
@@ -126,7 +126,7 @@ WebGL을 복잡해 보이도록 만드는 것들 중 하나는 정점 셰이더
      *
      * @param {!WebGLRenderingContext} gl은 WebGL Context
      * @param {string[]} shaderScriptId는 shader용 스크립트 태그의 id 배열입니다.
-     *                   첫 번째는 정점 셰이더, 두 번째는 fragment shader라고 가정합니다.
+     *                   첫 번째는 정점 셰이더, 두 번째는 프래그먼트 셰이더라고 가정합니다.
      * @return {!WebGLProgram} program
      */
     function createProgramFromScripts(gl, shaderScriptIds) {

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

@@ -41,10 +41,10 @@ WebGL은 다양한 최소 지원 기능이 있지만 로컬 장치에서는 최
 
 * Uniform vector의 최대 개수
 
-  정점 셰이더와 fragment shader에 따로따로 지정됩니다.
+  정점 셰이더와 프래그먼트 셰이더에 따로따로 지정됩니다.
 
-  WebGL1에서는 정점 셰이더에 128개 그리고 fragment shader에 16개입니다.
-  WebGL2에서는 정점 셰이더에 256개 그리고 fragment shader에 224개입니다.
+  WebGL1에서는 정점 셰이더에 128개 그리고 프래그먼트 셰이더에 16개입니다.
+  WebGL2에서는 정점 셰이더에 256개 그리고 프래그먼트 셰이더에 224개입니다.
 
   참고로 uniform은 "패킹"될 수 있음으로 위 숫자는 사용할 수 있는 `vec4`의 개수인데요.
   이론적으로는 `float` uniform 개수의 4배를 가질 수 있습니다.
@@ -105,7 +105,7 @@ WebGL은 다양한 최소 지원 기능이 있지만 로컬 장치에서는 최
 
   1. Texture unit 개수
   2. 정점 셰이더가 참조할 수 있는 texture unit 개수
-  3. Fragment shader가 참조할 수 있는 texture unit 개수
+  3. 프래그먼트 셰이더가 참조할 수 있는 texture unit 개수
 
   <table class="tabular-data">
     <thead>
@@ -114,7 +114,7 @@ WebGL은 다양한 최소 지원 기능이 있지만 로컬 장치에서는 최
     <tbody>
       <tr><td>존재하는 texture unit 최소값</td><td>8</td><td>32</td></tr>
       <tr><td>정점 셰이더가 참조할 수 있는 texture unit 최소값</td><th style="color: red;">0!</td><td>16</td></tr>
-      <tr><td>Fragment shader가 참조할 수 있는 texture unit 최소값</td><td>8</td><td>16</td></tr>
+      <tr><td>프래그먼트 셰이더가 참조할 수 있는 texture unit 최소값</td><td>8</td><td>16</td></tr>
     </tbody>
   </table>
 
@@ -135,8 +135,8 @@ WebGL은 다양한 최소 지원 기능이 있지만 로컬 장치에서는 최
     <tr><td>MAX_VARYING_VECTORS             </td><td>가지고 있는 varying 개수</td></tr>
     <tr><td>MAX_COMBINED_TEXTURE_IMAGE_UNITS</td><td>존재하는 texture unit 개수</td></tr>
     <tr><td>MAX_VERTEX_TEXTURE_IMAGE_UNITS  </td><td>정점 셰이더가 참조할 수 있는 texture unit 개수</td></tr>
-    <tr><td>MAX_TEXTURE_IMAGE_UNITS         </td><td>fragment shader가 참조할 수 있는 texture unit 개수</td></tr>
-    <tr><td>MAX_FRAGMENT_UNIFORM_VECTORS    </td><td>fragment shader가 가질 수 있는 vec4 uniform 개수</td></tr>
+    <tr><td>MAX_TEXTURE_IMAGE_UNITS         </td><td>프래그먼트 셰이더가 참조할 수 있는 texture unit 개수</td></tr>
+    <tr><td>MAX_FRAGMENT_UNIFORM_VECTORS    </td><td>프래그먼트 셰이더가 가질 수 있는 vec4 uniform 개수</td></tr>
     <tr><td>MAX_CUBE_MAP_TEXTURE_SIZE       </td><td>cubemap 최대 크기</td></tr>
     <tr><td>MAX_RENDERBUFFER_SIZE           </td><td>renderbuffer 최대 크기</td></tr>
     <tr><td>MAX_VIEWPORT_DIMS               </td><td>viewport 최대 크기</td></tr>
@@ -160,7 +160,7 @@ WebGL2는 몇 가지 더 추가합니다.
     <tr><td>MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS</td><td>모든 걸 단일 버퍼로 보낼 때 출력할 수 있는 varying 개수</td></tr>
     <tr><td>MAX_COMBINED_UNIFORM_BLOCKS                  </td><td>종합적으로 사용할 수 있는 uniform block 개수</td></tr>
     <tr><td>MAX_VERTEX_UNIFORM_BLOCKS                    </td><td>정점 셰이더가 사용할 수 있는 uniform block 개수</td></tr>
-    <tr><td>MAX_FRAGMENT_UNIFORM_BLOCKS                  </td><td>fragment shader가 사용할 수 있는 uniform block 개수</td></tr>
+    <tr><td>MAX_FRAGMENT_UNIFORM_BLOCKS                  </td><td>프래그먼트 셰이더가 사용할 수 있는 uniform block 개수</td></tr>
   </tbody>
 </table>
 </div>