anatomy-reveal

Anatomy Reveal

対象物が既製の3Dモデルやトレース画像になることはありません。実際の寸法に基づいて、部品ごとに構築します。Anatomy キットの3Dモード（template/kit）を使用します。

• 各パネル、ネジ、ダイヤル、ガラス部品、基板は、それぞれ独立した凸形状のソリッドです。
• 各部品は、光に面する向きに応じて4つのトーンでシェーディングします。
• 分離平面から算出した順序で部品を描画します。

対象物は実際のジオメトリで構成されているため、同じモデルをあらゆる角度に回転させたり、分解したりでき、どちらの出力にも使用できます。

template/ は完全に動作するプロジェクトです。作成例はグラインダー内蔵のデュアルボイラー式エスプレッソマシン（82部品）ですが、パイプラインはエスプレッソマシンに特化したものではありません。ユーザーが名前を挙げた、または見せた対象物なら、どれも同じ方法で扱えます。すべての作業はテンプレートから始め、対象物を置き換えてください。

作成前にお読みください。

• references/inputs.md：写真や名称から、寸法、特徴、部品リストを導き出す方法。
• references/objects.md：あらゆる種類の対象物の分解方法、および凸形状の部品を使って曲面、有機的な形状、柔らかい形状、大きな形状を構築する方法。
• references/object.md：あらゆる角度に回転でき、きれいに分解できる対象物の構築方法。
• references/shots.md：映像の展開、タイムラインの形式、イージング、フレーミング。
• references/look.md：紙のような見た目、素材、線の太さ。

入力：2つのケース

A. ユーザーが対象物の画像をアップロードした場合。

• シルエット、プロポーション、素材、色、表面の装飾、見えているコントロール、ポート、刻印、動く部分を確認します。
• 製品を特定できる場合は、ケースBと同様に実際の寸法や内部構造も調べます。それ以外の場合は、既知の寸法の特徴を基準にサイズを推定し、前提条件を伝えます。
• 画像はあくまで参考資料です。すべての形状、色、装飾をジオメトリとして作り直してください。トレースしたり、埋め込んだり、ピクセルを何かに貼り付けたりしてはいけません。

B. ユーザーが対象物の名称だけを挙げた場合。

• 実際の製品について調査します。
  • 全体の寸法（ミリメートル単位）と主な部分寸法。
  • 素材とカラーバリエーション。
  • 見えるすべてのコントロール、ポート、刻印。
  • 開く、折りたたむ、スライドする、回転するといった動作。
  • 内部構造（分解記事が最良の情報源です）。
• ウェブ検索を利用できる場合は使用します。利用できない場合は、把握している情報を使い、前提条件を列挙します。
• 名称が曖昧な場合（製品シリーズ、複数の世代など）は、最も一般的なバリエーションを選び、どれを選んだか伝えます。

どちらの場合も、ジオメトリを作成する前に、寸法、特徴の一覧、組み立て単位ごとにまとめた部品リスト、映像内で動かす1つか2つの特徴を含む、簡潔な仕様をまとめます。不確かな点があれば、ユーザーに提示してください。

ワークフロー

1. 規模を決めます。 オブジェクトは「ヒーロー」サイズです。パーツ数は100～150個で、オブジェクトの制作に約2～4時間、映像の制作に約1時間かかります。ユーザーに伝えてから、制作を始めます。早い段階でテストページにオブジェクトを表示し、そこから詳細を詰めていきます。

2. 上記のケースAまたはBについて、事実を集めます（references/inputs.md）。

3. ひな形を作成します。 node <skill>/scripts/new-project.mjs <dir> を実行します。template/ をコピーし、puppeteer-core をインストールしてサンプルをビルドすることで、このマシンでツールチェーンが動作することを確認できます。

4. references/object.md のルールに従って、object/geometry.mjs でオブジェクトを作成します。

   • 凸面パネルで構成された中空のシェルにします。
   • 分解時は、外側のパーツが先に動くようにします。
   • ヒンジ、回転、スライドなどのフィーチャーグループを用意します。
   • 各ショットにアンカーを設定します。
   • マーキングは面の平面として表現します。

   次のコマンドで繰り返し確認し、作成した画像をすべて目視で確認します。

   • node object/test-page.mjs --light。
   • node object/shots.mjs object/test-light.html out/t/a '{"yaw":-35,"pitch":12}' '{"yaw":-35,"pitch":20,"apart":1}'。
   • 5方向（正面、背面、上、下、側面）から node object/scan-apart.mjs <yaw> <pitch> を実行し、すべての方向でパーツ同士が貫通せず、強制的な選択もないと表示されるまで確認します。

5. object/film.mjs でオブジェクトを記述します。フィギュアページと映像は、オブジェクト固有の情報をすべてこのファイルから読み込みます。

   • FILM：タイトル、シーンの半径（最大寸法のmm値の約0.8倍）、アクセシブルラベル、バウンディングボックス。
   • FIGURE：ページタイトル、開始時の視点、凡例のキー、キャプション（{parts} と {assemblies} が代入されます）。
   • FEATURE_DEFAULTS と FEATURE_KEYS：各可動フィーチャー、ページ上のキー、その値またはステップ。
   • featureValues と featureTravel：フィーチャーをグループに対応づける方法と、パーツの移動距離。

