<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>画一个点</title>
</head>
<body onload="main()">
<canvas id="webgl" width="200" height="200">
</canvas>
</body>
<script type="text/javascript" src="webgl01.js">
</script>
</html>
function main(){
var canvas = document.getElementById('webgl');//获得canvas元素
var param = ['webgl', 'experimental-webgl', 'webkit-3d', 'moz-webgl'];
var gl;
for (var i = 0; i < param.length; i++) {
gl = canvas.getContext(param[i]);//创建webgl context（得到画图区域）
if (gl) {
break;
}
}
if (!gl) {
console.log('浏览器不支持WEBGL!');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);//指定颜色
gl.clear(gl.COLOR_BUFFER_BIT);//使用指定的颜色清空画图区域
//编写vertex shader，vertex shader指定特性（位置、大小、颜色等）
//gl_Position指定了点的位置，在三维空间，有XYZ三个轴的坐标，最后一个是透明度，0-1,1代表完全不透明，0则是完全透明
//vec4，是表示一个有四个参数的向量，在WebGL中均采用此类名称，vec表示vector类别，4表示接收四个参数
//每一个参数必须是float类型的，即要加小数点，WebGL采用严格类型，不能使用整型参数
//gl_PointSize 定义点的大小，同样是float类型
var vShaderSource = 'void main(){ \n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' +
' gl_PointSize = 10.0; \n' +
'} \n';
//编写frament shader，可以理解成对每个像素进行处理
//gl_FragColor接收vec4类型的参数，即RGBA，RGB为三原色，最后代表透明度
var fShaderSource = 'void main(){ \n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' +
'} \n';
//其实这一段非常像C，编写源代码，编译，链接...
var vShader = gl.createShader(gl.VERTEX_SHADER);//创建shader
gl.shaderSource(vShader, vShaderSource);//把shader source关联到shader上
gl.compileShader(vShader);//编译shader
var vCompiled = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fShaderSource);
gl.compileShader(fShader);
var fCompiled = gl.getShaderParameter(fShader, gl.COMPILE_STATUS);
var program = gl.createProgram();
gl.attachShader(program, vShader);//将编译完的vertex shader和fragment shader关联到创建的program上
gl.attachShader(program, fShader);
gl.linkProgram(program);//链接program
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
gl.useProgram(program);
gl.drawArrays(gl.POINTS, 0, 1);//第一个参数POINTS表示画点，第二个参数根据前面指定的gl_Position，从第0个元素开始，因为每个点需要三个坐标，即（0.0, 0.0, 0.0），第三个参数表示画一个
}
其中红色加粗的均为WebGL中的方法，为了方便理解，并未对代码结构作规划，重点在于理解WebGL。