僕のYak Shavingは終わらない2

調査ノート、実装ログ、AI エージェントとの試行錯誤、発表資料をまとめるブログです。

2026-06-10

Full AI

Claude Fable 5 vs Gemini 3.5 Flash vs GPT-5.5 インタラクティブ3Dモデル生成ベンチマーク ... users

この記事について: これは 同日公開の「Claude Fable 5 vs Gemini 3.5 Flash vs GPT-5.5 図解生成ベンチマーク」（2D図解・静止画）の3D版スピンオフです。今回は静止画ではなく、各モデルに 単一HTMLのインタラクティブ3Dシーン（Three.js 可・外部アセット禁止）を書かせて、できあがったページをこの記事に埋め込みました。あえて Markdown ではなく HTML 記事にしているのは、読者にその場で3Dをグリグリ回してほしいからです。各カードの「▶ 3Dを起動」を押すと、そのモデルが生成したページがそのまま動きます。

はじめに

2D図解ベンチマークを続けてきて、「コードで絵を描く力」はだいぶ見えてきました。次に気になるのは空間です。座標も配色も照明も全部コードで指定する Three.js のシーンを一発で書かせたとき、3モデルでどれだけ差が出るのか。静止画のスクリーンショット比較では3Dの面白さが伝わらないので、生成された HTML をそのまま記事に埋め込んで、読者が自分の手で回せる形にしました。

モデルと生成経路は2D版と同じ構成です。

  • Claude Fable 5: この作業セッションの Claude Code（モデルID: claude-fable-5）自身が、プロンプトから直接書き起こし
  • Gemini 3.5 Flash: agy（Gemini CLI 系ローカルエージェント）の print モード agy -p で生成
  • GPT-5.5: codex exec -m gpt-5.5 の非対話モードで生成

この記事は題材設計、コード生成、検証、記事化までをAIで進める Full AI 方式で書いています。

トラックボール付き分割キーボードの3Dモデルを、Claude Fable 5・Gemini 3.5 Flash・GPT-5.5 の3モデルで横並び比較した画像
題材1「トラックボール付き分割キーボード」の初期表示を3モデル並べたもの。左から Claude Fable 5 / Gemini 3.5 Flash / GPT-5.5。この記事内で3つとも実際に動かせます。
操作メモ: 各カードの「▶ 3Dを起動」を押すとそのまま埋め込みで動きます（ドラッグ: 回転 / ホイール: ズーム）。起動したカードは横幅いっぱいに広がります。WebGL コンテキストの上限対策で同時に動くのは3つまで（古いものから自動で閉じます）。ページスクロールとホイール操作が干渉するときは「別タブ」リンクからフルスクリーンでどうぞ。スマホはタッチドラッグ・ピンチで操作できます。

比較条件

  • モデル: Claude Fable 5 / Gemini 3.5 Flash / GPT-5.5
  • 出力形式: 単一HTMLのインタラクティブ3Dシーン（Three.js の CDN 読み込みのみ可、画像・glTF等の外部アセット禁止、形状はすべてコードで構築、ドラッグ回転＋ホイールズーム必須）
  • 題材: 5題材
  • 総数: 5題材 × 3モデル = 15個（すべて今回新規生成）
  • 確認日: 2026-06-10 JST

題材一覧

題材1はユーザー指定で、しかも「ギークに刺さるやつ」とだけ指定してあえて具体的な要件を書かない出題です。題材2〜5はAIが候補を設計し、ユーザーが「全部いいじゃん」と全採用したものです（AI設計・ユーザー承認）。

題材出題元見たい点
トラックボール付き分割キーボードユーザー指定（要件は意図的に未指定）「ギークに刺さる」の解釈力、ディテールの自発的な盛り込み
機械式時計のムーブメントAI設計・ユーザー承認歯車の噛み合わせ、脱進機の動き、動く機構の正確さ
猫AI設計・ユーザー承認プリミティブの組み合わせで有機形状をどこまで可愛く作れるか
7軸ロボットアームAI設計・ユーザー承認（2Dシリーズ既存題材の3D化）階層構造の関節、スライダーでの各軸ジョグ、リンクの追従
エスプレッソマシン断面図AI設計・ユーザー承認断面・分解表示のUI、内部部品のラベル、抽出経路の説明力

