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），仅供参考