Javascript高级编程学习笔记（97）—— WebGL(3) WebGL上下文(1)

WebGL上下文

在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是因为 webgl 的规范仍未制定完成

制定完成后名字就会改成简单的 "webgl"

若是浏览器不支持,那么在获取webgl上下文的时候浏览器会返回 null 因此在使用前须要检测返回值

基本的获取 WebGL 代码以下:

let drawing = document.getElementById("drawing");

// 检测浏览器是否支持canvas
if(drawing.getContext){
    let gl = drawing.getContext("experimental-webgl");
    if(gl){
        // code
    }
}

 

此外在获取 webgl 上下文时能够经过传入第二个参数对象来设置一些选项

支持的配置对象属性以下:

1. alpha: 默认为true 为上下文建立一个 Alpha 通道缓冲区
2. depth: 默认为true 表示可使用16位深缓冲区
3. stencil: 默认为false 表示可使用8位模板缓冲区
4. antialias: 默认为true 表示使用默认机制执行抗锯齿操做
5. premultipliedAlpha: 默认为true 表示缓冲区预乘Alpha值
6. preserveDrawingBuffer: 默认为false 表示在绘图完成后是否保留绘图缓冲区

 

在部分浏览器中若是 getContext() 没法获取webgl上下文会抛出错误,因此最好将调用封装到 try-catch 块中

let drawing = document.getElementById("drawing");
let gl;

// 检测浏览器是否支持canvas
if(drawing.getContext){
    try{
       gl = drawing.getContext("experimental-webgl");
    }catch(e){}
    if(gl){
        // code
    }else{
        alert("WebGL context could not be created");
    }
}

 

常量

若是使用过 OpenGL 的小伙伴可能对其中常常使用的常量都有所了解

WebGL中的常量都保存在刚才获取到的 WebGL 上下文中,这些常量的名称与 OpenGL的常量有所区别即没有 GL_ 前缀

例如  GL_COLOR_BUFFER_BIT 在WebGL中为 gl.COLOR_BUFFER_BIT 

WebGL经过这种方式来支持大多数 OpenGL 常量(有一部分的常量不提供支持)

 

方法命名

在开始WebGL的具体操做的学习以前,有一些WebGL\OpenGL的小常识须要了解

其中比较重要的就是方法的命名方式了

这些方法的命名经过后缀会告诉咱们这个方法接收几个参数,以及这几个参数的类型

例如: gl.uniform4f() 的 4f 则表示接受4个浮点数, gl.uniform3i()则表示接受3个整数

此外 gl.uniform3iv() 的 3iv 最后的 v 则表示 vector 因此即该方法接收 3个整数类型的数组

 

准备绘图

在开始使用 WebGL 进行绘图以前,通常来讲都须要使用某种实色来清空 canvas,为绘图作准备

步骤须要如下两行代码:

gl.clearColor(0,0,0,1); // 设置用于清除的实色
gl.clear(gl.COLOR_BUFFER_BIT);// 使用刚刚设置的实色来清空 canvas

 

视口与坐标

在清除canvas后,下一个步骤则须要定义 WebGL的视口

默认状况下,WebGL可以使用整个 canvas 的区域

若是须要改变视口的大小,那么能够调用 viewport 方法来调整视口大小

gl.viewport(0,0,drawing.width/2,drawing.height/2);

须要注意的是 这里的 (0,0)点和一般的网页坐标不一致这里的 0,0 在canvas 的左下角,通常的网页坐标在左上角

 

此外在 WebGL 视口的内部,(0,0)点则在 刚才定义的视口的正中心,在绘制过程当中,若是使用了超出视口范围的坐标那么该部分会被剪切掉

 

缓冲区

在操做中通常来讲数据都是保存在 JS 的类型化数组中

不过在使用时不能直接经过 JS 类型化数组来进行使用,须要先将输入放入 WebGL 的缓冲区

整体步骤为: 建立缓冲区->绑定缓冲区->填充缓冲区

代码以下:

let buffer = gl.createBuffer();
gl.bindBuffer (gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,0.5,1]),gl.STATIC_DRAW);

其中 bufferData()的第三个参数用于指定使用缓冲区的方式

取值范围是以下几个常量:

• gl.STATIC_DRAW 数据只加载一次,在屡次绘图中使用
• gl.STREAM_DRAW 数据只加载一次,在几回绘图中使用
• gl.DYNAMIC_DRAW 数据动态改变在屡次绘图中使用

 

而释放缓冲区则简单得多,调用 deleteBuffer() 便可

gl.deleteBuffer(buffer);