anima

Anima

このスキルを使うと、生物の構造や機能を視覚的に説明できます。実際の構造を正確に示し、その仕組みを見えるようにしてください。ニューロン、心臓、細胞、臓器などの構造には文字どおりの解剖図を使い、理解に役立つ場合は、プロセスに明確に区別できる機械的な比喩を使ってください（たとえば、受容体とリガンドを鍵と鍵穴、イオンチャネルをゲート付きバルブに見立てるなど）。比喩が実際の生物学的な仕組みだと誤解されないようにしてください。

このスキルには生物学の例が6つ含まれています。作業を始める前に、最も近い例を開いてください。各例は node examples/<name>/build.mjs でビルドします。スクリプトと同じ場所にスタンドアロンの HTML ページが生成されます。ライトテーマを使うには --light を追加してください。

• examples/neuron/ は、枝分かれした樹状突起、髄鞘化した軸索、活動電位のアニメーション表示、ホバー可能なシナプスを備えたニューロンです。模式図であり、代表的な電圧値には教育用の情報源が引用されています。
• examples/dopamine-receptors/ は、線条体の中型有棘ニューロンに接続するドーパミンシナプスを平面的な断面図で示します。D1様受容体は Gαs/olf と共役して cAMP を増やし、D2様受容体は Gαi/o と共役して cAMP を減らします。完全な G タンパク質サイクル、ドーパミン濃度スライダー、汎用 D2 拮抗薬の切り替え機能を備えています。
• examples/stimulants-dat/ は、NONE、COCAINE、AMPHETAMINE を選択できる、ドーパミン作動性シナプス前終末のカットアウェイ図です。ドーパミントランスポーターによる再取り込み、その阻害、アンフェタミンによる輸送、小胞からの漏出、逆向きの放出を示します。骨格式は PubChem の記録に基づいています。
• examples/reward-addiction/ は、正中矢状断の脳を模式的に示し、中脳辺縁系経路（VTA から側坐核まで。前頭前皮質、扁桃体、海馬も含む）、初回曝露と反復曝露のモデル切り替え機能、手がかりの連続表示を備えています。すべての主張は、情報源を示した有力なモデルの一つとして説明されています。
• examples/semaglutide-glp1/ は、膵臓のベータ細胞に作用する GLP-1 受容体アゴニスト（セマグルチド）を示します。グルコース依存性のインスリン分泌、分子に施された工夫、中枢性の食欲と報酬に関する背景も含みます。
• examples/estrogen-aggression/ は、アロマターゼ阻害の切り替え機能を備え、アミグダラ型ニューロンでテストステロンがアロマターゼによってエストラジオールに変換され、エストロゲン受容体 α に作用する過程を示します。ヒトを対象としたエビデンスは弱いこと（14件の研究を統合した Fisher の z が 0.16）を明記しています。

各例には、情報源のブロック、教育目的であり医療上の助言ではないという注記、小規模なモデルで駆動するリアルタイム表示、一時停止コントロール、ホバーまたはフォーカス時の説明、視差効果を抑えた静止フレームがあります。最も近い例をテンプレートとしてコピーしてください。

craft の参考資料が引用している機械の例（ロケットエンジン、波紋タンク、アーケード筐体など）はここには含まれていません。参考資料では、それらについて説明しています。

重要なのは一つの考え方です

本当の構造そのものが説明になります。 関連する生物学的構造を忠実に描き、動きや切り欠き、控えめなラベルを使って仕組みを示します。機械的な比喩は任意の説明レイヤーであり、生物学の代わりではありません。依頼に合ったモードを選んでください。

モード	用途
解剖学的な描写	ニューロン、心臓、臓器、組織、細胞、細胞小器官、分子構造。見分けのつく形状、空間的な関係、関連するスケールを保ちます。
機械的な比喩	受容体とリガンドの結合を鍵と鍵穴にたとえたり、イオンチャネルをゲート付きバルブにたとえたりするなど、類推によって理解しやすくなるプロセスや相互作用。比喩であることを明記し、生物学とは異なる点を説明します。

装飾的な細部より正確さを優先してください。解剖学的構造を創作したり、根拠のないメカニズムを示唆したり、描画したスケールが定量的に見えるようにしたりしないでください。表示されるすべての数値（サイズ、濃度、膜電位、速度、投与量など）には、図のキャプションまたは出典ブロックで引用を付ける必要があります。一次資料または信頼できる権威ある資料を引用し、引用元の条件と単位を見える形で保ってください。図は教育目的であり、医療上の助言ではありません。薬剤と投与量については、特にこの注意書きが重要です。

