download：基于 Vue3+Vite+TS，二次封装 element-plus 业务组件

引子

看了一个库的源码，外面用到了 WebGL，就开始找 WebGL 的材料。发现相干的知识点很多，依照本人的了解习惯进行了整顿记录。

Origin
My GitHub

简介

WebGL 是一个跨平台、收费的开放式 Web 规范，用于基于 OpenGL ES 的高级 3D 图形 API。可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需应用插件。在 JavaScript 中能够通过 HTML5 的 Canvas 元素应用。WebGL 1.0 基于 OpenGL ES 2.0，WebGL 2.0 基于 OpenGL ES 3.0。目前浏览器反对状况见 Can I use WebGL ?

WebGL 官网相干疏导资源见这里，感觉浏览加载有些慢，独自下载了一份到 Github：WebGL 1.0、WebGL 2.0。

OpenGL ES 是一个跨平台、收费的 API，用于在嵌入式和挪动零碎（包含控制台、手机、设施和车辆）上渲染高级 2D 和 3D 图形。它是 OpenGL 的子集。

OpenGL 是业界最宽泛采纳的 2D 和 3D 图形 API，为各种计算机平台带来了数千种应用程序。它独立于窗口零碎和操作系统。OpenGL 公开了最新图形硬件的所有性能。

OpenGL 标准严格规定了每个函数该如何执行，以及它们的输入值。至于外部具体每个函数是如何实现的，将由 OpenGL 库的开发者自行决定，因而在不同零碎中雷同的 API 可能会呈现体现行为不统一的状况。

OpenGL ES 对应的可编程语言是 OpenGL ES Shading Language (GLSL ES)，该语言基于 OpenGL Shading Language (GLSL) 制订。GLSL 是 OpenGL 的次要着色语言，其格调相似 C 语言，是为图形计算量身定制的，它蕴含一些针对向量和矩阵操作的有用个性。

上面的概念大都是对于 OpenGL，因为 WebGL 外围还是基于 OpenGL，同样有助于了解。

状态机

状态机（FSM）是一个计算数学模型，是一个形象的机器，能在任何给定的工夫处于无限状态中的一个。FSM 能够依据一些输出从一种状态扭转到另一种状态。

OpenGL 本身就是一个微小的状态机：一系列的变量形容 OpenGL 此刻该当如何运行。在 OpenGL 相干程序中能够看到很多全局的变量，其中一些是输入变量，一些输出变量。

图形渲染管线
在 OpenGL 中，任何事物都在 3D 空间中，而屏幕和窗口却是 2D 像素，这导致 OpenGL 的大部分工作都是对于把 3D 坐标转变为适应屏幕的 2D 像素。3D 坐标转为 2D 坐标的处理过程是由 OpenGL 的图形渲染管线（Graphics Pipeline）治理。

图形渲染管线能够被划分为几个阶段，每个阶段将会把前一个阶段的输入作为输出。所有这些阶段都是高度专门化的，并且很容易并行执行。正是因为它们具备并行执行的个性，当今大多数显卡都有成千上万的小解决外围，它们在 GPU 上为每一个（渲染管线）阶段运行各自的小程序，从而在图形渲染管线中疾速解决数据。这些小程序叫做着色器(Shader)。

上面是一个图形渲染管线的每个阶段的形象展现。留神蓝色局部代表能够注入自定义着色器，也就是可编程。

91-pipeline

作为图形渲染管线输出的数据叫做顶点数据 (Vertex Data)。顶点数据是一系列顶点的汇合。一个顶点(Vertex) 是一个 3D 坐标数据的汇合。而顶点数据是用顶点属性 (Vertex Attribute) 示意的，它能够蕴含任何咱们想用的数据。

输出的数据会进入到图形渲染管线的第一个解决阶段：顶点着色器。

顶点着色器
顶点着色器 (Vertex Shader) 可编程，次要的目标是把 3D 坐标转为标准化设施坐标。还会在 GPU 上创立内存用于贮存顶点数据，还要配置 OpenGL 如何解释这些内存，并且指定其如何发送给显卡。顶点着色器容许咱们对顶点属性进行一些根本解决。

顶点相干的信息都寄存在顶点缓冲对象 (Vertex Buffer Objects, VBO) 中，它会在 GPU 内存（通常被称为显存）中贮存大量顶点。应用这些缓冲对象的益处是能够一次性发送一大批数据到显卡上，而不是每个顶点发送一次。当数据发送至显卡的内存中后，顶点着色器简直能立刻拜访顶点，这是个十分快的过程。

接着进入到图元拆卸阶段。

图元拆卸
图元拆卸 (Primitive Assembly) 将顶点着色器输入的所有顶点作为输出，所有的点会装配成指定图元的形态。图元根本形态有：

点
线
三角形
图元拆卸阶段的输入会传递给几何着色器阶段。

几何着色器
几何着色器 (Geometry Shader) 可编程，把图元模式的一系列顶点的汇合作为输出，它能够通过产生新顶点结构出新的（或是其它的）图元来生成其它形态。

几何着色器的输入会被传入光栅化阶段。

光栅化
光栅化 (Rasterization) 会把图元映射为最终屏幕上相应的像素，生成供片段着色器应用的片段(Fragment)。在片段着色器运行之前会执行裁切(Clipping)。裁切会抛弃超出视图以外的所有像素，用来晋升执行效率。

片段着色器
片段着色器 (Fragment Shader) 可编程，次要目标是计算一个像素的最终色彩，这也是所有 OpenGL 高级成果产生的中央。通常，片段着色器蕴含 3D 场景的数据（比方光照、暗影、光的色彩等等），这些数据能够被用来计算最终像素的色彩。

在所有对应色彩值确定当前，最终的对象将会被传到最初一个阶段：测试混合。

测试混合
测试混合 (Tests And Blending) 阶段检测片段的对应深度（和模板(Stencil)）值，用它们来判断这个像素是其它物体的后面还是前面，决定是否应该抛弃。这个阶段也会查看 alpha 值（alpha 值定义了一个物体的透明度）并对物体进行混合(Blend)。所以，即便在片段着色器中计算出来了一个像素输入的色彩，最初渲染的像素色彩也可能齐全不同。

WebGL 中的着色器
WebGL 中次要编写的着色器有顶点着色器和片段着色器。具体实现见 JavaScript WebGL 绘制一条直线。

参考资料

WebGL lessons
WebGL 根底绘制之一：绘制一个点
你好，三角形
WebGL MDN
Khronos
MDN WebGL 绘制正方形