6. アナトミーページを作成します。 node object/build.mjs と --light を実行して、object/figure.html と object/figure-light.html を書き出します。フォルダーを HTTP 経由で配信し、ブラウザーで表示を確認します。

7. 長さとアスペクト比を決めます。 ユーザーがまだ指定していない場合は、希望を尋ねます（デフォルトは10秒、9:16）。次に、node motion/build.mjs --duration <seconds> --ratio <9:16|4:5|1:1|16:9> を実行して映像ページを作成します（3～60秒）。素早いパンの長さは維持し、ゆっくりした移動や静止は伸縮します。約12秒を超える映像では、単に時間を引き延ばすのではなく、ビート（詳細ショット）を追加します。

8. references/shots.md に従い、motion/timeline.mjs でビートごとに振り付けします。

   • node motion/render.mjs poses '[…]' out/p で各ショットのフレームを作成し、目視で選びます。
   • node motion/render.mjs stills 0,1.2,2.3,3.5,4.6,5.6,7.9,10 out/s でタイミングを確認します。
   • node motion/scan.mjs で、すべてのフレームに問題がないことを確認します。

9. レンダリングします。 node motion/render.mjs blur out/blur --step 4 --most 40 を実行し、続けて node motion/encode.mjs out/blur out/<name>.mp4 を実行します。

   • レンダリングでは、画像の動きの大きさに応じて各フレームのモーションブラーを調整します。素早いパンでは最大40個のサブフレームを使い、静止時は1個です。
   • 映像1秒あたり約2分かかります。バックグラウンドで実行し、マシンでほかのブラウザー作業を行わないようにします。

10. MP4そのものを確認します。 フレームを抽出し（ffmpeg -i out/<name>.mp4 -vsync 0 out/check/f_%03d.png）、そのうち12枚ほどをコンタクトシートにまとめて目視確認します。

11. 納品します。 MP4、2つのフィギュアページ、プロジェクトフォルダーを納品します。確認できていない内容も伝えます。映像は無音です。ユーザーから提供された音源に合わせて編集することも提案します。

ルール

• ジオメトリのみ。 ユーザー、ウェブ、生成ツールからの画像を、図や映像に使用することはありません。彫刻、透かし彫り、印刷などの装飾は、面上の SVG または盛り上がった凸形状のパーツとして描画します。
• 実物に忠実に。 実際のミリメートル単位の寸法、ボタンやネジの実際の数、実際の開き方を使います。ディテールは実際の部品で表現し、ノイズは使いません。
• 凸形状のパーツのみ。埋め込みは禁止。 分離できないパーツの組み合わせはビルド時に拒否されるため、パーツを移動するか、分割します。
• ワンカットのみ。 被写体の切り替えにはワイプ（約 0.24 s）を使います。停止中も動きを保ち、最後の 0.5 秒だけ静止させます。
• 紙の質感。 映像はキットのライトテーマに合わせ、温かみのある白い紙に描画します。インクの輪郭線と 4 段階の塗りを使います。ユーザーから別の指定がない限り、このスタイルを保ちます。
• マーキングはデフォルトで中立的に。 パーツには一般的な名称（SoC、リューズ、バッテリー）を付けます。忠実な複製をユーザーから求められた場合にのみ、メーカーのロゴや商標を描画します。

ファイル

パス	内容
scripts/new-project.mjs	テンプレートを新しいフォルダーにコピーし、依存関係をインストールして、サンプルをビルドします。
template/kit/	Anatomy キット（MIT）。追加の素材（glass、pcb、sensor、signal、porcelain、lavender、knit、coffee、bean、milk、smoke）と、turn.mjs 内の 2 つのデバッグフックを含みます。
template/object/geometry.mjs	オブジェクトを定義します。パーツ、グループ、分解アセンブリ、フィーチャーポーズ、アンカーを含みます。
template/object/scene.mjs	投影、ビルド、orient()（ビュー空間でのヨー、ピッチ、ロール）、explodeValues() を定義します。
template/object/film.mjs	ページと映像で読み込む、オブジェクト固有のすべての情報を定義します。タイトル、シーンの半径、ラベル、境界、フィーチャーチャンネル、キーを含みます。
template/object/build.mjs, live.js	インタラクティブな解剖図ページです。
template/object/test-page.mjs, shots.mjs, scan-apart.mjs, capture.mjs	簡素なテストページ、ポーズを付けたスクリーンショット、分解のパススルースイープ、ページのキャプチャです。
template/motion/timeline.mjs	キー、イージング、ラベル、--duration によるタイミング調整、--ratio によるフレーミングを定義します。
template/motion/build.mjs, look.css	映像ページです。frame(t)、pose(state)、speed(t) を定義します。
template/motion/render.mjs, encode.mjs, scan.mjs	静止画、ポーズ、適応型ブラーのレンダリング、平均化と H.264 エンコード、フレームごとの順序チェックを行います。
template/scripts/browser.mjs	macOS、Linux、Windows 上の Chrome、Chromium、Edge を検出します（CHROME_PATH で上書きできます）。