WebGL小记 ｜ 青训营笔记

白阿白
124 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

一、讲了什么：

  • WebGL是什么

  • 构建原理解释

  • 入门构建流程

  • 课后个人总结

  • 引用参考

二、 WebGL是什么：

WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 <canvas>元素中使用。 这种一致性使 API 可以利用用户设备提供的硬件图形加速。

  • OpenGL：一个跨平台的标准2D和3D图像API。

  • 简单来说，它是OpenGL的子集，是“OpenGL for the Web”。

  • 它使得网页可以利用GPU来加速3D图像生成，并被广泛应用于渲染 HTML5 Canvas元素 （由Javascript （参考）动态画出）。 不是所有的layout engines（排版引擎）都支持WebGL。

三、构建原理解释：

为什么难：

它涉及到硬件底层概念原理

图片是如何显示出来的？

EG1：

graph LR
光栅/像素绘制 --> CPU进行逻辑计算 --> GPU进行图像计算 --> 帧缓存//即一块内存地址--> 显示到屏幕上

EG2：

graph LR
轮廓提取 --> 光栅化 --> 帧缓存 --> 渲染

总结一哈：

graph LR
数据 --> 处理 --> 帧缓存 --> 显示

后续构建也是基于这个流程来的~

那处理过程是怎样的呢？

  1. CPU像一根管道，即使很强大，还是只能串行处理（是指机器执行完一条指命后，才取出下一条指令来执行的一种工作方式），假如管道要处理的沙子太多，处理起来还是很慢！
  2. So，我们转换思路，利用GPU并行处理。GPU有大量的小运算单元，也就是小管道，每个管道只负责很少的泥沙处理，且彼此独立，可以同时处理！

四、构建流程：

概览：

👇也就是👇

graph TB
创建WebGL上下文 --> 创建WenGLProgram --> 将数据存入缓冲区 --> 将缓冲区数据读取到GPU --> GPU执行WebGL程序输出结果

创建WebGL上下文

怎么创建的捏，像这样~

创建WenGLProgram

创建好咯，我们该开始写着色器了。
标准环境有两个着色器：

  • 顶点着色器：Vertex Shader

  • 片元着色器：Fragment Shader

构建program：创建，然后把源代码放进来，编译！

将数据存入缓冲区

好的我们继续，(数据到帧缓存)Data to Frame Buffer：绑定Buffer，然后送入缓冲区

将缓冲区数据读取到GPU

也就是Frame Buffer to GPU

GPU执行WebGL程序输出结果

好的终于该输出咯~ 一个红色大三角

四、课后个人总结：

本章有什么知识点不容易掌握？

感觉都不太容易掌握，了解一下也不错，感兴趣的同学可以看月影老师的这个专栏，写的尊的很详细！

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

月影老师还拿传统2D绘图和WebGL做了一个简单的比较：

首先拿cavas画了个三角形很简单：

然后上场的是我们的主角WebGL:(省略一大串代码）

image.png 然后月影老师展示了调用他开源的Mesh.js，代码量相似，🆗的嘛！ image.png

这种情况下是好像是2D好一点，但是如果！如果我们要绘制一百万个三角形嘞？ 都什么年代还在用传统cavas？ NO！

2DWebGL
只能for循环一个个绘制，绘制一百万次可以取出全部三角形顶点，存为数组，并进行压缩，全部结构化。同时处理这一百万个点，然后传入片源着色器，同时渲染这些三角形。这种极端的情况下，WebGL只需绘制一次！

如果绘制多边形嘞？

  • mesh.js封装

  • Earcut进行三角剖分，再把这些顶点传入WebGL

  • 3D Meshing

  • ......

课里有但是笔记没说的

3D Matrix

Transform：平移、旋转、缩放、线性变换（缩放+旋转）

五、引用参考：

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

avatar
文章
阅读
粉丝