• 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的具体操作的学习之前,有一些WebGLOpenGL的小常识需要了解

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

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

    例如: 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);
  • 相关阅读:
    框架,样式表的一些认解,今天这节可有点不在状态,正在规划学习流程,让自己更快的提升起来。看着其他小伙伴都太厉害啦。努力!0909上
    表单元素的了解和表单元素分类,代码的认解。 0908下
    表格标题——简单表格的理解与认识 0906下
    HDU 1024 DP Max Sum Plus Plus
    zoj 1670 Jewels from Heaven
    BestCoder Round #68 (div.2) 1002 tree
    POJ 2986 A Triangle and a Circle 圆与三角形的公共面积
    609C Load Balancing
    609B Load Balancing
    codeforce 609A
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10760965.html
Copyright © 2020-2023  润新知