與WebGL一起遇見網頁的未來

2021-01-09 CSDN技術社區

育碧(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

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>Using babylon.js - Test page</title>     <script src="babylon.js"></script>     <style>         html, body {             width: 100%;             height: 100%;             padding: 0;             margin: 0;             overflow: hidden;         }         #renderCanvas {             width: 100%;             height: 100%;         }     </style> </head> <body>     <canvas id="renderCanvas"></canvas> </body> </html> 

JS

<script>    var canvas = document.getElementById("renderCanvas");    var engine = new BABYLON.Engine(canvas, true);    var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);    var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);    var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);      var renderLoop = function () {       scene.render();  };     engine.runRenderLoop(renderLoop); </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體驗帶來更多的可能。

相關焦點

  • 八大瘋狂的 HTML5 Canvas 及 WebGL 動畫效果
    在過去的幾年中,我們想要製作卓越的網頁動畫只能使用Flash和Java Applet。而現在,使用腳本語言和渲染器在瀏覽器中實現瘋狂的動畫效果已經成為可能。究其原因,大概有以下幾點: 處理器的性能越來越高。我們的電腦已經有足夠的強大的能力去渲染最為複雜的動畫效果。 現在瀏覽器和web技術的不斷發展。
  • WebGL 世界 matrix入門
    這篇文章算是webgl的基礎知識,因為如果想不走馬觀花的說陰影的話,需要打牢一定的基礎,文章中我盡力把知識點講的更易懂。內容偏向剛上手webgl的同學,至少知道著色器是什麼,webgl中drawElements這樣的API會使用~文章的標題是Matrix is magic,矩陣對於3D世界來說確實是魔法一般的存在,說到webgl中的矩陣,PMatrix/VMatrix/MMatrix這三個大家相信不會陌生,那就正文let’s go~1/ 矩陣的來源
  • WebGL淺入淺出,不深入了解一下嗎?
    WebGL是一種3D繪圖標準,這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起,通過增加OpenGL ES 2.0的一個JavaScript綁定,WebGL可以為HTML5 Canvas提供硬體3D加速渲染(部分計算GPU),這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3D場景和模型了,還能創建複雜的導航和數據視覺化
  • HTML5+WebGL:構建3D網頁新世界
    今年下半年, HTML5 和 WebGL 變成極熱門詞語,3D 網頁來勢洶洶。主流的瀏覽器 Google Chrome 以及 Mozilla Firefox 均致力於 HTML5+WebGL 的 3D 網頁技術方案的發展,各種實驗性項目層出不窮。這是一個轉折時期——網際網路最重要的門戶瀏覽器正在從主流支持 2D 平面網頁內容到原生的支持 3D物體形象的展示。
  • 網頁3D展示-WebGL開源框架的選擇
    最近項目需要在web平臺實現三維效果的展示(在網頁繪製三維輪廓、點線面等幾何對象、外部3D模型的顯示)以及基本的三維場景交互(滑鼠事件、縮放平移、視角切換等)。從網上搜集資料找到以下幾個WebGL框架(Three.js、babylon.js),基本能滿足需求。
  • ThingJS:基於WebGL的3D技術在網頁中的運用
    利用WebGL進行繪圖的流程如下所示:由此得知,原生 WebGL進行3D網頁製作,其過程非常繁瑣,開發難度很多,所使用的開發概念非常底層,嚴重影響WebGL的開發效率。這樣的封裝讓用戶能夠更加直觀地在網頁中製作3D圖形和動畫。就像是搭樂高一樣輕鬆。在 threejs中場景、相機和渲染器是3D圖形繪製的基礎:場景是所有對象放置和展示的平臺;相機決定圖形展示的角度;渲染器決定了渲染的結果應該畫在頁面的什么元素上面,並且以怎樣的方式來繪製。
  • 地圖2d掃描線webgl渲染分享
    通過webgl的渲染方式,實現在二維地圖上顯示圓形掃描線,本文分享一下其中關鍵的shader代碼。
  • webgl智慧樓宇發光效果算法系列之高斯模糊
    webgl智慧樓宇發光效果算法系列之高斯模糊高斯模糊簡介高斯模糊的原理說明均值模糊正態分布高斯函數高斯模糊渲染流程渲染流程代碼shader 代碼應用案例參考文檔結語webgl智慧樓宇發光效果算法系列之高斯模糊如果使用過PS之類的圖像處理軟體,相信對於模糊濾鏡不會陌生,圖像處理軟體提供了眾多的模糊算法。高斯模糊是其中的一種。
  • 3D可視化應用開發 WebGL 方向怎麼實現?
    只要了解webgl,熟悉js,有一定的前端開發經驗就可以在thingjs平臺自己動手搭建可視化場景,對接數據開發應用啦~WebGL方向開發3D可視化應用真心不難,用心總能做到!
  • 加油向未來 | 遙隔千山萬水只為遇見你
    高考成績已出曾經逆風飛翔的你們即將再次起航你站在風中望著屬於你的天空我架著祥雲正在等待與你一起奔向未來遇見-「強能力」的你是奔向未來的堅實力量遇見 - 未來的你對成長的要求遇見-未來的你指引築夢追夢的方向
  • 新海誠:於人生的十字路口,遇見最美好的未來
    每個人的人生中,都會遇見「十字路口」,我們沒有迷茫,沒有疑惑,因為我們心中早已堅定自己的信念,就是這樣的信念,一直在照亮我們人生的方向,為遇見最美好的未來。求學時,寒窗苦讀,只為遇見最美好的未來,考上一所好的大學。
  • 「遇見音尚 遇見未來」煙臺音尚藝術學校火熱招生中
    「遇見音尚 遇見未來」煙臺音尚藝術學校火熱招生中「遇見音尚 遇見未來」煙臺音尚藝術學校火熱招生中「遇見音尚 遇見未來」煙臺音尚藝術學校火熱招生中 「遇見音尚 遇見未來」煙臺音尚藝術學校火熱招生中 「遇見音尚 遇見未來」煙臺音尚藝術學校火熱招生中
  • 童畫德陽 遇見未來!德陽少兒繪畫作品徵集活動開始啦!
    童畫德陽.遇見未來 活 動 主 題 童畫德陽 遇見未來
  • 遇見未來:京東TOPLIFE舉行盛大發布會
    [2018年4月13日,上海]TOPLIFE作為由京東全資開發的奢侈品電商平臺,為致慶其全新戰略理念榮耀鉅獻——以無界零售強力打造全生態精品電商平臺,於上海世博創意秀場舉行「TOPLIFE:遇見未來」媒體發布會,並於當晚呈現盛大慶功晚宴。
  • 孫燕姿:《遇見》,我等的人,他在不遠的未來
    通過以下歌詞可以看出:「我遇見誰,會有怎樣的對白,我等的人,她在多遠的未來。」又如歌詞「我看著路夢的入口有點窄,我遇見你,是最美麗的意外。」「總有一天我的謎底會解開!「 。電影《向左走,向右走》中播放這段音樂的時候是梁詠琪和金城武兩個人在池塘邊上坐著的時候,兩個人是一人一邊,背對著對方。
  • 諾亞舟海鹽慶安幼兒園開學季·讓遇見開啟美好未來
    諾亞舟海鹽慶安幼兒園開學季·讓遇見開啟美好未來開學季·讓遇見開啟美好未來諾亞舟慶安宜家花城幼兒園2020屆新生入園準備篇kai xue la開 學 啦八月未央,仲夏之秋,微風繾綣著身子,翩然而至,緣分讓我們在這裡遇見
  • 樊登「遇見未來」直播:讀書之前,先別去想「功利性」
    👆點擊即可購買「未來書單」👆為此,樊登老師深受感動,也一直想找一個契機,見一見這群能在這個浮躁的時代依舊堅持紙書閱讀的書友,與大家相互認識、共讀好書、共談人生。但是,因為種種原因,見一面的願望只能依託於線上。在經過了前期緊鑼密鼓的準備後,終於,在5月28日,「未來書單」書友專屬的「遇見未來」直播分享會,與大家見面了!
  • 離開,是為了遇見更好的未來
    而總有一些父母,因為各種原因,或許是寵溺、或許是控制,不允許孩子走出自己的視線範圍,要求孩子按照自己規定的道路去走,這樣的孩子,未來或許光明、或許黑暗。終究,父母會先子女而去,剩下的路,無論作何周全安排,總會有意外,到底需要孩子自己去走。既然如此,何不早日讓子女離開自己,去外面的世界闖蕩、成長?趁早犯錯,還有父母兜底,如果不行,至少還可重頭再來。
  • 遇見你,是我的榮幸;能與你在一起,是我的福氣
    遇見一個愛自己的人,是畢生的榮幸,能夠和自己愛的人在一起,是一個人的福氣。在愛情裡,究竟應該要怎樣做才能夠把握住眼前的幸福?你應該要學習以下幾種做法:勇敢表達愛遇到了一個能夠愛自己,同時自己也非常愛他的人,這是人這一輩子當中少有的事情,如果說真的碰到了這麼一個人,一定要學會勇敢的來表達愛。