如何在WebGL中画图

Original article: https://aralroca.com/blog/how-to-draw-gears-in-webgl

原始文章： https : //aralroca.com/blog/how-to-draw-gears-in-webgl

In this article we continue what we started in “First steps in WebGL”, where we saw what it is and how it works internally: the shaders, the program, buffers, how to link data from CPU to GPU, and finally how to render a triangle. To understand all this well, I recommend first reading the previous chapter.

在本文中，我们继续从“ WebGL的第一步 ”开始的内容，在那里我们看到了它的含义及其内部工作方式： 着色器 ， 程序 ， 缓冲区 ，如何将数据从CPU链接到GPU以及最后如何渲染一个三角形 。 为了很好地理解所有这些，我建议先阅读上一章。

Here, instead of rendering a triangle, we’ll see how to render more complex structures and how to give it movement. To do that we’ll implement three dynamic gears:

在这里，代替渲染三角形，我们将看到如何渲染更复杂的结构以及如何使其运动。 为此，我们将实现三个动态齿轮 ：

Fig 1: gears generated by us in this article 图1：我们在本文中生成的齿轮

识别形状 (Identifying shapes)

The gears we want to draw are composed of circles. Among these circles, there are certain varieties: a circle with teeth, a circle with colored border and circle filled with a color.

我们要画的齿轮是由圆组成的。 在这些圆圈中，有某些变种：带齿的圆圈，带有彩色边框的圆圈和填充有颜色的圆圈。

Fig 2: three different circles 图2：三个不同的圆圈

Therefore, this confirms that we can draw these gears by drawing circles but, as we saw in the previous article, in WebGL you can only rasterize triangles, points, and lines… So, what’s the difference between these circles and how can we make each of them?

因此，这确认我们可以通过绘制圆来绘制这些齿轮，但是，正如我们在上一篇文章中看到的那样，在WebGL中，您只能光栅化三角形，点和线...因此，这些圆之间有什么区别，我们如何制作每个他们中的？

带边框的圆圈 (Circle with border)

To draw a circle with a border, we’ll use multiple points:

要绘制带边框的圆，我们将使用多个点 ：

Fig 3: mouting a circle with 360 points 无花果3：用360点圈出一个圆

Circle with filled color

填充颜​​色的圆圈

To draw a circle with a filled color, we’ll use multiple triangles:

为了绘制一个填充颜色的圆，我们将使用多个三角形 ：

Fig 4: filled circle with triangle strip 图4：带三角形条的实心圆

The drawing mode needed for this is Triangle strip:

为此所需的绘制模式是Triangle strip ：

A triangle strip is a series of connected triangles from the triangle mesh, sharing vertices, allowing for more efficient memory usage for computer graphics. They are more efficient than triangle lists without indexing, but usually equally fast or slower than indexed triangle lists. The primary reason to use triangle strips is to reduce the amount of data needed to create a series of triangles. The number of vertices stored in memory is reduced from 3N to N+2, where N is the number of triangles to be drawn. This allows for less use of disk space, as well as making them faster to load into RAM.Source: Wikipedia

三角形带是三角形网格中一系列相连的三角形，共享顶点，从而可以更有效地利用计算机图形的内存。 它们比不