WebGL教程

几年前,Java应用程序(小程序和JOGL的组合) − 被用于通过解决在GPU(图形处理单元)来处理网络上的三维图形。作为小程序需要一个JVM运行,它变得很难依靠Java小程序。几年后,人们就开始停止使用Java小程序了。

由Adobe (Flash, AIR)的Stage3D API提供了GPU硬件加速架构。使用这些技术,程序员可以对Web浏览器以及对iOS和Android平台上开发2D和3D功能的应用程序。由于Flash是专有软件,它不是用来作为网络标准。

OpenGL

OpenGL(开放式图形库)是跨语言,对于2D和3D图形的跨平台API。它是命令的集合。OpenGL4.5是OpenGL的最新版本。下表列出了一组相关的OpenGL技术。

API
采用的技术
OpenGL ES 它是从库中的2D和3D图形在嵌入式系统上 - 包括控制台,手机,电器,和车辆。OpenGL ES3.1是它的最新版本。它是由Khronos Group维护,官方网站:www.khronos.org
JOGL 这是Java对OpenGL结合。 JOGL4.5是其最新的版本,它是由 jogamp.org维护
WebGL 这是JavaScript和OpenGL结合。 WebGL 1.0是其最新的版本,其 khronos group 由维护
OpenGLSL OpenGL着色语言。它是一种编程语言,目前需要在OpenGL2.0及更高版本。它是OpenGL4.4核心规范的一部分。它是专为嵌入式系统,如手机和平板电脑量身定制的API。
注 - 在WebGL我们使用GLSL来写着色器。

WebGL是什么东西?

WebGL(Web图形库)是Web上的3D图形的新标准,它是专用于绘制2D图形和交互式3D图形的目的。它是从OpenGL ES 2.0库,用于手机和其他移动设备的低级3D的API衍生。 WebGL提供ES2.0(嵌入式系统)类似的功能并在现代3D图形硬件上表现优异。

它可以与HTML5使用一个JavaScript的API。 HTML5有几个功能,支持3D图形,如2D画布,WebGL,SVG,CSS3D变换和SMIL。
WebGL代码编写在HTML5的<canvas>标签内。它是一种规范,允许互联网浏览器使用的计算机访问图形处理单元(GPU)。

谁开发WebGL?

一个名叫Vladimir Vukicevic 的美国塞尔维亚软件工程师做了基础工作,并领导创建WebGL。
  • 2007年,Vladimir开始致力于为HTML文档Canvas元素定义OpenGL原型。
  • 2011年3月,克罗诺斯集团(Kronos Group)创建WebGL。

支持的浏览器

下表显示了支持WebGL的浏览器的列表 -
浏览器名称
版本 支持
Internet Explorer(IE) 11及以上
完全支持
Google Chrome 39及以上
完全支持
Safari 8
完全支持
Firefox 36及以上 部分支持
Opera 27及以上 部分支持

移动浏览器

浏览器名称 版本 支持
Chrome for Android 42 部分支持
Android browser 40 部分支持
IOS Safari 8.3 完全支持
Opera Mini 8 不支持
Blackberry Browser 10 完全支持
IE mobile 10 部分支持

WebGL的优势

下面是使用WebGL的优势 -
  • JavaScript编程 − WebGL的应用程序是用JavaScript编写的。使用这些应用程序,你可以直接用HTML文档的其他元素来进行交互。也可以使用其他JavaScript库(如JQuery)和HTML技术,以丰富WebGL应用程序。

  • 越来越多的移动浏览器支持 − WebGL的还支持移动浏览器,如:iOS的Safari浏览器,Android浏览器和Chrome的Android。

  • 开源 − WebGL是一个开源的工具。您可以访问库中的源代码,并了解它是如何工作以及它是如何开发的。

  • 无需编译 − JavaScript是一种半编程和半HTML组件。为了执行这个脚本,没有必要对文件进行编译。相反,您可以直接打开使用任何浏览器的文件,并马上可以查看结果。因为WebGL应用程序是使用JavaScript开发的,所以没有必要编译WebGL应用程序。

  • 自动内存管理 − JavaScript支持自动内存管理。没有必要对存储器手工分配。 WebGL继承了JavaScript的这个特性。

  • Easy to set up − 由于WebGL是整合在HTML 5中,所以没有必要做额外的设置。要编写一个WebGL的应用程序,所需要的是一个文本编辑器和网络浏览器。

开发环境设置

没有必要为WebGL设置一个不同的环境。支持WebGL浏览器有自己的内置设置的WebGL。

开始学习 >> :WebGL基本图形概念