まず出典を確認します。 描画を始める前に、信頼できる参考資料を集めてください。測定値が矛盾する場合は整合性を取り、関連する場合は種、組織、条件を特定します。検証できない数値は、不確実性を明示するか、省略してください。references/bio.md と各分野のガイドを参照してください。

見分けのつく構造を示せる場合は、抽象的なボックスと矢印を避けてください。細部は緻密かつ目的を持たせますが、正確さを損なったり、メカニズムを見えにくくしたりする細部は加えないでください。

すべての制作物を非常に詳細に仕上げます。 アイデアや依頼がどれほど小さくても、すべての図に当てはまります。サイズに応じて変わるのは、その掘り下げ方（ワークフローのステップ 1）です。Figure では対象とメカニズムを 4 倍に拡大して検証し、Hero または Epic では図全体を検証します。

• 参考資料を読みます。 実際の構造、空間的な関係、機能を保ち、細部は証拠に裏付けられたものだけにします。
• 二つの見え方。 1 倍ではメカニズムが明確です。4 倍でも、すべての細部が正確で目的にかなっています。
• 目的に沿って、ノイズは加えません。 生物学の説明に役立つ部分だけを含め、スペースを埋めるために細部を創作しないでください。
• 最後に確認します。 4 倍に拡大し（Figure では対象とメカニズム、Hero または Epic では図全体）、細部を出典と照らし合わせて検証します。

ワークフロー

この順序で進めてください。形状を作る前に、コンセプトと部品リストを作成します。品質の大部分は、この段階で決まります。

1. 作業を始める前に規模を見積もります。 ほかの作業に着手する前に、依頼の規模と、おおよその所要時間をユーザーに伝えます。
   • Figure：1つの機構、40～80個のパーツ、WebGLレイヤーは最大1つのSVGです。所要時間は約30～90分です。確認を求めずに作成します。
   • Hero：密度の高いオブジェクト、複数のWebGLレイヤー、または1つの3D主体、80～150個のパーツです。所要時間は約2～4時間です。所要時間を伝えてから、ユーザーが簡単なものを求めていない限り作成します。
   • Epic：多くの構造が相互作用する、器官系、生物、組織の場、または複数スケールにわたる生物学的プロセス全体です。所要時間は6時間以上です。作成を開始しないでください。見積もりを伝え、アイデアの核を維持したHero版を提案し、完全版で追加される内容を列挙します。ユーザーが選択した場合に限り、Epicを作成します。
   • 規模にかかわらず、最初の1時間以内にブラウザーで開ける動作中のページを用意し、そこから詳細を作り込みます。開始時と各ステップでdateを実行し、各ステップが見積もり時間の2倍を超えた場合は、進捗状況と残作業をユーザーに伝えます。