プロンプトは3モデル共通で、scripts/3d_benchmark_2026/prompts/ に置いています。生成・検証スクリプトも同じディレクトリにあります。

実行方法と検証パイプライン

  • Claude Fable 5: セッション内でプロンプトから一発書き起こし。書いた直後のセルフレビューで誤記5箇所（壊れたCSS宣言2つ、add() の戻り値に対して位置を設定していたバグ2つなど、3ファイル分）を修正してからレンダリングしました。レンダリング結果を見てからの手直しはゼロです。
  • Gemini 3.5 Flash: run_gemini_batch.py（agy -p）で5題材を生成。全題材1回目で成功。
  • GPT-5.5: run_codex_batch.py（codex exec）で5題材を生成。後述のとおりリトライが多発しました。
  • 検証: 2D版の「xelatex / py_compile でコンパイル確認」に相当するものとして、Playwright のヘッドレス Chromium で実際にページを開き、ページエラーなし＋WebGL キャンバス生存を確認するレンダリング検証（render_check.mjs）を全15ページに通しました。さらに自動ドッグフーディング（dogfood_check.mjs）でドラッグ回転・ホイールズーム・アニメーション・UI要素の有無を機械的に確認しています。

生成時のトラブル（正直な記録）

GPT-5.5 は5題材中4題材で同じバグを繰り返しました。 OrbitControls.js を CDN のフルURLで直接 import すると、その内部にある import ... from 'three'（bare specifier）が解決できず実行時エラーになる、という Three.js の古典的な罠です。importmap を書けば回避できるのですが、初回バッチでは エスプレッソマシン以外の4本すべてがこのパターンで動きませんでした。

レンダリング検証を追加して再生成したところ、壊れていた初回バッチ分も数えると、動くコードに到達するまで猫=3世代・ロボットアーム=3世代・時計=4世代、トラックボールキーボードに至っては5世代目でようやく動くコードになりました。GPT-5.5 の生成は合計16世代（うち動いたのは5本）で、捨てた11世代はすべて同じ bare import が原因です。なお Gemini 3.5 Flash は5本とも一発で動き、Fable 5 もレンダリング検証は5本とも一発通過です。

題材1: トラックボール付き分割キーボード（要件は意図的に未指定）

プロンプトは「トラックボール付き分割キーボードのインタラクティブな 3D モデル。ギークに刺さるやつにしてください」だけ。何を盛るかはモデル任せです。

Claude Fable 5別タブsource
Claude Fable 5 が生成した分割キーボード。CAD図面風の暗い画面にカラムスタッガードの2ユニットと赤いトラックボール、寸法線とスペック表
Gemini 3.5 Flash別タブsource
Gemini 3.5 Flash が生成した分割キーボード GLOW-80。ネオングリーンのHUDとRGB発光するキーの暗いサイバーパンク調シーン
GPT-5.5別タブsource
GPT-5.5 が生成した分割キーボード NEBULA TB-42。暗い空間にハの字の2ユニットとワイヤーフレームのトラックボールドーム
  • Fable 5: CAD ビューワー路線。寸法線（ユニット間 48mm・ボール ø34）、スペック表、等角/上面/正面/側面の視点プリセット、分解図、ワイヤーフレーム、RGB アンダーグローのトグルまで盛りました。カラムスタッガード＋親指キー＋右手親指位置のトラックボールという自作キーボード文脈の構成です。
  • Gemini 3.5 Flash: 「GLOW-80 // ERGO-SPLIT」というネオン HUD のサイバーパンク路線。RGB WAVE / PULSE / AUTO ROTATE の切替、WPM・キーストロークのカウンタ、クリックでキー入力＆ボール回転というギミック入り。世界観は一番尖っていますが、シーン全体がかなり暗いです。
  • GPT-5.5: 「NEBULA / TB-42」。ハの字につながった2ユニットで、トラックボールを半透明ドーム＋ワイヤーフレームで表現。ボタン類の追加UIはなし。前述のとおり、動くコードになるまで4回かかりました。

