Human Atlas（ashemag/human-atlas・GitHubスター3.3k・MIT）は、ブラウザだけで動く3D人体解剖エクスプローラです。日本のDBCLSが配布する解剖データBodyParts3D 4.0を、元の2,234個のメッシュを1つも減らさずに持ち込み、系統ごとの表示切替・全パーツの分解表示・3,432概念の名前検索・単体分離と解説パネルまでをReact＋Three.jsで動かします。2026年9月5日の公開から9日でスターは3.3kに達し、GitHub Trendingでも上位に入りました。

「3D解剖」は商用SaaSの領域で、データとコードの両方がオープンなものは多くありません。Human Atlasの珍しさは、CC BY 4.0の公的データを丸ごと使い、MITのコードで一通りの操作を成立させた点にあります。本記事ではリポジトリを実機でビルドし、同梱の検証スクリプトで2,234メッシュ・3,432概念・2,288,268三角形を突き合わせ、GPUの無いヘッドレスChromiumで表示・分解・検索・詳細パネルを動かし、AIエージェント向けのWebMCPツール2本の実装まで読みました。

Human Atlasの初期画面。中央に成人男性の全身モデル、左に15系統の表示切替パネル（骨格296・筋402・動脈639など）、下に分解スライダー、右上に構造検索
ローカルでビルドしたHuman Atlasをヘッドレス Chromium 141（SwiftShader）で描画。左パネルの数字は各系統のメッシュ数で、初期状態は体表5枚を除く2,229パーツが表示される（出典: ashemag/human-atlas を本記事で実行）
30秒でわかる Human Atlas（2026年9月14日時点）
  • ・正体：BodyParts3D 4.0（成人男性の参照解剖・CC BY 4.0）を2,234メッシュそのままブラウザに載せた3D解剖エクスプローラ。コードはMIT
  • ・何ができる：15系統の表示切替、全パーツを敷き詰める分解表示、3,432概念の名前・FMA ID検索、単体分離と解説パネル。モバイル用の操作系もある
  • ・何を代替する：解剖の「どこに何があるか」を確認する用途で、商用3D解剖アプリの閲覧部分。診断・手術用ではない
  • ・実測：npm ci 16.8秒、npm run build 1.39秒。validate-atlas.mjs が2,234メッシュ・3,432概念・2,288,268三角形の整合を確認
  • ・注意：コミット8件・公開9日の新しいプロジェクト。同名のHuBMAP「Human Reference Atlas」とは別物

Human Atlasとは——BodyParts3Dを「分解できる状態」でブラウザに持ち込んだOSS

Human Atlasの本体はデータではなく見せ方です。解剖データはBodyParts3D 4.0という既存の公的データベースで、Human Atlasはそれを「1つずつ選べる」「系統ごとに消せる」「全部ばらして並べられる」形に加工し、ブラウザで動かします。READMEの1行目にある「Take the BodyParts3D adult male reference apart into 2,234 individually selectable meshes」がそのまま製品定義です。

数字はREADMEの公称値をそのまま書くのではなく、同梱の public/models/atlas.json を読んで数え直しました。

Human Atlasの中身。2,234メッシュ、3,432の名前つき概念、15系統、2,288,268三角形・圧縮33MB。系統別メッシュ数は動脈639・静脈404・筋402・骨格296・神経139・呼吸器119・消化器97
atlas.json を集計した結果。READMEの公称値（2,234メッシュ・15系統・3,432概念・2,288,268三角形・約33MB）と一致した

・メッシュ（parts）2,234個：BodyParts3Dの元OBJファイル1個＝1メッシュ。すべてが atlas.json に個別エントリを持ち、系統ID・所属チャンク・頂点数・バウンディングボックスが記録されている
・概念（concepts）3,432個：FMA（Foundational Model of Anatomy）のIDつき名前。1つの概念が複数メッシュを束ねることがあり、実測では3,432概念のうち1,925個が2メッシュ以上を含む。検索で「Heart」を引くと83パーツ、「Liver」なら60パーツがまとめて選択される
・系統15種：骨格・筋・心臓・感覚器・動脈・静脈・神経・呼吸器・消化器・泌尿器・リンパ・内分泌・生殖器・体表・結合組織。メッシュ数は動脈639が最多で、リンパは3、内分泌は4しかない（BodyParts3Dの収録範囲をそのまま反映）
・三角形2,288,268個・圧縮33MB：15個の body-N.bin.gz に分割され、非圧縮では59.5MB