2. まず情報源を確認します。 実際の構造、動作、出典のある数値を集めます。モデルデータと併せて引用を記録します。アートや読み出しに表示する数値はすべて情報源までたどれるようにし、出典が示す精度を超えた精密さを示唆しないでください。可能であれば、モデルを小さな純粋モジュールとして記述し、すべての動きと読み出しをそこから制御します。
3. 表現方法を選びます。 文字どおりの解剖図か、機械的な比喩かを明示します。解剖図の場合、見える必要がある構造と関係を特定します。比喩の場合は、対応関係と限界を明示し、生物学的対象と混同させないでください。
4. パーツリストを作成します。 選んだ規模に応じて、構造、組織、分子、チャネル、リガンド、ラベル、動的要素を列挙します。解剖学的な役割と機能ごとにグループ化し、各項目に目的と追跡可能な参考資料を持たせます。references/bio.mdと各分野のガイドを参照してください。
5. 空間を設計します。 意味のある縮尺を設定するか、図を模式図として明記します。x、y、zを一貫して定め、重要な空間関係を保ち、縮尺の切り替えは明示します。アイソメトリックカメラを選び、カードに収まるよう構図を調整します。
6. ジオメトリは一度だけ構築します。 キットを使い、静的なパスをすべてジオメトリモジュールで事前計算します。滑らかな有機形状にはkit/blob.mjs、分岐や半径が変化する構造にはkit/branch.mjs、分子、らせん、リボンにはkit/chem.mjsを使います。機械的な比喩には、既存のkit/lathe.mjsとkit/tube.mjsも引き続き便利です。動くパーツは静止位置で一度だけ構築し、共有モデルで動かします。フレームごとに変化する形状のみ再構築します。
7. 奥から手前へ、下から上へ描画します。 繰り返し描かれるパーツはdepthOfで並べ替えます。別のパーツを囲むものはすべて、後ろ半分と前半分に分けます。たとえば、ロッドを囲むばねや、キャリッジを囲むフレームのバーです。動くパーツは、物理的に位置する順序で描画します。references/craft.mdの「Painter's order」を参照してください。図にパイプ、ケーブル、丸いパーツが含まれたら、目視でキーを調整するのはやめてください。各項目の形状をA.recorder(P, { order, spring })に記録し、A.settle(R, P)で重なり合う項目の実際の深度を測定してキーを設定し、ビルドの最後にA.auditOrExit(R, P)を実行します。パイプは描画前に経路を決めます。両端に実際のポートを設け、構造に沿って脚を通し、直線部分で交差させ、カラーでパイプに隙間を設けます（references/craft.md、セクション8）。描画する形状は実際の形状を記録します。監査をすり抜ける仮の形状はバグであり、監査に失敗します。グランドから滑り出すロッドは、G.rodOutから作る1本のロッドとしてA.slideで記録します。
8. 枠に収めます。 図をカードに配置します。左上にFig n、右上に短いタイトル、左下に操作のヒント、右下にライブ読み出しを置きます。カードの下、またはソースブロックに簡潔なキャプションと、表示されるすべての数値の引用を追加します。特に薬剤や投与量については、教育目的であり、医療上の助言ではないことを示す注記を含めます。
9. 動きを付けます。 時間ベースの穏やかな動きを使います。指数関数的な追従か実際のばねを使います。誰も操作していないときは、アイドル時のツアーをループさせます。図はポインターとキーボードに反応し、画面外では停止し、動きを減らす設定では静止します。refに属性を書き込み、フレームごとに再レンダリングしないでください。references/motion.mdを参照してください。
10. 批評家の目で検証します。 オーナーは拡大して問題を見つけるため、まず自分で拡大して確認します。各ラベルをパーツリストと参考資料に照合し、縮尺の表記を確認し、生物学的な図についてはkit/bio-audit.mjsのチェックを実行します。作成したPNGはすべて確認します。

• scripts/capture.mjsでデスクトップ、スマートフォン（幅390）、ホバー、複数の動きの瞬間をキャプチャします。シーケンス、分解ポーズ、--no-webglのフォールバックにはscripts/drive.mjsを使います。
• 監査の不合格数をゼロにします。 パイプ、ケーブル、丸いパーツがある場合、node build.mjs --auditの最後にaudit passedと表示され、すべての不合格項目が0でなければなりません。静止時、分解時、移動中のクリアランス、末端、遊端、折り目、自己重複、密集（細長いソリッドとの干渉も含む）、仮の形状、支持、ぐらつき、サドル、描画順序が対象です。噛み合いの問題はジオメトリを修正して解決し、キーのバイアスでは解決しないでください。
• 線のチェックも不合格数をゼロにします。 監査では線のマークアップを検出できません。node scripts/lines.mjs page.html --out shots/lines.png（-lightページでも、またdrive.mjsの["lines"]アクションを使ってすべての静止ポーズでも）を実行すると、line ends: 0と出力されなければなりません。すべての継ぎ目、罫線、リブ、目盛り、ポインターの端が、ストローク、点、輪郭のいずれかに接している必要があります。リング状のPNGを確認します。
• 両テーマで、すべての接合部を4倍に拡大して確認します（--lightもビルドします）。組み立て状態と分解状態の両方で、すべてのフランジ、T字継手、エルボー、クランプ、バルブ、ベローズ、バンド、サドル、ボールジョイント、交差部、すべての曲面形状（色調の段差がないこと）、すべてのテクスチャの終端（エッジで終わるか、フェードすること）、継ぎ目のある平らな箱の面、チャンクの継ぎ目があるすべてのテクスチャ付きホース、静止時と最大ストローク時のすべてのスライド式ロッド、テキストやシェーダーコンテンツが入ったすべての窓を確認します。
• シェーダー： すべての遷移を["slow", 0.05]でスローダウンしたコンタクトシートで確認します。急な切り替わりや色の切り替えがなく、エッジの値は0であることを確認します。ライトテーマでは、各遷移を通じてフレームごとのインク量も記録します（単調に明るさに追従する必要があります）。また、ストロークと接するインク部分を8～16倍に拡大して切り抜きます（references/verify.mdの「Light-theme shaders」を参照）。
• PNGをサンプルの隣に置き、次の点を確認します。ひと目で実物だとわかるか。細部に富み、立体感があり、すべての線の端が何かにつながっているか。1倍でも非常に細かく、4倍でも見応えがあり、何もない面や空の隅がないか。すべて満たすまで反復します。チェックリストはreferences/verify.mdを参照してください。

