WebGL画一个10px大小的点

Posted 2020-09-18 SkyTeam_LBM

WebGL程序在屏幕上同时使用html和javascript来创建和显示三维图形。WebGL中新引入的<canvas>元素标签，它定义了网页上的绘图区域。

由于<canvas>元素可以灵活地同时支持维维图形和三维图形，它不直接提供绘图方法，而是提供一种叫上下文（context）的机制来进行绘图。我们首先获取这个上下文。

//获取WebGL绘图上下文
var gl = getWebGLContext(canvas, true);

getWebGLContext(element, [debug]);

获取WebGL绘图上下文；

如果开启debug属性，遇到错误时将在控制台显示错误消息。参数：

 

参数	element	指定canvas标签
	debug	默认为false，如果设置为true，javascript中发生的错误将被显示在控制台上。注意，在调试结束后关闭它，否则会影响性能
返回值	non-null	WebGL绘图上下文
	null	WebGL不可用

 

 

 

 

 

 

 

WebGL画一个10px大小的点:

 

/***
 * 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);
}