浏览器3D技术-WebGl

孙彬

Google Map

WebGL是什么

WebGL是基于OpenGL ES2.0的Web标准，可以通过HTML5 Canvas元素作为DOM接口访问。

诞生背景

• Java applets (Java OpenGL)
• Adobe Flash (Flash 3D, Stage 3D)
• Canvas 3D (2006)
• WebGL (2011.03)

WebGL的优点

• 无需依赖第三方插件
• 跨平台
• 底层硬件加速

应用场景

• 游戏
• 数据可视化
• 增强网页效果
• 3D建模
• 数学绘图
• 物理仿真

。。。

WebGl工作流程

着色器

在3D场景的开发过程中会涉及到非常多的计算过程（颜色、位置等），为了提高效率，使用了硬件加速，这个时候GPU的强大计算能力得到了运用。但是，怎样告诉它正确执行相关计算逻辑呢？答案是着色器。着色器告诉相关计算单元做什么，而着色器语言（GLSL ES）来告诉它们怎么做。

我们的js，是跑在浏览器里的语言。而GLSL，它是跑在显卡里面的，它需要手动使用js去调用WebGL编译它的方法，然后变成二进制包，然后让浏览器把它塞入显卡里，最后才能够使用。
所以WebGL绘制比js去绘制的好处在于，WebGL占用的是显卡里的资源，并不过多占用内存，所以性能远高于canvas2D。

1、准备数据阶段

JavaScript传入数据给webGL系统，数据会是以下两种：
 

1. 顶点数据，比如顶点坐标、纹理坐标、顶点颜色、顶点法向量等等；
2. 与顶点无关的数据，比如矩阵、采样器、光源位置向量等等；

2、顶点着色器

顶点着色器（vertex shader）执行，它是一段使用glsl es语言编写的小程序片段，做了以下事情：

1. 接收来自JavaScript传入的顶点数据（attribute变量）、与顶点无关的数据（uniform变量）；
2. 对接收到的数据进行加工处理，然后将最终计算的顶点坐标赋值给内置的gl_Position变量；
3. 将需要的变量传给片元着色器（varying变量）

3、图元装配

简单的说就是将顶点着色器最终计算的顶点坐标连线，组成点、线、面等几何图元。具体是画哪种图元是通过JavaScript传入的图元信息决定的。webGL能画的图元只有点、直线段、三角形三种，图元装配环节就是将复杂的图形分割成一个个的点、直线段、三角形。

4、光栅化

图元装配出来的几何图形被打散成一个个的像素，这个过程叫光栅化。光栅化后的像素才会被着色。

5、片元着色器

片元着色器（fragment shader）执行，和顶点着色器一样，也是一段glsl es语言编写的小程序片段。它会将光栅化后的像素逐个着色，这个过程在颜色缓冲区中进行：

1. 接收来自顶点着色器传过来的顶点数据（比如顶点坐标、纹理坐标、顶点颜色、顶点法向量等）；
2. 对接收到的顶点数据进行线性插值，这样顶点数据就演变为像素数据（比如逐个像素坐标、逐个像素纹理坐标、逐个像素颜色、逐个像素法向量等）；
3. 接收来自JavaScript传入的与顶点无关的数据（uniform变量）
4. 对接收到的数据进行处理，将最终计算的片元（像素）颜色赋值给内置的gl_FragColor变量。

原生WebGL

Three.js

WebGL第三方库

• Three.js
• SceneJS
• BabylonJS
• GLGE
• PhiloGL
• QTEK

......

WebGL相关概念

• 照相机

• 3D对象
• 材质，纹理
• 光源
• 动画
• 交互

照相机

“照相机定义了三维空间到二位屏幕的投影方式”

透视投影和正交投影

3D对象

• 图形（正方体，球体，环形，多面体...）
• 文字
• 粒子系统
• 外部模型

材质，纹理

光源

• 环境光
• 点光源
• 平行光源
• 聚光灯

动画

逐帧动画

补间动画

材质动画

光源动画

纹理动画

关节动画

交互

• 点击检测，拾取
• 缩放，拖拽等

兼容性