建WASM版瀏覽器NeRF查看器的完整流程)
volrend Web部署指南用emscripten構(gòu)建WASM版瀏覽器NeRF查看器的完整流程【免費(fèi)下載鏈接】volrendPlenOctree Volume Rendering (supports CUDA fragment shader backends)項(xiàng)目地址: https://gitcode.com/gh_mirrors/vo/volrendvolrend 是一個(gè)實(shí)時(shí) PlenOctree 體渲染器用 C 和 OpenGL 編寫可實(shí)時(shí)渲染 NeRF神經(jīng)輻射場場景。借助 emscripten 工具鏈volrend 能把整個(gè)渲染引擎編譯成 WebAssemblyWASM讓你在瀏覽器里直接運(yùn)行 NeRF 查看器無需安裝任何軟件。本文將帶你完成 volrend Web 版從環(huán)境安裝、CMake 構(gòu)建、本地預(yù)覽到上線部署的完整流程。 volrend 的 Web 版能做什么volrend 官方 Web 版使用片元著色器后端而非 CUDA 后端構(gòu)建核心能力包括交互式 NeRF 查看鼠標(biāo)/觸屏旋轉(zhuǎn)、平移、縮放實(shí)時(shí)查看 PlenOctree 場景遠(yuǎn)程數(shù)據(jù)加載通過 emscripten fetch API 在線拉取壓縮后的.npz八叉樹文件本地文件打開支持在瀏覽器里加載本地的.npz樹文件、.obj網(wǎng)格和 drawlist 文件豐富的可視化選項(xiàng)切片渲染Slicing、SH 分解、偽重光照、八叉樹網(wǎng)格、FPS 統(tǒng)計(jì)等桌面版的渲染效果可以參考下圖樂高場景的體渲染切片視圖Web 版交互能力相同? 第一步準(zhǔn)備 emscripten 構(gòu)建環(huán)境Web 版構(gòu)建依賴 emscripten 官方文檔 所述的標(biāo)準(zhǔn)安裝方式你需要安裝 emscripten 官方文檔 所述的 SDK推薦用emsdk一鍵安裝確保系統(tǒng)中有CMake3.3和Python 3構(gòu)建腳本會(huì)用到克隆項(xiàng)目含子模塊git clone https://gitcode.com/gh_mirrors/vo/volrend volrend cd volrend 關(guān)鍵點(diǎn)volrend 的CMakeLists.txt內(nèi)置了完整的 emscripten 分支邏輯——只要檢測到 EMSCRIPTEN 編譯器就會(huì)自動(dòng)關(guān)閉 CUDA、切換為片元著色器后端并把著色器shaders/rt.frag內(nèi)聯(lián)進(jìn)代碼無需任何手動(dòng)修改。 第二步用 emcmake 三步構(gòu)建 WASM 版volrend 的構(gòu)建腳本把網(wǎng)頁所需的 HTML/CSS/JS/WASM 全部自動(dòng)化了構(gòu)建只有三步mkdir embuild cd embuild emcmake cmake .. make -j12構(gòu)建完成后完整的網(wǎng)站會(huì)寫到embuild/build/目錄結(jié)構(gòu)如下build/index.html—— 頁面入口自動(dòng)注入版本號build/js/main.js—— 由 5 個(gè) JS 文件 WASM 膠水代碼自動(dòng)拼接而成build/js/volrend_web.wasm—— 真正的 WASM 渲染引擎build/css/main.css—— 頁面樣式這套自動(dòng)化來自CMakeLists.txt中的 emscripten 分支約第 284–356 行它配置了關(guān)鍵編譯參數(shù)USE_WEBGL21啟用 WebGL2、USE_GLFW3用 GLFW 模擬瀏覽器窗口、ALLOW_MEMORY_GROWTH1內(nèi)存可增長初始 512MB。構(gòu)建時(shí)還會(huì)自動(dòng)執(zhí)行web/autoversion.py給 JS/CSS 加上隨機(jī)版本號解決瀏覽器緩存問題。? 第三步本地啟動(dòng)預(yù)覽volrend 內(nèi)置了一個(gè)serve構(gòu)建目標(biāo)直接調(diào)用 Python 的 HTTP 服務(wù)器預(yù)覽cd embuild make serve然后在瀏覽器打開http://0.0.0.0:8000/即可看到 PlenOctree Viewer 界面。頁面前端邏輯位于web/目錄web/index.html—— 導(dǎo)航欄、選項(xiàng)面板、圖層面板、加載進(jìn)度條web/js/init.js—— 鼠標(biāo)/觸屏/鍵盤事件橋接把輸入轉(zhuǎn)發(fā)給 WASM 端web/js/emModule.js—— emscripten 運(yùn)行時(shí)配置與進(jìn)度回調(diào)web/js/guiComponents.js—— 選項(xiàng)滑塊、圖層 UIweb/main_web.cpp—— C 側(cè)的 Web 入口負(fù)責(zé) OpenGL 初始化、數(shù)據(jù)加載與 JS 綁定 加載場景遠(yuǎn)程 URL 與本地文件兩種方式方式一URL 參數(shù)自動(dòng)加載。web/js/init.js支持在地址欄追加參數(shù)頁面啟動(dòng)后自動(dòng)下載并渲染index.html?loadscene.npz多個(gè)文件用;分隔如?loadtree.npz;camera.draw.npz。加載器會(huì)按擴(kuò)展名自動(dòng)判斷.obj走網(wǎng)格加載、.draw.npz走 drawlist、其余按八叉樹處理見web/main_web.cpp中的load_remote函數(shù)。方式二Load Local 手動(dòng)加載。點(diǎn)擊導(dǎo)航欄的Open Local按鈕選擇本地.npz或.obj文件。JS 會(huì)把文件讀入 emscripten 的虛擬文件系統(tǒng)MEMFS再交給 C 端解析——這也是CMakeLists.txt里FORCE_FILESYSTEM1參數(shù)的用途。?? 使用指南常用交互與選項(xiàng)進(jìn)入頁面后常用操作如下操作說明鼠標(biāo)左鍵拖動(dòng)繞相機(jī)位置旋轉(zhuǎn)視角鼠標(biāo)右鍵拖動(dòng)繞原點(diǎn)旋轉(zhuǎn)滾輪 / 雙指捏合前后移動(dòng) / 觸屏縮放1–6鍵切換 world_up 方向適配不同坐標(biāo)系的數(shù)據(jù)T鍵開關(guān) FPS 計(jì)數(shù)Options面板渲染質(zhì)量high speed / moderate / high quality、切片包圍盒、SH 分解范圍、偽重光照、八叉樹網(wǎng)格顯示Layers面板顯示/隱藏相機(jī)層、網(wǎng)格層 第四步部署到靜態(tài)服務(wù)器由于build/目錄是完全自包含的靜態(tài)資源部署非常簡單把整個(gè)embuild/build/目錄上傳到任意靜態(tài)托管Nginx、Apache、GitHub Pages 風(fēng)格的靜態(tài)服務(wù)器均可確保服務(wù)器允許跨域加載.wasm多數(shù)現(xiàn)代服務(wù)器默認(rèn)支持把場景.npz文件放在同域下或確保允許跨域訪問即可通過?loadxxx.npz分享鏈接??提示W(wǎng)ebGL2 渲染對瀏覽器 GPU 有要求建議在帶獨(dú)立顯卡的電腦上體驗(yàn)完整效果。 進(jìn)階壓縮你的數(shù)據(jù)再上線瀏覽器加載數(shù)據(jù)對體積敏感volrend 提供了壓縮腳本scripts/compress_octree.py通過中值切割量化svox 庫 deflate 把原始.npz壓縮到 Web 可用的體積pip install svox python scripts/compress_octree.py scene.npz --out_dir webdata --retain 4--retain 4表示保留前 4 個(gè) SH 系數(shù)不量化部分場景需要此參數(shù)保證質(zhì)量。壓縮后的文件仍可直接被 volrend 打開把它放進(jìn)部署目錄即可被 Web 查看器加載。? 常見問題Q1構(gòu)建時(shí)報(bào) A submodule has not downloaded! 怎么辦執(zhí)行g(shù)it submodule update --init --recursive后再重新構(gòu)建。GLFW 等第三方庫以子模塊形式包含在3rdparty/目錄中。Q2Web 版和桌面版功能有差異嗎有。Web 版基于片元著色器后端比 CUDA 后端慢一些且不支持網(wǎng)格插入相關(guān)功能如 lumisphere probe 探針。Q3頁面打開后一直轉(zhuǎn)圈先檢查瀏覽器是否支持 WebGL2再看控制臺是否有.wasm或.npz的 404 錯(cuò)誤——靜態(tài)服務(wù)器必須正確提供build/下所有文件。? 小結(jié)回顧 volrend Web 部署的核心路徑安裝 emscripten SDKemcmake cmake .. make -j12一鍵產(chǎn)出靜態(tài)網(wǎng)站make serve本地預(yù)覽把build/目錄扔到任何靜態(tài)服務(wù)器用?loadxxx.npz參數(shù)或 Load Local 加載場景整個(gè)過程不到 10 分鐘你就能擁有一個(gè)免安裝的瀏覽器 NeRF 查看器把 volrend 的實(shí)時(shí) PlenOctree 體渲染能力分享給任何人 【免費(fèi)下載鏈接】volrendPlenOctree Volume Rendering (supports CUDA fragment shader backends)項(xiàng)目地址: https://gitcode.com/gh_mirrors/vo/volrend創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 volrend Web部署指南：用emscripten構(gòu)建WASM版瀏覽器NeRF查看器的完整流程
volrend Web部署指南用emscripten構(gòu)建WASM版瀏覽器NeRF查看器的完整流程【免費(fèi)下載鏈接】volrendPlenOctree Volume Rendering (supports CUDA fragment shader backends)項(xiàng)目地址: https://gitcode.com/gh_mirrors/vo/volrendvolrend 是一個(gè)實(shí)時(shí) PlenOctree 體渲染器用 C 和 OpenGL 編寫可實(shí)時(shí)渲染 NeRF神經(jīng)輻射場場景。借助 emscripten 工具鏈volrend 能把整個(gè)渲染引擎編譯成 WebAssemblyWASM讓你在瀏覽器里直接運(yùn)行 NeRF 查看器無需安裝任何軟件。本文將帶你完成 volrend Web 版從環(huán)境安裝、CMake 構(gòu)建、本地預(yù)覽到上線部署的完整流程。 volrend 的 Web 版能做什么volrend 官方 Web 版使用片元著色器后端而非 CUDA 后端構(gòu)建核心能力包括交互式 NeRF 查看鼠標(biāo)/觸屏旋轉(zhuǎn)、平移、縮放實(shí)時(shí)查看 PlenOctree 場景遠(yuǎn)程數(shù)據(jù)加載通過 emscripten fetch API 在線拉取壓縮后的.npz八叉樹文件本地文件打開支持在瀏覽器里加載本地的.npz樹文件、.obj網(wǎng)格和 drawlist 文件豐富的可視化選項(xiàng)切片渲染Slicing、SH 分解、偽重光照、八叉樹網(wǎng)格、FPS 統(tǒng)計(jì)等桌面版的渲染效果可以參考下圖樂高場景的體渲染切片視圖Web 版交互能力相同? 第一步準(zhǔn)備 emscripten 構(gòu)建環(huán)境Web 版構(gòu)建依賴 emscripten 官方文檔 所述的標(biāo)準(zhǔn)安裝方式你需要安裝 emscripten 官方文檔 所述的 SDK推薦用emsdk一鍵安裝確保系統(tǒng)中有CMake3.3和Python 3構(gòu)建腳本會(huì)用到克隆項(xiàng)目含子模塊git clone https://gitcode.com/gh_mirrors/vo/volrend volrend cd volrend 關(guān)鍵點(diǎn)volrend 的CMakeLists.txt內(nèi)置了完整的 emscripten 分支邏輯——只要檢測到 EMSCRIPTEN 編譯器就會(huì)自動(dòng)關(guān)閉 CUDA、切換為片元著色器后端并把著色器shaders/rt.frag內(nèi)聯(lián)進(jìn)代碼無需任何手動(dòng)修改。 第二步用 emcmake 三步構(gòu)建 WASM 版volrend 的構(gòu)建腳本把網(wǎng)頁所需的 HTML/CSS/JS/WASM 全部自動(dòng)化了構(gòu)建只有三步mkdir embuild cd embuild emcmake cmake .. make -j12構(gòu)建完成后完整的網(wǎng)站會(huì)寫到embuild/build/目錄結(jié)構(gòu)如下build/index.html—— 頁面入口自動(dòng)注入版本號build/js/main.js—— 由 5 個(gè) JS 文件 WASM 膠水代碼自動(dòng)拼接而成build/js/volrend_web.wasm—— 真正的 WASM 渲染引擎build/css/main.css—— 頁面樣式這套自動(dòng)化來自CMakeLists.txt中的 emscripten 分支約第 284–356 行它配置了關(guān)鍵編譯參數(shù)USE_WEBGL21啟用 WebGL2、USE_GLFW3用 GLFW 模擬瀏覽器窗口、ALLOW_MEMORY_GROWTH1內(nèi)存可增長初始 512MB。構(gòu)建時(shí)還會(huì)自動(dòng)執(zhí)行web/autoversion.py給 JS/CSS 加上隨機(jī)版本號解決瀏覽器緩存問題。? 第三步本地啟動(dòng)預(yù)覽volrend 內(nèi)置了一個(gè)serve構(gòu)建目標(biāo)直接調(diào)用 Python 的 HTTP 服務(wù)器預(yù)覽cd embuild make serve然后在瀏覽器打開http://0.0.0.0:8000/即可看到 PlenOctree Viewer 界面。頁面前端邏輯位于web/目錄web/index.html—— 導(dǎo)航欄、選項(xiàng)面板、圖層面板、加載進(jìn)度條web/js/init.js—— 鼠標(biāo)/觸屏/鍵盤事件橋接把輸入轉(zhuǎn)發(fā)給 WASM 端web/js/emModule.js—— emscripten 運(yùn)行時(shí)配置與進(jìn)度回調(diào)web/js/guiComponents.js—— 選項(xiàng)滑塊、圖層 UIweb/main_web.cpp—— C 側(cè)的 Web 入口負(fù)責(zé) OpenGL 初始化、數(shù)據(jù)加載與 JS 綁定 加載場景遠(yuǎn)程 URL 與本地文件兩種方式方式一URL 參數(shù)自動(dòng)加載。web/js/init.js支持在地址欄追加參數(shù)頁面啟動(dòng)后自動(dòng)下載并渲染index.html?loadscene.npz多個(gè)文件用;分隔如?loadtree.npz;camera.draw.npz。加載器會(huì)按擴(kuò)展名自動(dòng)判斷.obj走網(wǎng)格加載、.draw.npz走 drawlist、其余按八叉樹處理見web/main_web.cpp中的load_remote函數(shù)。方式二Load Local 手動(dòng)加載。點(diǎn)擊導(dǎo)航欄的Open Local按鈕選擇本地.npz或.obj文件。JS 會(huì)把文件讀入 emscripten 的虛擬文件系統(tǒng)MEMFS再交給 C 端解析——這也是CMakeLists.txt里FORCE_FILESYSTEM1參數(shù)的用途。?? 使用指南常用交互與選項(xiàng)進(jìn)入頁面后常用操作如下操作說明鼠標(biāo)左鍵拖動(dòng)繞相機(jī)位置旋轉(zhuǎn)視角鼠標(biāo)右鍵拖動(dòng)繞原點(diǎn)旋轉(zhuǎn)滾輪 / 雙指捏合前后移動(dòng) / 觸屏縮放1–6鍵切換 world_up 方向適配不同坐標(biāo)系的數(shù)據(jù)T鍵開關(guān) FPS 計(jì)數(shù)Options面板渲染質(zhì)量high speed / moderate / high quality、切片包圍盒、SH 分解范圍、偽重光照、八叉樹網(wǎng)格顯示Layers面板顯示/隱藏相機(jī)層、網(wǎng)格層 第四步部署到靜態(tài)服務(wù)器由于build/目錄是完全自包含的靜態(tài)資源部署非常簡單把整個(gè)embuild/build/目錄上傳到任意靜態(tài)托管Nginx、Apache、GitHub Pages 風(fēng)格的靜態(tài)服務(wù)器均可確保服務(wù)器允許跨域加載.wasm多數(shù)現(xiàn)代服務(wù)器默認(rèn)支持把場景.npz文件放在同域下或確保允許跨域訪問即可通過?loadxxx.npz分享鏈接??提示W(wǎng)ebGL2 渲染對瀏覽器 GPU 有要求建議在帶獨(dú)立顯卡的電腦上體驗(yàn)完整效果。 進(jìn)階壓縮你的數(shù)據(jù)再上線瀏覽器加載數(shù)據(jù)對體積敏感volrend 提供了壓縮腳本scripts/compress_octree.py通過中值切割量化svox 庫 deflate 把原始.npz壓縮到 Web 可用的體積pip install svox python scripts/compress_octree.py scene.npz --out_dir webdata --retain 4--retain 4表示保留前 4 個(gè) SH 系數(shù)不量化部分場景需要此參數(shù)保證質(zhì)量。壓縮后的文件仍可直接被 volrend 打開把它放進(jìn)部署目錄即可被 Web 查看器加載。? 常見問題Q1構(gòu)建時(shí)報(bào) A submodule has not downloaded! 怎么辦執(zhí)行g(shù)it submodule update --init --recursive后再重新構(gòu)建。GLFW 等第三方庫以子模塊形式包含在3rdparty/目錄中。Q2Web 版和桌面版功能有差異嗎有。Web 版基于片元著色器后端比 CUDA 后端慢一些且不支持網(wǎng)格插入相關(guān)功能如 lumisphere probe 探針。Q3頁面打開后一直轉(zhuǎn)圈先檢查瀏覽器是否支持 WebGL2再看控制臺是否有.wasm或.npz的 404 錯(cuò)誤——靜態(tài)服務(wù)器必須正確提供build/下所有文件。? 小結(jié)回顧 volrend Web 部署的核心路徑安裝 emscripten SDKemcmake cmake .. make -j12一鍵產(chǎn)出靜態(tài)網(wǎng)站make serve本地預(yù)覽把build/目錄扔到任何靜態(tài)服務(wù)器用?loadxxx.npz參數(shù)或 Load Local 加載場景整個(gè)過程不到 10 分鐘你就能擁有一個(gè)免安裝的瀏覽器 NeRF 查看器把 volrend 的實(shí)時(shí) PlenOctree 體渲染能力分享給任何人 【免費(fèi)下載鏈接】volrendPlenOctree Volume Rendering (supports CUDA fragment shader backends)項(xiàng)目地址: https://gitcode.com/gh_mirrors/vo/volrend創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考