我们在画布中央画一个正方形，大家可以先看看最终效果：下面的代码是完整的代码，后面会讲解内容：抱歉，您的浏览器不支持canvas！绘制过程上面的过程是不是看起来很简单，不管是简单的3D还是复杂的3D，都需要并且需要按照上面的过程来做（当然在细节上会有一些差异）。记住这个过程，后面的说明也会遵循这个思路。着色器绘制的第一步是准备两个着色器：顶点着色器和片段着色器。前者用来描述绘制图形的点的位置，后者用来描述每个点的颜色。可能你看不懂，其实很简单：我们在绘图的时候，会一次性把所有的数据传给GPU，而传给GPU的数据在使用前需要“整理”一下，而着色器就是常驻这个“终结者”，留在GPU上。我们传递什么数据？不就是点的位置和点的颜色吗？因此，着色器分为顶点着色器和片段着色器（有时称为片段着色器），前者处理点，后者处理颜色。定义shader那么，我们在这里看一下vertexshader的具体代码：voidmain(){gl_Position=vec4(0.0,0.0,0.0,1.0);gl_PointSize=100.0;}内置变量gl_Position代表点的位置，gl_PointSize代表点的大小。为了简单起见，点的位置和大小是硬编码的。其实还有更丰富的设置方式，这里就不多说了。那么，点集的颜色在哪里呢？没错，在片段着色器中，看具体代码：voidmain(){gl_FragColor=vec4(1.0,0.0,0.0,1.0);}这里还有一个内置变量叫gl_FragColor，代表的是颜色点。shader生效至此，上面的两个shader只是两个string，需要调用webgl的方法才能生效（这里的代码比较固定，看例子就行）。由于这里数据是硬编码的，没有必要再传下去，这里不再赘述。这里绘制硬编码数据只是一个点，所以直接：gl.drawArrays(gl.POINTS,0,1);这样，一个观点就出来了。除了画点，我们还可以画线和三角形。当然，在绘制多个点、线或三角形时，还有更丰富的方法。此外，除了常规的绘制方法外，还有相应的更高效的索引绘制方法。