題材2: 機械式時計のムーブメント

香箱からテンプまでの輪列を作り、歯車が実際に噛み合って回ること、テンプの往復とアンクルの脱進を要求しています。

Claude Fable 5別タブsource
Claude Fable 5 が生成した機械式時計ムーブメント。地板の上に香箱・二番車〜四番車・ガンギ車・アンクル・テンプが日本語ラベル付きで並ぶ
Gemini 3.5 Flash別タブsource
Gemini 3.5 Flash が生成した機械式時計ムーブメント。金色の歯車とルビー軸受が大きく画面に迫る寄りのカメラ
GPT-5.5別タブsource
GPT-5.5 が生成した機械式時計ムーブメント。初期カメラが真横で歯車が薄い円盤の列に見える
  • Fable 5: 輪列を俯瞰できるレイアウトで、ガンギ車は2振動/秒のステップ動作（チクタク）、テンプは往復振動、ひげぜんまいのスパイラルや受け板・ネジまで作っています。部品ラベルと再生/停止付き。一方で真鍮とスチールの色差が照明に負けて、全体が茶色寄りに見えるのが弱点です。
  • Gemini 3.5 Flash: 金色の歯車の質感とルビー軸受の発色は3モデルで一番リッチ。ただ初期カメラが寄りすぎていて、引かないと全体像が見えません。Pause / Reset ボタン付き。
  • GPT-5.5: 初期視点が真横なので、最初は歯車が薄い円盤の列にしか見えません。回すと輪列とテンプは確認できます。停止ボタンあり。3回目の試行で成功した1本です。

題材3: 猫

座りポーズ、部品の作り分け、生きている感じのアニメーション1つ以上、かわいさ重視という出題です。

Claude Fable 5別タブsource
Claude Fable 5 が生成した茶トラ猫「みけ」。クッションの上に座り、額にトラ縞、リング模様のしっぽを立てている
Gemini 3.5 Flash別タブsource
Gemini 3.5 Flash が生成したクリーム色の猫 Mochi。大きな黒目で白いラグの上に座る
GPT-5.5別タブsource
GPT-5.5 が生成したオレンジ色のぽっちゃり猫。ひげが顔を横切る黒い線で交差している
  • Fable 5: 茶トラの「みけ」。まばたき・呼吸・しっぽゆらゆらの3アニメ持ちで、額のトラ縞（M字）、リング模様のしっぽ、肉球側の白足袋まで作り分け。「なでる」ボタンを押すと目を細めてしっぽが速くなります。
  • Gemini 3.5 Flash: クリーム色の「Mochi the Cat」。大きな黒目と首輪の鈴が可愛い路線ですが、ひげが顔の表面に短い線で張り付いていて、角度によっては顔の傷に見えます。クリックでなでられます。
  • GPT-5.5: ぽっちゃりオレンジ猫。困り眉付きで愛嬌はあるものの、ひげが顔を横切る長い黒線として交差していて、ここが一番目につきます。2回目の試行で成功。

題材4: 7軸ロボットアーム

J1〜J7の階層構造、スライダーでの各軸ジョグ、軸番号ラベル、グリッパを要求。2Dシリーズで毎回出している「7軸ロボットアーム」の3D化です。

