はじめに

「癒しの金魚鉢」は、ガラスの鉢の中を金魚が泳ぐ様子を、ブラウザの中で3Dで眺めるデモです。画像や3Dモデル、音声のファイルは使わず、金魚の体も、部屋の障子も、水面の揺らぎも、効果音やBGMも、すべてプログラムで作っています。AIコーディングエージェントに指示を出しながら作りました。

デモを開く

この記事では、完成したデモの仕組みよりも、AIにどう指示を出し、どうテストし、どう試行錯誤しながら形にしていったか、その過程をご紹介します。

本文中、実際にAIへ伝えた内容は、次のように引用形式で示します。

記録が残っている発言はそのまま、記録が残っていないものは当時の趣旨をまとめ直した例として載せています。それ以外の地の文では、その指示に対してAI側がどう対応したか、どういう仕組みになっているかを解説します。

癒しの金魚鉢とは

まずはデモの概要をご紹介します。

• ブラウザのみで動作し、ダウンロードは不要
• PC・スマートフォンの両方に対応
• 金魚3匹が鉢の中を泳ぎ、えさをあげると近づいて食べる
• 昼と夜を切り替えることができ、夜は行灯の灯りと月明かり、蛍が加わる
• 視点を360度回したり、拡大・縮小したりすることができる

画面右下の歯車ボタンからメニューを開くと、次の操作をすることができます。

• 視点の回転（◀▶）とズーム（＋－）。ボタンを押している間だけ動く
• 自動回転。1周およそ1分でゆっくり視点が回る
• 音の入り切り
• えさをあげる
• 昼と夜の切り替え

最初の依頼と、そこから生まれた構成

きっかけは、SNSで見かけた3D表現の作品でした。街並みや水路を3Dで見せる作品を見て、次のように相談しました。

そこから、題材を「金魚鉢で金魚が泳ぐ」に絞り、ブラウザで動くWebアプリとして作る方針に決まりました。

使っている技術：素材ファイルを使わず、すべてプログラムで作る

使っている技術は、次のとおりです。

• 3Dの描画：WebGL（ブラウザで3Dを描く標準の仕組み）を、Three.js（その扱いを助けるJavaScriptライブラリ）を通して使う
• 音：Web Audio API（ブラウザの中で音を作って鳴らす標準の仕組み）を使う
• 作り：JavaScriptのみで、ビルド（公開用に変換する工程）は挟まない。1つのHTMLと数本のJavaScriptファイルで動く
• 素材ファイル：画像・3Dモデル・音声のファイルは、1つも使わない

このため、素材を別に用意する必要がなく、公開も、ファイルをサーバーに置くだけで済みます。

形と質感は、プログラムで描く

金魚の体は、頭の丸み、背のこぶ、尾の付け根の細さを数式で表して、3Dの形に組み立てています。泳ぐときの胴体のくねりも、プログラムで計算しています。

質感も、画像ファイル（テクスチャ）の代わりに、プログラムで描いた模様と、色や光の返り方を計算する小さなプログラム（シェーダー）で作っています。たとえば、金魚のうろこは重なり合う弧の模様を計算して描き、障子の紙の繊維や、机の板の継ぎ目と艶も、プログラムで表しています。水槽の石や流木も、球や管の形をゆがめ、色むらを付けて作りました。

効果音とBGMも、プログラムで鳴らす

効果音とBGMも、音声ファイルは使わず、音の波形をプログラムで組み合わせて作っています。泡のポコポコ、えさを落とす「ぽちゃん」、魚が食べる音、夜の虫の音や風鈴は、すべてこの方法です。

BGMは、ゆったりした和音に、まばらに鳴る鐘のような音を重ねた構成です。音階は、昼と夜で切り替わります。部屋に響くような残響も、プログラムで作った減衰のパターンで表しています。

なお、ブラウザの決まりで、画面を操作するまで音は鳴らせません。このため、最初に「タップして始める」画面を出して、最初のタップで音が鳴り始めるようにしています。

試作を動かしながら、指示とテストを繰り返す

最初の版は、見た目に問題が多かった

最初の版では、金魚3匹が泳ぐところまではできていました。ただ、実際にブラウザで開くと、見た目にはさまざまな問題がありました。

当時の不具合を、趣旨をまとめて再構成した例です。金魚が白い塊に見えるほか、砂利が真っ黒、水草が見えない、鉢が円錐形で画面からはみ出す、障子と庭の面が重なってギザギザに見える、といった問題がまとめて見つかりました。

原因は一つずつ違いました。たとえば砂利が黒かったのは、色を付ける設定が材質側で食い違っていたためです。金魚の胴体が消えたときは、描画の設定を書き足す際に改行が抜けて、別の行と連結されていたことが原因でした。このため、コードをAIが書き換えたあとは、実際のブラウザで画面を見て、コンソールのエラーも確認するようにしました。

