立VR頭顯的專(zhuān)屬瀏覽器如何一步步落地:FirefoxReality 完整上手與二次開(kāi)發(fā)實(shí)戰(zhàn))
獨(dú)立VR頭顯的專(zhuān)屬瀏覽器如何一步步落地FirefoxReality 完整上手與二次開(kāi)發(fā)實(shí)戰(zhàn)【免費(fèi)下載鏈接】FirefoxRealityINACTIVE - A fast and secure browser for standalone virtual-reality and augmented-reality headsets.項(xiàng)目地址: https://gitcode.com/gh_mirrors/fi/FirefoxReality如果你正戴著 Oculus Go、VIVE Focus 或 Pico Neo卻找不到一款能好好用的網(wǎng)頁(yè)瀏覽器那么 FirefoxReality 就是為這個(gè)場(chǎng)景而生的答案。它是一款專(zhuān)為獨(dú)立式 VR/AR 頭顯設(shè)計(jì)的開(kāi)源瀏覽器把 Web 內(nèi)容、3D 界面、手勢(shì)交互和多種平臺(tái) SDK 揉進(jìn)了一個(gè) Android 應(yīng)用里。本文不按官方文檔的順序講而是帶你從為什么需要它一路走到如何改它全程可照做。一、先弄明白獨(dú)立頭顯上為什么不能直接裝普通瀏覽器手機(jī)瀏覽器在平板、手機(jī)上很好用但放進(jìn)頭顯就變味了。原因很簡(jiǎn)單交互模型完全不同沒(méi)有觸摸屏輸入靠手柄、視線和頭部轉(zhuǎn)動(dòng)普通瀏覽器的點(diǎn)擊熱區(qū)根本沒(méi)法用渲染目標(biāo)不是屏幕內(nèi)容要渲染到左右眼兩張紋理上還要跟上頭部 6DoF 追蹤普通 WebView 做不到界面需要懸浮地址欄、標(biāo)簽頁(yè)得像面板一樣懸浮在 3D 空間里而不是釘在屏幕邊緣平臺(tái) SDK 各立山頭Oculus、WaveVR、Pico 各有各的 API一次適配想通吃并不容易。FirefoxReality 想解決的正是這組問(wèn)題它基于 GeckoView 內(nèi)核外層用 C 和 OpenGL 搭建 VR 渲染層再套上一層 Java/Kotlin 的界面框架把網(wǎng)頁(yè)渲染和空間呈現(xiàn)徹底打通。記住一句話它不是把手機(jī)瀏覽器搬進(jìn)頭顯而是從頭為頭顯重寫(xiě)了一遍瀏覽器。二、拆開(kāi)看結(jié)構(gòu)一個(gè)項(xiàng)目多副積木FirefoxReality 最值得稱(chēng)道的是它的模塊化設(shè)計(jì)。你可以把每個(gè)平臺(tái)支持想象成一組積木主積木是通用的瀏覽器核心其余積木按設(shè)備按需拼裝。打開(kāi)app/src/你會(huì)看到這樣的布局目錄/模塊它負(fù)責(zé)什么典型適用設(shè)備main瀏覽器核心、UI 組件、渲染引擎、音頻、多語(yǔ)言所有平臺(tái)共享oculusvrOculus Mobile SDK 接入、專(zhuān)用控制器模型Gear VR、Oculus Go / QuestwavevrWaveVR SDK 接入VIVE FocuspicovrPico SDK 接入、專(zhuān)用控制器適配Pico Neo 系列hvr基于 OpenXR 的自定義交互方案特定實(shí)驗(yàn)設(shè)備openxr獨(dú)立于 SDK 的 OpenXR 實(shí)現(xiàn)跨平臺(tái)支持 OpenXR 的設(shè)備noapi無(wú) VR API 的簡(jiǎn)化版普通 Android 手機(jī)調(diào)試用平臺(tái)無(wú)關(guān)的邏輯如app/src/common/shared/org/mozilla/vrbrowser/被單獨(dú)抽出來(lái)里面裝著VRBrowserActivity、會(huì)話管理、鍵盤(pán)、書(shū)簽、下載等全部通用功能。這樣每次接入新設(shè)備你只需要新增一個(gè) flavor不必動(dòng)核心代碼。一個(gè)可以立刻觀察到的細(xì)節(jié)app/build.gradle里通過(guò)productFlavors定義了oculusvr、wavevr、picovr、hvr、noapi等多個(gè)平臺(tái)變體再加上arm64、x86_64的 ABI 維度排列組合出幾十種構(gòu)建結(jié)果——但源代碼只有一份。三、從零跑起來(lái)三步完成環(huán)境搭建老規(guī)矩先克隆倉(cāng)庫(kù)git clone https://gitcode.com/gh_mirrors/fi/FirefoxReality cd FirefoxReality git submodule update --init --recursive白話解釋第一條命令把項(xiàng)目拉到本地第三條命令拉取項(xiàng)目依賴(lài)的 Git 子模塊第三方紋理、SDK 片段都在里面。接著是三個(gè)容易踩坑的關(guān)鍵點(diǎn)JDK 必須是 8Gradle 包裝腳本只認(rèn) Oracle JDK 8。裝完 JDK 9/10 的同學(xué)跑java -version看看版本不對(duì)就先換。第三方 SDK 各就各位做 Oculus 要往third_party/ovr_mobile/放含VrApi的 SDK 目錄做 VIVE 要下載 Wave SDK 后執(zhí)行mkdir -p third_party/wavesdk cp /path/to/sdk/libs/wvr_client.aar third_party/wavesdk cp ./extra/wavesdk/build.gradle ./third_party/wavesdk用 Android Studio 打開(kāi)后先 Sync打開(kāi)Tool Windows Build Variants如果列表是空的先更新 Android Studio再執(zhí)行File Sync Project with Gradle Files。完成這三步你就擁有了一個(gè)可以隨時(shí)切換設(shè)備目標(biāo)的構(gòu)建工程。四、今天想支持哪臺(tái)設(shè)備按需挑選構(gòu)建變體不需要在代碼里寫(xiě)死平臺(tái)構(gòu)建變體就是你的開(kāi)關(guān)。常見(jiàn)組合如下構(gòu)建變體對(duì)應(yīng)設(shè)備額外要求oculusvrDebug/ReleaseGear VR、Oculus Go需 Oculus Mobile SDKoculusvrStoreOculus 商店上架版本同上含商店標(biāo)識(shí)wavevrDebug/ReleaseVIVE Focus需 WaveVR SDKpicovrDebug/ReleasePico Neo 系列需 Pico SDKnoapiDebug普通 Android 手機(jī)無(wú)需任何 VR SDK強(qiáng)烈建議沒(méi)戴頭顯之前先用noapiDebug在手機(jī)上跑通全部功能。它會(huì)用簡(jiǎn)化的渲染管線替代 VR 環(huán)境鍵盤(pán)、書(shū)簽、設(shè)置這些 UI 全部可用開(kāi)發(fā)和調(diào)試效率直線上升。選好變體后你可能還想在同一臺(tái)手機(jī)上同時(shí)裝開(kāi)發(fā)版和正式版。在項(xiàng)目根目錄新建user.properties寫(xiě)入simultaneousDevProductiontrue useDebugSigningOnReleasetrue第一行會(huì)給開(kāi)發(fā)版加上.dev后綴避免沖突第二行讓 Release 包用 debug 簽名省去配置簽名證書(shū)的麻煩注意這樣打出的包不能上架。五、把網(wǎng)頁(yè)裝進(jìn) 3D 空間界面渲染與沉浸環(huán)境這是 FirefoxReality 最有存在感的部分。你在頭顯里看到的每個(gè)面板——地址欄、標(biāo)簽頁(yè)、鍵盤(pán)、媒體控制條——本質(zhì)上都是一個(gè)Widget它們被WidgetManagerDelegate統(tǒng)一調(diào)度以曲面紋理的形式貼在 3D 場(chǎng)景中。打開(kāi)VRBrowserActivity.java你能看到它同時(shí)兼任WidgetManagerDelegate和LifecycleOwner負(fù)責(zé)把 Android 生命周期翻譯給 3D 界面層。沉浸感的一半來(lái)自環(huán)境背景。項(xiàng)目用立方體貼圖cubemap制造環(huán)繞效果你可以把環(huán)境想象成貼滿(mǎn) 6 張圖的內(nèi)壁盒子玩家站在盒子中心轉(zhuǎn)頭看到哪面墻就顯示哪張圖。倉(cāng)庫(kù)里預(yù)置了 6 套環(huán)境offworld外星沙漠space宇宙星空meadow草地cave洞穴winter雪原underwater水下這些原始資源放在app/src/uncompressed_assets/main/assets/cubemap/想換環(huán)境或新增主題替換對(duì)應(yīng)方向的 jpg 即可。六、給瀏覽器提速紋理壓縮與資源管線VR 渲染對(duì)內(nèi)存和帶寬極度敏感紋理越省幀率越穩(wěn)。項(xiàng)目采用ETC2 壓縮方案原始 JPG 存放在uncompressed_assets通過(guò)tools/compressor批量壓成 KTX 格式cd tools/compressor npm install npm run compress白話解釋npm install裝好壓縮工具鏈gulp sharpnpm run compress把未壓縮資源文件夾里的圖片全部轉(zhuǎn)成 ETC2 紋理。前提是先把 etc2comp 裝好并放進(jìn) PATH。這個(gè)步驟帶來(lái)的收益很直觀同樣是 1024×1024 的環(huán)境貼圖壓縮后內(nèi)存占用可下降數(shù)倍在 Oculus Go 這類(lèi)低配設(shè)備上尤其重要。七、調(diào)試路上最常見(jiàn)的坑與繞行方案踩坑是開(kāi)發(fā)者的日常這里把高頻問(wèn)題集中過(guò)一次。構(gòu)建變體列表為空按老規(guī)矩來(lái)更新 Android Studio →File Sync Project with Gradle Files→ 確認(rèn) JDK 是 8。設(shè)備提示 ABI 不匹配多半是沒(méi)開(kāi) USB 遠(yuǎn)程調(diào)試。在設(shè)備上啟用后ADB 才能識(shí)別并安裝對(duì)應(yīng)架構(gòu)的 APK。原生調(diào)試器老是假崩潰在 GeckoView 線程里看到的第一個(gè) SIGSEGV 通常不是崩潰點(diǎn)擊 Resume 繼續(xù)即可在 Oculus Go 上如果每個(gè)輸入事件都斷下來(lái)給 LLDB 加一條后置命令pro hand -p true -s false SIGILL。想快速看一個(gè)網(wǎng)頁(yè)效果直接用命令行把 URL 塞進(jìn)應(yīng)用省去手輸adb shell am start -a android.intent.action.VIEW \ -d https://aframe.io \ org.mozilla.vrbrowser/org.mozilla.vrbrowser.VRBrowserActivity想改默認(rèn)首頁(yè)也一樣簡(jiǎn)單am start ... -e homepage https://example.com。這套命令很適合做 WebXR 頁(yè)面的快速驗(yàn)收。八、進(jìn)階玩法Servo 引擎與本地依賴(lài)替換如果基礎(chǔ)構(gòu)建已經(jīng)滿(mǎn)足不了你還有兩個(gè)值得嘗試的深水區(qū)。實(shí)驗(yàn)性 Servo 引擎Servo 是 Mozilla 的下一代瀏覽器引擎。在user.properties里加一行enableServo1重新 Sync 后工程會(huì)多出servo模塊再到設(shè)置里的開(kāi)發(fā)者選項(xiàng)打開(kāi) Servo 開(kāi)關(guān)導(dǎo)航欄就會(huì)出現(xiàn)一個(gè) Servo 按鈕點(diǎn)擊即可用 Servo 重載當(dāng)前頁(yè)面——適合對(duì)比兩個(gè)引擎的渲染差異。本地依賴(lài)替換想邊改 GeckoView 邊驗(yàn)證效果在local.properties里指一下你的 mozilla-central 路徑即可dependencySubstitutions.geckoviewTopsrcdir/path/to/mozilla-central dependencySubstitutions.geckoviewTopobjdir/path/to/topobjdir改完記得在 Android Studio 里重新 Sync模塊列表會(huì)立即反映替換結(jié)果。寫(xiě)在最后下一步你可以做什么FirefoxReality 目前處于停止維護(hù)INACTIVE狀態(tài)但這恰恰是它作為教學(xué)級(jí)開(kāi)源項(xiàng)目的價(jià)值所在平臺(tái)接入、3D UI 框架、紋理壓縮管線、多引擎切換每一層都是可拆解的實(shí)戰(zhàn)樣本。下一步你可以試著做這幾件事用noapiDebug跑通整個(gè)應(yīng)用逐行讀VRBrowserActivity的生命周期翻譯邏輯仿照現(xiàn)有 flavor新增一個(gè)你手頭設(shè)備的構(gòu)建變體換一套你自己的環(huán)境貼圖感受沉浸感從哪來(lái)把openxr模塊單獨(dú)抽出來(lái)研究理解跨平臺(tái) VR 標(biāo)準(zhǔn)接口怎么設(shè)計(jì)。戴上頭顯之前你是一個(gè)瀏覽器用戶(hù)讀完這份指南之后你已經(jīng)拿到了打開(kāi)這臺(tái)VR 瀏覽器實(shí)驗(yàn)室的鑰匙?!久赓M(fèi)下載鏈接】FirefoxRealityINACTIVE - A fast and secure browser for standalone virtual-reality and augmented-reality headsets.項(xiàng)目地址: https://gitcode.com/gh_mirrors/fi/FirefoxReality創(chuàng)作聲明:本文部分內(nèi)容由AI輔助生成(AIGC),僅供參考