WebGL

187 阅读2分钟

1 . 什么是 WebGL ?

WebGL 技术旨在帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果,我们可以将其理解为一种帮助我们开发 3D 网页的绘图技术。对于 WebGL 百度百科给出的解释是 WebGL 是一种 3D 绘图协议,而对此维基百科给出的解释却是一种 JavaScript API

0676.png

2 . WebGL 发展史

WebGL 的发展最早要追溯到 2006 年,WebGL 起源于 Mozilla 员工弗拉基米尔·弗基西维奇的一项 Canvas 3D 实验项目,并于 2006 年首次展示了 Canvas 3D 的原型。这一技术在 2007 年底在 FireFox 和 Opera 浏览器中实现。2009 年初 Khronos Group 联盟创建了 WebGL 的工作组最初的工作成员包括 Apple、Google、Mozilla、Opera 等。 2011 年 3 月 WebGL 1.0 规范发布,WebGL 2 规范的发展始于 2013 年,并于 2017 年 1 月最终完成,WebGL 2 的规范,首度在 Firefox 51、Chrome 56 和 Opera 43 中被支持。

3 . WebGL 工作原理

WebGL 运行在电脑的 GPU 中,因此需要使用能在 GPU 上运行的代码,这样的代码需要提供成对的方法,每对方法中的一个叫顶点着色器而另外一个叫做片元着色器,并且使用 GLSL 语言。将顶点着色器和片元着色器连接起来的方法叫做着色程序。

0677.png

WebGL 只关心两件事:裁剪空间中的坐标值和颜色值。使用 WebGL 只需要给它提供这两个东西。 因此我们通过提供两个着色器来做这两件事,一个顶点着色器提供裁剪空间坐标值一个片元着色器提供颜色值。

  • 顶点着色器 ,顶点着色器的作用是计算顶点的位置,即提供顶点在裁剪空间中的坐标值
  • 片元着色器 , 片元着色器的作用是计算图元的颜色值,我们可以将片元着色器大致理解成网页中的像素

工作流程:

0678.png

1 . 创建上下文:

0679.png

1 . 2 调用两个着色器

0680.png

0681.png

2 . 创建 WebGL program

0682.png

3 . 将数据读入缓冲区

0683.png

4 . 将数据从缓冲区读到GPU

0684.png

5 . GPU 执行program ,输出结果

0690.png

4 . WebGL vs 2D

  • 如果是简单的少量的纯色(或者线性渐变)图形 ,用 2D 更快速 。
  • 但如果是大量的 ,且不是线性渐变的 ,用 2D 性能太低 ,用 WebGL 可以同时处理大量图形!!

5 . 2D 的 transforms

0691.png

6 . 3D标准模型的四个齐次矩阵

0692.png

7 . 学习内容

0693.png

[](充分理解WebGL - 十年踪迹的专栏 - 掘金 (juejin.cn))