WebGL 1.0 不需外掛的網頁3D遊戲時代,除IE 9的瀏覽器都支援

WEBGL-01

只支援Windows Vista、Windows 7的IE 9雖然常強調其3D圖形硬體加速能力,但那畢竟是在有限的平台之下;而事實上Google ChromeFirefoxOpera、Safari等瀏覽器則普遍支援一個更易跨平台的網頁3D繪圖標準規範,那就是同樣可算在HTML 5架構下的WebGL,這套標準最近更在GDC 2011遊戲開發者大會上提出了WebGL 1.0,讓支持WebGL的瀏覽器可以不需外掛直接呈現具有硬體加速支援的高品質3D圖像。

包含了最新正式版的Google Chrome,以及Beta中的Firefox 4等測試版瀏覽器,都支援WebGL,目前下個世代瀏覽器中只有IE 9尚未支援。透過WebGL標準,設計者可以開發出各種真正的網頁3D遊戲,例如第一人稱射擊、立體迷宮、賽車等等都可能實現,另外像是地圖導航、影片播放也都有3D發揮的空間。

更重要的是這樣開發出來的網頁3D服務,透過Windows、Mac OS X、Android、iOS平台都支援的OpenGL技術,更容易實現只要一個瀏覽器就能簡單的在各種裝置上玩同一個工具的理想,而像是Chrome OS這種瀏覽器作業系統就有更多的發揮應用空間。

 

對於太過程式技術的東西我也不懂,所以有興趣了解WebGL 1.0與其影響詳情的朋友,可以自行看看這篇文章:「WebGL 1.0 is done. Where's Microsoft?

簡單的說,HTML 5、WebGL這些標準,將可以為網路帶來更生動活潑、支援性更廣泛的表現方式,讓使用者可以在不需安裝外掛下,於更多裝置享受多媒體、3D圖形互動。

如果你想了解目前WebGL可以製作出什麼樣的3D效果?那麼可以參考下面兩個網頁(建議使用Firefox 4 beta效果最好,Google Chrome正式版亦可,但我實際測試時Google Chrome 9.0有一點點小問題):

WEBGL-02

 

而微軟IE 9一直強調的利用DirectX做的3D硬體加速,和Firefox 4等瀏覽器使用OpenGL的WebGL標準之間有何不同呢?有興趣的朋友可以看看這篇文章:「Drawing Sprites: Canvas 2D vs. WebGL」,該文作者還特地做了一個「IE 9原版FishIE Tank測試」,以及一個「WebGL版本FishIE Tank測試」,比較看看3D圖形的表現效果與速度。

WEBGL-03WEBGL-04

▲左圖為用IE 9開啟IE 9原版測試500隻魚,右圖為用Firefox 4 beta開啟WebGL版本測試500隻魚,兩個測試在我的電腦上執行速度與顯示效果相當。

 

最後,Mozilla最近也為了Firefox 4正式版即將到來,開啟了一個「Web Open Wonder」網站,必須使用支援HTML5、WebGL的瀏覽器來瀏覽,當然主要是為了展示Firefox 4可以帶來的各種網頁媒體技術的豐富變化性(我們可以使用Firefox 4 Beta或Google Chrome等瀏覽器來享受這樣一個未來網站,不過IE 9不支援)。

如果你對有著很多革新的Firefox 4 beta有興趣的話,也歡迎參考我的下列文章:

WEBGL-06

