最简单的webgl程序

目标:在画布中画一个点

在我们使用webgl完成这项工作以前,不妨先看看他的兄弟 context2d Api该如何工作?

var context = canvas.getContext("2d"); //获取 context2d 上下文
context.fillStyle = 'rgba(255,0,0,1)'; //设置填充颜色 黑色 'rgba(255,0,0,1)' 红色
context.fillRect(225,50,50,50); //填充一个矩形

可以看出 context 对象非常直观易用.从字面意思基本就可以明白他的功能.

下面轮到 webgl 了

var canvas = document.getElementById('canvas'); // canvas对象获取
var gl = canvas.getContext('webgl');// webgl的context获取
var vertexShaderStr = "\
attribute vec4 a_Position;\
void main(void) {\
    gl_Position = a_Position;\
    gl_PointSize = 50.0;\
}\
";

var fragmentShaderStr = "\
precision mediump float;\
void main(void){\
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);\
}\
";

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderStr);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(shader));
}

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderStr);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(shader));
}

var prg = gl.createProgram();
gl.attachShader(prg, vertexShader);
gl.attachShader(prg, fragmentShader);
gl.linkProgram(prg);
gl.useProgram(prg);

gl.clearColor(0.0, 0.0, 0.0, 1.0);// 设定canvas初始化的颜色
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);// canvas的初始化

var a_PositionLocation = gl.getAttribLocation(prg, 'a_Position');// 获取a_Position的引用位置
gl.vertexAttrib4f(a_PositionLocation, 0.0, 0.0, 0.0, 1.0);//传值
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);// 清空颜色缓冲区和深度缓冲区
gl.drawArrays(gl.POINTS, 0, 1);//绘制

明显无论是 复杂度和代码量, webgl都复杂得多.