セットアップ

キットは kit/ にあります。

ファイル	用途
kit/iso-kit.ts	コア全体を1つのファイルにまとめています。カメラ、ソリッド、パーツライブラリ、SVG文字列レンダラー、カードとページのビルダー、CSS（ISO_CSS）が含まれます。TypeScriptプロジェクトにコピーしてください。
kit/iso-kit.mjs	同じコアをプレーンなESMにコンパイルしたもので、Nodeスクリプト向けです。直接インポートしてください。
kit/iso.css	ISO_CSSをファイルに書き出したものです。一度インポートし、ラッパーまたは<body>にclass="iso"（ライトテーマの場合はdata-theme="light"も）を指定してください。
kit/react/draw.tsx	サーバーセーフなReactコンポーネント：Solid、Line、Wire、Dots、FaceText、IsoFigure、Plate。
kit/react/live.tsx	"use client"フック：useReadout、useLoop、useEased、useInView、useStillnessに加え、springとfollow。
kit/lathe.mjs	任意の軸に沿った円形パーツ：frameAlong、lathe（滑らかなノットを含むプロファイルでは、スムーズシェーディングが自動で有効になります）、solidOf、disc、ringBand、sphereOf、saddleOf、bandsOf（1つの曲面を深度順に並べ替え可能な帯に分割します。各帯は同じ表面を共有し、輪郭はsidesOfによる1つだけです）、円形表面上の可視円弧、リブ、ボルト円（ribsOfとdotsOfはfadeを受け取り、ribsOfはseamsも受け取ります）、グランドから伸び出すロッド用のrodOut、配管経路用のfillet。
kit/tube.mjs	tubePiecesは、3Dパイプやケーブルを深度順に並べ替え可能な断片に分割します（breaks、カラーやクランプの下のgaps、楕円形の端面キャップ、断面形状に沿ってすべての継ぎ目を通る編組・蛇腹・巻き付け用のringsに対応）。tubeSvgはそれを描画します。crossingsOfは経路がクランプを通過する位置を検出し、runsOfは描画する区間を取得します。.tb-*の塗りはISO_CSSに含まれています。
kit/audit.mjs	ジオメトリを検証します。recorder(P, { order, spring })は、ヘルパーによる描画に合わせてアイテム、形状（回転体、スラブ、プリズム、ボックス、球、チューブ、ホストで切り取られるパッド）、経路を収集します。settle(R, P)は、静止時、分離時、再生された分解表示時に、重なり合うすべてのペアをレイキャストして正確な深度を求め、描画順のキー（overlapsOf、orderKeys）を設定します。auditOrExit(R, P)はすべてのチェック（clearances、solidClearances、terminals、looseEnds、supports、folds、selfOverlaps、細長いソリッドを線として扱うcrowding、代用形状のcoverage、wobble、seats、depthOrder）を実行し、問題があればゼロ以外のコードで終了する--auditフックです。A.slideはグランドから伸び出すロッドを記録します。references/kit.mdのセクション12を参照してください。
kit/blob.mjs、kit/branch.mjs、kit/chem.mjs	生物の図に使う有機的な形状、半径が変化する枝のセグメント、分子プリミティブ。
kit/bio-audit.mjs	生体膜の交差、ラベルの対象、および宣言されたミクロンあたりの単位スケールと既知の寸法との整合性を検証します。
kit/gl.mjs	描画内のシェーダー用WebGLレイヤー：GLSL_ISO（rayOfとpixelOfを含むGLSLカメラ）、glCamera(P)、glLayer(...)、およびJSエンベロープのsmooth、burst、settle。3D図では、GLSL_TURNとglslPose(name)がワールド座標の点を動くグループ内に配置し、coverOfで前面のキャンバスをマスクします。
kit/turn.mjs、kit/turn-build.mjs、kit/turn-audit.mjs	オプションの3Dモード。turn-build.mjsにはturning(P, { recorder })があり、グループ（回転、スライド、ヒンジ、自由）、ライブレイヤー、マテリアル付きの凸パーツ、T.buildを扱います。turn.mjsはランタイムで、TURN.mount、コントローラー、TURN.cover、TURN.poseUniforms、TURN_CSSが含まれています。turn-audit.mjsには、すべての回転角度とモーションクリップを対象とする軌道監査orbitOrExitがあります。references/3d.mdを参照してください。
scripts/capture.mjs	WebGLを有効にして、ヘッドレスChromeでスクリーンショット、クローズアップ、コンソールチェックを実行します。nodeで実行してください。
scripts/drive.mjs	WebGL対応のスクリプト制御式ヘッドレスChrome：移動、クリック、キー操作、スローモーション、条件成立までの待機、eval、スクリーンショット、ちらつきを検出するコンタクトシートに対応します。--no-webglと--preloadも使用できます。
scripts/lines.mjs	ヘッドレスChromeでビルド済みページの線端をチェックします。すべてのテクスチャ線の終端が、ストローク、ドット、または輪郭上にあることを確認します。--outで失敗箇所を丸で囲み、1件でもあれば終了コード1で終了します。
scripts/inline-kit.mjs	kitScript()、glScript()、turnScript()はそれぞれ、キット、WebGLレイヤー、3Dランタイムを、単独で動作するページにインライン化するためのソースとして返します。
scripts/turn-check.mjs、scripts/turn-bench.mjs	3D図向け：キットビルダーとの忠実度、Zバッファの描画順、24の角度でのピクセルのちらつきと線端、ブラウザーでのフレーム時間、およびパーツの種類ごとのNode CPU時間をチェックします。
プロジェクトに合った方法を選んでください。

