<!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(){ ' + ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0); ' + ' gl_PointSize = 10.0; ' + '} '; //编写frament shader，可以理解成对每个像素进行处理 //gl_FragColor接收vec4类型的参数，即RGBA，RGB为三原色，最后代表透明度 var fShaderSource = 'void main(){ ' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); ' + '} '; //其实这一段非常像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。