目录

• 3D Gaussian splatting 01: 环境搭建
• 3D Gaussian splatting 02: 快速评估
• 3D Gaussian splatting 03: 用户数据训练
• 3D Gaussian splatting 04: 代码阅读-提取相机位姿和稀疏点云
• 3D Gaussian splatting 05: 代码阅读-训练整体流程
• 3D Gaussian splatting 06: 代码阅读-训练参数
• 3D Gaussian splatting 07: 代码阅读-训练载入数据和保存结果
• 3D Gaussian splatting 08: 部署模型网页展示

制作好的Gaussian 3D模型, 可以通过项目自带的 SIBR Viewer 查看, 但是这个运行对显卡有要求, 需要 CUDA_ARCHITECTURE >= 7.x, 另一个选择是 Splatviz, 这个对显卡要求更低, 但是这两个都是需要在本地运行, 只能自己查看模型效果, 如果要将效果展示给别人, 最好的方案就是基于web的viewer, 线上直接可用的是 https://poly.cam, 如果想自己做一个网页展示模型, 可以用 GaussianSplats3D

本地运行 GaussianSplats3D

先参考这篇 Node.js环境和antd初始化项目 安装 nvm 和 node

clone 仓库到本地

git clone https://github.com/mkkellogg/GaussianSplats3D.git 

到目录下依次执行

# 安装依赖 npm install # 构建 npm run build # 运行 npm run demo 

下载仓库提供的模型文件 gaussian_splat_data.zip,
放到 build/demo/assets/data 目录下. 这些模型文件的后缀是 .ksplat, 相比 Gaussian 3D模型的 .ply 文件, ksplat 文件要小很多.

之后用浏览器访问 http://127.0.0.1:8080 就可以访问了

云服务器上运行 GaussianSplats3D

安装 OpenResty/Nginx

这里以 OpenResty 作为例子. 用 Nginx 也可以

先停止并禁用可能存在的nginx

sudo systemctl disable nginx sudo systemctl stop nginx 

安装依赖

sudo apt-get -y install --no-install-recommends wget gnupg ca-certificates lsb-release 

安装 GPG key

wget -O - https://openresty.org/package/pubkey.gpg | sudo gpg --dearmor -o /usr/share/keyrings/openresty.gpg 

添加 APT 仓库

echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/openresty.gpg] http://openresty.org/package/ubuntu $(lsb_release -sc) main" | sudo tee /etc/apt/sources.list.d/openresty.list > /dev/null 

更新 APT 索引

sudo apt update 

安装, 添加--no-install-recommends参数避免安装多余的包

sudo apt install --no-install-recommends openresty 

配置 OpenResty

在 /var 下创建目录 wwwroot

cd /var sudo mkdir wwwroot chown -R nobody:root wwwroot 

修改 OpenResty 的配置文件, 将 html 目录指向刚才新建的目录, 配置文件默认在 /etc/openresty/nginx.conf

sudo vi /etc/openresty/nginx.conf 

修改之后server下的内容