名前で1つだけ注意が要ります。「Human Atlas」は一般名詞に近く、特にHuBMAPのHuman Reference Atlas（humanatlas.io）と混同されやすい。両者は別物ですが、ATTRIBUTION.mdによれば初期リビジョンにはHuman Reference Atlasの女性参照臓器セット（v1.5）が含まれており、現行版では取り除かれています。検索で行き先を間違えないよう、判別表を置きます。

  Human Atlas（本記事） HuBMAP Human Reference Atlas BodyParts3D／Anatomography
正体 個人開発の3DビューアOSS NIH HuBMAPの参照解剖データベースとポータル DBCLSが配布する解剖データと公式Webビューア
入口 github.com/ashemag/human-atlas humanatlas.io dbarchive.biosciencedbc.jp
データ BodyParts3D 4.0（成人男性） 男女の参照臓器セット等 自身がデータ源
コード MIT・セルフホスト可 ポータルのコードは別途公開 —
Human Atlasとの関係 本体 旧版で女性データを借用（現行版は不使用） 現行版のデータ源

実機ビルド：npm ci から起動・検証スクリプトまで

READMEの手順は3行です。必要なのはNode.js 22.13以上のみで、APIキーもアカウントも要りません。手元のLinux環境（4コア・Node.js 22.22.2）で実際に流しました。

git clone https://github.com/ashemag/human-atlas
cd human-atlas
npm ci          # 依存のインストール（手元で16.8秒）
npm run dev     # http://localhost:3016 で開発サーバが起動
npm run build   # 静的サイトを dist/ に出力（手元で1.39秒）

ビルドはVite 8（内部はRolldown）で、2,475モジュールを変換してJS 916KB（gzip 264KB）・CSS 197KB を出力しました。dist/ は解剖モデル込みで91MBです。「500KBを超えるチャンクがある」という警告が出ますが、ビルド自体は通ります。

READMEにはもう1つ、同梱の検証スクリプトの手順があります。これが本記事で一番信用できた部分で、記事に書く数字がすべてここで機械的に突き合わせられます。

npm run check                          # tsc --noEmit（手元で6.7秒・エラー0）
node scripts/validate-atlas.mjs        # メッシュ数・概念・三角形・バイナリの整合
node scripts/validate-interactions.mjs # 分解レイアウト・検索/検査の契約・タップ判定

出力はこうでした。

Verified 2234 individually indexed meshes, 3432 complete concept mappings,
2,288,268 triangles, and every binary buffer.
atlas.json: packing at desktop/mobile aspect ratios and search/inspection contracts passed.
Tap, drag, multitouch, cancellation, and empty-view checks passed.
項目 実測（Linux・4コア・Node 22.22.2） READMEの記載
npm ci 16.8秒 —
npm run build 1.39秒（2,475モジュール） —
npm run check（tsc） 6.7秒・エラー0 —
validate-atlas.mjs 0.25秒・2,234メッシュ／3,432概念／2,288,268三角形を確認 同じ数値
圧縮ジオメトリの合計 32.96MB（15チャンク） 「約33MB」
描画（ヘッドレスChromium 141＋SwiftShader） 初期画面・骨格プリセット・分解100%・検索・詳細パネルまで動作 「実機性能・マルチタッチは未検証」
読者の3つの問いへの答え
① 何ができる：BodyParts3Dの2,234メッシュを系統ごとに消し、ばらし、名前で探し、1つだけ残して解説を読める。② 何を解決する：「解剖の3Dモデルを手元で自由に触りたいが、商用アプリはデータもコードも閉じている」という断絶。③ 何を代替できる：閲覧・確認用途なら商用3D解剖アプリの閲覧部分。教育用であり、診断・手術支援は代替しない。

なお、検証で1つ気づいた点として、package.json の devDependencies には @cloudflare/vite-plugin・wrangler・@openai/sites-vite-plugin が並んでいますが、vite.config.ts はどれも読み込んでおらず、実際のビルドはReactプラグインとTailwindだけで完結します。過去のデプロイ先を試した名残と見られ、動作には影響しません。

何ができるか——15系統の切替・分解表示・検索・単体分離

どれもブラウザ内で完結し、サーバへの問い合わせはありません。解剖学の3Dモデルを「見る」だけでなく「ばらす」「探す」「1つ残す」ができるのが特徴です。

Human Atlasの6操作。回転・拡大・選択、15系統の切替、分解表示、名前・IDで検索、単体分離と解説、WebMCPツール
操作の全体像。WebMCPツールだけは対応ブラウザでのみ有効になる任意機能

