WebGPU 専用の軽量 3D エンジン Babylon Lite の公式デモを、コードの内側から 初心者向けにやさしく分解して解説する、静的サイトのガイド集です。 地形生成・物理・ライティングなどのしくみを、図（mermaid）とインライン SVG、 コード抜粋で少しずつ読み解きます。
| デモ | 状態 | ページ |
|---|---|---|
| ボクセルの世界のつくりかた（Minecraft 風サンドボックス） | 公開中 | minecraft/ |
| ピクセルの手ざわりのつくりかた（マリオ風プラットフォーマー） | 公開中 | platformer/ |
| 光るブロックのつくりかた（3D テトリス） | 公開中 | tetris/ |
| ブロックで作って歩けるサンドボックス（Sandblox） | 公開中 | sandblox/ |
| ブラウザで動く DOOM のつくりかた（DOOM 再現） | 公開中 | doom/ |
| アイソメトリックの世界地図のつくりかた（Freeciv 風） | 公開中 | freeciv/ |
トップページ（全デモの一覧カード）: index.html
単純な静的サイトです。index.html をブラウザで開くだけで閲覧できます。
mermaid の図は CDN から読み込むため、図を表示するにはネット接続が必要です
（接続がなくても本文は問題なく表示されます）。
より確実に表示したい場合は、任意の静的サーバー経由での閲覧を推奨します:
# 例: Python の簡易サーバー
python -m http.server 8000
# → http://localhost:8000/ を開くbabylon-lite-demo-guide/
├── index.html # トップ：全デモ解説の一覧カード
├── assets/
│ ├── site.css # 共通デザイントークン（色・フォント・部品）
│ ├── mermaid-init.js # mermaid の CDN 読み込み＋初期化（全ページ共通）
│ └── img/
│ ├── favicon.svg # アイソメトリックな草ブロックのファビコン
│ └── ogp/ # SNS シェア用サムネイル（ページごと）
├── minecraft/
│ └── index.html # Minecraft 風デモの解説（自己完結・インライン CSS）
├── platformer/
│ └── index.html # マリオ風プラットフォーマーの解説（自己完結・インライン CSS）
├── tetris/
│ └── index.html # 3D テトリスの解説（自己完結・インライン CSS）
├── sandblox/
│ └── index.html # ブロック・サンドボックスの解説（自己完結・インライン CSS）
├── doom/
│ └── index.html # DOOM 再現デモの解説（自己完結・インライン CSS）
├── freeciv/
│ └── index.html # Freeciv 風アイソメトリック地図の解説（自己完結・インライン CSS）
├── LICENSE # 解説コンテンツのライセンス（CC BY 4.0）
└── README.md
メモ: 現状
minecraft/index.htmlは CSS・mermaid 初期化ともにページ内に インラインで持つ自己完結構成です。assets/site.cssとassets/mermaid-init.jsは共通土台の「骨組み」として用意してあり、次のデモ解説を追加する際に 共通部品を拡充していく想定です。
demo-name/index.htmlを作成する（デモごとに 1 フォルダ）。- 共通の見た目を使う場合は
../assets/site.cssを読み込み、そのページ固有の 配色は--accent系トークンを上書きして表現する。 - 図を使う場合は
<pre class="mermaid">…</pre>を書き、</body>直前で<script type="module" src="../assets/mermaid-init.js"></script>を読み込む。 - トップ index.html のカードグリッドにカードを 1 枚追加する。