webgl做三维的优势是跨浏览器，跨平台，不像active插件版的三维软件只支持ie浏览器，而且还必须安装插件。随着webgl的发展，电脑硬件gpu的发展，webgl定能取代插件。webgl三维其实就是在html5的canvas标签上绘制三维图形。做前端的朋友肯定用过canvas标签，canvas就是画板的意思，在三维这块就是在定义好的三维坐标系中绘制三维图形，再加上定义的光照，地理坐标系等就出来了很多webgl版本的电子地球。例如目前比较流行的开源webgl电子地球js开发包cesium。
从webgl编程指南这本书开始学习webgl相关知识，webgl开发整体来说和前端开发的区别用下图表示帮助理解。
webgl开发大致的流程是
下面 我们用以上步骤绘制一个三角形。
1.获取canvas元素
var canvas = document.getElementById('webgl');
2.获取绘图上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
3.初始化着色器
//顶点着色器
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
//片元着色器
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
function initVertexBuffers(gl) {
var vertices = new Float32Array([
0.0, 0.5, -0.5, -0.5, 0.5, -0.5
]);
var n = 3;
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program,'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(a_Position);
return n;
}
4.设置canvs背景色
gl.clearColor(0, 0, 0, 1);
5.绘制
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);//gl.POINTS