关于WebGL的开发流程

Posted 2020-10-14 fzfn5049

我们学习WebGL也有3周左右了，我们在这里把我们的开发流程记录一下。

 

在html里的部分，我们由于目前只是一个简单的页面，其实就是一个canvas画布，所以我们没有什么好说的。

 

在js里面，他的一些流程是这样的：

 

1:首先，我们的WebGL的图形绘画其实是以canvas画布为核心的，所以我们需要先获取画布，然后获取gl的文本上下文，具体的操作是：

        var canvas = document.getElementById(‘webgl‘);

        var gl = getWebGLContext(canvas);

 

2:然后，我们的WebGL是基于我们的着色器的，即VSHADER(顶点着色器)和FSHADER(片元着色器)，所以我们需要初始化我们的着色器。当然，我们这里有个错误检查，前期学习的时候应该可以暂且跳过，但是这东西到后期应该挺重要的，不能放过去。

 

3:到了第三步的时候，如果我们只跟着WebGL编程指南,他这里会获取一个a_Position的元素，但是我们仔细思考下，他为什么要获取这个东西？其实这个问题我们还是要从我们的着色器来说。就是从最简单地来说，我们先把顶点着色器理解成绘制顶点的位置和大小等一些其他的顶点特征的；我们的片元着色器就是绘制顶点的颜色的，暂且先这么理解。那么顶点的位置怎么来确定呢？我们需要自己给出，其实就是从我们的js代码中给出我们想要的像素点的位置。其实就是我们的js和我们的着色器之间建立了一种联系。上文中我们已经说到了，我们的着色器已经初始化，其实我们的系统就有了一个存在的’实体’（先这么理解嘛）…所以，我们就用a_Position这个东西来把这两者给联系起来。a_Position我觉得把他理解成HTML里的id嘛…具体的代码就是：

        var a_Position = gl.getAttribLocation(gl.program,‘a_Position‘);

4:下面的步骤就是把你想要绘制的点的信息传递给我们的着色器…，具体的代码就是：

        gl.vertexAttrib3f(a_Position,g_points[i],g_points[i+1],0.0);

5:下面的步骤就是设置幕布颜色，清空当前幕布，最后绘制点...就是这样....

        gl.clearColor(0.0,0.0,0.0,1.0);

        gl.clear(gl.COLOR_BUFFER_BIT);

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