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