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);

Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)的更多相关文章

  1. Javascript高级编程学习笔记(98)—— WebGL(4) WebGL上下文(2)

    错误 Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误 如果希望获取WebGL的错误信息,那么就需要手动调用  gl.getError() 方法 该方法会返回以 ...

  2. Javascript高级编程学习笔记(96)—— WebGL(2) 类型化视图

    类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Arr ...

  3. Javascript高级编程学习笔记(99)—— WebGL(5) 绘图

    绘图 WebGL只能绘制三种形状: 点 线 三角 其它的形状都是由上面的三种形状合成之后绘制到三维空间中的 执行绘图操作 WebGL 提供了两种方法: gl.drawElements() gl.dra ...

  4. Javascript高级编程学习笔记(95)—— WebGL(1) 类型化数组

    WebGL webgl 是针对 canvas 的 3D上下文,与其它Web技术不同,WebGL并非是W3C制定的标准,而是由 Khronos Group 制定的. 类型化数组 WebGL所涉及的复杂运 ...

  5. Javascript高级编程学习笔记(3)—— JS中的数据类型(1)

    前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...

  6. JavaScript高级编程学习笔记(第三章之一)

    继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...

  7. Javascript高级编程学习笔记(1)—— JS简介

    此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...

  8. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  9. Javascript高级编程学习笔记(84)—— Canvas(1)基本用法

    Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...

随机推荐

  1. SpringBoot 同时整合thymeleaf html、vue html和jsp

    问题描述 SpringBoot如何同时访问html和jsp SpringBoot访问html页面可以,访问jsp页面报错 SpringBoot如何同时整合thymeleaf html.vue html ...

  2. oracle+mybatis 使用动态Sql在要insert的字段不确定的情况下实现批量insert

    最近做项目遇到一个挺操蛋的问题,由于业务的关系,DB的数据表无法确定,在使用过程中字段可能会增加,这样在insert时给我造成了很大的困扰. 先来看一下最终我是怎么实现的: <insert id ...

  3. 一个靠谱的phpredisadmin文件

    http://download.csdn.net/detail/newjueqi/7227487

  4. Python replace()方法

    描述 Python replace() 方法把字符串中的 old(旧字符串) 替换成 new(新字符串),如果指定第三个参数max,则替换不超过 max 次. 语法 replace()方法语法: st ...

  5. 优化TestNG测试报告

    以下内容引自: https://www.cnblogs.com/jwentest/p/7073223.html 优化testng报告   背景 搞过testng的同学都知道,testng自带的报告非常 ...

  6. Spring_JDBC

    //User实体类 package com.tao.pojo; public class User { private int id; private String name; private Str ...

  7. bzoj 2500 幸福的道路 树上直径+set

    首先明确:树上任意一点的最长路径一定是直径的某一端点. 所以先找出直径,求出最长路径,然后再求波动值<=m的最长区间 #include<cstdio> #include<cst ...

  8. php与html实现交互的基本操作

    今天我们来实现php与html页面注册和登录的效果.中国有句古话叫: 第一步:我们来了解一些php的基本格式. <?php php代码 ?> 第二步:了解php与js的一些基本区别 我们在 ...

  9. java web 在线聊天的基本实现

    随着互联网的发展,http的协议有些时候不能满足需求,比如在现聊天的实现.如果使用http协议必须轮训,或者使用长链接.必须要一个request,这样后台才能发送信息到前端. 后台不能主动找客户端通信 ...

  10. springboot mybatis 多数据源配置

    首先导入mybatis等包,这里就不多说. 下面是配置多数据源和mybatis,每个数据源对应一套mybatis模板 数据源1: package com.aaaaaaa.config.datasour ...