所要了解的概念

WebGL ？ Web Graphics Library，是用于渲染 2D 和 3D 的 JavaScript API。

开始被安利，也是想著可以使用 WebGL 做一些炫酷的 3D 作品。实际上是一个光栅化引擎，能根据代码绘制出点、线和三角形。这里的三角形还是蛮重要的，更复杂的肯定要组合使用点、线和三角形了。

WebGL 能在 GPU 中运行，就需要能够在 GPU 上运行的代码，这样的代码由什么来提供呢？

  • 顶点著色器(vertex shader)
  • 片元著色器(fragment shader)

使用类似 C/C++ 的强类型语言 GLSL（GL Shader Language），顶点著色器的作用自然是计算顶点的位置，WebGL 可以根据计算出的位置对点、线、三角形等一些图元(Primitive，个人理解为组成复杂图形的基本单元)进行光栅化处理，处理时结合片元著色器绘制图元中的每个像素。

渲染过程主要是用 WebGL 的 JavaScript API 各种方法设置顶点著色器和片元著色器，使用得著色器能够在 GPU 中运行。

怎么理解光栅化？

光栅化的过程是将数据经过一系列变换后最终转换为像素，将矢量图形转化为像素点的过程。

有了方法，数据应该怎么发送到 GPU？

网上找文章学习了下有四种:

  • 1.属性 (Attributes) 和缓冲 (Buffers)
  • 2.全局变数 Uniforms
  • 3.纹理 (Textures)
  • 4.可变数 (Varyings)

个人目前学习到了前面两种，纹理 (Textures) 和可变数 (Varyings) 后面会提到。它们分别的作用如下：

1.属性 (Attributes) 和缓冲(Buffers)

将位置信息的数据传递给顶点著色器，当然处理这种方式除了 Attributes，Uniforms 也是可以的。

使用哪一个取决于需要传输数据的本身，attributes 变数传输的是与顶点相关的数据，而 Uniforms 变数传递的是对于所有顶点都相同 (或与顶点无关) 的数据。

Buffers 是发送到 GPU 的一些二进位数据序列，是在 WebGL 系统中的一块内存区域，通常情况下缓冲数据包含了位置、法向量、纹理坐标、顶点颜色值等。可以存储任何数据，可以在缓冲区保存想要绘制的所有顶点的数据，一次性传入多个顶点数据。

2.全局变数 Uniforms

与 Attributes 变数传递类似，全局 Uniforms 由于是全局有效，所以能用做传递给片元著色器。

3.纹理(Textures)

是一个数据序列，可以在著色器程序运行中随意读取其中的数据，大多数情况存放的是图像数据，但是纹理仅仅是数据序列，可以随意存放除了颜色数据以外的其他数据。

4.可变数(Varyings)

是一种顶点著色器传递给片元著色器传值的方式。

使用上面的四种方法可以绘制出点、矩形、颜色、三角形等基本图形。

目前学习的时候主要是结合《WebGL 编程指南》、webglfundamentals.org，这个在知乎和语雀有翻译成中文的WebGL 九浅一深。

webglfundamentals.org

可以看出，WebGL/OpenGL 的核心能力：是处理像素颜色的。

自己的认知错误，刚开始没接触之前我以为 WebGL 是用来做 3D 的，其实和 3D 没有太大的关系。3D 相关的应该是上层的 Shader 和 JavaScript(Web 中的话)。就像它提供了像素绘图的能力，而开发者需要使用上层 Shader & JavaScript 去实现更多的艺术。

Canvas 也是可以处理像素的吖，但是和 WebGL 不同之处在于，WebGL 可以接触显卡 GPU 来处理。具有了加速的能力，GPU 的核数肯定比 CPU 多得多。

WebGPU-Babylon.js(该链接来自 Medium)。

medium.com/@babylonjs/w

对于自己有兴趣学习一下 WebGL 相关的技术，入门困难，要补的基础太多，不焦不燥坚持下去，鞭策自己也会有收获。

新学到的两个约定：

  • VBO(vertex buffer object): 表示存入了顶点数据的一块显存，并包装成了一个对象。
  • VAO(vertex array object): 定义了 VBO 中的数据表示什么，应该传给顶点著色器中的哪个变数，该如何取用这个数据。

周边技能

  • 1.前端学习 WebGL 当然少不了 前端工程化。例如 rollup、Webpack 打包工具。
  • 2.GLSL 语言，这个有点点 C 语言基础，看著应该也不难。
  • 3.学习过程中总结关于 WebGL 的调试技巧(关于调试技巧，编程中都需要积累)。
  • 4.熟悉 WebGL API

3D 模型的，借助于 3D 建模工具，这下知道为什么很多人都在 sketchfab 和一些类似的模型商店下载和购买模型了。

sketchfab.com developer.mozilla.org/z

如何理解渲染管线运行的过程，明白 WebGL 的每个 API 是在操作渲染管线(WebGL 的本质)的哪个部分？是重点。深度检测？ PBR 渲染？ 打开了十万个为什么...


推荐阅读：
相关文章