• スタンドアロン HTML、静的 SVG、ブログ記事、React を使わないサイト。 examples/neuron/build.mjs のような Node ビルドスクリプトを作成します。kit/iso-kit.mjs をインポートし、solidSvg、lineSvg、dotsSvg、wireSvg、faceTextSvg で文字列を組み立て、figureSvg と plateHtml でラップします。ページは pageHtml({ script: kitScript() + live }) を使って書き出します。シェーダーがある場合は、kitScript() + glScript() + live を使います。単独の .svg ファイルには、スタイルを埋め込む figureSvg({ standalone: "dark" | "light" }) を使います。
• React または Next.js。 kit/ をプロジェクトにコピーします（たとえば components/iso/）。ジオメトリはプレーンな .ts モジュールにまとめ、draw.tsx コンポーネントを使ってサーバーコンポーネントで静的アートを作成し、それを要素の props として、動きを加える 1 つの "use client" ライブコンポーネントに渡します。references/react.md では、この分割方法と大規模なページでの注意点を説明しています。

制作ルール（簡易版）

これらのルールを守ることで、図を単なるダイアグラムではなく、洗練された作品に仕上げられます。詳しい考え方と手順は references/craft.md を参照してください。

• ワイヤーフレームではなく、立体にします。 すべての部品を紙の色で塗りつぶし、順番に描画することで、手前のものが奥のものを隠すようにします。透ける輪郭線や、隠れた部分を示す破線は使いません。
• キットの陰影を活かします。 extrude は向きに応じた4種類の側面の色調と、より明るい上面を返します。高さのあるものにはこれを使い、flat は床や厚さが1 unit未満のインレイにだけ使います。
• 色調の階層。 土台と脚には lo、構造には mid、主題には hi を使います。アクセントは1か所だけ lit にします（暗色では白、明色では黒）。これは読み手の視線を集める部分です。溝には faint、細かな目盛りには lo、主目盛りには mid、ゼロの印には hi を使います。色を使うのは、赤、緑、青のチャンネルのように、色そのものが主題の場合だけです。
• 細かく正確なディテールを使い、ノイズは加えません。 面取りは0.4～1.6、溝は縁から3～5内側に入れ、ネジはプレートの角にリング付きの直径0.4～0.55の点として配置します。ノブにはローレットを付け、定規の目盛りは4～5単位ごとに引いて5本ごとに長くし、ラベルプレートには3本の罫線を入れます。ディテールはすべて、いずれかの部品に属するものにします。
• 線の端は必ず何かに接続します。 すべての線の端は、面、別の線、または終端の点に接続します。コネクターは Wire とし、終端の点をオブジェクトに置きます。引き出し線、吹き出し、寸法矢印、宙に浮いたラベルは使いません。
• パイプやケーブルを何にも貫通させません。 静止時、分解時、分解表示のどのフレームでも、別のパイプ、ケーブル、立体を貫通させません。線自身の接続部分を除き、すべてのものから半径の約1.5倍の隙間を空け、線は対象の正面を横切らずに構造物の脇を通します。フランジ、バンド、ベローズ、クランプ、バルブが巻き付く部分ではパイプを途切れさせます。部品同士は面一、接線、または縁と面で接するようにし、埋め込みません。フランジの裏面はポートに接し（ポートが曲面の場合はサドルパッド上の G.saddleOf に接します）、枝管はボールティーから出し、分解時も含め、すべての端はフランジ、カップリング、コネクターシェル、または終端の点で終わらせます。
• 交差はすべて、正しい奥行き順で描きます。 画面上で重なる2つの要素は、手前のものが上に描画されるようにし、その順序は目視で調整せず、A.settle と監査で確認します。線が交差するのは、奥行きに十分な間隔がある直線上だけです。曲がり、端、クランプが別の線の輪郭に接すると、継ぎ目に見えてしまいます（棒、タイロッド、支柱、レールも線として扱います。パイプの最後の区間を画面上でこれらに沿わせてはいけません）。手前に向かう脚が曲がるとV字に挟まれて見えるため、そのようなポートからはエルボーボールを通して出します。また、経路を画面上で折り返しません。前後関係を決められない2つの要素は互いに干渉しているため、偏りで解決せず、切れ目を設けるか、接線で接触させます。
• 曲面は段差なく滑らかに陰影を付けます。 曲線のノットには滑らかさを指定し（[s, r, 1]）、lathe ではアウトラインも描く単調な曲線を使って陰影を付けます。継手より大きな曲面のある本体には smooth: { slope } を指定した解析的なプロファイルを与え、長い本体は G.bandsOf で区切り、球には G.sphereOf を使います。色調の帯は直線的な切り口で終わらせず、先細りにして消えるようにします。継ぎ目はアウトラインの下に配置します（inner）。
• テクスチャは実際の縁で終わらせるか、徐々に消します。 リブ、ボルト円、罫線、継ぎ目、溝を、平面でも曲面でも表面の途中で止めてはいけません。ribsOf と dotsOf には fade を指定できます（リブをフェード表示するには fadedSvg を使います）。リブの列は継ぎ目で終わらせ（ribsOf(…, { seams: true })）、箱の角をまたぐ継ぎ目や溶接線は角を回り込ませます（スラブの inner として k.sideSeam を使います）。1つの面上の線は端から端まで引き、通気口は閉じたスロットにし、目盛りは定規の縁から伸ばします。途中で止める必要のある1本の線は fadeLineSvg で徐々に消し、上を向いた特徴（リング上面の穴など）が並ぶ列は、全周に見えるようにします（all: true）。パイプ上のテクスチャ（編組、波形、巻き材）は断面に沿わせ、すべての分割部分の継ぎ目をまたいで通します（tubePieces(…, { rings })）。中心線に沿う破線のストロークにはしません。パイプの光沢と陰影は、端のキャップ上まで続け、すべての分割部分の継ぎ目をまたがせます。印刷文字を表す罫線、針の後端、ポインターの先端だけは、何もない面で止めてもかまいません。その場合は free と指定します。
• シェーダーが急に現れたり、途中で途切れたりしないようにします。 すべての一様な値には立ち上がりと減衰を持つエンベロープを適用し、位相の変化は物理量に連動したクロスフェードにします。すべての項は境界やキャンバスの端に達する前にゼロになり、エフェクトは図固有のカメラのワールド空間に配置します（以下を参照）。
• 面上のものは、その面に収めます。 機械が表示するテキストは、最も長い文字列でもウィンドウに収まるようにし、ウィンドウ内でクリッピングします。開口部から見える内容は、それ自身の平面だけでなく開口部でもクリッピングし、くぼみの側壁も描画します。
• 立体感。 ものに実際の厚みを持たせ、ほかのものの上に置き、土台の下や持ち上がったものの下には柔らかなハローを配置します。
• 構図。 図を中央に配置し、カードの約55～65％を占めるようにします。一連の図では縮尺を統一し、幅390 pxでも何を表しているか分かるようにします。

