【WebGL与Graphics的学习之路01】如何绘制一个点？

前言：

        在前端可视化方面，WebGL一直挺不错。这几天在“研究”（嘻嘻）它，有了一点自己的见解，有兴趣的可以接着往下看，我将讲述如何在浏览器上绘制一个点来简单说明webgl系统的绘制流程。

一、两种着色器

顶点着色器：

        

片元着色器（Fragment shader）： 进行逐片元处理过程如光照的程序、颜色的处理。可以理解为像素。

二、初始化着色器 initshaders()

从执行javascript程序到浏览器中显示的过程：

        顶点着色器中有点的位置与大小信息，片元着色器有点的颜色信息，两者存储的是字符串形式的javascript的着色器代码，但在initshaders（）这个初始化着色器之前，顶点着色器和片元着色器都是空白的（可以理解为webgl系统无法识别），inshaders（）的作用就是把字符串代码从JavaScript传递给webgl系统，并建立着色器进行编译连接等操作。注意，着色器运行在webgl系统中，而不是javascript程序中。

 2.1 两种变量

        attribute变量（属性）：传输与顶点有关的数据，且只能在顶点着色器中使用。

        uniform变量 （统一）：向顶点着色器和片元着色器传输“一致的”的数据。     

 

 vec4表示数据需要4个浮点数来表示

 2.2 获取attribute的存储位置和赋值

gl.getAttribLocation(gl.program,"a_Position") : 想要向attribute变量传递数据需要拿到它的存储位置.第一个参数为程序对象，需在initshaders（）调用之后才能访问。第二个参数即为attribute的变量名。

gl.vertexAttrib3f(location,x,y,z) : 第一个参数为attribute的存储位置，后面参数是浮点数，为x，y，z坐标值。3为需要传递三个数据（也可以为1，2，4），f为浮点数（也可以为v，也就是矢量版本）。例如：

 此时的4是指数组元素个数

到这里其实已经可以绘制一个点了，下面是效果及js代码：

var vsSource = `
attribute vec4 a_Position;
attribute float a_PointSize;
            void main(void){ //void即无返回值

                gl_Position =a_Position;
                gl_PointSize = a_PointSize;
            }
        `;
var fsSource = `
            void main(void){
                gl_FragColor = vec4(1.0,0.0,0.0,1.0);
            }
        `;
var gl;

function init() {
    main();
    initShaders();
    initBuffers();
    drawScene();
}

function main() {

    var canvas = document.getElementById('glcanvas');
    gl = canvas.getContext('webgl');

}

function initShaders() {

//下面就是将顶点着色器和片元着色器传递到webgl系统的过程
    let vsshader = gl.createShader(gl.VERTEX_SHADER);
    let fsshader = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vsshader, vsSource);
    gl.shaderSource(fsshader, fsSource);

    gl.compileShader(vsshader);
    gl.compileShader(fsshader);

    let program = gl.createProgram();
    gl.attachShader(program, vsshader);
    gl.attachShader(program, fsshader);

    gl.linkProgram(program);
    gl.useProgram(program);

    gl.program = program //这里就是程序对象

}

function initBuffers() { //initBuffers()的具体作用以后再说,这里是把点的信息存储在这里
    var position = gl.getAttribLocation(gl.program, 'a_Position');
    gl.vertexAttrib3f(position, 0.0, 0.0, 0.0);
    let size = gl.getAttribLocation(gl.program, 'a_PointSize');
    gl.vertexAttrib1f(size, 20.0);
}

function drawScene() {
    gl.clearColor(0.0, 0.0, 0.0, 1.0); //设置背景色
    gl.clear(gl.COLOR_BUFFER_BIT);//清除webgl的颜色缓冲区并用背景色填充
    gl.drawArrays(gl.POINTS, 0, 1);//1.画点 2.从第一个开始 3.个数
}

总结：

        学习关键是理解javascript是如何将数据传递给着色器的以及顶点着色器和片元着色器的操作。