3D人体解剖モデルとしての操作は4つに集約されます。系統の切替は左パネルのトグルで行い、「All」「Skeleton」「Organs」のプリセットもあります。骨格プリセットを押すと骨格296パーツだけが残ります。

Skeletonプリセットを選んだ状態。骨格296パーツだけが表示され、他の14系統のトグルはオフになっている
Skeletonプリセット。左下の「296 pieces visible」が可視パーツ数（出典: 本記事の実行環境）

分解表示（Explode）は下部のスライダーで、0%の組み立て状態から100%の「Every piece」まで連続的に変わります。100%にすると、可視パーツだけを幅・高さでソートして行詰めしたインベントリに並び替わります。この配置は app/explosion-layout.ts の createExplosionLayout() が担当し、各パーツの投影バウンディングボックスにマージンを足した「カード」を、画面のアスペクト比に応じた目標幅で折り返しながら敷き詰めます。同梱の検証スクリプトは、この配置がデスクトップとモバイルの両アスペクト比で重ならないことまで確認しています。

分解表示100%。2,234パーツが大きさ順に画面いっぱいに敷き詰められ、左上に体表の小さな全身、その右に骨・筋、下部に細かい血管の断片が並ぶ
Explode 100%。ラベルが「ANATOMICAL INVENTORY」に変わり、可視パーツだけが敷き詰められる（出典: 本記事の実行環境）

検索は右上の「Find a structure」（ショートカットは /）で、名前とFMA IDの部分一致です。「heart」と打つと「Heart（83 pieces）」「Left Side Of Heart（36 pieces）」のように、概念名と束ねているパーツ数が並びます。

検索パネルに「heart」と入力した状態。Heart 83 pieces、Left Side Of Heart 36 pieces、Right Side Of Heart 46 pieces、Region Of Wall Of Heart 3 pieces などが候補に並ぶ
検索候補にはFMA概念名と、その概念が束ねるパーツ数が出る（出典: 本記事の実行環境）

候補を選ぶと詳細パネルが開きます。「Liver」を選んだ場合、所属系統（Digestive）、解説文、FMA ID（FMA7197）、選択パーツ数（60）、含まれる構造の一覧（左門脈・右門脈・肝静脈区域など）、そして「Isolate structure」ボタンが並びます。解説文は app/anatomy.ts に9臓器分（心臓・肝臓・脳・胃・脾臓・膵臓・膀胱・気管・横隔膜）が個別に書かれており、それ以外の構造は所属系統の説明文で代用されます。READMEが「Descriptions distinguish general system context from individual organ explanations」と書いているのはこのことです。

Liverの詳細パネル。Digestive、解説文、Atlas reference FMA7197、Selected pieces 60、Included structuresに左門脈・右門脈など、Isolate structureボタン
Liverの詳細パネル。概念が束ねる60パーツの内訳を辿れる（出典: 本記事の実行環境）
Human Atlasの解説文は9臓器だけが個別で、残りは系統の一般説明。「教科書」ではなく「地図」として使うのが正しい期待値です。

仕組み——2,234個を別々に描かずに滑らかに動かす

ブラウザで2,234個のメッシュを個別のオブジェクトとして描くと、ドローコールが数千に膨らんで軌道操作がもたつきます。Human Atlasが取った設計は、READMEの「How it works」と app/scene.tsx から次の4層に整理できます。

Human Atlasの描画4層。L4 React 19＋shadcn/ui、L3 Three.jsシーン（バッチ結合）、L2 構造ごとのGPUテクスチャで移動・表示・選択を保持、L1 バイナリチャンク15個をgzip配信
ジオメトリはまとめて描き、状態だけを構造ごとに持つ

・L1 バイナリチャンク：位置・法線（16bit量子化）・インデックスを15個の body-N.bin.gz に分け、DecompressionStream('gzip') でブラウザ側に展開する。静的ホストが .gz をそのまま返す場合と Content-Encoding で透過的に解凍する場合の両方に対応するため、先頭2バイトのgzipシグネチャを見て二重解凍を避ける（app/model-download.ts）
・L2 構造ごとのGPUテクスチャ：各構造の移動量・表示/非表示・選択状態を DataTexture に1ピクセルずつ持たせ、シェーダ側で参照する。分解スライダーを動かしても頂点データを書き換えず、テクスチャの値だけが変わる
・L3 バッチ結合したThree.jsシーン：メッシュをまとめて描画してドローコールを抑え、クリック判定だけは構成形状ごとに行う。描画はシーンに変化があったときだけ更新する
・L4 React 19＋shadcn/ui：系統トグル・検索・詳細パネル・モバイル用のコンパクト操作。状態は SceneState（explode／visible／selected／isolate／view／rotate）として1か所に集約

