與WebGL一起遇見網頁的未來

allowtransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?url=http%3A%2F%2Fwww.csdn.net%2Farticle%2Fa%2F2014-06-25%2F15819101&type=3&count=&appkey=&title=%E8%82%B2%E7%A2%A7%EF%BC%88Ubisoft%EF%BC%89%E5%92%8CIE%E6%B5%8F%E8%A7%88%E5%99%A8%E5%9B%A2%E9%98%9F%E5%90%88%E4%BD%9C%E6%8E%A8%E5%87%BA%E4%BA%86%E5%85%B6%E9%A6%96%E4%B8%AAWebGL%E6%B8%B8%E6%88%8F%E3%80%8A%E5%88%BA%E5%AE%A2%E4%BF%A1%E6%9D%A1%EF%BC%9A%E6%B5%B7%E7%9B%97%E5%A5%87%E8%88%AA%EF%BC%88Assassin%27sCreedPirates%EF%BC%89%E3%80%8B%E3%80%82%E5%85%B6%E6%8B%A5%E6%9C%89%E4%B8%B0%E5%AF%8C%E7%9A%84%E7%89%A9%E7%90%86%E7%89%B9%E6%80%A7%EF%BC%8C%E9%AB%98%E5%B8%A7%E7%8E%87%E8%BF%90%E8%A1%8C%E5%92%8C%E5%BC%95%E4%BA%BA%E5%85%A5%E8%83%9C%E7%9A%84%E4%BD%93%E9%AA%8C%E3%80%82%E6%9C%80%E9%87%8D%E8%A6%81%E7%9A%84%E6%98%AF%EF%BC%8C%E5%AE%83%E4%B8%8D%E9%9C%80%E8%A6%81%E4%BB%BB%E4%BD%95%E6%8F%92%E4%BB%B6%E5%B9%B6%E4%B8%94%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8%2F%E8%B7%A8%E5%B9%B3%E5%8F%B0%E6%94%AF%E6%8C%81%E3%80%82&pic=&ralateUid=&language=zh_cn&rnd=1457316346906" width="22" height="16">摘要:育碧(Ubisoft)和IE瀏覽器團隊合作推出了其首個WebGL遊戲《刺客信條:海盜奇航(Assassin'sCreedPirates)》。其擁有豐富的物理特性,高幀率運行和引人入勝的體驗。最重要的是,它不需要任何插件並且跨瀏覽器/跨平臺支持。

育碧(Ubisoft)和IE瀏覽器團隊合作推出了其首個WebGL遊戲——《刺客信條:海盜奇航(Assassin'sCreedPirates)》。其擁有豐富的物理特性,高幀率運行和引人入勝的體驗。最重要的是,它不需要任何插件並且跨瀏覽器/跨平臺支持(http://ubisoft.azurewebsites.net/)。 

藉助BabylonJS,育碧在瀏覽器中重現了本地應用體驗,一個目前獨一無二的完整遊戲體驗。

BabylonJS是一個基於WebGL、JavaScript和TypeScript的開源3D引擎,由四個來自微軟的開發者創建。通過BabylonJS,開發者可以用最少的代碼實現快速添加碰撞檢測、物理特性、燈光、攝像頭角度、紋理效果和全新的3D場景等。

BabylonJS 上手非常簡單,特別是如果你熟悉3D渲染的技術和軟件。BabylonJS甚至可以導入 Blender中創建的場景(需要安裝一個免費的插件)。

如果你不瞭解3D圖形編程,你可以先了解下基本概念,1個3D渲染場景至少需要這幾個元素:一個需要渲染的對象,一個用來呈現對象的攝像機和一束燈光來讓攝像機可以“看”到對象。

最基本的BabylonJS 示例:

HTML

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4.     <title>Using babylon.js - Test page</title> 
  5.     <script src="babylon.js"></script> 
  6.     <style> 
  7.         html, body { 
  8.             width: 100%; 
  9.             height: 100%; 
  10.             padding: 0; 
  11.             margin: 0; 
  12.             overflow: hidden; 
  13.         } 
  14.         #renderCanvas { 
  15.             width: 100%; 
  16.             height: 100%; 
  17.         } 
  18.     </style> 
  19. </head> 
  20. <body> 
  21.     <canvas id="renderCanvas"></canvas> 
  22. </body> 
  23. </html> 

