# バッチ設計書 52-Makefile.emscripten (example_sdl3_wgpu)

## 概要

本ドキュメントは、SDL3 + WebGPUを使用したImGuiサンプルアプリケーションをEmscriptenでWebAssemblyにコンパイルするためのMakefileバッチ処理について定義する設計書である。

### 本バッチの処理概要

このMakefile.emscriptenは、SDL3とWebGPUレンダリングバックエンドを組み合わせたImGuiサンプルをEmscriptenを使用してWebAssembly（WASM）形式にコンパイルし、Webブラウザで実行可能な形式に変換するビルドスクリプトである。

**業務上の目的・背景**：WebGPUは次世代のWeb向けグラフィックスAPIであり、Vulkan/Metal/Direct3D12に相当する機能をWebブラウザで提供する。開発者がImGuiをWebブラウザ上でWebGPUを使用して動作させる際のリファレンス実装を提供するために本バッチが必要である。SDL3との組み合わせにより、デスクトップとWebで共通のコードベースを維持できる。

**バッチの実行タイミング**：手動トリガーによる随時実行。Webデプロイ用のビルドを生成する際、またはCI/CDパイプラインから実行される。

**主要な処理内容**：
1. Emscriptenコンパイラ（emcc/em++）の使用設定
2. ImGuiコアソースファイルのコンパイル
3. SDL3およびWebGPUバックエンド（imgui_impl_sdl3.cpp, imgui_impl_wgpu.cpp）のコンパイル
4. WebAssemblyへのリンクとHTML/JS/WASMファイルの生成
5. オプションでフォントファイルのプリロード設定

**前後の処理との関連**：Emscripten SDKがインストールされ、環境変数が設定されている必要がある。生成されたファイルはWebサーバーでホスティングする必要がある。

**影響範囲**：`web/`ディレクトリにindex.html、index.js、index.wasmが生成される。ローカル環境のみに影響。

## バッチ種別

ビルドスクリプト / クロスコンパイル処理

## 実行スケジュール

| 項目 | 内容 |
|-----|------|
| 実行頻度 | 随時 |
| 実行時刻 | - |
| 実行曜日 | - |
| 実行日 | - |
| トリガー | 手動（make -f Makefile.emscripten） |

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| Emscripten SDK | Emscripten環境がインストールされていること |
| 環境変数設定 | emsdk_env.batまたは同等の設定が実行済みであること |
| em++/emcc | Emscriptenコンパイラが利用可能であること |

### 実行可否判定

