咱们在画布的核心绘制一个正方形，你能够先看看最终的成果：

代码

上面是残缺的代码，咱们后续将对外面的内容进行解说阐明：

<canvas width=200 height=200 style="outline:1px solid gray;">    十分道歉，您的浏览器不反对canvas!</canvas><!-- 顶点着色器 --><script type='x-shader/x-vertex' id='vs'>    void main(){        gl_Position=vec4(0.0,0.0,0.0,1.0);        gl_PointSize=100.0;    }</script><!-- 片段着色器 --><script type='x-shader/x-fragment' id='fs'>    void main(){        gl_FragColor=vec4(1.0,0.0,0.0,1.0);    }</script><script>    // 先获取gl    var gl = document.getElementsByTagName('canvas')[0].getContext('webgl');    // 定义一个把着色器字符串加载成着色器对象的函数    var loadShader = function (type, source) {        // 创立着色器对象        var shader = gl.createShader(type);        // 绑定资源        gl.shaderSource(shader, source);        // 编译着色器        gl.compileShader(shader);        return shader;    };    // 别离加载顶点着色器对象和片段着色器对象    var vertexShader = loadShader(gl.VERTEX_SHADER, document.getElementById('vs').innerHTML),        fragmentShader = loadShader(gl.FRAGMENT_SHADER, document.getElementById('fs').innerHTML);    // 创立一个着色器程序    var glProgram = gl.createProgram();    // 把后面创立的两个着色器对象增加到着色器程序中    gl.attachShader(glProgram, vertexShader);    gl.attachShader(glProgram, fragmentShader);    // 把着色器程序链接成一个残缺的程序    gl.linkProgram(glProgram);    // 应用这个残缺的程序    gl.useProgram(glProgram);    // 绘制一个点    gl.drawArrays(gl.POINTS, 0, 1);</script>

绘制流程

下面的流程看起来是不是很简略，无论是简略的3D还是简单的3D，须要且须要依照下面的流程进行（当然，在细节上会有一些不同）。

记住这个流程，后续的阐明也依照这个思路进行。

着色器

绘制的第一步，就是筹备好两个着色器： 顶点着色器 和 片段着色器 。前者用于形容绘制的图形的点的地位，后者用于形容每个点的色彩。

可能这样说你会无奈了解，其实简略的说就是：咱们在绘图的时候，会一次性的把数据都传递给GPU，传递给GPU的数据须要一些"整顿"后再应用，而着色器就是驻留在GPU上的这段"整顿程序"。

咱们传递的数据是什么？不就是点的地位和点的色彩吗。所以，着色器就分为了顶点着色器和片段着色器（有时候也叫片元着色器），前者解决点，后者解决色彩。

定义着色器

所以，让咱们先看看这里的顶点着色器的具体代码：

void main(){    gl_Position=vec4(0.0,0.0,0.0,1.0);    gl_PointSize=100.0;}

内置变量gl_Position示意点的地位，gl_PointSize示意点的大小。

咱们这里为了简略，点的地位和大小是写死的，理论能够有更丰盛的形式进行设置，这里先不阐明了。

那么，点的色彩在哪里设置？没错，在片段着色器，看看具体代码：

void main(){    gl_FragColor=vec4(1.0,0.0,0.0,1.0);}

同样的存在一个内置变量，这里叫gl_FragColor， 其就示意点的色彩。

着色器失效

目前为止，下面的两个着色器只是两段字符串，还需调用webgl的办法失效（这里的代码比拟固定，查看例子即可）。

数据

因为咱们这里把数据写死了，因而不须要传递，就先不再赘述了。

绘制

咱们这里写死的数据就一个点，由此间接：

gl.drawArrays(gl.POINTS, 0, 1);

这样，一个点就进去了。

除了绘制点，咱们还能够绘制线和三角形，当然，绘制多个点、线或三角形的时候，也有更丰盛的办法，此外，除了惯例绘制办法，还有对应的更高效的索引绘制办法。