几年前,Java应用程序(结合了applet和JOGL)被用于通过寻址GPU(图形处理单元)来处理Web上的3D图形。由于applet需要运行JVM,因此变得难以依赖Java applet。几年后,人们停止使用Java小程序。
Adobe(Flash,AIR)提供的Stage3D API提供了GPU硬件加速架构。使用这些技术,程序员可以在Web浏览器以及IOS和Android平台上开发具有2D和3D功能的应用程序。由于Flash是专有软件,因此未用作Web标准。
2011年3月,发布了WebGL。它是一种无需JVM即可运行的开放软件。它完全由Web浏览器控制。
HTML5的新版本具有支持3D图形的多种功能,例如2D Canvas,WebGL,SVG,3D CSS转换和SMIL。在本教程中,我们将介绍WebGL的基础知识。
OpenGL(开放图形库)是用于2D和3D图形的跨语言,跨平台的API。它是命令的集合。OpenGL4.5是OpenGL的最新版本。下表列出了与OpenGL相关的一组技术。
API | 使用的技术 |
---|---|
OpenGL ES | 它是嵌入式系统上2D和3D图形的库,包括控制台,电话,设备和车辆。OpenGL ES 3.1是其最新版本。它由Khronos集团维护www.khronos.org |
约格 | 它是OpenGL的Java绑定。JOGL 4.5是其最新版本,由jogamp.org维护。 |
WebGL | 它是OpenGL的JavaScript绑定。WebGL 1.0是其最新版本,由khronos组维护。 |
OpenGLSL | OpenGL Shading语言。它是一种编程语言,是OpenGL 2.0和更高版本的”伴侣”。它是OpenGL 4.4核心规范的一部分。它是专门为嵌入式系统(如手机和平板电脑上的嵌入式系统)量身定制的API。 |
注意-在WebGL中,我们使用GLSL编写着色器。
WebGL(Web图形库)是Web上3D图形的新标准,旨在渲染2D图形和交互式3D图形。它源自OpenGL的ES 2.0库,该库是用于电话和其他移动设备的低级3D API。WebGL提供与ES 2.0(嵌入式系统)类似的功能,并在现代3D图形硬件上表现良好。
它是可以与HTML5一起使用的JavaScript API。WebGL代码写在HTML5的<canvas>标记内。该规范允许Internet浏览器访问使用它们的那些计算机上的图形处理单元(GPU)。
一位名叫Vladimir Vukicevic的美裔塞尔维亚软件工程师完成了基础工作,并领导了WebGL的创建
渲染是使用计算机程序从模型生成图像的过程。在图形中,虚拟场景是使用诸如几何,视点,纹理,照明和阴影之类的信息来描述的,这些信息会通过渲染程序传递。该渲染程序的输出将是数字图像。
渲染有两种类型:
渲染可以在本地或远程完成。如果要渲染的图像过于复杂,则在具有足够的硬件资源来渲染复杂场景的专用服务器上远程完成渲染。也称为基于服务器的渲染。渲染也可以由CPU在本地完成。这称为基于客户端的渲染。
WebGL遵循基于客户端的渲染方法来渲染3D场景。使用客户端的图形硬件在本地执行获取图像所需的所有处理。
根据NVIDIA的说法,GPU是“具有集成的变换,照明,三角形设置/剪切和渲染引擎的单芯片处理器,每秒能够处理至少1000万个多边形。” 与具有为顺序处理而优化的几个内核的多核处理器不同,GPU由数千个较小的内核组成,这些内核可以有效地处理并行工作负载。因此,GPU加速了旨在输出到显示器的帧缓冲区(内存中包含完整帧数据的一部分)中图像的创建。
在GPU加速计算中,应用程序已加载到CPU中。每当遇到代码的计算密集型部分时,该部分代码就会被加载并在GPU上运行。它使系统能够有效地处理图形。
GPU将具有单独的内存,并且一次运行一小部分代码的多个副本。GPU处理其本地内存(而不是中央内存)中的所有数据。因此,需要将GPU处理的数据加载/复制到GPU内存,然后进行处理。
在具有上述架构的系统中,应减少CPU和GPU之间的通信开销,以实现3D程序的更快处理。为此,我们必须复制所有数据并将其保存在GPU上,而不是反复与GPU通讯。
下表列出了支持WebGL的浏览器:
Browser Name | Version | Support |
---|---|---|
Internet Explorer | 11 and above | 全面的支持 |
Google Chrome | 39 and above | 全面的支持 |
Safari | 8 | 全面的支持 |
Firefox | 36 and above | 部分支持 |
Opera | 27 and above | 部分支持 |
Browser Name | Version | Support |
---|---|---|
Chrome for Android | 42 | 部分支持 |
Android browser | 40 | 部分支持 |
IOS Safari | 8.3 | 全面的支持 |
Opera Mini | 8 | 不支持 |
Blackberry Browser | 10 | 全面的支持 |
IE mobile | 10 | 部分支持 |
这是使用WebGL的优势:
无需为WebGL设置其他环境。支持WebGL的浏览器具有自己的WebGL内置设置。