From 365d216fe0f1a64d8cfccd3e99f64e875a19a4ff Mon Sep 17 00:00:00 2001
From: JChehe <574805242@qq.com>
Date: Sat, 14 Oct 2017 16:03:19 +0800
Subject: [PATCH] more accurate Chinese translation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
I think this is a more accurate Chinese translation, 片段 / 片断 -> 片元
---
webgl/lessons/zh_cn/webgl-2d-drawimage.md | 2 +-
.../zh_cn/webgl-3d-lighting-directional.md | 12 ++++----
.../lessons/zh_cn/webgl-3d-lighting-point.md | 20 ++++++-------
webgl/lessons/zh_cn/webgl-3d-lighting-spot.md | 2 +-
webgl/lessons/zh_cn/webgl-3d-orthographic.md | 8 ++---
...l-3d-perspective-correct-texturemapping.md | 18 +++++------
webgl/lessons/zh_cn/webgl-3d-perspective.md | 2 +-
webgl/lessons/zh_cn/webgl-3d-textures.md | 6 ++--
webgl/lessons/zh_cn/webgl-boilerplate.md | 6 ++--
webgl/lessons/zh_cn/webgl-fundamentals.md | 30 +++++++++----------
webgl/lessons/zh_cn/webgl-how-it-works.md | 26 ++++++++--------
webgl/lessons/zh_cn/webgl-image-processing.md | 16 +++++-----
.../lessons/zh_cn/webgl-less-code-more-fun.md | 6 ++--
webgl/lessons/zh_cn/webgl-shaders-and-glsl.md | 28 ++++++++---------
webgl/lessons/zh_cn/webgl-text-texture.md | 2 +-
15 files changed, 92 insertions(+), 92 deletions(-)
diff --git a/webgl/lessons/zh_cn/webgl-2d-drawimage.md b/webgl/lessons/zh_cn/webgl-2d-drawimage.md
index f70b178e8..e3dfb5d65 100644
--- a/webgl/lessons/zh_cn/webgl-2d-drawimage.md
+++ b/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;
diff --git a/webgl/lessons/zh_cn/webgl-3d-lighting-directional.md b/webgl/lessons/zh_cn/webgl-3d-lighting-directional.md
index 5d978f33f..a240b12f4 100644
--- a/webgl/lessons/zh_cn/webgl-3d-lighting-directional.md
+++ b/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;
}
```
diff --git a/webgl/lessons/zh_cn/webgl-3d-lighting-point.md b/webgl/lessons/zh_cn/webgl-3d-lighting-point.md
index b1c2b2e00..92b598992 100644
--- a/webgl/lessons/zh_cn/webgl-3d-lighting-point.md
+++ b/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`，
将它和法向量相乘，查看光线是否直接反射到眼前。
// 从顶点着色器中传入的值
diff --git a/webgl/lessons/zh_cn/webgl-3d-lighting-spot.md b/webgl/lessons/zh_cn/webgl-3d-lighting-spot.md
index 299c927c9..340550e43 100644
--- a/webgl/lessons/zh_cn/webgl-3d-lighting-spot.md
+++ b/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;
diff --git a/webgl/lessons/zh_cn/webgl-3d-orthographic.md b/webgl/lessons/zh_cn/webgl-3d-orthographic.md
index 95e04d413..ad9dbb946 100644
--- a/webgl/lessons/zh_cn/webgl-3d-orthographic.md
+++ b/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;
}
```
-然后在片断着色器中使用颜色
+然后在片元着色器中使用颜色
```
diff --git a/webgl/lessons/zh_cn/webgl-3d-textures.md b/webgl/lessons/zh_cn/webgl-3d-textures.md
index 68a67f66d..1f42e8c46 100644
--- a/webgl/lessons/zh_cn/webgl-3d-textures.md
+++ b/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` 方法，
在纹理上找到对应的颜色。
diff --git a/webgl/lessons/zh_cn/webgl-boilerplate.md b/webgl/lessons/zh_cn/webgl-boilerplate.md
index f05134d6a..9d21e6670 100644
--- a/webgl/lessons/zh_cn/webgl-boilerplate.md
+++ b/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(
diff --git a/webgl/lessons/zh_cn/webgl-fundamentals.md b/webgl/lessons/zh_cn/webgl-fundamentals.md
index 6ccbd29cc..ae02897b9 100644
--- a/webgl/lessons/zh_cn/webgl-fundamentals.md
+++ b/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