開発者のNoniv氏が、海藻の森や沈没船の間を自由に泳ぎ回れるブラウザ作品「Abyssal Garden」を公開した。Claude Codeを使って制作したというこの作品は、約97KBの単一HTMLファイルで動作する。ソースコードに加え、初期版の制作に使った指示文（プロンプト）も公開されており、AIによるコード生成から実装までの過程をたどることができる。
ファイルサイズを小さく抑えられたのは、画像や3Dモデルを個別の素材ファイルとして用意せず、風景を生成する処理をコードに収めたためだ。一方、作者が報告する約180fpsという描画性能には、使用機器や解像度などの条件がある。公開コードを詳しく見ると、起動時に海底や植物を生成する処理、描画中に負荷を調整する仕組み、さらに初回指示に組み込まれた品質・性能の検証手順が確認できる。
約97KBに収めた海中世界
Abyssal Gardenの公開デモでは、揺れる海藻が生い茂る海底を泳ぎながら、沈没船や石造りのクジラの尾、マンタや魚群などを探索できる。水面から差し込む光や水中の環境音も再現されている。GitHubの公開リポジトリによると、描画にはブラウザからGPUを利用するWebGPUを、音の合成にはWeb Audio APIを使用している。ゲームエンジンや外部の3Dライブラリには依存していない。
PCではキーボードとマウスで移動や視点の操作ができ、数字キーであらかじめ用意された6つの視点に切り替えられる。作者が推奨する動作環境は、WebGPUに対応したChromeまたはEdgeだ。タッチ操作にも対応しているが、こちらは実験的な機能として位置付けられている。
ファイルサイズについては、作者のRedditへの投稿では97KB、GitHubのREADMEでは96KBと表記されている。公開デモのHTMLファイルは99,514バイト（約97.18KiB）で、表記の違いにバージョンや計算基準がどの程度影響しているかは明確ではない。
小さなHTMLファイルから海中世界を生成する仕組み
Abyssal Gardenは、完成済みの画像や3Dモデルを配布する代わりに、それらを生成するためのコードを配布する。公開されたビルドスクリプトでは、複数のソースファイルを結合し、WebGPU用のシェーダー言語「WGSL」、JavaScript、CSSを圧縮して1つのHTMLファイルに埋め込んでいる。ブラウザは受け取ったコードを実行し、その端末上で海中世界を組み立てる。
処理は大きく3段階に分かれる。配布時には世界を生成する手順をHTMLにまとめ、起動時には海底や植物などを生成する。そして描画中は、端末の性能に応じて解像度や表示距離を調整する。それぞれの段階で処理する内容が異なるため、HTMLのファイルサイズと実行時の負荷は分けて考える必要がある。
| 段階 | 主な役割 | 公開コードで確認できる処理 | 技術的なポイント |
|---|---|---|---|
| 配布 | 世界を生成する手順をまとめる | WGSL、JavaScript、CSSを圧縮して単一HTMLに結合する（ビルドスクリプト） | 約97KBは配布ファイルの容量を表す |
| 起動時 | 海底や植物などを生成する | GPUで海底の密度データを計算し、地形の形状や各要素の配置を生成してGPUへ転送する（main.js、quality.js） | 初期画質によって生成する要素数が変わる |
| 描画中 | 端末に合わせて描画負荷を調整する | 60fpsを目標に描画解像度や表示距離を段階的に変更する（README） | 実際の描画性能は機器・解像度・画質によって異なる |
※公開コードとREADMEに基づく整理。起動時間や実行時のメモリ使用量について、独立した実測は行っていない。
起動時の処理を詳しく見ると、main.jsではまずGPUのコンピュート処理を使って海底の密度データを計算し、その結果をCPU側に読み戻している。続いて地形の形状や植物などの配置を生成し、頂点データや各要素の情報をGPUのバッファへ転送する。world.jsには、地形やオブジェクトの配置を起動時に生成するコードが収められている。GPUへの転送後には、生成処理で使った一時的なデータの一部を解放する設計だ。
作者のREADMEによれば、海底には約200万枚の海藻の葉や植物、数万個の岩、数千個の海綿・サンゴ・魚が配置される。沈没船やクジラの尾、マンタなども単純な数学的形状を組み合わせて構築している。配布ファイルに大量の形状データを保存する必要はないが、起動時にはこれらを生成する計算が発生し、描画時にはGPUの処理能力やメモリが使われる。したがって、約97KBという小さなファイルサイズが、そのまま実行時の軽さを表すわけではない。
音についても、録音済みのファイルを読み込むのではなく、コードで生成する方式を採用している。audio.jsでは、最初のクリックやキー操作、タッチ操作をきっかけにWeb Audio APIによる音響処理を開始する。低い響きや水流、泡、遠くのクジラの鳴き声などを合成し、映像の描画ループとは独立した10Hzのタイマーで更新する仕組みだ。
約180fpsの描画性能と、端末に合わせた画質調整
作者がREADMEで報告している描画性能は、NVIDIA GeForce RTX 5070 Tiを使用した2560×1440の環境で約180fpsだ。一方、Samsung Galaxy A16では、Low画質かつ670×372の解像度で約20fpsだったという。GPUの性能だけでなく、解像度や画質の条件も異なるため、これらの数値を単純に比較することはできない。
Abyssal GardenにはHigh、Medium、Lowの3段階の画質設定が用意されている。Mediumでは海藻の葉や光の粒、小石などの数を半分に減らし、小さな岩や海綿、サンゴの影を省略する。Lowでは葉などの数を4分の1に減らすほか、輪郭のぎざつきを抑えるアンチエイリアシングを無効にし、岩やサンゴの形状、光の表現も簡略化する。つまり、画質設定によって起動時に生成する世界の細かさ自体が変わる。
さらに、実行中は60fpsを目標として描画負荷を自動調整する。公開コードでは、まず描画解像度を下げ、次に植物や岩などの表示距離を短くし、それでも負荷が高ければ解像度をさらに下げる仕組みが採用されている。開始メニューを表示している間も背景でシーンを描画し、実際に泳ぎ始める前から調整を進める設計だ。
画質や解像度、表示距離などの設定はブラウザに保存され、次回の起動時にも引き継がれる。読み込み中に異常終了したと判断された場合には、次回の起動時に画質を1段階下げる処理も実装されている。初期の画質設定で生成するオブジェクトの密度を決め、実行中の調整で描画する範囲と解像度を変えるという、異なる段階の最適化を組み合わせている。
最初のプロンプトに組み込まれた品質・性能の検証手順
Noniv氏によると、Abyssal Gardenの初期版はClaude Codeへの1回の指示から生まれた。その後、追加の指示によって開始メニュー、岩との衝突判定、3段階の画質設定などを実装したという。Redditへの投稿では、使用したAIモデルとして「Fable 5.2」を挙げている。
興味深いのは、GitHubで公開されている初回プロンプトの内容だ。指示では、開発上の優先順位を明確に定めており、最優先は視覚的な品質、次が指定環境でのフレーム時間の安定性、3番目がファイルサイズとなっている。約97KBという小ささは成果の一つだが、最初からファイルサイズの最小化を最優先にしていたわけではない。
性能目標も具体的に指定されている。対象環境はWindows 11 25H2、Chrome 157、RTX 5070 Ti、Ryzen 7 7800X3D、180Hzモニターで、2560×1440のフル解像度で動作させることが条件だ。60秒間の定型的なカメラ移動テストにおいて、GPUの平均フレーム処理時間を11ミリ秒以下に抑え、各フレームが16.7ミリ秒を超えないことを求めている。これらは初回プロンプトで設定された目標値であり、作者がREADMEで報告した約180fpsとは別の指標である。
視覚的な品質を確認するための手順も、最初から組み込まれている。Claude Codeには、生成したコードや推論内容を見せず、描画結果だけを評価する別のサブエージェントを用意するよう指示していた。この担当には、2560×1440で撮影した6つの固定視点の画像と、短いカメラ移動の録画を渡す。画面のちらつき、輪郭のぎざつき、物体が突然現れる現象、色の階調が不自然に分かれる現象などを調べさせ、軽微な問題を超える欠陥がなくなるまで修正を繰り返す設計だ。
性能の検証では、GPUのタイムスタンプ照会と定型的なカメラ移動テストのフレーム時間ログを使用し、平均値、99パーセンタイル、最大値を報告するよう求めている。99パーセンタイルは、測定したフレーム時間を短い順に並べたとき、99%のフレームがその値以下に収まる境界を表す。平均値だけでは見えにくい、処理が遅くなる場面を把握するための指標だ。
READMEでは、開発者向けのdev.htmlに、1分間の定型的なカメラ移動と、フレーム時間・GPU処理時間を測定するベンチマーク機能が用意されていることも説明されている。通常公開されているindex.htmlには含まれない機能で、ソースコードから開発用のビルドを生成すると利用できる。
ただし、初回プロンプトで指定された条件を満たしたことを示す最終的な性能測定ログや、視覚評価を担当したサブエージェントの最終報告は、確認できた公開資料には含まれていない。公開された指示から確認できるのは、AIにコードを書かせるだけでなく、視覚的な品質と描画性能を検証する方法まで指定していたことだ。Abyssal Gardenは、その指示と実装コード、実際に動作するデモを照らし合わせられる事例となっている。
