WebAR | 關(guān)于WebGL標準

AIRX三次方??幫助年輕人獲得適應(yīng)未來社會的新技術(shù)能力

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

WebGL是HTML5 canvas元素的擴展,現(xiàn)已廣泛用于開發(fā)需要3D可視化的Web應(yīng)用程序戚篙。它是一種3D圖形API,基于OpenGL ES 2.0汇跨。為了簡化開發(fā)晦墙,市面上有一些流行的基于WebGL的框架:

Three.js:Three.js是一個基于JavaScript的庫戚绕,它以低復(fù)雜度在Web瀏覽器上創(chuàng)建3D內(nèi)容,是輕量級的归斤,可以在HTML5 canvas,SVG和WebGL的幫助下執(zhí)行渲染刁岸。

Scene.js:Scene.js是基于WebGL的庫脏里,它使用JavaScript在Web瀏覽器上進行3D可視化。它與Three.js不同虹曙,因為它旨在快速呈現(xiàn)大量可單獨拾取的對象迫横。此功能使該庫可用于工程和數(shù)據(jù)可視化應(yīng)用程序。

誰開發(fā)了WebGL酝碳?一位名叫Vladimir Vukicevic的美裔塞爾維亞軟件工程師完成了基礎(chǔ)工作矾踱,并領(lǐng)導(dǎo)了WebGL的創(chuàng)建。在2007年疏哗,Vladimir開始為HTML文檔的Canvas元素開發(fā)OpenGL原型呛讲。2011年3月,Kronos Group創(chuàng)建了WebGL返奉。

主流瀏覽器(例如Google Chrome贝搁,Mozilla Firefox,Safari和Opera)都支持它芽偏,有些瀏覽器(例如Internet Explorer 11)并不完全支持WebGL雷逆。此外,WebGL是一種低級API污尉,因為它被設(shè)計為直接與圖形卡進行交互膀哲。因此,具有低圖形卡內(nèi)存的設(shè)備可能會帶來嚴重的性能問題被碗。

1某宪、WebGL與OpenGL之間的主要區(qū)別

WebGL基于OpenGL ES,它缺少常規(guī)OpenGL具有的許多功能锐朴,例如僅支持頂點和片段著色器缩抡。OpenGL具有WebGL所不具備的功能,例如幾何體著色器包颁,曲面細分著色器和計算著色器瞻想。

WebGL主要用于瀏覽器。OpenGL確實需要本機驅(qū)動程序娩嚼,并且主要用于安裝軟件蘑险。

WebGL用于Web應(yīng)用程序,而OpenGL用于許多視頻游戲岳悟。

WebGL更易于學(xué)習(xí)和開發(fā)應(yīng)用程序佃迄。如果你熟悉WebGL泼差,則可以輕松學(xué)習(xí)OpenGL。

在WebGL中呵俏,它可以使用2D紋理來偽造3D紋理堆缘。在OpenGL中,不需要這樣做普碎,因為它具有很多功能吼肥,例如幾何體和著色器。

在WebGL中麻车,從一開始就被迫學(xué)習(xí)使用著色器和緩沖區(qū)缀皱。在OpenGL中,并非如此动猬。

WebGL具有較少的功能啤斗,因此學(xué)習(xí)曲線較少。OpenGL具有更大的學(xué)習(xí)曲線赁咙,因為它具有包括WebGL在內(nèi)的許多功能钮莲。

WebGL基于OpenGL ES 2,而不是純OpenGL彼水。OpenGL ES是OpenGL的子集臂痕。OpenGL ES具有較少的功能,并且對用戶來說非常簡單猿涨。OpenGL具有很多功能并且難以使用握童。

2、桌面瀏覽器支持情況

Google Chrome瀏覽器 :自2011年2月發(fā)布第9版以來叛赚,所有具有圖形卡且驅(qū)動程序已更新的平臺均已啟用WebGL 1.0澡绩。在Windows上,默認情況下俺附,Chrome使用ANGLE(幾乎本機圖形層引擎)渲染器來翻譯OpenGL ES Direct X 9.0c或11.0肥卡,具有更好的驅(qū)動程序支持。在Linux和Mac OS X上事镣,默認渲染器為OpenGL步鉴,但是也可以將OpenGL強制為Windows上的渲染器。自2013年9月以來璃哟,Chrome還擁有更新的Direct3D 11渲染器氛琢,但需要更新的圖形卡。

Mozilla Firefox瀏覽器 :從4.0版開始随闪,所有具有圖形卡且驅(qū)動程序已更新的平臺均已啟用WebGL 1.0阳似。自2013年以來,F(xiàn)irefox還通過ANGLE在Windows平臺上使用DirectX铐伴。

