發布支援VR的Web3D內容

2021-07-23 06:54:05 字數 900 閱讀 6356

基於webgl的web3d也可以有vr體驗,只要可以在web端應用中做到以下兩點即可:

針對上述兩點,在不同的web內容的實現中有不同的方法,主要分為以下三種:

對於此類web內容,使用webvr.js的庫來實現。

webvr.js是由mozila和google聯合開發的乙個針對web端的vr庫,目前還正處於實驗階段。其中提供了基本的js物件,可以獲取無差異的vr裝置狀態,比如在裝置是oculus或htc vive時,會得到對應的頭顯的位置、朝向以及姿態等,進而用這些資訊控制web3d中的攝像機以便來進行渲染;同時,對於移動vr裝置,其會獲得裝置的陀螺儀狀態來控制攝像機的屬性。渲染的結果也會根據不同的vr裝置以不同的方式向目標端進行傳送,比如ocolus/vive會以雙眼視角分別渲染之後傳向裝置,而對於移動vr裝置則會渲染左右眼到同一屏之後傳向終端。

示例對於使用unity引擎開發的web內容,可以使用第三方的外掛程式:unity-webvr-assets。

在unity的專案工程中匯入該外掛程式之後,將其中的webvrcamera.prefab新增到工程中,用來調整原始的camera,之後再來進行常規的unity->html5內容的發布即可得到具有vr支援的html5內容。

對於此類內容可使用emscripten來進行web化。同時,最新的emscripten中已經新增了對於vr的支援,使用此特性之後生成的web內容也可以得到vr化。

上述三種方法可以實現幾種主流web3d內容對vr的支援,但是目前三種方法都仍處於開發與實驗階段,都不是很穩定而且也存在相應的bug,請大家使用時審慎。

Web 3D引擎閒談

thingjs 3d城市應用 主要是城市 工業領域 有很多酷炫的效果,有的也醜 cbd大樓很酷炫 不開源,需付費 babylon.js 巴比倫,是微軟開發和維護的web端3d引擎 微軟官方的demo 很酷炫,有細節 城堡很真實,但水流有點假 yeti cnbabylon.com demos yeti...

分享收集的Web 3D學習資源

wonder技術 淺墨的遊戲程式設計 作者寫得非常詳細,推薦 zwqxin 比較老的部落格,作者寫得不錯。our machinery 原bitsquid引擎的開發者的新部落格,分享了很多引擎設計 data oriented的乾貨,非常推薦!webgpu學習 webgpu是w3c維護的新一代web圖形...

web3d技術實現虛擬購物程式

程式演示見文末。1 這是什麼?這是個產品展示類應用,名字叫 宅男房間 利用webgl技術在網頁上呈現三維互動內容,展示了乙個迷戀二次元的宅男的房間,你可以旋轉視角 房間裡的任何角落。2 有哪些功能?3 這個東西的意義?vr購物。實際是vr購物應用的原型設計。通過呈現乙個真實的生活場景,把商品自然地融...