webgl是软件吗,webgl应用

WebAR ｜ 关于WebGL标准

AIRX三次方??帮助年轻人获得适应未来社会的新技术能力

?专注 AR+VR+Unity+Unreal+CV+AI方向

WebGL是HTML5 canvas元素的扩展，现已广泛用于开发需要3D可视化的Web应用程序。它是一种3D图形API，基于OpenGL ES 2.0。为了简化开发，市面上有一些流行的基于WebGL的框架：

Three.js：Three.js是一个基于JavaScript的库，它以低复杂度在Web浏览器上创建3D内容，是轻量级的，可以在HTML5 canvas，SVG和WebGL的帮助下执行渲染。

Scene.js：Scene.js是基于WebGL的库，它使用JavaScript在Web浏览器上进行3D可视化。它与Three.js不同，因为它旨在快速呈现大量可单独拾取的对象。此功能使该库可用于工程和数据可视化应用程序。

谁开发了WebGL？一位名叫Vladimir Vukicevic的美裔塞尔维亚软件工程师完成了基础工作，并领导了WebGL的创建。在2007年，Vladimir开始为HTML文档的Canvas元素开发OpenGL原型。2011年3月，Kronos Group创建了WebGL。

主流浏览器（例如Google Chrome，Mozilla Firefox，Safari和Opera）都支持它，有些浏览器（例如Internet Explorer 11）并不完全支持WebGL。此外，WebGL是一种低级API，因为它被设计为直接与图形卡进行交互。因此，具有低图形卡内存的设备可能会带来严重的性能问题。

1、WebGL与OpenGL之间的主要区别

WebGL基于OpenGL ES，它缺少常规OpenGL具有的许多功能，例如仅支持顶点和片段着色器。OpenGL具有WebGL所不具备的功能，例如几何体着色器，曲面细分着色器和计算着色器。

WebGL主要用于浏览器。OpenGL确实需要本机驱动程序，并且主要用于安装软件。

WebGL用于Web应用程序，而OpenGL用于许多视频游戏。

WebGL更易于学习和开发应用程序。如果你熟悉WebGL，则可以轻松学习OpenGL。

在WebGL中，它可以使用2D纹理来伪造3D纹理。在OpenGL中，不需要这样做，因为它具有很多功能，例如几何体和着色器。

在WebGL中，从一开始就被迫学习使用着色器和缓冲区。在OpenGL中，并非如此。

WebGL具有较少的功能，因此学习曲线较少。OpenGL具有更大的学习曲线，因为它具有包括WebGL在内的许多功能。

WebGL基于OpenGL ES 2，而不是纯OpenGL。OpenGL ES是OpenGL的子集。OpenGL ES具有较少的功能，并且对用户来说非常简单。OpenGL具有很多功能并且难以使用。

2、桌面浏览器支持情况

Google Chrome浏览器 ：自2011年2月发布第9版以来，所有具有图形卡且驱动程序已更新的平台均已启用WebGL 1.0。在Windows上，默认情况下，Chrome使用ANGLE（几乎本机图形层引擎）渲染器来翻译OpenGL ES Direct X 9.0c或11.0，具有更好的驱动程序支持。在Linux和Mac OS X上，默认渲染器为OpenGL，但是也可以将OpenGL强制为Windows上的渲染器。自2013年9月以来，Chrome还拥有更新的Direct3D 11渲染器，但需要更新的图形卡。

Mozilla Firefox浏览器 ：从4.0版开始，所有具有图形卡且驱动程序已更新的平台均已启用WebGL 1.0。自2013年以来，Firefox还通过ANGLE在Windows平台上使用DirectX。

Safari：在OS X Mountain Lion，Mac OS X Lion和Mac OS X Snow Leopard上的Safari 5.1上安装的Safari 6.0和更高版本实现了对WebGL 1.0的支持，在Safari 8.0之前默认情况下已禁用。Safari 12版（在macOS Mojave中可用）具有对WebGL 2.0的支持，目前作为“实验”功能。

Opera ：WebGL 1.0已在Opera 11和Opera 12中实现，但在2014年默认情况下已禁用。Opera43+支持WebGL 2.0。

Internet Explorer — Internet Explorer部分支持WebGL 1.0。最初，它没有通过大多数正式的WebGL一致性测试，但后来Microsoft发布了一些更新。最新的0.94 WebGL引擎目前已通过Khronos测试的约97％。也可以使用第三方插件（例如IE WebGL）将WebGL支持手动添加到Internet Explorer的早期版本中。

