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。

猿狮妹
2022-12-04
WebGL教程 WebGL 教程 编程课程
热门教程
1 WebGL教程 WebGL(Web图形库)是Web上的3D图形的新标准,它是专用于绘制2D图形和交互式3D图形的目的。它是从OpenGL ES 2.0库,用于手机和其他移动设备的低级3D的API衍生。 WebGL提供ES2.0(嵌入式系统)类似的功能并在现代3D图形硬件上表现优异。
2 WebGL基础 WebGL主要是一个低级别的光栅化的API,而不是三维的API。要绘制使用WebGL的图像,必须通过表示图像的向量。然后,它在给定载体导入像素格式,使用 OpenGLSL 转换并在屏幕上显示图像。
3 WebGL着色器程序 我们通常使用三角形来构建网格。因为WebGL使用GPU加速计算,有关这些三角形中的信息一般从CPU传送到GPU,这需要大量的通信开销。 WebGL提供了一个解决方案以降低通信开销。由于它使
4 WebGL基本图形概念 渲染 渲染是从使用计算机程序模型生成图像的过程。在图形中,一个虚拟场景是使用像几何,视点,纹理,光照和阴影,这是通过一个渲染程序传递信息描述。此呈现程序的输出将是一
5 Html5 Canvas介绍 要在网络上创建的图形应用程序,HTML-5提供了一套丰富的功能,如2D画布,WebGL,SVG,CSS3D变换和SMIL。要编写WebGL的应用程序,我们可以使用HTML-5现有的canvas元素。本章提供了HTML-52Dcanv
6 WebGL图形管线 要渲染3D图形,我们必须遵循一系列步骤。这些步骤被称为图形管线或渲染管线。下图描述WebGL图形流水线。 在以下部分中,我们将一个接一个讨论管道中的每个步骤的作用。 JavaScrip
7 WebGL Context上下文 要编写一个WebGL的应用程序,第一步是让WebGL渲染上下文 - Context 对象。这个对象与 WebGL 绘制缓冲区进行交互,可以调用所有WebGL的方法。执行以下操作来获取WebGL的上下文- 创建HTML5can
8 WebGL绘制三角形 在前面的章节,我们讨论了如何使用WebGL绘制三个点。并使用示例应用程序来演示如何画一个三角形。在这两个例子中,我们绘制仅仅使用顶点图元。 绘制更复杂的形状/网格,我们通过
9 WebGL着色器 着色器是在GPU上运行的程序。着色器写入OpenGLES着色语言(称为ESSL)。ESSL拥有它自己的数据类型,限定符,内置的输入和输出变量。 数据类型 下表列出了OpenGLES SL提供的基本数据类型
10 WebGL绘制四边形 在前面的章节中,我们讨论了WebGL提供不同的绘图模式。我们也可以使用索引来绘制使用这些模式中的一个原语。要在WebGL中绘制模型,我们要选择这些原语其中的一种,并绘制所需的网
  • Copyright © 2021 猿狮院, All rights reserved.