WebGL教程

WebGL - 简介

几年前，Java应用程序 - 作为applet和JOGL的组合 - 被用于通过寻址GPU(图形处理单元)来处理Web上的3D图形.由于applet需要运行JVM，因此很难依赖Java applet.几年后，人们停止使用Java小程序.

Adobe提供的Stage3D API(Flash，AIR)提供了GPU硬件加速架构.使用这些技术，程序员可以在Web浏览器以及IOS和Android平台上开发具有2D和3D功能的应用程序.由于Flash是一种专有软件，因此它不被用作Web标准.

2011年3月，WebGL发布.它是一个可以在没有JVM的情况下运行的开放软件.它完全由Web浏览器控制.

HTML 5的新版本具有支持3D图形的多种功能，如2D Canvas，WebGL，SVG，3D CSS转换和SMIL.在本教程中，我们将介绍WebGL的基础知识.

什么是OpenGL？

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

API	使用的技术
OpenGL ES	它是嵌入式系统上2D和3D图形的库 - 包括控制台，电话，电器和车辆. OpenGL ES 3.1是它的最新版本.它由Khronos集团维护 www.khronos.org
JOGL	这是OpenGL的Java绑定. JOGL 4.5是其最新版本，由 jogamp.org 维护.
WebGL	这是OpenGL的JavaScript绑定. WebGL 1.0是其最新版本，由 khronos组维护.
OpenGLSL	OpenGL着色语言.它是一种编程语言，是OpenGL 2.0及更高版本的伴侣.它是核心OpenGL 4.4规范的一部分.它是专为嵌入式系统量身定制的API，例如手机和平板电脑上的嵌入式系统.

注意 : 在WebGL中，我们使用GLSL来编写着色器.

什么是WebGL？

WebGL(Web图形库)是3D图形的新标准Web，它的设计目的是渲染2D图形和交互式3D图形.它源自OpenGL的ES 2.0库，它是一款适用于手机和其他移动设备的低级3D API. WebGL提供与ES 2.0(嵌入式系统)类似的功能，并且在现代3D图形硬件上表现良好.

这是一个可以与HTML5一起使用的JavaScript API. WebGL代码写在< canvas>中HTML5的标签.它是一种允许Internet浏览器访问使用它们的计算机上的图形处理单元(GPU)的规范.

谁开发了WebGL

名为 Vladimir Vukicevic 的美国塞尔维亚软件工程师完成了基础工作并领导了WebGL的创建

2007年，Vladimir开始为HTML文档的Canvas元素开发 OpenGL 原型.
2011年3月，Kronos Group创建WebGL.

渲染

渲染是使用模型生成图像的过程电脑程序.在图形中，使用诸如几何，视点，纹理，光照和阴影之类的信息来描述虚拟场景，该信息通过渲染程序传递.此渲染程序的输出将是一个数字图像.

有两种类型的渲染和减号;

软件渲染 : 所有渲染计算都是在CPU的帮助下完成的.
硬件渲染 : 所有图形计算都由GPU(图形处理单元)完成.

渲染可以在本地或远程完成.如果要渲染的图像太复杂，则在具有渲染复杂场景所需的足够硬件资源的专用服务器上远程完成渲染.它也被称为基于服务器的渲染.渲染也可以由CPU本地完成.它被称为基于客户端的渲染.

WebGL遵循基于客户端的渲染方法来渲染3D场景.获取图像所需的所有处理都是使用客户端的图形硬件在本地执行的.

GPU

根据NVIDIA，GPU是"单一的芯片处理器，集成了变换，照明，三角形设置/裁剪，以及每秒至少处理1000万个多边形的渲染引擎."与具有针对顺序处理优化的少数核心的多核处理器不同，GPU由数千个较小的核心组成，可以有效地处理并行工作负载.因此，GPU加速在帧缓冲区(包含完整帧数据的ram的一部分)中创建图像，用于输出到显示器.

CPU和GPU

GPU加速计算

在GPU加速计算中，应用程序被加载到CPU中.每当遇到代码的计算密集型部分时，那部分代码将被加载并在GPU上运行.它可以使系统来处理以高效的方式的图形的能力.

GPU加速计算

GPU将有一个单独的内存，它一次运行一小部分代码的多个副本. GPU处理其本地存储器中的所有数据，而不是中央存储器.因此，GPU需要处理的数据应该被加载/复制到GPU内存然后进行处理.

在具有上述架构的系统中，之间的通信开销应该减少CPU和GPU以实现更快的3D程序处理.为此，我们必须复制所有数据并将其保留在GPU上，而不是重复与GPU通信.

支持浏览器

下表显示了支持WebGL和减号的浏览器列表;

Web浏览器

浏览器名称	版本	支持
我 nternet E xplorer	11及以上	完全支持
Google Chrome	39及以上	完全支持
Safari	8	完全支持
Firefox	36及以上	部分支持
Opera	27及以上	部分su pport

移动浏览器

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

WebGL的优点

以下是使用WebGL : 的优点;

JavaScript编程 : WebGL应用程序是用JavaScript编写的.使用这些应用程序，您可以直接与HTML文档的其他元素进行交互.您还可以使用其他JavaScript库(例如JQuery)和HTML技术来丰富WebGL应用程序.
增加对移动浏览器的支持 : 去; WebGL还支持iOS浏览器，Android浏览器和Android版Chrome等移动浏览器.
开源 : WebGL是一个开源的.您可以访问库的源代码并了解它的工作原理以及它是如何开发的.
无需编译 : ; JavaScript是半编程和半HTML组件.要执行此脚本，无需编译该文件.相反，您可以使用任何浏览器直接打开文件并检查结果.由于WebGL应用程序是使用JavaScript开发的，因此也无需编译WebGL应用程序.
自动内存管理 : JavaScript支持自动内存管理.无需手动分配内存. WebGL继承了JavaScript的这一特性.
易于设置 : 由于WebGL集成在HTML 5中，因此无需额外设置.要编写WebGL应用程序，您需要的只是文本编辑器和Web浏览器.