Claude Fable 5別タブsource
Claude Fable 5 が生成した7軸ロボットアーム RX-7A。白い多関節アームにオレンジの関節リングとJ1〜J7ラベル、右下にジョイント制御パネル
Gemini 3.5 Flash別タブsource
Gemini 3.5 Flash が生成した7軸ロボットアーム。オレンジ色の節が直立した初期ポーズで、左にスライダーパネル
GPT-5.5別タブsource
GPT-5.5 が生成した7軸ロボットアーム。肘を曲げた作業ポーズで各関節にJ1〜J7のラベル、先端に黄色いグリッパ
  • Fable 5: J1〜J7 スライダー、デモ再生、グリッパ開閉、TCP（手先）座標のリアルタイム表示付き。関節リングの向きで回転軸（ヨー/ピッチ）を示しています。初期ポーズも肘を曲げた自然な姿勢です。
  • Gemini 3.5 Flash: スライダー7本＋Auto Demo / Random / Reset とUIは完備。ただ初期ポーズが完全な直立で、オレンジの煙突のように見えるのが惜しいところ。スライダーを動かせばちゃんと関節は曲がります。
  • GPT-5.5: 初期画が一番「作業中のロボットアーム」らしい1本。各関節の球にラベルが付き、黄色いグリッパも目を引きます。スライダー7本。こちらも2回目の試行で成功。

題材5: エスプレッソマシン断面図

外装・ボイラー・グループヘッド・ポルタフィルター・給水タンク・配管を作り、断面か分解の切替UI、部品ラベル、抽出経路の可視化を要求しています。

Claude Fable 5別タブsource
Claude Fable 5 が生成したエスプレッソマシン EM-90。黒い筐体にポルタフィルターとカップ、部品ラベルと抽出経路の凡例
Gemini 3.5 Flash別タブsource
Gemini 3.5 Flash が生成したエスプレッソマシン。右側に表示モード・抽出シミュレーション・構成部品リストのリッチなパネル
GPT-5.5別タブsource
GPT-5.5 が生成したエスプレッソマシン。枠だけの筐体の中に銅色のボイラーが見える断面表示、各部品に白いラベル
  • Fable 5: 通常 / 断面 / 分解の3モード切替。断面はクリッピングプレーンで筐体とボイラーを輪切りにし、給水（青）→熱水（橙）→エスプレッソ（茶）の抽出経路を粒子アニメで流しています。外装が黒めなので、中身は断面・分解モードで見る前提の作りです。
  • Gemini 3.5 Flash: UIが圧倒的にリッチ。表示モード切替に加えて、構成部品リストから部品を選ぶと詳細が出る、抽出シミュレーションの開始/リセットがあるなど、製品の説明ページのような完成度です。
  • GPT-5.5: 断面表示 / 分解表示の切替とラベルは要件どおり。ただ外装が枠だけの箱でボイラーが最初から丸見えなので、「断面で中が見える」嬉しさは薄めです。唯一、初回バッチから一発で動いた1本でもあります。

自動ドッグフーディング結果

全15ページに対して、ヘッドレスブラウザでドラッグ回転・ホイールズーム・自動アニメーション・追加UIを機械的に確認した結果です（dogfood_check.mjs、確認日 2026-06-10）。回転とズームは15/15すべて動作しました。

題材Claude Fable 5Gemini 3.5 FlashGPT-5.5
キーボードボタン8（視点4・寸法・分解・ワイヤー・RGB）ボタン3（RGB WAVE・PULSE・AUTO ROTATE）＋タイプ演出追加UIなし
時計ボタン2（停止・ラベル）／脱進ステップ動作ボタン2（Pause・Reset）ボタン1（停止）
猫ボタン1（なでる）＋まばたき・しっぽクリックでなでる追加UIなし（しっぽ等は自動で動く）
ロボットアームスライダー7＋ボタン3（デモ・リセット・グリップ）＋TCP表示スライダー7＋ボタン3（Auto Demo・Random・Reset）スライダー7
エスプレッソボタン4（通常・断面・分解・ラベル）＋抽出粒子ボタン5＋部品リスト＋抽出シミュレーションボタン2（断面・分解）
動くまでの生成世代数5/5 一発（レンダリング前の誤記修正5箇所あり）5/5 一発キーボード5・時計4・猫3・アーム3・エスプレッソ1（計16世代）