描画の中に WebGL を組み込む

シェーダーを使うのは、線では描けないものだけにします。炎や排気、水や集光模様、実際のランプ光、グロー、蒸気などです。各パーツは SVG のままにします。基本ルールは、フェーズ間の色の変化がクロスフェードではなく切り替わって見えた、最初のシェーダー図に基づいています。

• 3 層構造。 背面の SVG にエフェクトを覆うものを配置し、キャンバスにエフェクトを配置し（pointer-events: none）、前面の SVG にエフェクトを覆うものを配置します。パーツまたはエフェクトが両側にある場合は、分割します。
• ワールド空間で同じカメラを使う。 シェーダーの各点は onFloor、onWallX、onWallY から構築するか、ピクセルのレイ rayOf(vb) + t·towardViewer() を進めます。すべてのサイズは、ワールド単位に uK を掛けて指定します。平面上にあるものは、その平面の SVG の線と正確に位置が合います。
• 突然表示させない。 すべての uniform は、アタックと減衰を含むエンベロープに従わせます（イベントにはキットの burst、レベルには settle を使います）。フェーズの変化はクロスフェードにし、物理量に応じて色が連続的に変化するようにします。フェードアウトでは、暗くなるだけにします。
• 急に途切れさせない。 すべての項は、if、境界条件、キャンバスの端、セルノイズのセル境界に達する前にゼロになるようにします。
• 開口部越しに見せ、二重にマスクする。 窓やくぼみの奥にあるコンテンツは、それ自体の平面上でマスクし、さらに正面の平面にある開口部でもマスクして、両者を乗算します（references/webgl.md、セクション 5）。
• ブレンド。 tonemap() とディザリングを使います。ダークテーマでは、光を加えるだけのキャンバスはプリマルチプライド出力と mix-blend-mode: screen を使い、暗くもする必要があるもの（リップルタンクの水など）は通常のブレンドのままにします。
• ライトテーマにも対応し、シェーダーは紙面向けに設計します。 通常のプリマルチプライドアルファを使い、スクリーンブレンドは使いません。紙面に表示する色を書き、そこからインクを求めます。グローは、彩度の高い本体、淡い中心、色の付いた縁、そしてアルファの下限を備えたものにします。暗くしたダークテーマの色を使ってはいけません。そうすると、ロケットエンジンの参考図で見られた「赤インクの煙」になります。
  • 光が当たるものには色味を加え、それを収める空洞には物理的に暗い下地を設けます（すす、耐火材、水深など）。
  • 高温の物体には、フォールバックと共有する 1 つの黒体放射インクテーブルを使います。
  • インクは光に応じて濃くなるだけにします。インク全体を一度だけフェードさせ、各項を個別にフェードさせてはいけません。
  • インクは各ストロークの内縁で終わらせます。
  • 1 フレームあたりのインク量を測定します。references/webgl.md のセクション 8 に、レシピとレビュー担当者が見つけた問題があります。
