目錄

• 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="coi-serviceworker.js"></script>

如果下載的是 min.js 就是

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

這個js的工作機制是在頁面第一次訪問時註冊一個 service worker 去模擬 COOP and COEP 請求頭. 之後再訪問, 就能正常打開模型查看了.