Microsoft Edge：最初的稳定版本支持WebGL 0.95版（上下文名称：“ experimental-WebGL”），以及从GLSL到HLSL转译器的开源GLSL。版本10240+支持WebGL 1.0作为前缀。在将来的版本中，WebGL 2.0被计划为中等优先级。

3、手机浏览器支持情况

BlackBerry 10:从OS 10.00版开始，WebGL 1.0可用于BlackBerry设备。

BlackBerry PlayBook:WebGL 1.0可通过WebWorks和PlayBook OS 2.00中的浏览器获得

Android浏览器 :基本上不受支持，但是在固件升级后，索尼爱立信Xperia系列的Android智能手机具有WebGL功能。三星智能手机还启用了WebGL（已在Galaxy SII（4.1.2）和Galaxy Note 8.0（4.2）上进行了验证）。Google Chrome支持此功能，该功能已取代了许多手机中的Android浏览器（但不是新的标准Android浏览器）。

Internet Explorer : Windows Phone 8.x（11+）上提供了WebGL 1.0

移动版Firefox:从Firefox 4开始，WebGL 1.0就可用于Android和MeeGo设备。

Google Chrome浏览器:WebGL 1.0自Google Chrome 25起可用于Android设备，自30版本起默认启用。

Maemo :在诺基亚N900中，从PR1.2固件更新开始，可在库存的microB浏览器中使用WebGL 1.0。

MeeGo:“ Web”不支持WebGL 1.0。但是，可以通过Firefox使用它。

Microsoft Edge:Windows 10 Mobile上提供了Prefixed WebGL 1.0。

Opera Mobile :Opera Mobile 12支持WebGL 1.0（仅适用于Android）。

Sailfish操作系统:默认的Sailfish浏览器支持WebGL 1.0。

Tizen:支持WebGL 1.0。

iOS:WebGL 1.0在iOS 8中可用于移动Safari。

参考链接：

关于WebGL的基本现状？

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等。

WebGL 的最大优势就是能通过网页做到快速传播，用酷炫的图形体验达到营销宣传等目的。

WebGL基本现状

WebGL 1.0 基本有98%的设备支持率，而 WebGL 2.0 有大概49%的设备支持率，并逐步在上升。

其中 WebGL 2.0 的重要特性有

WebAssembly方面：许多 C3D 引擎都开始涉及这块领域。比如 oryol，一个轻量级的 C 框架。其中物理模拟的部分通过 Webassembly 的方式去做，在 web 上做了个布料模拟的 demo。当然 Unity 和 Unreal 也都推出了自己基于 Webassembly 的 demo：

Unity：两个 demo，分别为：tank，webgl_linear。

Unreal：EpicZenGarden。

WebGL 研发中的新特性

英特尔的先进网络科技团队对 WebGL 的生态系统做出了许多贡献，因此新特性部分主要由他们来展示。

WebGL 2.0 Compute

研发描述：在 WebGL 实现 OpenGL ES 3.1 的功能，主要是 Compute Shader！

研发状态：

对于 OpenGL 和 D3D 后端 Compute Shader 都基本完成，通过在 Chrome 中设置 flag enable-webgl2-compute-context 可以使用。

基于 Compute Shader 的 Tensorflow.js 基本可以运行。

研发计划：

在今年末实现所有 Compute Shader 的特性。

在 Emscripten 中支持 WebGL 2.0。

将 Native dEQP ES 3.1 的样例移植到Web端。

根据需求实现 OpenGL ES 3.1的其他特性

常见的Web开发软件

基于 WEBGL 的 3D:three.js , osgjs

其中 three.js 最火爆，是纯JS包osg 还有对应的 C++ 跟 .NET 包， OSGJS 并不是 OSG 的重点；

专注于 WEB 3D GIS 的 WEBGL:osmstreet、openwebglobe、readymap这个是做 3D 城市规划的；

基于 IE ACTIVEX OCX 的 3D:unity3D ， 很火， 做WEB游戏，做 anroid 游戏， IE CHORME 都可以google earth 学习成本低；

基于 AS3 的 3D:Away3d、FLASH 正在走下坡；

下方

运营：weikashouji

webgl、three.js、D3.js这三者是什么关系？

webgl、three.js、D3.js这三者的关系是：

1、D3.js是一个数据可视化的库，看看他们的DEMO就可以知道，技术基础是SVG。兼容性是IE9+。

2、webgl是HTML5中提出的新技术，是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，关于它的教程可以看看hiwebgl。目前兼容性堪忧

3、three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。它的教程同样可以在hiwebgl里面找到。

4、three.js之于webgl，类似于windows版本的虚幻引擎之于D3D。当然，虚幻引擎的能力范围比three.js大得多。d3.js跟上面两者没有关系。

