# WebGL

TIP

挂起中

WebGL 是画布的 3D 上下文。与其他 Web 技术不同, WebGL 不是 W3C 制定的标准,而是 Khronos Group 的标准。根据官网描述,“Khronos Group 是非营利性、会员资助的联盟,专注于多平台和设备下 并行计算、图形和动态媒体的无专利费开放标准”。 Khronos Group 也制定了其他图形 API,包括作为浏 览器中 WebGL 基础的 OpenGL ES 2.0。

# WebGL 基础概念

WebGL 经常被当成 3D API,人们总想“我可以使用 WebGL 和一些神奇的东西做出炫酷的 3D 作品”。
事实上 WebGL 仅仅是一个光栅化引擎,它可以根据你的代码绘制出点,线和三角形。
想要利用 WebGL 完成更复杂任务,取决于你能否提供合适的代码,组合使用点,线和三角形代替实现。

# GLSL

WebGL 在电脑的 GPU 中运行。因此你需要使用能够在 GPU 上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器, 另一个叫片断着色器,并且使用一种和 C 或 C++类似的强类型的语言 GLSL。 (GL 着色语言)。 每一对组合起来称作一个 program(着色程序)。

# 着色器

  • 着色器方法
    • 顶点
    • 片段

一对着色器方法组成一个着色程序

几乎整个 WebGL API 都是关于如何设置这些成对方法的状态值以及运行它们。 对于想要绘制的每一个对象,都需要先设置一系列状态值,然后通过调用 gl.drawArrays 或 gl.drawElements 运行一个着色方法对。

# 着色器的数据

  • 属性 attribute 和缓冲 buffer

缓冲是发送到 GPU 的一些二进制数据序列(在 JS 中一般就是类型化数组,通过 ArrayBuffer 送进缓冲) 属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。

  • 全局变量 全局变量在着色程序运行前赋值,在运行过程中全局有效。

  • 纹理

纹理是一个数据序列,可以在着色程序运行中随意读取其中的数据。大多数情况存放的是图像数据

  • 可变量

可变量是一种顶点着色器给片断着色器传值的方式,顶点着色器中设置的可变量会在片断着色器运行中获取不同的插值。

# 学习资料

WebGL 理论基础 (opens new window)
理解矩阵乘法 - 阮一峰的网络日志 (opens new window)