oceanlabdesign.github.io/3DGS_Maker.html at main · OceanLabDesign/oceanlabdesign.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>From Video to Editable 3D Mesh</title>
  <style>
    body {
      font-family: "Noto Sans TC", sans-serif;
      margin: 0;
      padding: 0;
      background: #f9f9f9;
      color: #333;
    }
    header {
      background: #222;
      color: #fff;
      padding: 1rem 2rem;
      text-align: center;
    }
    section {
      padding: 2rem;
      max-width: 900px;
      margin: auto;
    }
    h2 {
      border-left: 5px solid #4CAF50;
      padding-left: 0.5rem;
    }
    pre {
      background: #eee;
      padding: 1rem;
      overflow-x: auto;
    }
    button {
      padding: 0.6rem 1rem;
      background: #4CAF50;
      border: none;
      color: white;
      font-size: 1rem;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 1rem;
    }
    button:hover {
      background: #45a049;
    }
    .step {
      margin-bottom: 3rem;
    }
    footer {
      text-align: center;
      padding: 2rem;
      background: #eee;
    }
  </style>
</head>
<body>
  <header>
    <h1>🎥 From Video to Editable 3D Mesh</h1>
  </header>

  <section>
    <div class="step">
      <h2>1️⃣ 影片轉圖片影格</h2>
      <p>使用 ffmpeg 將影片切成影格圖片。</p>
      <pre>ffmpeg -i input_video.mp4 -qscale:v 2 frames/frame_%04d.jpg</pre>
      <button>📁 上傳影片</button>
    </div>

    <div class="step">
      <h2>2️⃣ 使用 COLMAP 估算相機姿態</h2>
      <p>使用 COLMAP 產生相機姿態與特徵點資料。</p>
      <pre>colmap feature_extractor --database_path colmap_db/database.db --image_path frames
colmap exhaustive_matcher --database_path colmap_db/database.db
colmap mapper --database_path colmap_db/database.db --image_path frames --output_path colmap_sparse</pre>
      <button>▶️ 執行 COLMAP</button>
    </div>

    <div class="step">
      <h2>3️⃣ 準備資料給 MAtCha 使用</h2>
      <p>確認輸出結構與檔名格式後將資料移動。</p>
      <pre>mkdir matcha_input
cp -r frames matcha_input/images
cp colmap_sparse/0/*.txt matcha_input/colmap_output</pre>
    </div>

    <div class="step">
      <h2>4️⃣ 執行 MAtCha 進行 3D 重建</h2>
      <p>透過 MAtCha 執行模型重建與訓練。</p>
      <pre>conda activate matcha_env
cd MAtCha
python train.py -s ../matcha_input/colmap_output -o ../matcha_output --sfm_config posed --image_dir ../matcha_input/images --image_idx 0 1 2 3 4</pre>
      <button>🧠 開始訓練</button>
    </div>

    <div class="step">
      <h2>✅ 成果展示</h2>
      <p>匯出格式與 3D 模型預覽。</p>
      <button>📤 下載 OBJ</button>
      <button>📤 下載 glTF</button>
      <!-- 嵌入式 viewer 占位 -->
      <div style="margin-top: 1rem; height: 300px; background: #ccc; text-align: center; line-height: 300px;">[3D Viewer Placeholder]</div>
    </div>

    <div class="step">
      <h2>🧠 小技巧與常見問題</h2>
      <ul>
        <li>使用 colmap GUI 選圖效果更佳</li>
        <li>Blender 可進行後處理與貼圖烘焙</li>
        <li>匯出格式支援 OBJ、FBX、STL 等</li>
      </ul>
    </div>
  </section>

  <footer>
    📦 專案連結：<a href="https://github.com/Anttwo/MAtCha" target="_blank">GitHub Repo</a>｜聯絡我們
  </footer>
</body>
</html>