その後も数回の修正を重ね、金魚は、丸みのある琉金の体型に、オレンジ1匹と更紗（白地に赤い模様）2匹という組み合わせになりました。体型は、丸い頭と背のこぶを持つ形を数式で組み立て、うろこは、重なり合う弧の模様をプログラムで描いています。このため、画像素材は要りません。

鉢の見え方を調整し、屈折をやめる

ガラスと水の見え方は、特に時間がかかりました。当初は、鉢の向こうの景色が水を通して曲がって見える表現（屈折）を入れていました。しかし、テストすると、金魚が二重に見えました。そこで、鉢と魚を隠して部屋だけを描いた画像を作り、水の奥の壁に、屈折させた位置から貼る方式に変えました。魚は本来の位置に描くので、二重像は出なくなりました。

ただ、それでも、鉢の内側に別の層が重なって見える状態は残りました。

曲がり方を弱めるなどの調整を重ねましたが、この指摘は何度か繰り返されました。最終的には、次のように伝えて、方針を決めました。

この一言を受けて、屈折は既定でオフにしました。コードは残してあり、URLに?refraction=onを付けると試すことができます。技術的に凝った表現でも、見た目で違和感が出るなら入れない、という判断です。

視点を360度回れるようにする

視点の操作は、最初、横に回れる範囲に制限を付けていました。壁の外側が見えてしまうのを避けるためです。ところが、この制限は、不自然だと指摘されました。

制限を外して、鉢の周りをぐるりと回れるようにしました。ただし、これで新しい問題が出ました。後ろ側へ回ると、壁が片面だけの描画だったため消えてしまい、背景が平らに見えました。

部屋を壁で囲んだ空間にする

後ろへ回れるようになると、部屋の作りの粗さが目立ちました。

奥の壁1枚だけの舞台装置のような作りで、左右の壁も天井もなかったためです。そこで、部屋を左右・手前の壁と天井で囲んだ閉じた空間に作り直し、腰板や梁、四隅の柱を加えました。あわせて、茶箪笥や観葉植物、盆に載せた急須と湯呑みも置いています。

カメラが奥の壁より後ろへ回ったときだけは、窓まわりと庭の部品を自動で隠すようにしました。これにより、どの角度から見ても、壁を突き抜けた部品は見えなくなります。

音を絞る

音は、どれを鳴らすかを絞りました。常時流れる水の音は、ノイズのように聞こえるため不要、という方針です。

こうして、泡のポコポコ、えさを落としたときの「ぽちゃん」、魚が食べたときの音、夜の虫の音と風鈴を鳴らすことにしました。のちに、ゆったりしたBGMも追加しています（作り方は前の節のとおりです）。

えさは、薄いフレーク状で、回転しながら沈みます。金魚は、えさがあると、普段の約1.7倍の速さで寄ってきます。食べると、体が少しだけふくらみます。

スマートフォンで見つかった問題

スマートフォンで開くと、PCでは見えなかった問題が出ました。

当時の不具合を、趣旨をまとめて再構成した例です。視点を回す操作が長押しに近いため、スマホでは文字選択のメニューが出てしまいました。選択やコピーのメニュー、ダブルタップでの拡大をすべて無効にして、解消しています。

あわせて、スマホでは自動で軽い描画設定に切り替えるようにしました。画面の描画が重くなると、解像度を自動で下げる仕組みも入っています。縦長の画面では、鉢の幅が収まるように、カメラの距離を調整しています。

アップロードスキルについて

このデモは、さくらのレンタルサーバーの「アップロードスキル」を使って公開しています。AIエージェントに話しかけるだけで、ドメインの設定からファイルの転送までを進めることができます。

使い方は、次の記事で扱っています。

今後、AIで3Dの表現を作る人に向けたポイント

• 見た目の違和感は、実際に動かして初めて分かります。屈折の二重像や、壁を突き抜けた窓のように、コードの上では正しくても、画面を見て初めて気づく問題がありました。画面を見る確認と、AIへのフィードバックを、短い周期で繰り返すことができます
• 技術的に凝った表現でも、見た目で違和感があるなら、外す判断が必要です。屈折は実装したうえで、既定でオフにしました
• 「回れない」「見えない」といった操作の制限は、違和感として指摘されます。360度の回転のように、制限を付ける場合は、実際に触って確認することが大切です
• 音は、足すより減らす方が合う場合があります。環境音を止めて、泡とえさの音だけにしたことで、静かな雰囲気が保てました
• スマホでは、PCと別の問題が出ます。長押しでの選択や描画の重さなど、実機で触ってはじめて分かることがあります

公開デモ

「癒しの金魚鉢」のデモは、次のリンクから開くことができます。

デモを開く

ほかのゲームデモは、次の記事でまとめてご紹介しています。

まとめ

「癒しの金魚鉢」は、SNSで見かけた3D表現の作品をきっかけに、「同じようなものを作れるか」という相談から始まったデモです。AIコーディングエージェントとの対話とテストを繰り返し、屈折をやめる、360度回れるようにする、部屋を壁で囲むといった判断を重ねて、現在の形に仕上げました。