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

本地运行 GaussianSplats3D

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

clone 仓库到本地

bash 复制代码

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

到目录下依次执行

bash 复制代码

# 安装依赖
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

bash 复制代码

sudo systemctl disable nginx
sudo systemctl stop nginx

安装依赖

bash 复制代码

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

安装 GPG key

bash 复制代码

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

添加 APT 仓库

bash 复制代码

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 索引

bash 复制代码

sudo apt update

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

bash 复制代码

sudo apt install --no-install-recommends openresty

配置 OpenResty

在 /var 下创建目录 wwwroot

bash 复制代码

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

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

bash 复制代码

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;
    }
}

改完测一下是否正确

bash 复制代码

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

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

bash 复制代码

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证书和客户端证书

bash 复制代码

# 创建一个工作目录
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

bash 复制代码

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

bash 复制代码

/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 中加上

html 复制代码

<script src="coi-serviceworker.js"></script>

如果下载的是 min.js 就是

html 复制代码

<script src="coi-serviceworker.min.js"></script>

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

3D Gaussian splatting 08: 部署模型网页展示

目录

本地运行 GaussianSplats3D

云服务器上运行 GaussianSplats3D

安装 OpenResty/Nginx

配置 OpenResty

处理 SharedArrayBuffer crossOriginIsolated 错误

创建 SSL 证书

配置 SSL 证书

在 GitHub.io 上部署 GaussianSplats3D

解决 SharedArrayBuffer crossOriginIsolated 错误