zh-cn: fix translation of fragment: 片断->片段

Author: SQwatermark

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

@@ -51,7 +51,7 @@ WebGL需要上传`x, y`, `x + width, y`, `x, y + height`, 和
        v_texcoord = a_texcoord;
     }
 
-和一个简单的片断着色器
+和一个简单的片段着色器
 
     precision mediump float;
 

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

@@ -242,7 +242,7 @@ function setNormals(gl) {
 
 现在让着色器使用它
 
-首先在顶点着色器中只将法向量传递给片断着色器
+首先在顶点着色器中只将法向量传递给片段着色器
 
     attribute vec4 a_position;
     -attribute vec4 a_color;
@@ -257,14 +257,14 @@ function setNormals(gl) {
       // 将位置和矩阵相乘
       gl_Position = u_matrix * a_position;
 
-    -  // 将颜色传到片断着色器
+    -  // 将颜色传到片段着色器
     -  v_color = a_color;
 
-    +  // 将法向量传到片断着色器
+    +  // 将法向量传到片段着色器
     +  v_normal = a_normal;
     }
 
-然后在片断着色器中将法向量和光照方向点乘
+然后在片段着色器中将法向量和光照方向点乘
 
 ```
 precision mediump float;
@@ -344,7 +344,7 @@ void main() {
   // 将位置和矩阵相乘
 *  gl_Position = u_worldViewProjection * a_position;
 
-*  // 重定向法向量并传递给片断着色器
+*  // 重定向法向量并传递给片段着色器
 *  v_normal = mat3(u_world) * a_normal;
 }
 ```
@@ -413,7 +413,7 @@ void main() {
   // 将位置和矩阵相乘
   gl_Position = u_worldViewProjection * a_position;
 
-  // 重定向法向量并传递给片断着色器
+  // 重定向法向量并传递给片段着色器
 *  v_normal = mat3(u_worldInverseTranspose) * a_normal;
 }
 ```

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

@@ -55,21 +55,21 @@ TOC: WebGL 三维点光源
       // 将位置和矩阵相乘
       gl_Position = u_worldViewProjection * a_position;
 
-      // 重定向法向量并传递给片断着色器
+      // 重定向法向量并传递给片段着色器
       v_normal = mat3(u_worldInverseTranspose) * a_normal;
 
     +  // 计算表面的世界坐标
     +  vec3 surfaceWorldPosition = (u_world * a_position).xyz;
     +
     +  // 计算表面到光源的方向
-    +  // 传递给片断着色器
+    +  // 传递给片段着色器
     +  v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
     }
 
-在片断着色器中需要将表面到光源的方向进行单位化，
+在片段着色器中需要将表面到光源的方向进行单位化，
 注意，虽然我们可以在顶点着色器中传递单位向量，
-但是 `varying` 会进行插值再传给片断着色器，
-所以片断着色器中的向量基本上不是单位向量了。
+但是 `varying` 会进行插值再传给片段着色器，
+所以片段着色器中的向量基本上不是单位向量了。
 
     precision mediump float;
 
@@ -153,7 +153,7 @@ TOC: WebGL 三维点光源
 {{{diagram url="resources/specular-lighting.html" width="500" height="400" className="noborder" }}}
 
 所以首先我们需要传入相机位置，计算表面到相机的方向矢量，
-然后传递到片断着色器。
+然后传递到片段着色器。
 
     attribute vec4 a_position;
     attribute vec3 a_normal;
@@ -174,22 +174,22 @@ TOC: WebGL 三维点光源
       // 将位置和矩阵相乘
       gl_Position = u_worldViewProjection * a_position;
 
-      // 重定向法向量并传递到片断着色器
+      // 重定向法向量并传递到片段着色器
       v_normal = mat3(u_worldInverseTranspose) * a_normal;
 
       // 计算表面的世界坐标
       vec3 surfaceWorldPosition = (u_world * a_position).xyz;
 
       // 计算表面到光源的方向
-      // 然后传递到片断着色器
+      // 然后传递到片段着色器
       v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
 
     +  // 计算表面到相机的方向
-    +  // 然后传递到片断着色器
+    +  // 然后传递到片段着色器
     +  v_surfaceToView = u_viewWorldPosition - surfaceWorldPosition;
     }
 
-然后在片断着色器中计算表面到光源和相机之间的 `halfVector`，
+然后在片段着色器中计算表面到光源和相机之间的 `halfVector`，
 将它和法向量相乘，查看光线是否直接反射到眼前。
 
     // 从顶点着色器中传入的值

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

@@ -48,7 +48,7 @@ TOC: WebGL 三维聚光灯
 
 让我们来实现它。
 
-首先修改[上文](webgl-3d-lighting-point.html)的片断着色器。
+首先修改[上文](webgl-3d-lighting-point.html)的片段着色器。
 
 ```
 precision mediump float;

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

@@ -323,7 +323,7 @@ var m4 = {
 
 拖动滑块很难看出它是三维的，让我们给矩形上不同的颜色。
 需要在顶点着色器中添加一个属性和一个可变量，
-将颜色值传到片断着色器中。
+将颜色值传到片段着色器中。
 
 这是新的顶点着色器
 
@@ -340,13 +340,13 @@ void main() {
   // 将位置和矩阵相乘.
   gl_Position = u_matrix * a_position;
 
-+  // 将颜色传递给片断着色器
++  // 将颜色传递给片段着色器
 +  v_color = a_color;
 }
 </script>
 ```
 
-然后在片断着色器中使用颜色
+然后在片段着色器中使用颜色
 
 ```
 <script id="fragment-shader-3d" type="x-shader/x-fragment">
@@ -494,7 +494,7 @@ WebGL可以只绘制正面或反面三角形，可以这样开启
 Z 也在裁剪空间或者 (-1 到 +1) 。这个值会被转换到深度空间( 0 到 +1)，
 WebGL绘制一个着色像素之前会检查对应的深度像素，
 如果对应的深度像素中的深度值小于当前像素的深度值，WebGL就不会绘制新的颜色。
-反之它会绘制片断着色器提供的新颜色并更新深度像素中的深度值。
+反之它会绘制片段着色器提供的新颜色并更新深度像素中的深度值。
 这也意味着在其他像素后面的像素不会被绘制。
 
 我们可以像这样开启这个特性

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

@@ -9,7 +9,7 @@ TOC: WebGL 纹理映射的透视纠正
 
 在"[工作原理](webgl-how-it-works.html)"中我们讲过了可变量的工作原理，
 顶点着色器可以声明可变量并给它赋值，一旦顶点着色器被引用 3 次就会画一个三角形。
-绘制这个三角形的每个像素都会调用片断着色器获得像素颜色，
+绘制这个三角形的每个像素都会调用片段着色器获得像素颜色，
 在三个顶点之间的点会得到差之后的可变量。
 
 {{{diagram url="resources/fragment-shader-anim.html" width="600" height="400" caption="v_color is interpolated between v0, v1 and v2" }}}
@@ -27,14 +27,14 @@ TOC: WebGL 纹理映射的透视纠正
         gl_Position = a_position;
       }
 
-还有一个简单的片断着色器提供固定的颜色
+还有一个简单的片段着色器提供固定的颜色
 
-      // 片断着色器没有默认的精度，
+      // 片段着色器没有默认的精度，
       // 中等精度是个不错的默认值
       precision mediump float;
 
       void main() {
-        // gl_FragColor 是片断着色器需要设置的一个特殊变量
+        // gl_FragColor 是片段着色器需要设置的一个特殊变量
         gl_FragColor = vec4(1, 0, 0.5, 1); // 返回红紫色
       }
 
@@ -60,7 +60,7 @@ TOC: WebGL 纹理映射的透视纠正
 
 {{{example url="../webgl-clipspace-rectangles.html" }}}
 
-再添加一个浮点型可变量，并把它从顶点着色器直接传递到片断着色器
+再添加一个浮点型可变量，并把它从顶点着色器直接传递到片段着色器
 
       attribute vec4 a_position;
     +  attribute float a_brightness;
@@ -70,11 +70,11 @@ TOC: WebGL 纹理映射的透视纠正
       void main() {
         gl_Position = a_position;
 
-    +    // 直接传递亮度到片断着色器
+    +    // 直接传递亮度到片段着色器
     +    v_brightness = a_brightness;
       }
 
-在片断着色器中使用可变量设置颜色
+在片段着色器中使用可变量设置颜色
 
       precision mediump float;
 
@@ -183,7 +183,7 @@ TOC: WebGL 纹理映射的透视纠正
 
 事实是WebGL使用 `W` 实现纹理映射或者可变量插值的透视投影。
 
-如果将片断着色器改成这样就更容以看出效果
+如果将片段着色器改成这样就更容以看出效果
 
     gl_FragColor = vec4(fract(v_brightness * 10.), 0, 0, 1);  // 红色
 
@@ -231,7 +231,7 @@ void main() {
 +  // 手工除以 W
 +  gl_Position /= gl_Position.w;
 
-  // 将纹理坐标传到片断着色器
+  // 将纹理坐标传到片段着色器
   v_texcoord = a_texcoord;
 }
 ```

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

@@ -122,7 +122,7 @@ void main() {
   // 将 x y z 除以 zToDivideBy
 *  gl_Position = vec4(position.xyz, zToDivideBy);
 
-  // 传递颜色到给片断着色器
+  // 传递颜色到给片段着色器
   v_color = a_color;
 }
 </script>

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

@@ -10,7 +10,7 @@ TOC: WebGL 三维纹理
 中得到启发，如果我们讲的再深入一点可能更好理解。
 
 首先需要调整着色器以便使用纹理，这里是顶点着色器的修改部分，
-我们需要传递纹理坐标，在这个例子中直接将它们传到片断着色器中。
+我们需要传递纹理坐标，在这个例子中直接将它们传到片段着色器中。
 
     attribute vec4 a_position;
     *attribute vec2 a_texcoord;
@@ -23,11 +23,11 @@ TOC: WebGL 三维纹理
       // 将位置和矩阵相乘
       gl_Position = u_matrix * a_position;
 
-    *  // 传递纹理坐标到片断着色器
+    *  // 传递纹理坐标到片段着色器
     *  v_texcoord = a_texcoord;
     }
 
-在片断着色器中声明一个 sampler2D 类型的全局变量，可以让我们引用一个纹理，
+在片段着色器中声明一个 sampler2D 类型的全局变量，可以让我们引用一个纹理，
 然后使用从顶点着色器传入的纹理坐标调用 `texture2D` 方法，
 在纹理上找到对应的颜色。
 

webgl/lessons/zh_cn/webgl-boilerplate.md

@@ -7,7 +7,7 @@ TOC: WebGL 样板
 学习WebGL似乎有些难度，因为大多数教程都想一次教完所有东西，
 而我会尽量避免这样，在需要合适的时候讲一些小的知识点。
 
-WebGL复杂的原因之一是需要两个方法，一个顶点着色器和一个片断着色器。
+WebGL复杂的原因之一是需要两个方法，一个顶点着色器和一个片段着色器。
 这两个方法通常是在你的GPU上运行，也是高速运行的保障。
 所以它们是一种自定义语言，目的是能够在GPU上良好运行。
 这两个方法需要编译并链接在一起，而这个过程在 99% 的WbgGL应用中是一样的。
@@ -50,7 +50,7 @@ WebGL复杂的原因之一是需要两个方法，一个顶点着色器和一个
      *
      * @param {!WebGLRenderingContext) gl WebGL上下文。
      * @param {!WebGLShader} vertexShader 一个顶点着色器。
-     * @param {!WebGLShader} fragmentShader 一个片断着色器。
+     * @param {!WebGLShader} fragmentShader 一个片段着色器。
      * @return {!WebGLProgram} 程序
      */
     function createProgram(gl, vertexShader, fragmentShader) {
@@ -125,7 +125,7 @@ WebGL复杂的原因之一是需要两个方法，一个顶点着色器和一个
      *
      * @param {!WebGLRenderingContext} gl WebGL上下文。
      * @param {string} vertexShaderId 顶点着色器的标签id。
-     * @param {string} fragmentShaderId 片断着色器的标签id。
+     * @param {string} fragmentShaderId 片段着色器的标签id。
      * @return {!WebGLProgram} 程序。
      */
     function createProgramFromScripts(

webgl/lessons/zh_cn/webgl-environment-maps.md

@@ -148,7 +148,7 @@ gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LI
 
 既然我们了解了反射是如何工作的，我们可以使用它从立方体纹理中选取颜色值，我们改变着色器来实现它.
 
-首先在顶点着色器中我们会计算世界坐标系中的顶点位置和顶点法线，然后用varing传递它们给片断着色器。这和[三维聚光灯](webgl-3d-lighting-spot.html)文章中我们所做的相似。
+首先在顶点着色器中我们会计算世界坐标系中的顶点位置和顶点法线，然后用varing传递它们给片段着色器。这和[三维聚光灯](webgl-3d-lighting-spot.html)文章中我们所做的相似。
 
 ```glsl
 attribute vec4 a_position;
@@ -165,15 +165,15 @@ void main() {
   // 将位置与矩阵相乘。
   gl_Position = u_projection * u_view * u_world * a_position;
 
-  // 传递世界位置给片断着色器
+  // 传递世界位置给片段着色器
   v_worldPosition = (u_world * a_position).xyz;
 
-  // 转换法线并传递给片断着色器
+  // 转换法线并传递给片段着色器
   v_worldNormal = mat3(u_world) * a_normal;
 }
 ```
 
-接下来在片断着色器中我们单位化worldNormal，因为顶点之间的法线会被插值。我们传递了世界坐标系中的相机位置接着用世界坐标系中的表面位置减去它我们得到了eyeToSurfaceDir。
+接下来在片段着色器中我们单位化worldNormal，因为顶点之间的法线会被插值。我们传递了世界坐标系中的相机位置接着用世界坐标系中的表面位置减去它我们得到了eyeToSurfaceDir。
 
 最终我们用GLSL的内置函数`reflect`，它实现了我们之前介绍的公式。我们使用这个结果从立方体纹理中获得一个颜色值。