もう1つ重要なのが、リポジトリに変換済みジオメトリが同梱されていることです。BodyParts3DのOBJからここまで焼き直す工程は用意されていますが、実行は任意です。

ジオメトリ構築の4段。BodyParts3D OBJ → convert-anatomy.py（単位・軸変換と概念の結合）→ optimize-anatomy.mjs（meshoptimizer相対誤差0.2%）→ compress-models.mjs（atlas.jsonとbody-N.bin.gz）
再構築は任意。同梱データを使う限り、この工程を回す必要はない

変換では単位をmm→m、軸をZ-up→Y-upに直し、英語名とIS-A／PART-OFの関係表を結合してFMA概念を組み立て、構造ごとに相対誤差0.2%の上限でmeshoptimizerによる簡略化をかけます。「簡略化しても元メッシュを1つも落とさない」というのが方針で、validate-atlas.mjs はまさにその不変条件（2,234個がすべて索引されているか）を検査しています。

Human AtlasのWebMCPツール——ページ内にAIエージェント向けの2本を登録する

Human Atlasには、READMEで1段落だけ触れられているWebMCP対応があります。WebMCPはW3C Web ML CGで議論中のブラウザAPIで、Webページが document.modelContext.registerTool() を使ってAIエージェントに「このページで呼べる操作」を宣言する仕組みです。仕様の現在地と対応ブラウザはWebMCPとは｜Chrome 149・Edge 150で始まった仕様の現在地とSafariが反対する理由で整理しています。

Human Atlas側の実装は app/agent-tools.ts の約20行で、登録するツールは2本だけです。

