关于 WebGL ​

WebGL（Web 图形库）是一个 JavaScript API[MDN]，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。

WebGL API 可以让开发者使用 JavaScript 语言直接和显卡（GPU）通信。

GLSL英文全称是 OpenGL Shading Language（OpenGL 着色语言）,是 WebGL 的 GPU 部分的编程语言，用来编写运行在 GPU 上的着色器程序。

着色器程序需要接收 CPU（WebGL 使用 JavaScript） 传递过来的数据，然后对这些数据进行流水线处理，最终显示在屏幕上，进而实现丰富多彩的 3D 应用。

WebGL按照流水线的方式将 3D 模型数据渲染到 2D 屏幕上的，业界把这种渲染方式称为图形管线或者渲染管线。

WebGL 工作原理 ​

WebGL 只能够绘制点、线段、三角形这三种基本图元。那些复杂的立方体、球体、圆柱体等模型本质上是由一个一个的点组成，GPU 将这些点用三角形图元绘制成一个个的微小平面，这些平面之间互相连接，从而组成各种各样的立体模型。

因此，首要任务是创建组成这些模型的顶点数据。

一般情况，最初的顶点坐标是位于模型中心，不能直接传递到着色器中，需要对定点坐标执行模型转换、视图转换、投影转换，转换后的坐标才是 WebGL 可接受的坐标，即裁剪空间坐标。把最终的变换矩阵和原始顶点坐标传递给 GPU，GPU 的渲染管线对它们执行流水线作业。

GPU 渲染管线的主要处理过程如下：

1. 首先进入顶点着色器阶段，利用 GPU 的并行计算优势对顶点逐个进行坐标变换。
2. 然后进入图元装配阶段，将顶点按照图元类型组装成图形。
3. 接下来来到光栅化阶段，光栅化阶段将图形用不包含颜色信息的像素填充。
4. 在之后进入片元着色器阶段，该阶段为像素着色，并最终显示在屏幕上。

相关术语 ​

相关术语：

• 图元：WebGL 可绘制的基本图形元素：点、线段、三角形
• 片元：可理解为像素，像素着色阶段是在片元着色器中
• 裁剪坐标系：是顶点着色器中的 gl_Position 内置变量接收到的坐标所在的坐标系。
• 设备坐标系（NDC 坐标系）：是裁剪坐标系各个分量对 w 分量相除得到的坐标系，特点是 x、y、z 坐标分量的取值范围都在 【-1，1】之间，可以将它理解为边长为 2 的正方体，坐标系原点在正方体中心。

基本图元 ​

• 点（POINTS）
  • 一系列的点
• 三角
  • 基本三角形（TRIANGLES）
    • 绘制一个个独立的三角形，每三个点为一个三角形。如果提供了 6 个点，那就是两个三角形。绘制三角形的数量 = 顶点数 / 3
  • 三角带（TRIANGLE_STRIP）
    • 如果提供 6 个点，则会绘制 4 个三角形，绘制三角形的数量 = 顶点数 - 2
  • 三角扇（TRIANGLE_FAN）
    • 以第一个定点作为所有三角形的顶点进行绘制，绘制三角形的数量 = 顶点数 - 2
• 线段
  • LINES：基本线段。
  • LINE_STRIP：带状线段。
  • LINE_LOOP：环状线段。

开发框架 ​

• three.js 综合，范围较广
• Cesium.js 专用于 3D 地图
• Babylon.js