WebGL画一个10px大小的点
WebGL程序在屏幕上同时使用HTML和javascript来创建和显示三维图形。WebGL中新引入的<canvas>元素标签,它定义了网页上的绘图区域。
由于<canvas>元素可以灵活地同时支持维维图形和三维图形,它不直接提供绘图方法,而是提供一种叫上下文(context)的机制来进行绘图。我们首先获取这个上下文。
//获取WebGL绘图上下文 var gl = getWebGLContext(canvas, true);
getWebGLContext(element, [debug]);
获取WebGL绘图上下文;
如果开启debug属性,遇到错误时将在控制台显示错误消息。参数:
![](https://images2015.cnblogs.com/blog/347716/201705/347716-20170518104903447-90080497.png)
/*** * 1.画一个矩形 */ function main() { //获取<canvas>标签 var canvas = document.getElementById("myCanvas"); //获取WebGL绘图上下文 var gl = getWebGLContext(canvas, true); //如果浏览器不支持WebGL则提示错误 if(!gl){ console.log("请使用高版本的浏览器!"); return; } console.log(gl); //指定清除颜色缓冲区的颜色,每个分量的取值范围0-1 gl.clearColor(0.5, 1, 1, 1); //用指定的颜色清除颜色缓冲区 gl.clear(gl.COLOR_BUFFER_BIT); } /*** * 1.画一个点 */ //顶点着色器程序 var VSHADER_SOURCE = "void main(){\n" + //设置坐标 "gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\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"; function main(){ //获取<canvas>标签 var canvas = document.getElementById("myCanvas"); //获取WebGL绘图上下文 var gl = getWebGLContext(canvas, true); //如果浏览器不支持WebGL则提示错误 if(!gl){ console.log("请使用高版本的浏览器!"); return; } console.log(initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)); //初始化着色器 if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){ console.log("着色器初始化失败!"); return; } //设置<canvas>的背景色 gl.clearColor(0.0, 0.0, 0.0, 1.0); //清空<canvas> /*** * gl.clear();函数继承自OpenGL(); * 它基于多基本缓冲区模型,比二维绘图上下文复杂的多。 * 清空绘图区,实际上是在清空颜色缓冲区 通过指定的颜色去擦除已经绘制的内容。 * 传递 gl.COLOR_BUFFER_BIT参数就是在告诉WebGL清空颜色缓冲区。 * 如果在使用该函数之前没有指定任何颜色,那么默认会rgba(0,0,0,0);作为清除颜色。 * 这个颜色是全透明的,替换出来的结果就是什么颜色都没有,显示为浏览器本身的颜色。 * */ gl.clear(gl.COLOR_BUFFER_BIT); //绘制一个点 /*** * drawArrays(mode, first, count); * mode:指定绘图的方式,可接收以下常量符号: * POINTS LINES LINE_STRIP LINE_LOOP TRIANGLES TRIANGLES_STRIP TRIANGLES_FAN * first:指定从哪个顶点开始绘制 整型 * count:指定绘制需要用到多少个顶点 整型 * 返回值:无 * 错误: * INVALID_ENUM:传入mode参数不是前序参数之一 * INVALID_VALUE:参数first或count是负数 */ gl.drawArrays(gl.POINTS, 0, 1); }