计算机视觉图形学深度学习【免费下载链接】brush3D Reconstruction for all项目地址https://gitcode.com/GitHub_Trending/br/brush点击查看免费下载Brush 是一个面向全平台的 3D 重建与高斯泼溅Gaussian Splatting项目其桌面与移动端界面由brush-app基于 egui/eframe 的 Rust 应用承载。本文介绍的是同一套查看器代码如何通过 WebAssembly 编译到浏览器brush-app的 egui 查看器在浏览器中以 WASM 形式运行前端使用 Vite React 负责页面装配与 URL 参数解析二者通过wasm-bindgen桥接层EmbeddedApp通信。读完本文你将掌握 WASM 版查看器的本地开发与生产构建流程、全部 URL 参数数据加载、全屏泼溅模式、相机初始位姿与漫游限制的用法以及这些参数在前端解析后最终如何落到 Rust 侧相机控制实现的调用链。一、架构总览egui 查看器如何跑进浏览器整个 web demo 由两部分组成Rust 侧apps/brush-app以cdylib形式编译成 WASMcrate 名为brush_app见 Cargo.toml把原本运行在桌面/移动端的 egui 界面封装成可供 JavaScript 直接调用的对象前端侧web/README.md 所在目录apps/brush-app/web是一个 Vite React 19 工程负责创建canvas、实例化 WASM 中的EmbeddedApp、把 URL 查询参数翻译成对 Rust 侧的调用。前端并不绘制任何 3D 内容——所有渲染都在 Rust/egui/wgpu 内部完成画布由 eframe 的WebRunner接管。three.js之所以出现在依赖中是因为 Rust 侧wasm.rs直接绑定并读取 THREE.js 的Vector3对象x/y/zgetter从而让前端可以复用 three 的向量工具来构造相机参数见 src/wasm.rs。React 只负责生命周期与参数传递。核心桥接类型是 src/wasm.rs 中导出的EmbeddedAppnew()安装 panic hookdebug 构建下还会把日志转发到浏览器 consolestart(canvas)初始化 burn 后端后在给定canvas上启动 eframe 应用load_url(url)、set_ui_mode(mode)、set_cam_settings(settings)、set_cam_fov(fov)、set_cam_transform(pos, rot)、set_focal_point(point, distance, rot)分别对应数据加载、界面模式与相机控制。二、快速开始安装与本地开发WASM demo 的前端工程依赖 npm仓库根目录另有一份 workspace 级的 package.json但 demo 自身的脚本与依赖都声明在 apps/brush-app/web/package.json 中。进入apps/brush-app/web后执行npm install npm run dev # localhost:5173 — auto-rebuilds wasm before startingnpm run dev并不是直接启动 Vite它先执行build:wasm-dev即用wasm-pack以dev profile编译上一级目录..即apps/brush-app的 Rust 代码输出到web/pkg然后再启动 Vite dev server见 package.jsonbuild:wasm-dev: wasm-pack build .. --dev --target bundler --out-dir web/pkg, dev: npm run build:wasm-dev vite其中--target bundler表明生成的是面向打包器Vite的 ES 模块形式 WASMdev profile 下 Cargo.toml 还会开启dwarf-debug-info便于调试。Vite 侧的配置集中在 vite.config.ts端口固定为5173且strictPort: trueserver.fs.allow被放宽到上一级目录..否则 Vite 会拒绝读取web/pkg下由wasm-pack生成的 WASM 产物内置vite-plugin-wasm与vite-plugin-top-level-await让浏览器可以原生加载并初始化 WASM 模块。页面骨架在 index.html#root挂载点、深色背景入口脚本是 src/main.tsx它用createRoot渲染App组件。加载 WASM 期间src/App.tsx 通过React.lazySuspense展示一个 Loading Brush WASM... 的全屏占位。三、生产构建与部署npm run build # static build under dist/, basepath /brush-demonpm run build先以release profile重新编译 WASMbuild:wasm-release再执行 Vite 静态构建见 package.jsonbuild: npm run build:wasm-release cross-env BRUSH_BASE_PATH/brush-demo vite build, preview: vite preview两个要点BRUSH_BASE_PATH环境变量构建脚本通过cross-env把它设为/brush-demovite.config.ts 据此设置base使产物的资源路径都以该子路径为前缀。这样部署到类似 GitHub Pages 的子目录时无需硬编码路径不设置时默认使用/。release WASM 的激进优化release 构建走wasm-pack的wasm-opt阶段使用-Oz --converge并显式开启bulk-memory与nontrapping-float-to-int两个特性见 apps/brush-app/Cargo.toml在保证性能的前提下压缩产物体积。构建产物输出在dist/目录可用npm run preview本地预览。四、完整 URL 参数参考原文档给出的一组 URL 参数全部可选通过查询字符串传入例如https://your-host/?urlhttps://example.com/model.plyfullsplattruefocal_point0,0,0focus_distance3speed_scale0.8参数类型说明默认值url…string启动时加载的.ply/ 数据集 URL无不自动加载fullsplattruebool全屏泼溅嵌入式查看器模式旧别名zentrue仍兼容falsefocal_pointx,y,zVector3相机注视点世界坐标(0,0,0)camera_rotationx,y,zVector3相机欧拉角XYZ 顺序与 THREE.js 一致(0,0,0)focus_distancefloat相机到注视点的距离2.5min_focus_distancefloat注视距离下界漫游限制不限制max_focus_distancefloat注视距离上界漫游限制不限制speed_scalefloat相机漫游速度倍率不覆盖用场景默认参数解析发生在 src/App.tsx逻辑如下url直接读取查询串fullsplat同时兼容新名fullsplat与旧名zen大小写不敏感均为true时生效数值参数用getFloat解析非法或缺失时返回undefined保持 Rust 侧默认三维向量参数用getVector3解析按逗号切分、逐项parseFloat并去空格只有恰好 3 个有效分量时才构造THREE.Vector3。随后这些值被作为 props 传给 src/BrushViewer.tsx由它调用 WASM 侧 API加载完成前先new EmbeddedApp()并await app.start(canvas)然后按 props 变化依次执行app.load_url(url)、app.set_ui_mode(...)、app.set_cam_settings(new CameraSettings(...))与app.set_focal_point(focalPoint, focusDistance, cameraRotation)。五、参数背后的 Rust 实现从 URL 到相机位姿5.1 注视点与相机位姿set_focal_point是最值得展开的参数之一。前端传入focal_point、focus_distance、camera_rotation三个值后WASM 绑定层把它们组装成Quat与Vec3最终在 src/ui/ui_process.rs 中完成真正的数学计算fn set_focal_point(mut self, focal_point: Vec3, focus_distance: f32, rotation: Quat) { let position focal_point - rotation * Vec3::Z * focus_distance; self.set_camera_transform(position, rotation); self.controls.focus_distance focus_distance; }即相机位置由focal_point - 旋转后的 -Z 方向 × focus_distance反推得到这样前端无需同时给出位置与朝向只要指定看哪里 离多远 朝向即可唯一定位相机。注意 src/wasm.rs 中的欧拉角使用EulerRot::XYZ顺序构造四元数并注释明确说明与 THREE.js 默认顺序一致因此 URL 里写的camera_rotation语义与 three.js 的欧拉角一致。5.2 漫游限制与速度min_focus_distance/max_focus_distance属于CameraClamping注视距离上下界speed_scale属于speed_scale字段二者共同组成 Rust 侧的CameraSettings结构体见 src/ui/app.rs。该结构体还包含未在 URL 中暴露但可用于二次开发的字段splat_scale、background背景色、grid_enabled网格开关以及俯仰/偏航角限制min_pitch/max_pitch/min_yaw/max_yaw见 src/ui/camera_controls.rs。WASM 绑定层的CameraSettings构造函数完整接受这些可选项见 src/wasm.rs如果你要扩展 URL 参数把对应字段从App.tsx传进构造函数即可。关于速度还有一个值得注意的实现细节CameraController的注释指出漫游速度会按场景的世界尺度scene_scale缩放一个房间和一条街区穿越耗时大致相同见 src/ui/camera_controls.rs所以speed_scale本质上是一个相对倍率而不是绝对速度。5.3 全屏泼溅 / 嵌入式查看器模式fullsplattrue或旧别名zentrue在前端被翻译为UiMode.FullScreenSplat。UiMode枚举定义在 src/ui/mod.rs共有三态Default带数据加载、统计等面板的默认 UIFullScreenSplat全屏展示泼溅但保留切换与控制面板EmbeddedViewer纯粹的嵌入渲染不渲染任何其他内容。App.tsx只把fullsplat映射到FullScreenSplat需要更纯粹的嵌入行为时可在前端直接调用app.set_ui_mode(UiMode.EmbeddedViewer)。5.4 数据加载链路url…参数最终走到 src/wasm.rs 的load_url它通过brush_process::create_process(DataSource::Url(url), ...)创建一个数据加载进程并交给应用的上下文connect_to_process。也就是说浏览器端的数据加载复用了brush-processcrate 的进程模型.ply文件与完整数据集如 NerfStudio 导出的场景均通过该入口读取而不仅是简单的文件解析。六、常见问题与排查要点以下要点均可从当前仓库源码确认WASM 启动失败时的报错展示BrushViewer.tsx 捕获start()的异常并展示在画布区域注意注释指出 eframe/wasm 的错误常常是原始JsValue字符串而非Error实例因此代码同时处理了Error、字符串与兜底String(err)三种形态。随机数后端WASM 目标需要显式启用getrandom的wasm_js后端0.4 与 0.3 两个版本都要开后者经由ahash→burn-core传递引入否则某些依赖随机数的 burn 初始化会在浏览器中失败见 apps/brush-app/Cargo.toml。Vite 读不到 pkg 目录如果 dev server 报文件系统权限错误检查 vite.config.ts 的server.fs.allow是否包含..。部署子路径资源 404构建时必须设置与目标部署路径一致的BRUSH_BASE_PATH默认脚本是/brush-demo否则dist/内资源路径会指向错误根目录。七、小结apps/brush-app/web是 Brush 全平台故事的浏览器一角Rust 侧EmbeddedApp把 eframe/egui 的 3D 查看器完整编译进 WASM前端 Vite React 只负责画布、生命周期与 URL 参数翻译。本文覆盖的三条命令npm install/npm run dev/npm run build与全部可选 URL 参数均可直接落地使用在此基础上set_focal_point的注视点反推公式、CameraClamping的漫游限制、UiMode的三态设计以及wasm-pack的 release 优化配置为你在嵌入式页面、展示链接或自定义相机入场动画等场景中做二次开发提供了源码级的参考。如需继续深入可依次阅读 apps/brush-app/web/src/BrushViewer.tsx、apps/brush-app/src/wasm.rs 与 apps/brush-app/src/ui/ui_process.rs。赞分享计算机视觉图形学深度学习【免费下载链接】brush3D Reconstruction for all项目地址https://gitcode.com/GitHub_Trending/br/brush点击查看免费下载相关推荐3D高斯泼溅技术终极指南如何在浏览器中实现实时3D渲染3D高斯泼溅技术终极指南如何在浏览器中实现实时3D渲染 3D高斯泼溅技术正在彻底改变我们体验3D内容的方式GaussianSplats3D是一个基于Thre3D渲染图形学5个关键步骤在浏览器中实现百万级3D高斯泼溅渲染5个关键步骤在浏览器中实现百万级3D高斯泼溅渲染 想要在浏览器中流畅渲染百万级3D点云数据3D高斯泼溅技术正是你需要的解决方案。这个基于Three.js的创3D渲染图形学3D高斯泼溅终极指南在浏览器中实现百万级点云实时渲染3D高斯泼溅终极指南在浏览器中实现百万级点云实时渲染 你是否曾在浏览器中渲染大型3D点云时遇到性能瓶颈当数据量达到百万级别时传统WebGL渲染往往在帧率和3D渲染图形学上一篇GHelper免费单文件搞定华硕笔记本的性能模式、GPU 切换与电池养护下一篇Windows Cleaner终极指南轻松解决C盘爆红难题让你的电脑飞起来创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Brush WASM Web Demo：用 Vite + React 在浏览器中运行 3D 高斯泼溅查看器
计算机视觉图形学深度学习【免费下载链接】brush3D Reconstruction for all项目地址https://gitcode.com/GitHub_Trending/br/brush点击查看免费下载Brush 是一个面向全平台的 3D 重建与高斯泼溅Gaussian Splatting项目其桌面与移动端界面由brush-app基于 egui/eframe 的 Rust 应用承载。本文介绍的是同一套查看器代码如何通过 WebAssembly 编译到浏览器brush-app的 egui 查看器在浏览器中以 WASM 形式运行前端使用 Vite React 负责页面装配与 URL 参数解析二者通过wasm-bindgen桥接层EmbeddedApp通信。读完本文你将掌握 WASM 版查看器的本地开发与生产构建流程、全部 URL 参数数据加载、全屏泼溅模式、相机初始位姿与漫游限制的用法以及这些参数在前端解析后最终如何落到 Rust 侧相机控制实现的调用链。一、架构总览egui 查看器如何跑进浏览器整个 web demo 由两部分组成Rust 侧apps/brush-app以cdylib形式编译成 WASMcrate 名为brush_app见 Cargo.toml把原本运行在桌面/移动端的 egui 界面封装成可供 JavaScript 直接调用的对象前端侧web/README.md 所在目录apps/brush-app/web是一个 Vite React 19 工程负责创建canvas、实例化 WASM 中的EmbeddedApp、把 URL 查询参数翻译成对 Rust 侧的调用。前端并不绘制任何 3D 内容——所有渲染都在 Rust/egui/wgpu 内部完成画布由 eframe 的WebRunner接管。three.js之所以出现在依赖中是因为 Rust 侧wasm.rs直接绑定并读取 THREE.js 的Vector3对象x/y/zgetter从而让前端可以复用 three 的向量工具来构造相机参数见 src/wasm.rs。React 只负责生命周期与参数传递。核心桥接类型是 src/wasm.rs 中导出的EmbeddedAppnew()安装 panic hookdebug 构建下还会把日志转发到浏览器 consolestart(canvas)初始化 burn 后端后在给定canvas上启动 eframe 应用load_url(url)、set_ui_mode(mode)、set_cam_settings(settings)、set_cam_fov(fov)、set_cam_transform(pos, rot)、set_focal_point(point, distance, rot)分别对应数据加载、界面模式与相机控制。二、快速开始安装与本地开发WASM demo 的前端工程依赖 npm仓库根目录另有一份 workspace 级的 package.json但 demo 自身的脚本与依赖都声明在 apps/brush-app/web/package.json 中。进入apps/brush-app/web后执行npm install npm run dev # localhost:5173 — auto-rebuilds wasm before startingnpm run dev并不是直接启动 Vite它先执行build:wasm-dev即用wasm-pack以dev profile编译上一级目录..即apps/brush-app的 Rust 代码输出到web/pkg然后再启动 Vite dev server见 package.jsonbuild:wasm-dev: wasm-pack build .. --dev --target bundler --out-dir web/pkg, dev: npm run build:wasm-dev vite其中--target bundler表明生成的是面向打包器Vite的 ES 模块形式 WASMdev profile 下 Cargo.toml 还会开启dwarf-debug-info便于调试。Vite 侧的配置集中在 vite.config.ts端口固定为5173且strictPort: trueserver.fs.allow被放宽到上一级目录..否则 Vite 会拒绝读取web/pkg下由wasm-pack生成的 WASM 产物内置vite-plugin-wasm与vite-plugin-top-level-await让浏览器可以原生加载并初始化 WASM 模块。页面骨架在 index.html#root挂载点、深色背景入口脚本是 src/main.tsx它用createRoot渲染App组件。加载 WASM 期间src/App.tsx 通过React.lazySuspense展示一个 Loading Brush WASM... 的全屏占位。三、生产构建与部署npm run build # static build under dist/, basepath /brush-demonpm run build先以release profile重新编译 WASMbuild:wasm-release再执行 Vite 静态构建见 package.jsonbuild: npm run build:wasm-release cross-env BRUSH_BASE_PATH/brush-demo vite build, preview: vite preview两个要点BRUSH_BASE_PATH环境变量构建脚本通过cross-env把它设为/brush-demovite.config.ts 据此设置base使产物的资源路径都以该子路径为前缀。这样部署到类似 GitHub Pages 的子目录时无需硬编码路径不设置时默认使用/。release WASM 的激进优化release 构建走wasm-pack的wasm-opt阶段使用-Oz --converge并显式开启bulk-memory与nontrapping-float-to-int两个特性见 apps/brush-app/Cargo.toml在保证性能的前提下压缩产物体积。构建产物输出在dist/目录可用npm run preview本地预览。四、完整 URL 参数参考原文档给出的一组 URL 参数全部可选通过查询字符串传入例如https://your-host/?urlhttps://example.com/model.plyfullsplattruefocal_point0,0,0focus_distance3speed_scale0.8参数类型说明默认值url…string启动时加载的.ply/ 数据集 URL无不自动加载fullsplattruebool全屏泼溅嵌入式查看器模式旧别名zentrue仍兼容falsefocal_pointx,y,zVector3相机注视点世界坐标(0,0,0)camera_rotationx,y,zVector3相机欧拉角XYZ 顺序与 THREE.js 一致(0,0,0)focus_distancefloat相机到注视点的距离2.5min_focus_distancefloat注视距离下界漫游限制不限制max_focus_distancefloat注视距离上界漫游限制不限制speed_scalefloat相机漫游速度倍率不覆盖用场景默认参数解析发生在 src/App.tsx逻辑如下url直接读取查询串fullsplat同时兼容新名fullsplat与旧名zen大小写不敏感均为true时生效数值参数用getFloat解析非法或缺失时返回undefined保持 Rust 侧默认三维向量参数用getVector3解析按逗号切分、逐项parseFloat并去空格只有恰好 3 个有效分量时才构造THREE.Vector3。随后这些值被作为 props 传给 src/BrushViewer.tsx由它调用 WASM 侧 API加载完成前先new EmbeddedApp()并await app.start(canvas)然后按 props 变化依次执行app.load_url(url)、app.set_ui_mode(...)、app.set_cam_settings(new CameraSettings(...))与app.set_focal_point(focalPoint, focusDistance, cameraRotation)。五、参数背后的 Rust 实现从 URL 到相机位姿5.1 注视点与相机位姿set_focal_point是最值得展开的参数之一。前端传入focal_point、focus_distance、camera_rotation三个值后WASM 绑定层把它们组装成Quat与Vec3最终在 src/ui/ui_process.rs 中完成真正的数学计算fn set_focal_point(mut self, focal_point: Vec3, focus_distance: f32, rotation: Quat) { let position focal_point - rotation * Vec3::Z * focus_distance; self.set_camera_transform(position, rotation); self.controls.focus_distance focus_distance; }即相机位置由focal_point - 旋转后的 -Z 方向 × focus_distance反推得到这样前端无需同时给出位置与朝向只要指定看哪里 离多远 朝向即可唯一定位相机。注意 src/wasm.rs 中的欧拉角使用EulerRot::XYZ顺序构造四元数并注释明确说明与 THREE.js 默认顺序一致因此 URL 里写的camera_rotation语义与 three.js 的欧拉角一致。5.2 漫游限制与速度min_focus_distance/max_focus_distance属于CameraClamping注视距离上下界speed_scale属于speed_scale字段二者共同组成 Rust 侧的CameraSettings结构体见 src/ui/app.rs。该结构体还包含未在 URL 中暴露但可用于二次开发的字段splat_scale、background背景色、grid_enabled网格开关以及俯仰/偏航角限制min_pitch/max_pitch/min_yaw/max_yaw见 src/ui/camera_controls.rs。WASM 绑定层的CameraSettings构造函数完整接受这些可选项见 src/wasm.rs如果你要扩展 URL 参数把对应字段从App.tsx传进构造函数即可。关于速度还有一个值得注意的实现细节CameraController的注释指出漫游速度会按场景的世界尺度scene_scale缩放一个房间和一条街区穿越耗时大致相同见 src/ui/camera_controls.rs所以speed_scale本质上是一个相对倍率而不是绝对速度。5.3 全屏泼溅 / 嵌入式查看器模式fullsplattrue或旧别名zentrue在前端被翻译为UiMode.FullScreenSplat。UiMode枚举定义在 src/ui/mod.rs共有三态Default带数据加载、统计等面板的默认 UIFullScreenSplat全屏展示泼溅但保留切换与控制面板EmbeddedViewer纯粹的嵌入渲染不渲染任何其他内容。App.tsx只把fullsplat映射到FullScreenSplat需要更纯粹的嵌入行为时可在前端直接调用app.set_ui_mode(UiMode.EmbeddedViewer)。5.4 数据加载链路url…参数最终走到 src/wasm.rs 的load_url它通过brush_process::create_process(DataSource::Url(url), ...)创建一个数据加载进程并交给应用的上下文connect_to_process。也就是说浏览器端的数据加载复用了brush-processcrate 的进程模型.ply文件与完整数据集如 NerfStudio 导出的场景均通过该入口读取而不仅是简单的文件解析。六、常见问题与排查要点以下要点均可从当前仓库源码确认WASM 启动失败时的报错展示BrushViewer.tsx 捕获start()的异常并展示在画布区域注意注释指出 eframe/wasm 的错误常常是原始JsValue字符串而非Error实例因此代码同时处理了Error、字符串与兜底String(err)三种形态。随机数后端WASM 目标需要显式启用getrandom的wasm_js后端0.4 与 0.3 两个版本都要开后者经由ahash→burn-core传递引入否则某些依赖随机数的 burn 初始化会在浏览器中失败见 apps/brush-app/Cargo.toml。Vite 读不到 pkg 目录如果 dev server 报文件系统权限错误检查 vite.config.ts 的server.fs.allow是否包含..。部署子路径资源 404构建时必须设置与目标部署路径一致的BRUSH_BASE_PATH默认脚本是/brush-demo否则dist/内资源路径会指向错误根目录。七、小结apps/brush-app/web是 Brush 全平台故事的浏览器一角Rust 侧EmbeddedApp把 eframe/egui 的 3D 查看器完整编译进 WASM前端 Vite React 只负责画布、生命周期与 URL 参数翻译。本文覆盖的三条命令npm install/npm run dev/npm run build与全部可选 URL 参数均可直接落地使用在此基础上set_focal_point的注视点反推公式、CameraClamping的漫游限制、UiMode的三态设计以及wasm-pack的 release 优化配置为你在嵌入式页面、展示链接或自定义相机入场动画等场景中做二次开发提供了源码级的参考。如需继续深入可依次阅读 apps/brush-app/web/src/BrushViewer.tsx、apps/brush-app/src/wasm.rs 与 apps/brush-app/src/ui/ui_process.rs。赞分享计算机视觉图形学深度学习【免费下载链接】brush3D Reconstruction for all项目地址https://gitcode.com/GitHub_Trending/br/brush点击查看免费下载相关推荐3D高斯泼溅技术终极指南如何在浏览器中实现实时3D渲染3D高斯泼溅技术终极指南如何在浏览器中实现实时3D渲染 3D高斯泼溅技术正在彻底改变我们体验3D内容的方式GaussianSplats3D是一个基于Thre3D渲染图形学5个关键步骤在浏览器中实现百万级3D高斯泼溅渲染5个关键步骤在浏览器中实现百万级3D高斯泼溅渲染 想要在浏览器中流畅渲染百万级3D点云数据3D高斯泼溅技术正是你需要的解决方案。这个基于Three.js的创3D渲染图形学3D高斯泼溅终极指南在浏览器中实现百万级点云实时渲染3D高斯泼溅终极指南在浏览器中实现百万级点云实时渲染 你是否曾在浏览器中渲染大型3D点云时遇到性能瓶颈当数据量达到百万级别时传统WebGL渲染往往在帧率和3D渲染图形学上一篇GHelper免费单文件搞定华硕笔记本的性能模式、GPU 切换与电池养护下一篇Windows Cleaner终极指南轻松解决C盘爆红难题让你的电脑飞起来创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考