所感まとめ

  • Claude Fable 5 は「指示されていない文脈の補完」が持ち味でした。要件ゼロのキーボードに寸法線とスペック表を入れ、ロボットアームに TCP 座標を出すなど、ギーク向けディテールの引き出しが多い一方、時計の配色のように質感表現で Gemini に譲る場面もあります。
  • Gemini 3.5 Flash は質感とUIのリッチさが武器。エスプレッソマシンの操作パネルは3モデルで頭ひとつ抜けています。ただし初期カメラやポーズの詰めが甘く、「最初の1画面」で損をしがちです。生成の安定性は完璧でした。
  • GPT-5.5 は当たり外れの振れ幅が大きい結果に。ロボットアームの初期ポーズは3モデルで一番絵になっていますが、OrbitControls の bare import という同一バグを11世代連続で書いた生成安定性が最大の課題です。要件にないUIを足さない、ミニマル志向も一貫しています。

再現方法

生成と検証は以下で再現できます（リポジトリの scripts/3d_benchmark_2026/）。

# ローカルサーバ（レンダリング検証が参照）
python3 -m http.server 8941 --bind 127.0.0.1

# 生成（render_check.mjs によるヘッドレス描画検証＋3リトライ付き）
python3 scripts/3d_benchmark_2026/run_gemini_batch.py   # Gemini 3.5 Flash (agy -p)
python3 scripts/3d_benchmark_2026/run_codex_batch.py    # GPT-5.5 (codex exec)

# スクリーンショット一括取得と自動ドッグフーディング
node scripts/3d_benchmark_2026/capture_screens.mjs http://127.0.0.1:8941
node scripts/3d_benchmark_2026/dogfood_check.mjs http://127.0.0.1:8941

おまけ: 当事者 Gemini 3.5 Flash による総評

公開後に、出場者のひとりである Gemini にブラウザでこの記事を読ませて、3モデルの性能差をまとめてもらいました（2026-06-11 取得）。自分が出たベンチマークを自分で講評する構図ですが、内容は妙に的確だったのでそのまま載せます。チャットの定型文と表の崩れだけ整形し、文言は原文のままです。

モデル強み・特徴弱点・課題生成の安定性
Claude Fable 5 高い文脈補完力とディテール
指示にないCAD風寸法線やスペック表、リアルタイム座標表示などを自発的に実装。		 色使い・質感表現
時計の配色など、ライティングに負けて地味に見える場面も。		 優秀（5/5 一発成功）
※描画前に自身でコード誤記を5箇所自己修正。
Gemini 3.5 Flash 圧倒的な表現力とUIの豪華さ
金色の質感やルビー軸受の発色が最もリッチ。操作パネルの作り込みも高評価。		 初期カメラワーク・ポーズ
寄りすぎたり直立不動だったりと、最初の1画面の構図で損をしがち。		 完璧（5/5 一発成功）
全題材でエラーを出さず一発で動作。
GPT-5.5 優れた初期構図（ミニマル志向）
ロボットアームなど、初期ポーズの「作業感」や見栄えは一番綺麗。		 深刻な構文バグの繰り返し
要件にないUIは足さず、全体的にミニマルな仕上がり。		 極めて低い（16世代中5本合格）
Three.jsの同一の記述ミスを11回連続で繰り返し、リトライが多発。
  • 「気が利く設計者」のClaude Fable 5: 言われなくてもギークが喜ぶ機能を勝手にてんこ盛りにしてくれる。
  • 「見た目重視のデザイナー」のGemini 3.5 Flash: 画作りとUIの見た目は一番リッチで、何より一発で動く打率の高さが魅力。
  • 「ミニマルだが不器用な職人」のGPT-5.5: ハマった時の構図は綺麗ですが、同じ凡ミスで何度もコードが壊れるため、動かすまでの手戻りが多い。

自分のことは「完璧」、ライバルには「深刻」「極めて低い」と書く Gemini、なかなか強気です（数字はぜんぶ本文どおりなので反論できません）。

おわりに

2Dの図解では「破綻なく描けるか」が主戦場でしたが、3Dでは「何を作り込むと嬉しいかを自分で決める力」と「動くコードを一発で出す力」の両方が試されます。15個の3Dシーンはすべてこのページに埋め込んであるので、ぜひ手元でグリグリ回して、スクリーンショットでは伝わらない差を確かめてみてください。

Enjoy, spin the models!