diff --git a/webgl/lessons/zh_cn/webgl-fundamentals.md b/webgl/lessons/zh_cn/webgl-fundamentals.md index 0f434ec8..3c6a5c47 100644 --- a/webgl/lessons/zh_cn/webgl-fundamentals.md +++ b/webgl/lessons/zh_cn/webgl-fundamentals.md @@ -109,7 +109,7 @@ WebGL只关注两件事:剪辑空间坐标(Clip space coordinates)和颜色。 <canvas id="c"></canvas> -然后再Javascript中查找到该元素 +然后在Javascript中查找到该元素 var canvas = document.querySelector("#c"); @@ -152,7 +152,7 @@ WebGL只关注两件事:剪辑空间坐标(Clip space coordinates)和颜色。 } `; -实际上,大多数3D引擎在运行过程中用不同形式的字符串模板、连接等等产生GLSL着色器。然而,本章实例中没有那么复杂,不需要再运行中实时生成GLSL。 +实际上,大多数3D引擎在运行过程中用不同形式的字符串模板、连接等等产生GLSL着色器。然而,本章实例中没有那么复杂,不需要在运行中实时生成GLSL。 > 注意: `#version 300 es` **必须位于着色器代码的第一行**。 它前面不允许有任何的注释或空行! `#version 300 es` 的意思是你想要使用WebGL2的着色器语法:GLSL ES 3.00。 > 如果你没有把它放到第一行,将默认设置为GLSL ES 1.00,即WebGL1.0的语法。相比WebGL2的语法,会少很多特性。 @@ -308,9 +308,9 @@ WebGL会用这三个顶点画出三角形。对于每个像素,WebGL调用片 {{{example url="../webgl-fundamentals.html" }}} -从上面例子看出,顶点着色器只是简单地传数据。因为位置数据都在裁剪空间中,所以没有多余个事情做。*如果您想显示3D图形,则由您决定提供从3D转换为裁剪空间的着色器,因为WebGL只是一个光栅化API* +从上面例子看出,顶点着色器只是简单地传数据。因为位置数据都在裁剪空间中,所以没有多余的事情要做。*如果您想显示3D图形,则由您决定提供从3D转换为裁剪空间的着色器,因为WebGL只是一个光栅化API* -你可能想知道为什么三角形从中间开始,向右上方移动。因为裁剪空间的x轴从-1到+1. 则意味着0在中间,整数则是右边。 +你可能想知道为什么三角形从中间开始,向右上方移动。因为裁剪空间的x轴从-1到+1. 则意味着0在中间,正数则是右边。 至于为什么在上面,因为-1时最下面,+1在顶部,也就是说0在中间,正数在中间上面。 @@ -374,7 +374,7 @@ WebGL会用这三个顶点画出三角形。对于每个像素,WebGL调用片 {{{example url="../webgl-2d-rectangle.html" }}} -你可能注意到这个长方形靠近区域的下面部分。因为WebG把+Y轴当作向上,-Y当作向下。在裁剪空间中,左下角为-1, -1。我们没有改变任何符号,所以当前坐标原点就在左下角。为像原点在左上角的传统坐标空间一样,我们可以反转y坐标轴,如下: +你可能注意到这个长方形靠近区域的下面部分。因为WebGL把+Y轴当作向上,-Y当作向下。在裁剪空间中,左下角为-1, -1。我们没有改变任何符号,所以当前坐标原点就在左下角。为像原点在左上角的传统坐标空间一样,我们可以反转y坐标轴,如下: * gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);