Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: typo #222

Merged
merged 2 commits into from
May 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions webgl/lessons/zh_cn/webgl-fundamentals.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ WebGL只关注两件事:剪辑空间坐标(Clip space coordinates)和颜色。

<canvas id="c"></canvas>

然后再Javascript中查找到该元素
然后在Javascript中查找到该元素

var canvas = document.querySelector("#c");

Expand Down Expand Up @@ -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的语法,会少很多特性。
Expand Down Expand Up @@ -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在中间,正数在中间上面。

Expand Down Expand Up @@ -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);

Expand Down
Loading