JavaScript 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 相关程序中可以看到很多全局的变量，其中一些是输出变量，一些输入变量。

JavaScript WebGL 绘制一条直线。

Back to top

WebGL lessons

WebGL基础绘制之一：绘制一个点

你好，三角形

WebGL MDN

Khronos

MDN WebGL 绘制正方形