画一个点
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。