ツール名 入力 動作 readOnlyHint
find_anatomy query（文字列・必須） 概念名またはFMA IDに部分一致する概念を最大30件返す。各件は id・name・pieces（束ねるパーツ数） true
inspect_anatomical_structure id（FMA ID・必須） その概念を3Dで選択し、画面の詳細パネルを開く。存在しないIDはエラー false
flowchart TD A["atlas.json と15チャンクの読み込み完了"] --> B{"document.modelContext は存在するか？"} B -- "いいえ（Chrome 149未満など）" --> C["何も登録しない
通常のUIだけで動作"] B -- "はい" --> D["registerTool ×2
find_anatomy / inspect_anatomical_structure"] D --> E["エージェントが find_anatomy を呼ぶ"] E --> F["最大30件の {id, name, pieces} を返す"] F --> G["エージェントが inspect_anatomical_structure を呼ぶ"] G --> H["3Dで選択 → 詳細パネルを開く
（flushSync で即時反映）"] A -.-> I["ページ離脱時は AbortController で登録解除"]

設計として素直なのは、入力の検証をツール側で厳格にやっている点です。空文字や非オブジェクトの入力は例外で弾き、存在しないIDには「That structure is not present in this atlas.」と返します。inspect_anatomical_structure の実行は flushSync で同期的に画面へ反映され、エージェントが次のツール呼び出しをする前にUIが更新されるようにしてあります。登録は AbortController のシグナル付きで、ページ離脱時にまとめて解除されます。

自分のブラウザでこのAPIが生えているかは、DevToolsのコンソールで1行で確かめられます。

// DevToolsコンソールで実行。仕様は document 側だが念のため両方を見る
JSON.stringify({ document: typeof document.modelContext, navigator: typeof navigator.modelContext })

本記事の検証環境（ヘッドレスChromium 141）では {"document":"undefined","navigator":"undefined"} でした。WebMCPのオリジントライアルはChrome 149からなので、これは期待どおりの結果です。READMEも「The visible interface works without them」と断っており、WebMCPは付加機能であって前提ではありません。同じくページにツールを生やす仕組みとして、サイト側の設定1つでツールを公開するCloudflare WebMCPとは｜サイトにAIエージェント用ツールを1スイッチで生やす仕組みを解説があり、Human Atlasのようにアプリ自身がツールを定義する方式との対比として読むと違いが分かります。

WebMCPツールで「できないこと」：登録されるのは検索と選択の2本だけで、系統の切替・分解スライダー・視点変更はツール化されていません。エージェントに「骨格だけ表示して」と頼んでも、現状のツールでは操作できません。READMEの「anatomy search and inspection」という記述どおりの範囲です。

ライセンス・制約・注意点

Human Atlasは二重ライセンスです。アプリのコードはMIT、解剖データはBodyParts3DのCC BY 4.0で、再配布時は後者の帰属表示（DBCLS、ライセンスURL、出典）を保つ必要があります。ATTRIBUTION.mdは、元のOBJファイルに残る旧「CC BY-SA 2.1 Japan」の記載について、公式サイトの現行ライセンス（2025-02-27更新）がCC BY 4.0で上書きし再配布と改変を明示的に許可している、と整理しています。フォークして別サービスに組み込む場合は、この帰属表示をUIかドキュメントに残すのが最低条件です。

制約として本文と一次資料に明記されているものを並べます。

・成人男性1体の参照解剖：BodyParts3DはTARO（日本人成人男性モデル）由来のMRIと解剖図をもとにした1体分で、個人差やすべての構造を網羅しない。現行版に女性データは含まれない
・教育用途に限定：README・ATTRIBUTION.mdの両方が「診断・手術用ツールではない」と明記
・個別解説は9臓器のみ：それ以外は系統の一般説明で代用される
・実機性能は未検証：READMEに「Physical-device performance and real multitouch hardware have not been tested」とある。本記事もヘッドレス環境での動作確認であり、モバイル実機のフレームレートは測っていない
・初回ダウンロードは約33MB：圧縮ジオメトリを15チャンクで取得する。モバイル回線では待ち時間がある
・プロジェクトの若さ：初回コミットが2026-09-04、公開が09-05、最終コミットが09-06の計8件。オープンIssueは13件。スター3.3k・フォーク820は注目度の指標であって、継続性の証拠ではない

データだけ欲しい人へ：Human Atlasの価値は「見せ方」なので、解剖データそのものが目的ならBodyParts3Dの配布元（DBCLSのDBアーカイブ）から元のOBJとメタデータ表を取るのが本筋です。Human Atlasの変換スクリプト（scripts/convert-anatomy.py → optimize-anatomy.mjs → compress-models.mjs）は、そのOBJをブラウザ向けに焼き直す手順として再利用できます。

3D表現をブラウザで扱う技術としては、点群ベースの3D Gaussian Splatting（3DGS）とは｜本家のライセンス・環境要件・実装の選び方を実測解説のように「撮影から3Dを作る」系統と、Human Atlasのように「既にあるメッシュを軽くして配る」系統は目的が違います。前者は現実の空間を再構成する技術で、後者は整備済みデータの閲覧体験の話です。

まとめ

Human Atlasは「公的な解剖データをブラウザで自由に触れる状態にした」OSS。BodyParts3D 4.0の2,234メッシュを1つも減らさず、系統切替・分解表示・検索・単体分離をReact＋Three.jsで成立させている。実機ビルドは npm ci 16.8秒・npm run build 1.39秒で通り、同梱の検証スクリプトが公称値（2,234メッシュ・3,432概念・2,288,268三角形）を機械的に裏づけた。WebMCPツール2本は検索と選択に限られ、対応ブラウザでのみ有効。コードはMIT・データはCC BY 4.0の二重ライセンスで、教育用途に限る点と、公開9日・コミット8件という若さは押さえておきたい。

・向く用途：解剖の位置関係を確認・説明する教材、3Dデータをブラウザで扱う実装の参考、BodyParts3Dをブラウザ向けに変換する手順の再利用
・向かない用途：臨床判断、個体差の議論、女性解剖や小児解剖（現行版に含まれない）
・次に読む：WebMCPの仕様と対応状況は上記の解説記事へ。BodyParts3Dの一次資料はDBCLSのライセンスページと2009年の論文（参照ソース）

参照ソース

・ashemag/human-atlas（公式リポジトリ・README・ATTRIBUTION.md） — 機能・データ構成・ライセンス・検証スクリプトの一次情報。2026-09-14時点のmain（コミット 1c38bf3）を実機でビルド
・BodyParts3D ライセンス（DBCLS / DBアーカイブ） — 解剖データのCC BY 4.0ライセンス（2025-02-27更新）
・Mitsuhashi et al. (2009) BodyParts3D: 3D structure database for anatomical concepts. Nucleic Acids Research — BodyParts3Dの原著論文
・実測：Linux（4コア・Node.js 22.22.2）で npm ci 16.8秒／npm run build 1.39秒／validate-atlas.mjs で2,234メッシュ・3,432概念・2,288,268三角形を確認。描画はヘッドレスChromium 141＋SwiftShaderで動作確認（2026-09-14）