WebGL初探—Three.js全景图实战

前段时间公司给了一个新需求就是写一个装修室内3D全景效果图，于是开始我的three.js开发之旅。

作为一个前端小白，突然接触three.jswebgl除了懵逼还是懵逼，不过作为一个技术人对于挑战也许就是软件开发中真正的乐趣，至少不会埋头调试一遍又一遍重复的页面数据，上上下下左左右右BABA......简直枯燥到极点。不过three.jswebgl不得不说给我打开了新的世界，接下来我就简单讲述一下我的学习之旅。

Three.js 是一款运行在浏览器中的 3D 引擎，是JavaScript编写的WebGL第三方库，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象,three.js内部也是webgl的封装，封装了大量了webgl API ，让比较繁琐的webgl更加简便。

WebGL（全写Web Graphics Library）是一种3D绘图协议，它让可以让开发进一步去了解图形渲染，Webgl是JavaScript和OpenGL ES 2.0合并出来的升级版，通过webgl可以让前端开发者们脱离开css渲染，可以了解更加底层的渲染，WebGL也可以为HTML5 Canvas提供硬件3D加速渲染，webgl是通过系统显卡来在浏览器里更流畅地展示3D场景和模型，加入shader(着色器)来对图形渲染，学习webgl需要具备相应的图形学算法，属于目前图形渲染开发的高级技术之一。目前webgl也运用在游戏，视频特效，包含untiy3D也是集成webgl。

three.js中主要由摄像机 ，场景 ，渲染器 , 资源加载器，素材组成

webgl中的所有东西都是基于摄像机去展示的，可以利用摄像头的视角形成对3d视图观测视角，比如鱼眼视角，从而就让我们可以在平面图上可以开发出真实场景的3D视图。接下来我们看看怎么用three.js创建一个摄像机：

摄像机有了但是为了让景物可以更好的展现，这时候我们就需要一个展示景物的场景，three.js也为我们封装好了，如下所示可以创建一个场景：

渲染器是webgl的渲染启动开关，他可以调用render方式把场景渲染到摄像机。

three.js加载资源不同我们常见的html一样，直接通过src属性加载，而是通过TextureLoader.load来加载资源。

素材常见的包含网格，灯光等许多元素下面我就举个例子

通过这次基于three.js的webgl全景图开发之旅为我对视图渲染打开了一道新的大门，不过webgl的厉害之处还有很多很多是我还未涉及到了，以后还需要更加努力了。

怎么在 iOS设备上开启WebGL教程

WebGL定义

一款可以在?iOS?设备上开启?WebGL?支持的软件，安装之后可以让所有的?UIWebView?控件支持?WebGL，也就是说不但是原装自带Safari浏览器，也包括了其他的使用了?UIWebView?控件的第三方浏览器。

适合的安装环境

理论上该软件支持所有运行iOS?4.2以上版本的设备。

手机必须已经root成功。

步骤

下载?WebGL?Enabler（deb格式）。

确保设备已经成功越狱，并且安装了?Cydia。

安装?MobileSubstrate（可以在?Cydia?中找到）。

安装?OpenSSH?并确认设备的?IP（Cydia?内置有详细的介绍和引导）。

使用?scp?（推荐?WinSCP）将在电脑上下载好的?WebGL?Enabler?安装包（deb格式）发送到设备的 AutoInstall 目录。

重新启动设备，Cydia将自动安装?WebGL?Enabler。

如何在 iOS 上开启 WebGL

安装环境确认： 理论上该软件支持所有运行iOS 4.2以上版本的设备。以下硬件环境经过测试确认，可以顺利安装。另外强烈推荐安装在iOS 5.x版本中。iPad 2 — iOS 5.0.1iPad 3 WiFi-only — iOS 5.1.1iPhone 4S — iOS 5.1.1 另外：你的设备必须已经成功越狱！ 安装步骤：下载WebGL Enabler（deb格式）。确保你的设备已经成功越狱，并且安装了 Cydia。安装MobileSubstrate（可以在 Cydia 中找到）。安装OpenSSH 并确认你的设备的 IP（Cydia 内置有详细的介绍和引导）。使用scp （推荐 WinSCP）将你在电脑上下载好的 WebGL Enabler 安装包（deb格式）发送到设备的 “/var/root/media/Cydia/AutoInstall” 目录。重新启动你的设备，Cydia将自动安装 WebGL Enabler。 当然，你也可以像安装其他 deb 包一样来安装 WebGL Enabler。效果展示： 好了，安装完成之后的设备就可以在 Safari 浏览器中打开 WebGL 页面了！赶紧试试吧！