• 控えめに。 デバイス比を 1.5 に制限し、エフェクトが有効で画面内にある間だけ描画します。動きを減らす設定では静止フレームを 1 枚だけ表示し、WebGL がなくても SVG で内容がわかるようにします。

シェーダーを書く前に、references/webgl.md を読んでください。

3D：動く図形（ベータ版）

3D は WebGL のように選択できるオプションです。奥行き方向に動く部分がアイデアの要となる場合に使ってください。たとえば、回転するダイヤルやターンテーブル、曲がる指、外れて落ちる部品などです。図形のほかの部分は、静的なキットアートのままにします。

ベータ版です。エンジンの動作を確認済みなのは、サンプルとテスト用の図形1つのみで、まだ本番用の図形では検証されていません。一度に動かす対象は1つにし、その周囲の細かい要素は静止させてください。小さな図形は 60 fps で動作します。高負荷のマシンでは、密度の高い380パーツの屈曲する手の場合、1440 で約20 fps、スマートフォンのプロファイル（390 px、CPU 4倍スロットル）で13～15 fps を計測しました。

• 動くパーツはキット独自の絵です。 各フレームで、凸状のキットプリミティブ（角柱、円形体、ドーム、平坦部のある球体、旋盤加工形状、チューブ）をキットのルールに従って再投影し、再シェーディングします。θだけ回転させると、キットは方位角 a − θ で描画します。
• 描画順は分離平面で決まります。 同じグループのペアにはグループ内で固定された平面、異なるリンク上のペアには共通フレーム内で固定された平面を使用し、それ以外は各フレームで解決します。監査により、どの角度でも、どのクリップのフレームでも循環がないことが証明されます。
• 接触部は面一、接線、またはリムと平面の接触です。 ジョイントは、子グループ上にある同軸のナックルディスクが親のリンクに接する構造です。それ以外の場合、監査では子グループ全体が不安定と判定されます。動く2つのグループにまたがる動く線はありません。ケーブルがジョイントを通る場合は両側のクリップを通すか、スリップリングをハブに設けてターンテーブルまで通します。
• 動くチューブは、ほぼ水平な平面内か継手の内部で曲げ、視線に沿った向きにはしません。 曲げには R ≥ 2r / sin²(e − θmax) が必要です。θmax にはチューブが通るすべてのヒンジのピッチ範囲を含めます。平らな場合の上限は 8r、±12°のヒンジでは 21r です。各経路は取り付け面から取り付け面へつなぎ、ポートは gaps に配置します。これにより、あらゆる角度とポーズで条件を満たします。
• 素材に応じて階調ランプを切り替えます。 ゴールド、クローム、スチール、ガンメタル、ラバー、ブラス、銅にはそれぞれ明色と暗色のセットがあります。色調は引き続き面の向きに基づきます。
• 自由なグループは跳ねずに外れます。 同軸パーツは、テクスチャが回転する固定画像です。
• シェーダーは動きに追従します。 controller.anchor または toGroup を使ってグループに固定し、coverOf で手前のキャンバスを隠します。煙、落ちる火花、作業台の油など、ワールド空間のエフェクトはグループ空間に配置しないでください。
• --audit（turn audit passed）と scripts/turn-check.mjs（--fidelity、--order、--pops、--lines、--perf）で検証してください。--quick --only=… を使って反復できます。図形全体を検証できるのは完全な実行のみです。30パーツの場合は15～20分かかるため、バックグラウンドで実行してください。

