GPT-6 Astra に渡したのは、画像1枚だけでした。AtAt のロゴです。半透明の丸メガネをかけた黒い球で、レンズの中にはそれぞれ白い @。
お願いしたのは、ウェブサイトに載せられる 3D 版をつくること。
ひとつのセッションのあと、その画像は8つのアニメーションを持つ、編集可能な Blender のキャラクターになっていました。Mac アプリの中では Orb として Metal で描画され、ホームページでは Three.js で描画されるキャラクターとして動いています。どちらも、同じ .blend ファイルの同じアニメーションデータを再生しています。
Blender のスクリプトも、エクスポーターも、Metal のレンダラーも、Three.js のプレーヤーも、私は書いていません。私の仕事は、ひとつひとつのバージョンを見て、どこがおかしいかを言うこと。言うことは山ほどありました。
最終的にできあがったのが、このキャラクターです。表情をクリックしてみてください。ポインタに反応し、「視差効果を減らす」の設定も守ります。
操作できるOrbを読み込んでいます…
このインタラクティブなデモには「提案中」も入っています。Tab の形をした目と、転がる Orb のまわりをめぐる虹色のリボン。デスクトップの相棒としての Orb のひとときも見られます。入力に合わせてトントンと叩く小さな白い手、うとうとしたり眠ったり、手を振ってあいさつしたり、なでられて照れたり、揺らされたあとにぐるぐる目を回したり。上の Orb はドラッグすれば持ち上げられます。
私が渡した唯一の画像。以下はすべて、これに似せてつくられています。
たったひとつのルール
AtAt は、目の前のものをいつもの AI に渡し、答えを入力していた場所に戻す Mac アプリです。Orb は画面に浮かぶ小さなキャラクターで、クリックすると入力ウインドウが開きます。幅は38ポイント。一日中、画面にいます。
新しいキャラクターのルールはシンプルでした。見た目はロゴが決める。Orb が何をしていても、あの絵の球のままでいること。
何度も間違えたところ
私のフィードバックは、ほとんどがスクリーンショット1枚と一言でした。だいたいこの順番で、その一言が続きました。
- 目が大きすぎた。 メガネの大きさはそのままで、
@を小さくしてほしいと頼みました。目、レンズ、フレーム、蝶番は別々のメッシュだったので、これは本当にひとつの部品だけの変更で、顔のほかの部分を拡大縮小する必要はありませんでした。あとで参考画像に戻って、比率をもう一度調整しています。 - 球が平べったく見えた。 明るい面と影の面が読み取れない黒い球は、ただの黒い円です。左上からの広いキーライト、控えめなフィル、安定したリムライトをそろえて、ようやく38ポイントで球に見えるようになりました。
- ヘッドホンが浮いていた。 最初のヘッドホンは、頭にかかっているのではなく、頭の近くにあるだけでした。バンドを上半分の球体に沿わせ、バンドと外側のカップを赤にして、小さなサイズでも読み取れるようにしました。
- 考えごとの吹き出しが不透明に見えた。 半透明のグラファイトにして、外殻と2つのしっぽの泡と本体のあいだに、見える隙間をあけました。半透明のパーツが重なると、描画のバグのように見えるのです。
- 「挿入」のアニメーションが意味不明だった。 最初のバージョンは、テキストの断片が入力欄のすき間に滑り込むものでした。何を表しているのか、私にはわかりませんでした。代わりに、鉛筆が紙に書いていき、行ごとにペン先を上げる動きにしてもらいました。
- ウインクが見えなかった。 最初の傾きは約4度。16度にして、ようやく見えるようになりました。
最初の8つの表情
キャラクターは8つの演技から始まりました。どれにも役目があります。
- 待機中： 静かに休んでいて、モデルに組み込んだ自然なまばたきをします。
- 考え中： 両目が上を向きます。半透明のグラファイトの吹き出しの中で、3つの点が大きさと明るさを変えながら順に巡ります。
- 読書中： 小さな本をめくっています。
- 挿入中： 鉛筆が紙の上に書いていきます。
- 確認済み： 目が白いチェックマークになり、小さくうなずきます。言葉はいらず、試したどれよりも早く伝わりました。
- うれしい： 両目がにっこり閉じて、小さく弾みます。
- ウインク： 片目を閉じて、頭を16度傾けます。
- ノリノリ： 真っ赤なヘッドホンをつけて、うなずきながらリズムを取ります。
8つの Blender の演技をループで。上のデモなら、ひとつずつ自分で動かせます。
どれもモデルの中のジオメトリとアニメーショントラックです。本も、鉛筆も、チェックマークも、ヘッドホンも、すべて同じ 3D オブジェクトの一部です。
修正を楽にしたパイプライン
もう一度やるなら、ここはそのまま真似します。
GPT-6 Astra は Blender をセットアップし、Python でモデルとアニメーションを組み立てました。できあがるのは保存された .blend ファイルで、Blender で開けて、人の手でも編集できます。
実際のシーンアセットを Blender のスタジオでレンダリングしたもの。モックアップではありません。
ファイルの中で、キャラクターは別々のメッシュの階層になっています。体、フレーム、蝶番、目、小道具。小道具には親があるので、本は本として動き、ヘッドホンは頭と一緒に動きます。表情はそれぞれ、clip::object と名づけた Blender のアクションの組で、たとえば thinking::ThoughtDot0 のように。すべてのオブジェクトが、すべてのクリップにアクションを持っています。そのアクションがただの固定ポーズでも。だからこそ、プレーヤーはどの表情からどの表情へもなめらかにつなげられます。
エクスポーターはシーンを読み込み、アクションを毎秒約30フレームでサンプリングします。まったく変化しないトラックは、1つのサンプルにまとめます。出てくるのは2つ。
どちらも同じアニメーション JSON を、1バイトも違わずに読み込みます。GLB 自体にはアニメーションクリップを入れていません。動きは1か所にしかないので、Blender で調整すれば、次のエクスポートで両方のレンダラーに届きます。
上に並べた修正の数々を乗り切れたのは、そのためです。どの修正も、モデルを直して、エクスポートして、ビルドして、38ポイントで見る、の繰り返し。目を動かすためにアプリのコードに触った人はいません。
それでも、2つのレンダラーが描くピクセルは同じではありません。ウェブは GLB の物理ベースのマテリアルを使い、ネイティブ側はもっとシンプルなライティングと、フレームの不透明な代役を使っています。モデルと動きを共有すれば、同じキャラクターにはなります。同じ画にはなりません。
ウェブサイトに置く
最初は、ロゴの場所にライブのモデルを置くつもりでした。試してみたあと、ヒーローのテキストの横の空いたスペースに移しました。
ページの上部では、控えめにしています。180ピクセル、不透明度30パーセント。ポインタには反応しますが、まだドラッグはできません。ヒーローがスクロールで消えると右上に移動し、完全に見える100ピクセルの Orb になって、ドラッグできるようになります。上にスクロールして戻れば、家に帰ります。
ライティングは、あなたの現地時間に合わせて少しだけ変わります。向きは最大15度、高さは6度、強さは8パーセント。正午から離れるほど、少し暖かい色に。サイトは焼き込んだ反射環境をつくり直すのではなく、回転させています。静止しているときはライティングを1分に1回だけ更新し、見えていないときは描画を止めます。
数字
| 項目 | 値 |
|---|---|
編集可能な .blend ソース | 9.7 MB |
| ウェブ用モデル（GLB） | 597 KB |
| 共有のアニメーション JSON | 1.93 MB、gzip で約 84 KB |
| レンダーバッファの上限 | 1辺 512 px |
| 判断に使ったサイズ | アプリで 38 pt、ウェブで 40 / 48 / 150 / 180 px |
まだ解決していないこと
運んでいる中身のわりに、アニメーション JSON は重めです。ネイティブのレンダラーのマテリアルは、ウェブより一歩遅れています。そして結局、「平べったい」がどういうものかを知っていて、それを言い続ける人間が必要でした。GPT-6 Astra は言葉とジオメトリをつなぎました。どのバージョンが正しいかは、知りませんでした。
試してみるなら
- 参考画像を1枚渡す。 文章ではだめです。説明では決してつかなかった決着を、画像がつけてくれました。
- スクリーンショットを送り、ずれを名指しする。 「目が大きすぎる、メガネはそのまま」のほうが、「もっとかわいく」よりずっと効きます。
- 編集できるソースファイルを必ず求める。 再実行できないスクリプトが生成したメッシュは行き止まりです。開ける
.blendなら、出発点になります。 - 実際のサイズで判断する。 180ピクセルでよく見えた細部は、38ポイントではノイズでした。毎回です。
自分でもつくってみる
参考画像を添えて、次のプロンプトを順番に GPT-6 Astra に送ってください。角かっこの中は自分の好みに置き換えます。Blender の操作は Python で任せ、結果を毎回確認してから次に進みましょう。
1. モデルをつくる
添付の参考画像を、[プロジェクトフォルダ] の中で編集可能な 3D キャラクターにしてください。
私の好み：[色、素材、性格、残したい・変えたい細部]。
Blender をセットアップし、Python で組み立ててレンダリングしてください。編集可能な .blend ファイルを1つ保存してください。体、目、アクセサリーなど、個別に調整できるパーツは分けておいてください。
参考画像のプロポーションと素材感に合わせてください。正面と参考画像の角度からのレンダリングを、拡大したものと [表示する予定のサイズ] のものの両方で見せてください。保存したファイルを開き直して、問題なく使えることを確認してください。アニメーションを加える前に、モデルを確認させてください。2. 表情を加える
承認したモデルに、次の表情のアニメーションをつけてください：[あなたのリスト]。
たとえば：待機、考え中、読書、書きもの、確認、うれしい、ウインク、ノリノリ。目や小道具、動きは、私のキャラクターの性格に合わせてください。
演技は、同じ .blend の中に編集可能な Blender のアクションとして保存してください。小道具は正しく取り付け、ループはなめらかに、「視差効果を減らす」用に読み取りやすい静止ポーズも用意してください。どのアニメーションも、保存して開き直したあとに崩れないようにしてください。
表情はアプリのコードで別に描くのではなく、モデルのジオメトリとアニメーションでつくってください。確認用に、ラベルつきのアニメーションプレビューを用意してください。3. プロジェクトに組み込む
承認したキャラクターを [ウェブサイトまたはアプリ] に組み込み、[ほしいインタラクション] を実装してください。
まず既存のプロジェクトを調べてください。保存した .blend からエクスポートし、つくり直さないでください。ウェブには Three.js を使ってください。ネイティブアプリも対象なら、2つのプレーヤーでモデルのアニメーションデータを共有してください。
再生の仕組みは汎用的にし、透過を保ち、動く小道具のための余白を残し、描画解像度を制限し、見えていないビューは描画を止めてください。動くプレビューと、エクスポートして実行するためのコマンドを用意してください。
プロジェクトをビルドし、すべての表情と切り替えを確認してください。既存のキャラクターを置き換える場合は、呼び出し側を移行し、置き換えが動いたら古い描画コードを削除してください。あとは、スクリーンショットと具体的な修正を送ります。「目を小さく。メガネはそのまま」。実際のサイズで正しく見えるまで、繰り返してください。
始まりは、画像1枚と小さなお願いでした。そのあとのすべての判断が、このキャラクターのモデルに、アニメーションに、ふるまいに刻まれています。
Orb は、AtAt でいちばん最初に目にするものです。クリックしたあとに何が起こるかは、「AtAt とは？」で。