WebGL本领储备指南,本领储备指南

调试工具

比较成熟的 WebGL 调试工具是WebGL
Inspector。

Canvas

熟悉 Canvas 的同学都知道,Canvas 绘图先要获取绘图上下文:

var context = canvas.getContext('2d');

context上调用各种函数绘制图形,比如:

// 绘制左上角为(0,0),右下角为(50, 50)的矩形
context.fillRect(0, 0, 50, 50);

WebGL 同样需要获取绘图上下文:

var gl = canvas.getContext('webgl'); // 或 experimental-webgl

但是接下来,如果想画一个矩形的话,就没这么简单了。实际上,Canvas
是浏览器封装好的一个绘图环境,在实际进行绘图操作时,浏览器仍然需要调用
OpenGL API。而 WebGL API 几乎就是 OpenGL API 未经封装,直接套了一层壳。

Canvas 的更多知识,可以参考:

  • JS
    权威指南的
    21.4 节或 JS
    高级程序设计中的
    15 章
  • W3CSchool
  • 阮一峰的 Canvas
    教程

深度检测

当两个表面重叠时,前面的模型会挡住后面的模型。比如这个例子,绘制了两个交叉的三角形(
varray 和 carray 的长度变为 18,gl.drawArrays 最后一个参数变为
6)。为了简单,这个例子去掉了矩阵变换过程,直接向着色器传入 CCV 坐标。

图片 1

图片 2

顶点着色器给出了 6 个顶点的 gl_Position ,经过光栅化,片元着色器获得了
2X 个片元(假设 X 为每个三角形的像素个数),每个片元都离散的 x,y
坐标值,还有 z 值。x,y 坐标就是三角形在 Canvas
上的坐标,但如果有两个具有相同 x,y 坐标的片元同时出现,那么 WebGL
就会取 z 坐标值较小的那个片元。

在深度检测之前,必须在绘制前开启一个常量。否则,WebGL 就会按照在 varray
中定义的顺序绘制了,后面的会覆盖前面的。

JavaScript

gl.enable(gl.DEPTH_TEST);

1
gl.enable(gl.DEPTH_TEST);

实际上,WebGL 的逻辑是这样的:依次处理片元,如果渲染缓冲区(这里就是
Canvas
了)的那个与当前片元对应的像素还没有绘制时,就把片元的颜色画到渲染缓冲区对应像素里,同时把片元的
z
值缓存在另一个深度缓冲区的相同位置;如果当前缓冲区的对应像素已经绘制过了,就去查看深度缓冲区中对应位置的
z 值,如果当前片元 z 值小,就重绘,否则就放弃当前片元。

WebGL 的这套逻辑,对理解蒙版(后面会说到)有一些帮助。

顶点索引

gl.drawArrays()是按照顶点的顺序绘制的,而
gl.drawElements()可以令着色器以一个索引数组为顺序绘制顶点。比如这个例子。

图片 3

这里画了两个三角形,但只用了 5
个顶点,有一个顶点被两个三角形共用。这时需要建立索引数组,数组的每个元素表示顶点的索引值。将数组填充至gl.ELEMENT_ARRAY,然后调用
gl.drawElements()。

var iarray = new Uint8Array([0,1,2,2,3,4]);
var ibuffer = gl.createBuffer(gl.ARRAY_BUFFER, ibuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iarray, gl.STATIC_DRAW);

矩阵变换

三维模型,从文件中读出来,到绘制在 Canvas 中,经历了多次坐标变换。

假设有一个最简单的模型:三角形,三个顶点分别为(-1,-1,0),(1,-1,0),(0,1,0)。这三个数据是从文件中读出来的,是三角形最初始的坐标(局部坐标)。如下图所示,右手坐标系。

图片 4

模型通常不会位于场景的原点,假设三角形的原点位于(0,0,-1)处,没有旋转或缩放,三个顶点分别为(-1,-1,-1),(1,-1,-1),(0,1,-1),即世界坐标。

图片 5

绘制三维场景必须指定一个观察者,假设观察者位于(0,0,1)处而且看向三角形,那么三个顶点相对于观察者的坐标为(-1,-1,-2),(1,-1,-2),(0,1,-2),即视图坐标。

图片 6

