作者: Theodore
ライブで試す このプロジェクトについて
ANOMALYは、機能するとは思えない構造をそれぞれ1つ備えた、16種の実在動物のアーカイブです。デメニギスの頭蓋を覆う透明な液体入りドーム、シャコが生み出すキャビテーション気泡の打撃、マンボウに尾びれがないことなどを紹介します。A-001–A-016の各記録には、ドラッグ、ズーム、リセットが可能な専用のTripoモデルが用意されています。
コレクションは分類学ではなく、特異構造そのもの——透明性、視覚、生物発光、擬態、捕食、巨大化、ボディプランに加え、それらとは独立した深海という切り口——で整理されています。1つの標本が同時に複数のカテゴリーに属する場合もあります。デメニギスのドームと回転する管状眼は、1匹の動物にある別々の2つの特異構造です。そのため、各記録では種名より先に解剖構造を提示します。すべての操作は1画面内で完結し、カテゴリー、カルーセルカード、検索結果のいずれを選んでも、その場で内容が切り替わります。左にアーカイブプレート、観察記録、折りたたみ式のフィールドノート、中央に3Dステージ、右に種のデータと分布図を配置しています。
体験ポイント
- 下部レールの01–16から任意の記録を選ぶと、ステージと左右両方のサイドパネルがその場で切り替わります。ドラッグで回転、スクロールでズームでき、切り替えるたびにカメラをリセットするため、16体すべての標本が比較可能な大きさで表示されます。
- アーカイブプレートをクリックすると、自身のサムネイルから変形しながらバックライト式のビューイングボックスへ広がります。周囲の光輪はプレートの縁から漏れる光です。最大3.2×まで拡大でき、ドラッグでパンできます。
- 特異構造そのもの——透明性、視覚、生物発光、擬態、捕食、巨大化、ボディプラン——で絞り込めるほか、生息環境に基づく独立した深海区分も用意しています。1つの標本が同時に複数のカテゴリーに属する場合もあり、検索対象には種名、学名、構造、標本IDが含まれます。
- モデルのダウンロード中は、GSAPが標本の計測済み線画プレートを一筆ずつ描き、その間キャリパーが定規の目盛りに沿って移動します——設計図は身体より先に現れ、続いて3Dモデルへクロスフェードします。キャッシュ済みのモデルでもプレートを1.5秒間表示し、読めないほど一瞬で消えないようにします。
技術解説
3Dアセット · TripoのハイポリモデルをWebへ
16体の標本モデルはTripoで生成しています。オリジナルはそれぞれ~60 MB、~1.9M三角形で、そのままでは配信できないスカルプト級の密度です。gltf-transformのmeshoptパイプラインでジオメトリを2.4–11 MBまで縮小します。頂点を結合し、誤差許容値0.0002で簡略化し、不要なデータを除去してmeshopt圧縮を施します。テクスチャはダウンサンプリングせず、意図的に4Kを維持します。ダウンサンプリングではほとんど容量が減らず、ぼやけの主因だったためです。一方、8Kで納品されたものは4Kへ下げ、ベースカラーマップ1枚当たりのVRAMを約358 MBから89 MBへ削減します。画面上の表示サイズでは目に見える損失はありません。
各標本はGLB → 静止画 → カットアウト → 手作業で制作した線画プレートの順に個別にフォールバックします。プレート自体が欠けても背後に製図グリッドが残るため、どのファイルが欠けてもステージ全体が空白になることはありません。
標本ステージ · 自動フレーミングとコンテキスト保護
16体のモデルは共通の制作規約に沿っておらず、どのモデルも変換を手作業で調整していません。各モデルはロード時に自身のルート行列を基準に計測します。ワールド空間で計測すると、すでに適用済みのスケールまで読み戻してしまい、再計測するたびにモデルが縮小します。計測には生のBox3ではなく、パーセンタイルに基づく境界を使います。いくつかの動物では、触角や糸状部が頂点数のごく一部しか占めないにもかかわらず、ボックスの範囲を決めて胴体を小さくしてしまいます。両端の極値を切り落とすと、バウンディングボックスは動物の本体を囲み、16体すべてを比較可能な視覚的ウェイトで表示できます。自動フィットは最長の水平軸が画面を横切るようにモデルを回転し、中央に置いてcanvasを満たします。新しい標本をカタログに入れるだけで自動的にフレームへ収まり、標本ごとに必要なのはせいぜい微調整だけです（シャコガイは横姿ではなく、蓋のような形です）。
Canvasのkeyに標本は使いません。切り替えるたびにWebGLコンテキストを破棄して再構築することになり、ブラウザーが最も古い有効なコンテキストを切り捨ててしまうためです。keyを設定するのは内側のSceneだけです。primitiveにはdispose={null}も必要です。dreiのGLTFキャッシュはクローン間でジオメトリを共有しており、アンマウント時にR3Fによるdisposeを許すと、使用中のバッファまで破棄されてしまいます。
ライティング · 複写台ではなく展示ケースのように照らす
1灯のモデリング用キーライト、背後から輪郭をかすめる2灯のリムライト、床からのバウンス光はなし——これらの動物の多くは暗く、暗い地から暗い体を分離するのは輪郭です。それこそがリムライトの役割です。環境マップはScene内のエリアライトからその場でベイクします（Environmentはkeyを設定したSceneの外側に置かれているため、標本を切り替えても再ベイクされません）。HDRIのダウンロードも外部リクエストもありません。
ライティングの調整だけでは最も暗い標本を分離できませんでした——暗い赤褐色のイカと暖かな茶色の地面は、実際に明度が近いからです。そこで標本を柔らかな光だまりに置き、接地影をその光へ深く食い込ませることで、シルエットを読み取れるようにしました。トーンマッピングには、中間調を強く沈めるデフォルトのACESではなく、露出1.34のKhronos PBR Neutralを使用します。中間調の沈み込みこそ、これらの標本を埋もれさせていた原因です。
ローディング · 嘘のない進捗表示
dreiのuseProgressが数えるのはバイト数ではなくファイル数です。自己完結型のGLBは1項目として扱われるため、進捗バーはダウンロード中ずっと0のままで、最後に100へ跳ね上がります——この数字は嘘をついています。そのため、ローダーにはパーセンテージを表示しません。DrawSVGPluginが標本の計測済み線画プレートを一筆ずつ描き、その間キャリパーが定規の目盛りに沿って移動します。残りがどれほどかを知っているふりはせず、作業中であることだけを伝えます。
モデルの準備が整うと、プレートから3Dモデルへクロスフェードします。キャッシュ済みのモデルでもプレートを少なくとも1.5秒表示します。そうしなければ、読めないほど一瞬で消えてしまうためです。prefers-reduced-motionでは装飾アニメーションを停止し、最短表示時間の制約も解除します——モーションを減らす設定で取り除くべきなのはモーションであって機能ではなく、待ち時間を追加してもいけません。