- `em++`コマンドが実行可能であること
- Emscripten環境変数が正しく設定されていること

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| USE_FILE_SYSTEM | 環境変数 | No | 0 | ファイルシステム有効化フラグ（0:無効, 1:有効） |

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| main.cpp | ソースファイル | サンプルアプリケーションのエントリポイント |
| imgui.cpp | ソースファイル | ImGuiコアライブラリ |
| imgui_demo.cpp | ソースファイル | ImGuiデモウィンドウ |
| imgui_draw.cpp | ソースファイル | ImGui描画処理 |
| imgui_tables.cpp | ソースファイル | ImGuiテーブル機能 |
| imgui_widgets.cpp | ソースファイル | ImGuiウィジェット |
| imgui_impl_sdl3.cpp | ソースファイル | SDL3プラットフォームバックエンド |
| imgui_impl_wgpu.cpp | ソースファイル | WebGPUレンダリングバックエンド |
| shell_minimal.html | HTMLテンプレート | Emscripten用シェルファイル |
| misc/fonts/* | フォントファイル | USE_FILE_SYSTEM=1時にプリロード |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| web/index.html | HTML | Webアプリケーションのエントリポイント |
| web/index.js | JavaScript | WebAssemblyローダー |
| web/index.wasm | WebAssembly | コンパイル済みバイナリ |

### 出力ファイル仕様

| 項目 | 内容 |
|-----|------|
| ファイル名 | index.html / index.js / index.wasm |
| 出力先 | examples/example_sdl3_wgpu/web/ |
| 文字コード | UTF-8 |

## 処理フロー

### 処理シーケンス

```
1. Emscriptenオプション設定
   └─ SDL3 USE_SDL=3、WebGPU設定（Dawn-based port使用）
2. リンカフラグ設定
   └─ WASM=1、ALLOW_MEMORY_GROWTH=1、ASYNCIFY=1等
3. ファイルシステム設定判定
   └─ USE_FILE_SYSTEM変数に基づきフォントプリロード設定
4. webディレクトリ作成
   └─ 出力先ディレクトリの準備
5. ソースファイルコンパイル
   └─ 各.cppファイルを.oファイルにコンパイル
6. WebAssemblyリンク
   └─ HTML/JS/WASMファイルの生成
7. ビルド完了メッセージ出力
   └─ "Build complete for web/index.html" を表示
```

### フローチャート

```mermaid
flowchart TD
    A[make 実行開始] --> B[Emscriptenオプション設定]
    B --> C{USE_FILE_SYSTEM判定}
    C -->|0| D[NO_FILESYSTEM=1設定]
    C -->|1| E[フォントプリロード設定]
    D --> F[webディレクトリ作成]
    E --> F
    F --> G[ソースファイルコンパイル]
    G --> H[オブジェクトファイル生成]
    H --> I[WebAssemblyリンク]
    I --> J[HTML/JS/WASM生成]
    J --> K[ビルド完了]
```

## データベース操作仕様

### 操作別データベース影響一覧

該当なし（本バッチはファイルシステム操作のみ）

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | コンパイルエラー | ソースコードの構文エラー | ソースコードの修正 |
| - | Emscripten未設定 | 環境変数が設定されていない | emsdk_env実行 |
| - | WebGPUポートエラー | Emscriptenバージョン不足 | Emscripten 4.0.10以上に更新 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | なし（手動再実行） |
| リトライ間隔 | - |
| リトライ対象エラー | - |

### 障害時対応

1. Emscripten SDKのインストール確認
2. 環境変数の設定確認（emsdk_env.bat/shの実行）
3. Emscriptenバージョン確認（WebGPU Dawn portはEmscripten 4.0.10以上が必要）

## トランザクション仕様

該当なし（ファイルシステム操作のみ）

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | 8ソースファイル |
| 目標処理時間 | 数分〜十数分 |
| メモリ使用量上限 | ALLOW_MEMORY_GROWTHにより動的拡張 |

## 排他制御

同一ディレクトリでの同時ビルドは推奨されない。オブジェクトファイルおよびwebディレクトリの競合が発生する可能性がある。

## ログ出力

| ログ種別 | 出力タイミング | 出力内容 |
|---------|--------------|---------|
| 進捗ログ | コンパイル時 | コンパイルコマンド（暗黙的） |
| 終了ログ | ビルド完了時 | "Build complete for web/index.html" |
| エラーログ | エラー発生時 | Emscriptenのエラーメッセージ |

## 監視・アラート

| 監視項目 | 閾値 | アラート先 |
|---------|-----|----------|
| - | - | - |

手動実行のため、自動監視は設定されていない。

## 備考

- WebGPUバックエンドは2つの実装方法をサポート：
  - レガシー実装（Emscripten < 4.0.10）：`USE_WEBGPU=1`フラグ使用
  - Dawn-based実装（Emscripten >= 4.0.10）：`--use-port=emdawnwebgpu`使用（デフォルト）
- `make serve`コマンドでPython HTTPサーバーを起動し、ローカルテストが可能
- `make clean`コマンドで生成ファイルの削除が可能
- SINGLE_FILEオプション（コメントアウト中）を有効化すると、単一HTMLファイルにバイナリを埋め込み可能
- ASYNCIFY=1により、ブラウザのメインスレッドをブロックせずに非同期処理が可能
