diff --git a/docs/05-more-on-rendering.md b/docs/05-more-on-rendering.md index a2ea690..ab4c66d 100644 --- a/docs/05-more-on-rendering.md +++ b/docs/05-more-on-rendering.md @@ -102,9 +102,9 @@ public void cleanup() { glDrawArrays(GL_TRIANGLES, 0, mesh.getVertexCount()); ``` -`Mesh`类通过将位置数组除以3来计算顶点的数目(因为我们使用X,Y和Z坐标)。现在,我们可以渲染更复杂的形状。来试试渲染一个四边形,一个四边形可以用两个三角形来组成,如图所示: +`Mesh`类通过将位置数组除以3来计算顶点的数目(因为我们使用X,Y和Z坐标)。现在,我们可以渲染更复杂的形状。来试试渲染一个正方形,一个正方形可以用两个三角形来组成,如图所示: -![四边形坐标](_static/05/quad_coordinates.png) +![正方形坐标](_static/05/quad_coordinates.png) 如你所见,这两个三角形中的每一个都由三个顶点组成。第一个三角形由顶点V1、V2和V4(橙色的点)组成,第二个三角形由顶点V4,V2和V3(绿色的点)组成。顶点以逆时针顺序连接,因此要传递的浮点数数组应该是[V1, V2, V4, V4, V2, V3]。因此,`DummyGame`的`init`方法将是这样的: @@ -124,15 +124,15 @@ public void init() throws Exception { } ``` -现在你应该可以看到这样的一个四边形: +现在你应该可以看到这样的一个正方形: -![四边形渲染](_static/05/quad_rendered.png) +![正方形渲染](_static/05/quad_rendered.png) -我们做完了吗?并没有,上述代码仍存在一些问题。我们使用了重复的坐标来表示四边形,传递了两次V2和V4坐标。这是个小图形,它可能不是什么大问题,但想象在一个更复杂的3D模型中,我们会多次重复传递坐标。记住,我们使用三个浮点数表示顶点的位置,但此后将需要更多的数据来表示纹理等。考虑到在更复杂的形状中,三角形直接共享的顶点数量甚至更高,如图所示(其顶点可以在六个三角形之间共享): +我们做完了吗?并没有,上述代码仍存在一些问题。我们使用了重复的坐标来表示正方形,传递了两次V2和V4坐标。这是个小图形,它可能不是什么大问题,但想象在一个更复杂的3D模型中,我们会多次重复传递坐标。记住,我们使用三个浮点数表示顶点的位置,但此后将需要更多的数据来表示纹理等。考虑到在更复杂的形状中,三角形直接共享的顶点数量甚至更高,如图所示(其顶点可以在六个三角形之间共享): ![海豚](_static/05/dolphin.png) -最后,我们需要更多的内存来储存重复的数据,这就是索引缓冲区(Index Buffer)大显身手的时候。为了绘制四边形,我们只需要以这样的方式指定每个顶点:V1, V2, V3, V4。每个顶点在数组中都有一个位置。V1在位置0上,V2在位置1上,等等: +最后,我们需要更多的内存来储存重复的数据,这就是索引缓冲区(Index Buffer)大显身手的时候。为了绘制正方形,我们只需要以这样的方式指定每个顶点:V1, V2, V3, V4。每个顶点在数组中都有一个位置。V1在位置0上,V2在位置1上,等等: | V1 | V2 | V3 | V4 | | --- | --- | --- | --- | @@ -217,7 +217,7 @@ public void init() throws Exception { } ``` -现在为示例代码添加颜色吧。我们把另一组浮点数传递给`Mesh`类,它储存了四边形中每个顶点的颜色。 +现在为示例代码添加颜色吧。我们把另一组浮点数传递给`Mesh`类,它储存了正方形中每个顶点的颜色。 ```java public Mesh(float[] positions, float[] colours, int[] indices) { @@ -290,7 +290,7 @@ public void render(Window window, Mesh mesh) { // ... ``` -在渲染过程中,你可以看到我们需要启用位于位置1的VAO属性。现在可以将如下所示颜色数组传给`Mesh`类,给四边形添加点颜色。 +在渲染过程中,你可以看到我们需要启用位于位置1的VAO属性。现在可以将如下所示颜色数组传给`Mesh`类,给正方形添加点颜色。 ```java float[] colours = new float[]{ @@ -301,7 +301,7 @@ float[] colours = new float[]{ }; ``` -然后会得到一个色彩鲜艳的四边形。 +然后会得到一个色彩鲜艳的正方形。 -![色彩鲜艳的四边形](_static/05/coloured_quad.png) +![色彩鲜艳的正方形](_static/05/coloured_quad.png) diff --git a/docs/06-transformations.md b/docs/06-transformations.md index 7889ac8..c2670af 100644 --- a/docs/06-transformations.md +++ b/docs/06-transformations.md @@ -2,7 +2,7 @@ ## 投影 -让我们回到在前一章中创建的色彩鲜艳的正方形。如果仔细看,它更像一个矩形,你甚至可以将窗口的宽度从600像素改为900像素,失真就会更加明显。这发生了什么呢? +让我们回看在前一章中创建的色彩鲜艳的正方形。如果仔细看,它更像一个矩形,你甚至可以将窗口的宽度从600像素改为900像素,失真就会更加明显。这发生了什么呢? 如果你查看顶点着色器的代码,我们只是直接地传递坐标。换句话说,当一个顶点的X坐标为0.5时,我们让OpenGL在屏幕的X坐标为0.5的位置绘制它。下图展示了OpenGL坐标系(仅含X和Y轴)。