观察者的眼睛是一个点(这是透视投影的前提),水平视角和垂直视角都是90度,视野范围(目力所及)为[0,2]在Z轴上,观察者能够看到的区域是一个四棱台体。

图片 7

将四棱台体映射为标准立方体(CCV,中心为原点,边长为2,边与坐标轴平行)。顶点在
CCV 中的坐标,离它最终在 Canvas 中的坐标已经很接近了,如果把 CCV
的前表面看成 Canvas,那么最终三角形就画在图中橙色三角形的位置。

图片 8

上述变换是用矩阵来进行的。

局部坐标 –(模型变换)-> 世界坐标 –(视图变换)-> 视图坐标
–(投影变换)–> CCV 坐标。

以(0,1,0)为例,它的齐次向量为(0,0,1,1),上述变换的表示过程可以是:

图片 9

上面三个矩阵依次是透视投影矩阵,视图矩阵,模型矩阵。三个矩阵的值分别取决于:观察者的视角和视野距离,观察者在世界中的状态(位置和方向),模型在世界中的状态(位置和方向)。计算的结果是(0,1,1,2),化成齐次坐标是(0,0.5,0.5,1),就是这个点在CCV中的坐标,那么(0,0.5)就是在Canvas中的坐标(认为
Canvas 中心为原点,长宽都为2)。

上面出现的(0,0,1,1)是(0,0,1)的齐次向量。齐次向量(x,y,z,w)可以代表三维向量(x,y,z)参与矩阵运算,通俗地说,w
分量为 1 时表示位置,w 分量为 0 时表示位移。

WebGL 没有提供任何有关上述变换的机制,开发者需要亲自计算顶点的 CCV
坐标。

关于坐标变换的更多内容,可以参考:

  • 计算机图形学中的5-7章
  • 变换矩阵@维基百科
  • 透视投影详解

比较复杂的是模型变换中的绕任意轴旋转(通常用四元数生成矩阵)和投影变换(上面的例子都没收涉及到)。

关于绕任意轴旋转和四元数,可以参考:

  • 四元数@维基百科
  • 一个老外对四元数公式的证明

关于齐次向量的更多内容,可以参考。

  • 计算机图形学的5.2节
  • 齐次坐标@维基百科

示例

WebGL 很酷,有以下 demos 为证:

寻找奥兹国
赛车游戏
划船的男孩(Goo
Engine Demo)

WebGL库

目前最流行的 WebGL 库是
ThreeJS,很强大,官网,代码。

调试工具

比较成熟的 WebGL 调试工具是WebGL
Inspector。

顶点索引

gl.drawArrays()是按照顶点的顺序绘制的,而
gl.drawElements()可以令着色器以一个索引数组为顺序绘制顶点。比如这个例子。

图片 10

这里画了两个三角形,但只用了 5
个顶点,有一个顶点被两个三角形共用。这时需要建立索引数组,数组的每个元素表示顶点的索引值。将数组填充至gl.ELEMENT_ARRAY,然后调用
gl.drawElements()。

JavaScript

var iarray = new Uint8Array([0,1,2,2,3,4]); var ibuffer =
gl.createBuffer(gl.ARRAY_BUFFER, ibuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iarray, gl.STATIC_DRAW);

1
2
3
4
var iarray = new Uint8Array([0,1,2,2,3,4]);
var ibuffer = gl.createBuffer(gl.ARRAY_BUFFER, ibuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iarray, gl.STATIC_DRAW);

WebGL库

目前最流行的 WebGL 库是
ThreeJS,很强大,官网,代码。

Canvas

熟悉 Canvas 的同学都知道,Canvas 绘图先要获取绘图上下文:

JavaScript

var context = canvas.getContext(‘2d’);

1
var context = canvas.getContext(‘2d’);

context上调用各种函数绘制图形,比如:

JavaScript

// 绘制左上角为(0,0),右下角为(50, 50)的矩形 context.fillRect(0, 0, 50,
50);

1
2
// 绘制左上角为(0,0),右下角为(50, 50)的矩形
context.fillRect(0, 0, 50, 50);

WebGL 同样需要获取绘图上下文:

JavaScript

var gl = canvas.getContext(‘webgl’); // 或 experimental-webgl

1
var gl = canvas.getContext(‘webgl’); // 或 experimental-webgl

