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。
参考链接:
https://arvrjourney.com/webgl-the-new-standard-for-3d-graphics-on-the-web-2d8e206e7ef0