more accurate Chinese translation

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

@@ -49,7 +49,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

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

@@ -53,21 +53,21 @@ Description: 如何在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;
 
@@ -151,7 +151,7 @@ Description: 如何在WebGL中实现点光源
 {{{diagram url="resources/specular-lighting.html" width="500" height="400" className="noborder" }}}
 
 所以首先我们需要传入相机位置，计算表面到相机的方向矢量，
-然后传递到片断着色器。
+然后传递到片元着色器。
 
     attribute vec4 a_position;
     attribute vec3 a_normal;
@@ -172,22 +172,22 @@ Description: 如何在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

@@ -46,7 +46,7 @@ Description: 如何在 WebGL 中实现聚光灯的效果
 
 让我们来实现它。
 
-首先修改[上文](webgl-3d-lighting-point.html)的片断着色器。
+首先修改[上文](webgl-3d-lighting-point.html)的片元着色器。
 
 ```
 precision mediump float;

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

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

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

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

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

@@ -120,7 +120,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

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

webgl/lessons/zh_cn/webgl-boilerplate.md

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

@@ -7,13 +7,13 @@ WebGL经常被当成3D API，人们总想“我可以使用WebGL和**一些神
 
 WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。
 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器，
-另一个叫片段着色器，并且使用一种和C或C++类似的强类型的语言
+另一个叫片元着色器，并且使用一种和C或C++类似的强类型的语言
 [GLSL](webgl-shaders-and-glsl.html)。 (GL着色语言)。
 每一对组合起来称作一个 *program*（着色程序）。
 
 顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点，
-线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片断着色器方法。
-片断着色器的作用是计算出当前绘制图元中每个像素的颜色值。
+线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片元着色器方法。
+片元着色器的作用是计算出当前绘制图元中每个像素的颜色值。
 
 几乎整个WebGL API都是关于如何设置这些成对方法的状态值以及运行它们。
 对于想要绘制的每一个对象，都需要先设置一系列状态值，然后通过调用
@@ -46,13 +46,13 @@ WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代
 
 4. 可变量（Varyings）
 
-   可变量是一种顶点着色器给片断着色器传值的方式，依照渲染的图元是点，
-   线还是三角形，顶点着色器中设置的可变量会在片段着色器运行中获取不同的插值。
+   可变量是一种顶点着色器给片元着色器传值的方式，依照渲染的图元是点，
+   线还是三角形，顶点着色器中设置的可变量会在片元着色器运行中获取不同的插值。
 
 ## WebGL Hello World
 
 WebGL只关心两件事：裁剪空间中的坐标值和颜色值。使用WebGL只需要给它提供这两个东西。
-你需要提供两个着色器来做这两件事，一个顶点着色器提供裁剪空间坐标值，一个片断着色器提供颜色值。
+你需要提供两个着色器来做这两件事，一个顶点着色器提供裁剪空间坐标值，一个片元着色器提供颜色值。
 
 无论你的画布有多大，裁剪空间的坐标范围永远是 -1 到 1 。
 这里有一个简单的WebGL例子展示WebGL的简单用法。
@@ -95,14 +95,14 @@ WebGL只关心两件事：裁剪空间中的坐标值和颜色值。使用WebGL
 实际情况没有那么简单，因为 `positionBuffer` 将会被转换成二进制数据（见下文），
 所以真实情况下从缓冲中读取数据有些麻烦，但是希望这个例子能够让你想象出顶点着色器是怎么执行的。
 
-接下来我们需要一个片段着色器
+接下来我们需要一个片元着色器
 
-    // 片断着色器没有默认精度，所以我们需要设置一个精度
+    // 片元着色器没有默认精度，所以我们需要设置一个精度
     // mediump是一个不错的默认值，代表“medium precision”（中等精度）
     precision mediump float;
 
     void main() {
-      // gl_FragColor是一个片段着色器主要设置的变量
+      // gl_FragColor是一个片元着色器主要设置的变量
       gl_FragColor = vec4(1, 0, 0.5, 1); // 返回“瑞迪施紫色”
     }
 
@@ -146,12 +146,12 @@ WebGL只关心两件事：裁剪空间中的坐标值和颜色值。使用WebGL
 
     <script id="2d-fragment-shader" type="notjs">
 
-      // 片断着色器没有默认精度，所以我们需要设置一个精度
+      // 片元着色器没有默认精度，所以我们需要设置一个精度
       // mediump是一个不错的默认值，代表“medium precision”（中等精度）
       precision mediump float;
 
       void main() {
-        // gl_FragColor是一个片段着色器主要设置的变量
+        // gl_FragColor是一个片元着色器主要设置的变量
         gl_FragColor = vec4(1, 0, 0.5, 1); // 返回“瑞迪施紫色”
       }
 
@@ -346,8 +346,8 @@ WebGL将会把它们从裁剪空间转换到屏幕空间并在屏幕空间绘制
        0, 0.5     ->   200, 225
      0.7, 0       ->   340, 150
 
-现在WebGL将渲染出这个三角形。绘制每个像素时WebGL都将调用我们的片段着色器。
-我们的片断着色器只是简单设置`gl_FragColor`为`1, 0, 0.5, 1`，
+现在WebGL将渲染出这个三角形。绘制每个像素时WebGL都将调用我们的片元着色器。
+我们的片元着色器只是简单设置`gl_FragColor`为`1, 0, 0.5, 1`，
 由于画布的每个通道宽度为8位，这表示WebGL最终在画布上绘制`[255, 0, 127, 255]`。
 
 这里有一个在线示例
@@ -452,7 +452,7 @@ WebGL将会把它们从裁剪空间转换到屏幕空间并在屏幕空间绘制
 让我们来定义一个可以生成矩形的方法，这样我们就可以调用它定义形状不一的多个矩形。
 同时我们需要矩形的颜色是可设置的。
 
-首先我们定义一个片断着色器，可以通过全局变量接收自定义颜色。
+首先我们定义一个片元着色器，可以通过全局变量接收自定义颜色。
 
     <script id="2d-fragment-shader" type="notjs">
       precision mediump float;
@@ -518,7 +518,7 @@ WebGL将会把它们从裁剪空间转换到屏幕空间并在屏幕空间绘制
 {{{example url="../webgl-2d-rectangles.html" }}}
 
 我希望你能体会到WebGL其实是一个非常简单的API。好吧，“简单”可能是一个不恰当的描述。
-它做的是一件简单的事，它仅仅运行用户提供的两个方法，一个顶点着色器和一个片断着色器，
+它做的是一件简单的事，它仅仅运行用户提供的两个方法，一个顶点着色器和一个片元着色器，
 去绘制点，线和三角形。虽然做三维可以变得很复杂，但是这种复杂只是作为程序员的你，
 是一种复杂形式的“着色器”。WebGL API只做光栅化处理并且在概念上十分容易理解。