但是接下来,如果想画一个矩形的话,就没这么简单了。实际上,Canvas
是浏览器封装好的一个绘图环境,在实际进行绘图操作时,浏览器仍然需要调用
OpenGL API。而 WebGL API 几乎就是 OpenGL API 未经封装,直接套了一层壳。

Canvas 的更多知识,可以参考:

  • JS
    权威指南的
    21.4 节或 JS
    高级程序设计中的
    15 章
  • W3CSchool
  • 阮一峰的 Canvas
    教程

纹理

attribute
变量不仅可以传递顶点的坐标,还可以传递其他任何逐顶点的数据。比如
HelloTriangle 程序把单个顶点的颜色传入了 a_Color,片元着色器收到
v_Color 后直接赋给 gl_FragmentColor,就决定了颜色。

attribute
变量还可以帮助绘制纹理。绘制纹理的基本原理是,为每个顶点指定一个纹理坐标(在(0,0)与(1,1,)的正方形中),然后传入纹理对象。片元着色器拿到的是对应片元的内插后的纹理坐标,就利用这个纹理坐标去纹理对象上取颜色,再画到片元上。内插后的纹理坐标很可能不恰好对应纹理上的某个像素,而是在几个像素之间(因为通常的图片纹理也是离散),这时可能会通过周围几个像素的加权平均算出该像素的值(具体有若干种不同方法,可以参考)。

比如这个例子。

图片 11

纹理对象和缓冲区对象很类似:使用 gl 的 API 函数创建,需要绑定至常量
gl.ARRAY_BUFFER 和 gl.TEXTURE_2D
,都通过常量对象向其中填入图像和数据。不同的是,纹理对象在绑定时还需要激活一个纹理单元(此处的gl.TEXTURE0),而
WebGL 系统支持的纹理单元个数是很有限的(一般为 8 个)。

var texture = gl.createTexture();
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, textureImage);
var sloc = gl.getUniformLocation(program, 'u_Sampler');
gl.uniform1i(sloc, 0);

片元着色器内声明了 sampler2D 类型的 uniform
变量,通过texture2D函数取样。

precision mediump float;
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;
void main() {
  gl_FragColor = texture2D(u_Sampler, v_TexCoord);
};

浏览器的WebGL系统

WebGL 系统各个组成部分在既定规则下互相配合。稍作梳理如下。

图片 12

这张图比较随意,箭头上的文字表示
API,箭头方向大致表现了数据的流动方向,不必深究。

网络资源和书籍

英文的关于 WebGL 的资源有很多,包括:

  • learning webgl
  • WebGL@MDN
  • WebGL Cheat
    Sheet

国内最早的 WebGL 教程是由郝稼力翻译的,放在 hiwebgl 上,目前 hiwebgl
已经关闭,但教程还可以在这里找到。郝稼力目前运营着Lao3D。

国内已经出版的 WebGL 书籍有:

  • WebGL入门指南:其实是一本讲
    ThreeJS 的书
  • WebGL高级编程:还不错的一本
  • WebGL编程指南:相当靠谱的全面教程

动画

动画的原理就是快速地擦除和重绘。常用的方法是大名鼎鼎的
requestAnimationFrame
。不熟悉的同学,可以参考正美的介绍。

本文的目标

本文的预期读者是:不熟悉图形学,熟悉前端,希望了解或系统学习 WebGL
的同学。

本文不是 WebGL 的概述性文章,也不是完整详细的 WebGL
教程。本文只希望成为一篇供 WebGL 初学者使用的提纲。

WebGL技术储备指南

2015/12/22 · HTML5 · 1
评论 ·
WebGL

原文出处: 淘宝前端团队(FED)-
叶斋   

图片 13

WebGL 是 HTML 5 草案的一部分,可以驱动 Canvas 渲染三维场景。WebGL
虽然还未有广泛应用,但极具潜力和想象空间。本文是我学习 WebGL
时梳理知识脉络的产物,花点时间整理出来与大家分享。

浏览器的WebGL系统

WebGL 系统各个组成部分在既定规则下互相配合。稍作梳理如下。

图片 14

这张图比较随意,箭头上的文字表示
API,箭头方向大致表现了数据的流动方向,不必深究。

发表评论

电子邮件地址不会被公开。 必填项已用*标注