留言

  1. 哇。。
    我看未來連遊戲也不用安裝就可以在網頁上玩3D遊戲了。

    回覆刪除
  2. Opera目前只有11.50預覽版可以使用
    正式版的11.01現在還沒有支援WebGL

    回覆刪除
  3. 是的,Opera、Safari、Firefox都只有測試版瀏覽器才有支援WebGL

    回覆刪除
  4. M$的IE9吹說有多好多好
    看來看去都是FF和chrome老早都有的功能
    平板電腦的區塊也不知道再哪裡

    看來M$只靠kinect和台灣市場來賺錢了

    回覆刪除
  5. IE 9其實也有3D圖形硬體加速,就是利用微軟自己的DirectX系統,這部份其他瀏覽器目前也都有支援。

    而Google Chrome、Firefox等其他瀏覽器一起聯合推廣的WebGL,同樣也是3D圖形加速,但主要的不同就在於WebGL是更開放的標準(想想看以前的電腦遊戲大多都只能在windows玩就知道了)。

    所以相對於微軟來說,其實WebGL是一個競爭產品~

    回覆刪除
  6. 簡單來說…WebGL就是傳統OpenGL的延申版…
    當初OpenGL與DirectX,結果OpenGL敗了
    這當中固然有許多原因(微軟奉行簡單主義,所有東西都是先簡單化,再考量穩定性及速度,在這個高淘汰性的時代裡,這樣的確能讓軟體的開發時程變短許多)

    而但重點是這些原因現在大多依舊在WebGL身上
    比起OpenGL那時代,現在是跨媒體的時代,這算是優勢

    但同時要使用WebGL便代表要重新學習相關API,且在微軟的「內建應用程式」策略下,其他各家瀏覽器全部加在一起也比不過微軟的IE,而IE不內建WebGL,這對許多設計師而言就是一大致命傷了…

    設計師考量:若用WebGL來開發,那代表沒用Firefox之類的瀏覽器便無法使用,但若是使用DirectX來開發,那就算是其他瀏覽器的人,也只要把IE臨時開出來便可以了

    所以IE9不支援WinXP,這真的對WebGL算是小小的好事啊……

    回覆刪除
  7. 這邊的張貼意見會被火狐的外掛擋的樣子,只看的到張貼意見四個字,不知道是不是script的關係.沒以前的順.

    回覆刪除
  8. 這個標題很有歧視IE9的味道~~

    回覆刪除
  9. 搞不好以後會出現HTML5版的CS遊戲
    連網路遊戲都只要開瀏覽器就能執行這些元件
    而且這些遊戲搞不好能支援HD畫質(當然流量負擔也變大)

    只是覺得如果通通都改製成HTML5而不用Flash的話
    那我該用什麼軟體製作這些動畫?原本的HTML標籤也適用嗎?

    回覆刪除
  10. @匿名7:
    留言欄位我是使用Blogger內建的留言功能而已
    應該是有使用到javascript

    @匿名8:
    或許真的有一點^^ 主要是點出IE 9目前尚未加入這個大家都加入了的規範而已

    @toppy368:
    其實Adobe的下一版flash也有要支援3D喔~

    回覆刪除
  11. WebGL 跟 Flash 不太一樣,WebGL 不知道是用什麼開發環境,不知道能不能像Flash一樣有套裝程式繪製動畫,然後存成檔案,讓網頁能啟動這動畫檔案元件?

    回覆刪除
  12. 剛剛實際升上了IE9測試這頁面…
    發現一個壞消息
    那就是IE9理所當然的完全開不了WebGL的那個頁面
    而firefox則兩個頁面都可以開啟(只是FishIE那個效能會比較低)

    就短期而言這也許是好消息,但長期來講卻非如此
    因為就照我上面說的,對程式設計師來說,會造成若選用WebGL來開發的話,那則只限定在非IE的瀏覽器才能使用,但若以DirectX來開發,則不限定於何種瀏覽器運行,那麼最後便會以DirectX作為主要選擇,而使用者則在長期使用後發現用IE來跑DirectX當然會比較快,於是便改用IE……

    回覆刪除
  13. 確實微軟的堅持正是因為有這樣的資本

    不過現在還有另外一個可能翻轉的契機,
    那就是「行動裝置」,例如平板、手機
    這些可是iOS、Android系統的天下,
    所以或許可以從這個角度去發展WebGL的可行性,
    因為行動娛樂很明顯的會是未來的遊戲主力市場之一。

    回覆刪除
  14. 這一點正是WebGL要賭的地方,看那些其他行動媒體的平台(手機、平板電腦)能不能有效的再強化在科技產品方面的總體佔有率,如果作得到的話,那WebGL的能見度就可以大幅提升,不然以現在這普及度來看,實在不太樂觀……
    同時也不能慢慢來,因為過慢的話,反而會被微軟吃下瀏覽器3D市場後,再反過來咬走行動媒體的板塊

    只能說,希望其他平台能多多加油了…

    回覆刪除
  15. Google Chrome Canary底下兩種Fish tank的版本怎麼開怎麼當
    Chrome的硬體加速真的很糟糕
    還是這是因為我用Nvidia的關係?

    回覆刪除
  16. 硬體也會有關,
    但是不是因為Nvidia我就不清楚了,印象中應該都有支援

    我自己使用ATI顯示卡,所以我比較清楚的是在10.7版後的驅動就有開始支援WebGL

    回覆刪除
  17. 是不是只有我的Firefox 4.0打開點入測試沒有畫面呀?
    我用Google Crome開啟都正常耶......

    回覆刪除
  18. 微軟當然不會支援
    現在所有的3D遊戲都被directx獨佔了
    webgl能讓遊戲公司只開發一次
    所有平台就都能玩
    win的獨霸地位就會被挑戰到了

    回覆刪除
  19. 他說我的顯示卡需要更新驅動程式,結果顯示卡的公司說我不需要更新驅動程式 =.=
    NVIDIA Driver Downloads
    Product:NVIDIA GeForce Go 7300
    Current Installed Driver:179.48
    Latest Driver Update:Your PC currently has the latest driver installed for your GPU. No driver update is necessary at this time.

    回覆刪除
  20. 開兩個FishIE Tank
    Firefox還沒掛
    顯示卡驅動程是先錯誤=_=

    回覆刪除
  21. 願Google趕快作個
    WebGL遊戲開發IDE
    看能不能搶攻網頁遊戲市場
    不然flash已佔據大部分市場
    Unity3D 裝個套件就能在網頁玩3D

    不然就只能像html5一樣等待它(WebGL)成熟
    如果google只是希望WebGL能讓網站畫面更豐富
    一心只想讓Chrome OS做的更像一個OS
    而不是想從DriectX分一杯羹
    那真是讓遊戲開發者傷心~

    回覆刪除
  22. 我使用chrome最新版
    無法使觀看測試3D網頁
    不知道是不是我的OS windowsXP的關係
    我朋友的vista可以觀看

    回覆刪除
  23. 那要如何開發WebGL呢!?

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google 表單自動關閉回覆教學:時間人數到達就過期

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

最簡單養成習慣方法是「解決問題」,不靠時間表、獎懲與意志力

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