まず references/3d.md を読んでください。

生物学の参考資料

• references/bio.md：生物学的な情報源、縮尺、一般的な表現ルール。
• references/neuro.md：ニューロンと神経シグナル伝達。
• references/pharma.md：薬物と標的の相互作用、用量反応の図。
• references/molecular.md：分子構造、らせん、タンパク質。

制限事項

これは教育用のイラストツールであり、検証済みの解剖学アトラス、診断補助ツール、治療ガイドではありません。生物学的特徴は種、組織、個体、実験条件によって異なります。対象範囲を明示し、不確実性を示し、裏付けのない詳細を作り出さないでください。模式図やアイソメトリック図では、すべての空間的な関係を表現できるとは限りません。薬物や用量の図は教育目的であり、医療上の助言や処方の指針ではありません。

参考資料

必要に応じて以下を参照してください。

• references/craft.md：見た目を詳しく解説しています。パーツの語彙とコード、トーンの表、描画順のパターン、丸いパーツ、パイプとハーネス、分解図、面に表示する画面、図が却下されたアンチパターンを含みます。デザインを始める前に読んでください。
• references/kit.md：シグネチャと例を含む API です。
• references/motion.md：ライブ動作（ループ、スプリング、ツアー、ポインター、キーボード、アクセシビリティ、モーションの軽減）に加え、バニラ JS と React での単発イベント、分解図、深度の並べ替えとアーム設定のエンベロープを説明しています。
• references/react.md：React／Next.js のサーバー／クライアント分割、要素の props、大きなペイロードで発生するキー警告の落とし穴を説明しています。
• references/verify.md：capture.mjs と drive.mjs のコマンド、レビュー用チェックリスト（シェーダーを含む）、よくある問題を説明しています。
• references/webgl.md：描画におけるシェーダー（採用に値する場面、レイヤーのスタック、カメラの契約、アイソメトリックカメラでのレイマーチング、最小限のページを使った完全な API、バグから学んだ制作ルール、ライトテーマ（紙上のインク、現象別のレシピ、レビュアーが指摘した問題）、検証方法）を説明しています。
• references/3d.md：オプションの 3D モードを説明しています。グループとポーズ、ライブレイヤー、凸パーツとそのルール、マテリアル、自由グループ、ヒンジチェーン、描画順、ターンテーブルの周囲に置く静的な小物、ターンに追従するシェーダー、オービット監査、ブラウザーでの確認、パフォーマンスと制限を含みます。