server { listen 80; server_name localhost; location / { root /var/wwwroot; <---- 修改这行 index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } 

改完测一下是否正确

/usr/local/openresty/nginx/sbin/nginx -t 

如果显示 ok successful 就可以重启 OpenResty

sudo systemctl restart openresty.service 

将上面build产生的demo目录上传到 wwwroot 目录下, 假定IP是 23.23.23.23 就可以通过 http://23.23.23.23/demo 访问了

处理 SharedArrayBuffer crossOriginIsolated 错误

上面的浏览器访问有个问题, 页面好的, 查看模型时浏览器console会报一个错误, 下载模型文件100%后一直卡在那里转圈圈

"DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': SharedArrayBuffer transfer requires self.crossOriginIsolated." 

这个问题在仓库首页的最底下有说明, 需要添加这两个HTTP头

response.setHeader("Cross-Origin-Opener-Policy", "same-origin"); response.setHeader("Cross-Origin-Embedder-Policy", "require-corp"); 

在 nginx.conf 中添加这两个请求头的格式是

add_header 'Cross-Origin-Opener-Policy' 'same-origin'; add_header 'Cross-Origin-Embedder-Policy' 'require-corp'; 

但是单单添加这个是没用的, 需要启用 HTTPS 才行.

创建 SSL 证书

花钱可以买域名, 备案, 买证书, 不想花钱可以自己生成一个, 生成证书的命令, 可以用普通用户执行, 不需要root全选, 完整的说明可以参考这篇 生成Nginx服务器SSL证书和客户端证书

# 创建一个工作目录 mkdir temp cd temp/ # 创建一个密钥key, 密码是 111111 openssl genrsa -aes256 -passout pass:111111 -out server.pass.key 2048 # 生成 server.key, 这个要配置到 nginx openssl rsa -passin pass:111111 -in server.pass.key -out server.key # 生成 server.csr openssl req -new -sha256 -key server.key -out server.csr 

在生成 scr 这步, 当提示Common Name (eg, your name or your server's hostname) []:时, 用域名的填域名, 没域名的必须填服务器的IP, 例如 23.23.23.23

最后生成服务端证书 server.pem, 有效期10年, 这个也要配置到 nginx

openssl x509 -req -sha256 -days 3655 -in server.csr -signkey server.key -out server.pem 

因为仅仅是要开启ssl, 任何人都可以访问, 所以有上面的 server.key 和 server.pem 就可以了, 不用生成客户端证书

配置 SSL 证书

配置到 OpenResty, 将 server.key 和 server.pem 复制到 /usr/local/openresty/nginx/conf/cert/, cert 目录要创建, 然后修改 nginx.conf, 增加一个和原有 server 平级的, 监听443端口带ssl的配置

server { listen 443 ssl; server_name 115.190.27.187; ssl_certificate cert/server.pem; ssl_certificate_key cert/server.key; location / { root /var/wwwroot; index index.html index.htm; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Cross-Origin-Opener-Policy' 'same-origin'; add_header 'Cross-Origin-Embedder-Policy' 'require-corp'; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } 

注意新版本的 nginx 不认 ssl on; 这样的配置了, 必须用 listen 443 ssl;

然后测试配置是否正确, 没问题就重启 OpenResty

/usr/local/openresty/nginx/sbin/nginx -t sudo systemctl restart openresty.service 

浏览器访问 https://23.23.23.23/demo , 此时会提示有风险, 选择"高级", 然后点"继续访问", 就能打开页面, 此时再打开模型查看页面, 就可以看到模型展示了.

在 GitHub.io 上部署 GaussianSplats3D

GaussianSplats3D 实际上是纯前端应用, 都是静态文件, 理论上是可以部署到 github.io 的, 并且 github.io 本身自带 HTTPS.

首先在自己的 GitHub 账号下, 创建与自己账号同名的 账号名.github.io 仓库.

GitHub 默认会将这种命名的仓库中的内容, 部署到 github.io 域名下, 可以通过你的账号名的二级域名 https://账号名.github.io 访问

通过 git clone, git add -A, git commit, git push origin main 一通操作下来, 页面上去了.

注意 GitHub 对提交的单个文件大小是有限制的, 超过 50M 会在 push 时提示 warning, 如果超过 100M 会被拒绝, 所以 GaussianSplats3D 自带的那些 high.ksplat 就只能丢掉了.

但是访问时, 又出现了 SharedArrayBuffer crossOriginIsolated 错误

解决 SharedArrayBuffer crossOriginIsolated 错误

这个问题的解决, 试了很多方法, 最后有效的是这个解决方案 https://docs.wasmer.io/sdk/wasmer-js/how-to/coop-coep-headers

首先从 https://github.com/kairi003/coi-serviceworker/ 下载 coi-serviceworker.js (或者 coi-serviceworker.min.js), 和自己项目的 index.html 放到同一个目录或者父目录中

然后将这个js放到自己项目的页首, 在 index.html 中加上

<script src="https://www.cnblogs.com/milton/p/coi-serviceworker.js"></script> 

如果下载的是 min.js 就是

<script src="https://www.cnblogs.com/milton/p/coi-serviceworker.min.js"></script> 

这个js的工作机制是在页面第一次访问时注册一个 service worker 去模拟 COOP and COEP 请求头. 之后再访问, 就能正常打开模型查看了.