Safari:在OS X Mountain Lion撮奏,Mac OS X Lion和Mac OS X Snow Leopard上的Safari 5.1上安裝的Safari 6.0和更高版本實現(xiàn)了對WebGL 1.0的支持俏讹,在Safari 8.0之前默認情況下已禁用。Safari 12版(在macOS Mojave中可用)具有對WebGL 2.0的支持畜吊,目前作為“實驗”功能泽疆。

Opera :WebGL 1.0已在Opera 11和Opera 12中實現(xiàn),但在2014年默認情況下已禁用玲献。Opera43+支持WebGL 2.0殉疼。

Internet Explorer — Internet Explorer部分支持WebGL 1.0。最初青自,它沒有通過大多數(shù)正式的WebGL一致性測試株依,但后來Microsoft發(fā)布了一些更新驱证。最新的0.94 WebGL引擎目前已通過Khronos測試的約97%延窜。也可以使用第三方插件(例如IE WebGL)將WebGL支持手動添加到Internet Explorer的早期版本中。

Microsoft Edge:最初的穩(wěn)定版本支持WebGL 0.95版(上下文名稱:“ experimental-WebGL”)抹锄,以及從GLSL到HLSL轉(zhuǎn)譯器的開源GLSL逆瑞。版本10240+支持WebGL 1.0作為前綴。在將來的版本中伙单,WebGL 2.0被計劃為中等優(yōu)先級获高。

3、手機瀏覽器支持情況

BlackBerry 10:從OS 10.00版開始吻育,WebGL 1.0可用于BlackBerry設(shè)備念秧。

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設(shè)備贱案。

Google Chrome瀏覽器:WebGL 1.0自Google Chrome 25起可用于Android設(shè)備肛炮,自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操作系統(tǒng):默認的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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搞动,一起剝皮案震驚了整個濱河市搀继,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖相速,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異奄侠,居然都是意外死亡钝吮,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門碘勉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來巷挥,“玉大人,你說我怎么就攤上這事验靡”侗觯” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵胜嗓,是天一觀的道長高职。 經(jīng)常有香客問我,道長辞州,這世上最難降的妖魔是什么怔锌? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮变过,結(jié)果婚禮上埃元,老公的妹妹穿的比我還像新娘。我一直安慰自己牵啦,他們只是感情好亚情,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哈雏,像睡著了一般楞件。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上裳瘪,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天土浸,我揣著相機與錄音,去河邊找鬼彭羹。 笑死黄伊,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的派殷。 我是一名探鬼主播还最,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼墓阀,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拓轻?” 一聲冷哼從身側(cè)響起斯撮,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎扶叉,沒想到半個月后勿锅,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡枣氧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年溢十,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片达吞。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡张弛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出宗挥,到底是詐尸還是另有隱情乌庶,我是刑警寧澤种蝶,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布契耿,位于F島的核電站,受9級特大地震影響螃征,放射性物質(zhì)發(fā)生泄漏搪桂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一盯滚、第九天 我趴在偏房一處隱蔽的房頂上張望踢械。 院中可真熱鬧,春花似錦魄藕、人聲如沸内列。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽话瞧。三九已至,卻和暖如春寝姿,著一層夾襖步出監(jiān)牢的瞬間交排,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工饵筑, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留埃篓,地道東北人。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓根资,卻偏偏與公主長得像架专,于是被迫代替她去往敵國和親同窘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 隨著三維地圖的越來越流行部脚,作為一個giser不會WebGL都不好意思說自己是做webgis的了塞椎。實現(xiàn)一些基本的圖形...
    寫前端的大叔閱讀 1,317評論 1 1
  • 本系列所有文章目錄 這是學(xué)習(xí)WebGL系列的第一篇文章,我們將了解什么是WebGL以及使用WebGL的一個簡單例子...
    handyTOOL閱讀 5,227評論 4 10
  • ??HTML5 添加的最受歡迎的功能就是 元素。這個元素負責在頁面中設(shè)定一個區(qū)域钱雷,然后就可以通過 JavaScri...
    霜天曉閱讀 3,010評論 0 2
  • 談起WebGL可能有一些人比較陌生骂铁,實際上WebGL是一種3D繪圖標準,這種繪圖技術(shù)標準允許把JavaScript...
    三石青韋閱讀 18,207評論 2 11
  • 改革開發(fā)40年以來,世界日新月異套蒂,無論從生活到精神上都有了顛覆性的變化钞支,曾經(jīng)教授還是教書的,磚家還叫專家操刀,太陽還不...
    三石青韋閱讀 40,321評論 -1 24