高斯喷溅查看器

这是一个基于 PlayCanvas 的高斯喷溅查看器，支持添加资产、配置 skybox 以及设置资产信息。借助该工具，用户可以方便地展示和交互查看高斯喷溅模型，在现代浏览器中实现高质量的模型渲染效果。通过配置 assets.json 文件，能轻松管理模型、环境贴图等资源，还可进行多种交互操作来查看模型。

安装与启动

前提条件

• Node.js 14.x或更高版本
• npm 6.x或更高版本

安装依赖

npm install .

启动开发服务器

npx vite

启动后，浏览器会自动打开应用页面，您可以在本地访问 http://localhost:3000 查看渲染效果。

使用说明

展示自定义喷溅模型

1. 准备模型文件 将您的高斯喷溅模型文件（通常为.ply格式）放置在项目目录中。

2. 配置模型 编辑 config/assets.json 文件，添加您的模型配置：

   {
     "gsplatUrl": "path/to/your/model.ply",  // 模型文件路径
     "skyboxUrl": "cube/your-environment.hdr",  // 天空盒环境贴图
     "scale": 1,  // 模型缩放比例
     "additionalInfo": {
       "name": "模型名称",
       "description": "模型描述"
       // 其他自定义信息
     }
   }

交互控制

• 旋转模型：拖动鼠标或触摸屏幕
• 缩放模型：滚动鼠标滚轮或双指捏合
• 平移视图：按住右键拖动或三指拖动

配置指南

资产配置 (assets.json)

该文件定义了渲染器将展示的所有模型和场景配置。每个资产项包含：

• gsplatUrl: 高斯喷溅模型文件路径
• skyboxUrl: 天空盒环境贴图路径
• scale: 模型缩放比例
• additionalInfo: 模型的附加信息（名称、描述等）

天空盒环境

项目提供了多种HDRI环境贴图，位于 cube/ 目录下：

• FN_HDRI_029.hdr: 自然环境
• empty-room.hdr: 空房间环境
• helipad-env-atlas.png: 直升机坪环境
• wide-street.hdr: 城市街道环境

您可以根据需要选择不同的环境贴图，或添加自己的HDRI文件。

项目架构

该渲染器采用模块化设计，主要包含以下核心模块：

• gsplat.ts: 高斯喷溅渲染核心逻辑
• camera.ts: 相机控制和视角管理
• sky.ts: 天空盒和环境管理
• asset.ts: 资产加载和管理

扩展渲染器

• 可以查看 \docs

注意事项

• 对于大型模型，适当调整 scale 参数以优化性能
• 高斯喷溅渲染对设备性能有一定要求，建议在现代浏览器和性能较好的设备上运行
• 首次加载模型可能需要一些时间，取决于模型大小和网络状况
• 自定义模型需要符合高斯喷溅格式要求（通常为带属性的.ply文件）