3D技术相关基础概念

4/20/2022 3D

在了解 3D 相关技术的过程中,绕不开 OpenGL、OpenGL ES、WebGL、Canvas 这几个名词,总结一下这几个次的概念以及他们之间的关系。

# OpenGL

OpenGL 是 Open Graphics Library 的缩写,是个定义了一个跨编程语言、跨平台的编程接口的标准,显卡通常有 OpenGL 的实现,不同显卡上的 OpenGL 实现也不一定相同,OpenGL 标准不是平台相关的,所以同一个程序可能在不同的显卡上运行。

OpenGL 并不是一个 API 库,而是一个标准,一个规范。这个规范严格的规定了每个函数要如何执行、以及函数的输出值,至于每个函数具体的实现过程、是由各个厂商的开发者,也就是 OpenGL 库的开发者根据自己的硬件特性开发出相应的 API。市场上,OpenGL 大都是显卡厂商、GPU 厂商、以及浏览器厂商比如 Mozilla、Google 等尖端科技公司来实现。

# OpenGL ES

随着手机等移动设备性能的快速提高,人们已经不满足于将移动设备的应用止于通讯应用、记事等传统平面应用。而越来越注重移动设备功能的多样化、娱乐化,手机 3D 游戏、GPS 导航系统等代表了未来移动设备发展的方向。基于这种情况,Khronos 组织于 2003 年 7 月发布了专门针对于嵌入式设备图形开发的标准 OpenGL ES(OpenGL for Embedded Systems),是 OpenGL 三维图形 API 的子集,针对手机、PDA 和游戏主机等嵌入式设备而设计

# WebGL

WebGL,是一项用来在网页上绘制和渲染复杂三维图形(3D 图形),并允许用户与之交互的技术。随着个人计算机和浏览器的性能越来越强,我们能够在 Web 上创建越来越精美、越来越复杂的 3D 图形。

从传统意义上来说,为了显示三维图形,开发者需要使用 C 或 C++语言,辅以专门的计算机图形库,如 OpenGL 或 Direct3D,来开发一个独立的应用程序。现在有了 WebGL,我们只需要向已经熟悉的 HTML 和 JS 中添加一些额外的三维图形学的代码,就可以在网页上显示三维图形了。

WebGL 是内嵌在浏览器中的,不必安装插件和库就可以直接使用它。

# Canvas

首先,HTML 的 Canvas 元素提供了 2D 和 3D 绘图两种功能,平时程序员之间交流所说的 Canvas 一词就是指 Canvas 的 2D 绘图功能,通过 Canvas 元素实现的 3D 绘图功能,也就是所谓的 WebGL,或者说 WebGL 依赖于 Canvas 元素实现。执行 canvas.getContext(‘2d’);返回对象具有一系列绘制二维图形的方法,比如绘制直线、圆弧等 API。执行 canvas.getContext(‘webgl’);返回对象具有一系列绘制渲染三维场景的方法,也就是 WebGL API。

# OpenGL、 OpenGL ES 和 WebGL 的关系

OpenGL ES 可以说是 OpenGL 为了满足嵌入式设备需求而开发一个特殊版本,是其一个子集;而 WebGL,是为了网页渲染效果,将 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定得到。基本关系如下图所示:

关系

在实际应用过程中,前端的 WebGL 是通过 JS 语句,操作本地的 OpenGL 的部分接口,对于移动设备这是操作 OpenGL ES 的接口,来实现页面的图形的渲染,WebGL 只是绑定外面接口的一层,内部的一些核心内容,如着色器,材质,灯光等都是需要借助 GLSL ES 语法来操作的。

三者直接版本的关系:

版本关系

# OpenGL、 OpenGL ES 和 WebGL 的区别

WebGL 与其他 OpenGL 最大差别就是其可以通过 HTML 脚本本身实现 Web 交互式三维动画的制作,无需任何浏览器插件支持。

OpenGL 和 OpenGL ES 最大差别就是两者应用场景不一样,一个是计算机,一个是移动或嵌入式设备。这种差别体现在两个方面:

  1. 窗口系统不一样。OpenGL ES 是一个平台中立的图形库,在它能够工作之前,需要于一个实际的窗口系统关联起来,这一点 OpenGL 也是一样的。但是 OpenGL 时代在不同平台上有不同的机制一关联窗口系统,在 Windows 上是 wgl,在 X-Window 上市 xgl,在 Apple OS 上是 agl 等。而嵌入式市场的平台种类不计其数,单是学习各家手机操作系统的接口就是很大负担了,更不用说致力于支持各种尺寸平台的软件开发者,所以 OpenGL ES 提供了 Window Surface 的抽象,使得移植工作基本可以局限在重新实现一下建立窗口的过程。这个窗口工具是 EGL,全称:embedded Graphic Interface,是 OpenGL ES 和底层 Native 平台 视窗系统之间的接口。

  2. 功能规模不一样。嵌入式设备和移动设备追求的是高性能,因此 OpenGL ES 相对 OpenGL 删减了一切低效能的操作方式,有高性能的决不留低效能的,即只求效能不求兼容性(和苹果的作风类似)。典型的有:

    • 没有 double 型数据类型,但加入了高性能的定点小数数据类型。
    • 没有 glBegin/glEnd/glVertex,只能用 glDrawArrays/glDraw...............
    • 没有实时将非压缩图片数据转成压缩贴图的功能,程序必须直接提供压缩好的贴图

# 总结

  • OpenGL 标准应用的是客户端
  • OpenGL ES 应用的是移动端
  • WebGL 标准应用的是浏览器平台
  • Canvas(画布)只是 HTML 里面的一个元素,是呈现 2D、3D 绘图的基础,通过 Canvas 标签对象的 getContext()方法,可以针对性的获取 2D、3D 绘图的一系列 API 方法。
Last Updated: 1/15/2023, 2:48:14 PM