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。

参考链接:

https://arvrjourney.com/webgl-the-new-standard-for-3d-graphics-on-the-web-2d8e206e7ef0

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容

  • 随着三维地图的越来越流行,作为一个giser不会WebGL都不好意思说自己是做webgis的了。实现一些基本的图形...
    写前端的大叔阅读 1,312评论 1 1
  • 本系列所有文章目录 这是学习WebGL系列的第一篇文章,我们将了解什么是WebGL以及使用WebGL的一个简单例子...
    handyTOOL阅读 5,227评论 4 10
  •   HTML5 添加的最受欢迎的功能就是 元素。这个元素负责在页面中设定一个区域,然后就可以通过 JavaScri...
    霜天晓阅读 3,006评论 0 2
  • 谈起WebGL可能有一些人比较陌生,实际上WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript...
    三石青韦阅读 18,203评论 2 11
  • 改革开发40年以来,世界日新月异,无论从生活到精神上都有了颠覆性的变化,曾经教授还是教书的,砖家还叫专家,太阳还不...
    三石青韦阅读 40,315评论 -1 24