JS

  1. <script> 
  2. // 獲取canvas元素 
  3. var canvas = document.getElementById("renderCanvas"); 
  4. // 創建引擎 
  5. var engine = new BABYLON.Engine(canvas, true); 
  6. // 創建一臺攝像機 
  7. var camera = new BABYLON.FreeCamera("Camera"new BABYLON.Vector3(0, 0, -10), scene); 
  8. // 創建一個點光源 
  9. var light0 = new BABYLON.PointLight("Omni0"new BABYLON.Vector3(0, 100, 100), scene); 
  10. // 創建一個球體 
  11. var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene); 
  12.  
  13. // 渲染循環 
  14. var renderLoop = function () { 
  15.       scene.render(); 
  16. }; 
  17.  
  18. // 運行渲染循環 
  19. engine.runRenderLoop(renderLoop); 
  20. </script> 

這樣就可以得到如下圖結果:

當然,爲了創建更豐富的世界,你的3D場景也會越加複雜。以燈光爲例,就有點光源、聚光燈、方向光和半球光四種類型。每個對象都可以被賦予不同的紋理和材質,來豐富世界中的對象。除此之外,你還可以創建自己的自定義着色器來控制場景渲染。

BabylonJS提供了要給叫CYOS(CreateYour Own Sader)(http://www.babylonjs.com/CYOS)的頁面,你可以在這裏動態創建着色器,並在瀏覽器中立即看到結果。

然而,遊戲需要的不僅僅是3D圖形。創建一個引人注目的遊戲,可能需要使用碰撞檢測來檢測物體間的碰撞,也需要實現對真實物理特性的模擬。幸運的是,BabylonJS包括了一套物理引擎和碰撞檢測。

由於最終用戶的帶寬可能差別很大,如果不加以考慮,用戶體驗會非常糟糕。爲了緩解這類問題,BabylonJS支持增量加載資源,從而減少初始加載時間。要獲得進一步的性能提升,還可以通過IndexedDB把資源緩存到本地。

HTML5中令人興奮的一點就是可以創建那些曾經只有本地應用纔有的豐富功能。隨着HTML標準新功能的添加,現在已經可以創建比休閒遊戲更加優秀的遊戲體驗。並且伴隨Internet Explorer的不斷增強,諸如硬件加速和觸摸優先的設計,讓其成爲運行此類網頁遊戲的理想瀏覽器。

IE11做的更多

攜手人氣日漫 微軟IE推出3D飛行模擬頁遊

與合作伙伴聯手開發網頁遊戲,是微軟宣傳IE瀏覽器的一貫方式。近日,微軟IE團隊與日本I.G漫畫工作室聯合推出了3D版網頁遊戲《Gargantia: Sky Courier》,希望藉助日本人氣超羣的Gargantia系列動畫,推廣自家的IE瀏覽器。

這款網頁遊戲採用了HTML5、Javascript以及WebGL圖形技術,基於開源Turbulenz引擎製作。作爲Gargantia的首款網頁遊戲,它其實是一款有着3D街機風格的飛行模擬器。

該遊戲的源碼已共享到GitHub平臺,允許任何第三方遊戲開發者下載、重新編譯。如果你想了解更多的技術細節,也可以直接到Modern.ie觀看遊戲整個開發過程。

在遊戲操作上,支持鍵盤、觸控和手柄操作,尤其原生爲IE11瀏覽器量身定製,如果你是一位動漫愛好者,不妨去體驗一下這款3D網頁版模擬飛行遊戲。

遊戲地址:http://fly.gargantia.jp/ 

迎接巴西2014世界盃

全球足球盛世之季,微軟IE團隊宣佈聯合ESPN推出了ESPN FC World Cup Essentials網站,該站點通過HTML5+WebGL技術沉浸式體驗展示了世界盃相關的內容:包括賽事安排、最新資訊、參賽隊伍、世界盃歷史。http://essentials.espnfc.com/ 

網站使用Pointer Events技術實現了不同輸入設備的統一體驗,手指在導航處滑動可以體驗到“跟手”的感覺,同時網站也應用了響應式設計以適配不同屏幕尺寸的設備。

近日,微軟推出了面向Web開發者的IE Developer Channel版本(IE開發者渠道版本),主要是提供了IE新版本中的一些新功能,比如新標準的支持,相當於之前的 IE 平臺預覽版。

在首個IE Dev Channel版本中,微軟改進了F12開發工具、支持WebDriver和Xbox手柄,並且提升了WebGL性能。

並且在即將到來的OS X Yosemite中,Safari也開始正式支持WebGL技術。

這樣,WebGL在絕大多數平臺/瀏覽器上都得到了可靠的支持,相信無需多久,WebGL技術就會被真正廣泛應用,爲全新Web體驗帶來更多的可能。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章