Three.jsは、もはや「おしゃれなWebサイト」だけのものではありません。
2025〜2026年、Three.jsは大きな転換点を迎えました。WebGPUがすべての主要ブラウザで利用可能になり、「バイブコーディング」がゲーム開発を文化現象に変え、そしてThree.jsは数百万のデータポイントをリアルタイムで処理するアプリケーションを動かすようになりました。JavaScriptの3Dライブラリに誰もが期待していた範囲を、はるかに超えています。
この記事では、何が変わったのか、なぜそれが重要なのか、そしてWebで3Dを構築する開発者や企業にとって何を意味するのかを解説します。
この記事の対象者: 新しいプロジェクトでThree.jsを検討している開発者、技術的な意思決定を行うリーダー、「Three.js 最新バージョン 2025」などを検索している方。
要点まとめ
- WebGPUがすべての主要ブラウザでサポートされるようになりました。iOSのSafari含む（2025年9月）。もう待つ必要はありません。
- NPM週間ダウンロード数は270万に到達—Babylon.jsの270倍。もはや競争相手は存在しません。
- 「バイブコーディング」が2025年のコリンズ辞書年間ワードに選出。Three.jsはAI支援ゲーム開発の定番ライブラリとなっています。
- Three.js r171でWebGPUが本番環境対応になりました。設定不要のインポート：
import { WebGPURenderer } from 'three/webgpu' - Three.jsは本格的なアプリケーションにも対応（Webサイトだけでなく）—私たちはWebGLからWebGPUへの移行で100倍のパフォーマンス向上を達成した事例があります。
- 物理的なインスタレーションでもThree.jsが活躍—大阪万博2025での100万パーティクルのインタラクティブ作品を含む。
1. 数字で見る：Three.jsがWeb 3Dを席巻
まずはデータを見てみましょう：
NPMダウンロード数（週間）
| ライブラリ | 週間ダウンロード数 |
|---|---|
| Three.js | 2,700,000 |
| Babylon.js | 約10,000 |
| PlayCanvas | 約8,000 |
Three.jsのダウンロード数は、Babylon.jsの270倍、PlayCanvasの337倍です。
これはもはや競争ではありません。Three.jsがWebでの3Dのデファクトスタンダードなのです。
なぜここまで圧倒的なのか？
- エコシステムの厚み: React Three Fiber、Drei、そして数百ものコミュニティツール
- ドキュメントとサンプル: 300以上の公式サンプル、無数のチュートリアル
- フレームワーク統合: React、Vue、Svelte、バニラJSへのファーストクラスサポート
- 求人市場: 2025年、Three.js/WebGLスキルを求める求人が25%増加
エコシステム効果は自己強化的です。開発者が増えればツールが増え、チュートリアルが増え、Stack Overflowの回答が増える—それがさらに開発者を引き寄せます。
2. WebGPU：待ちの時代は終わった
何年もの間、WebGPUは「もうすぐ準備完了」でした。開発者は待ちました。Appleは対応を見送り続けました。そしてWebGL—10年以上前のものであるにもかかわらず—唯一の実用的な選択肢であり続けました。
それが2025年9月に変わりました。
Safari 26：最後のピース
AppleがSafari 26（macOS、iOS、iPadOS、visionOS）でWebGPUサポートを出荷したとき、最後の砦が落ちました。WebGPUは今やどこでも利用可能です：
| ブラウザ | WebGPUサポート |
|---|---|
| Chrome / Edge | v113以降（2023年） |
| Firefox | v141以降（Windows）、v145以降（macOS ARM） |
| Safari | v26以降（2025年9月） |
初めて、WebGPUアプリケーションを出荷してすべてのユーザーで動作することを期待できるようになりました。
WebGPUが実際に変えるもの
WebGPUは単に「WebGLの新しいバージョン」ではありません。アーキテクチャが根本的に異なります：
- コンピュートシェーダー: 汎用GPUコンピューティングを実行—物理演算、ML推論、データ処理
- より良いリソース管理: GPUメモリと状態の明示的な制御
- 現代的なAPI設計: GPUの実際の動作に合わせて構築（OpenGLからの変換ではなく）
- パフォーマンス: ドローコールの多いシナリオで最大10倍の改善
結果：以前は「可能だが重い」だった体験がスムーズになります。
Three.jsが簡単にした
Three.jsチームは単にWebGPUサポートを追加しただけでなく、シームレスにしました。
リリースタイムライン:
| リリース | 日付 | 主な変更点 |
|---|---|---|
| r170 | 2025年8月 | WebGPUモジュールをaddonsに移動、GLTFLoaderサポート |
| r171 | 2025年9月 | 設定不要のWebGPUインポート、React Three Fiber統合 |
| r180 | 2025年9月 | テクスチャバインディングの改善、深度テクスチャの修正 |
| r182 | 2025年12月 | 現在の安定版 |
マイルストーンはr171でした。それ以前は、WebGPUの使用には設定やビルドツールの回避策が必要でした。r171以降：
import { WebGPURenderer } from 'three/webgpu';
これだけです。バンドラー設定不要。ポリフィル不要。古いブラウザではWebGL 2に自動フォールバックします。
3. バイブコーディング：なぜ皆がThree.jsでゲームを作っているのか
2025年2月、Andrej Karpathy（OpenAI共同創設者、元TeslaのAIリーダー）が新しいプログラミング方法についてツイートしました。彼はそれを**「バイブコーディング」**と呼びました—コードを1行ずつ書くのではなく、AIツールを使って欲しいものを説明することでコードを生成する方法です。
12月までに、「バイブコーディング」は2025年のコリンズ辞書年間ワードに選ばれました。
なぜThree.jsがバイブコーディングのライブラリになったのか
Three.jsはこの新しいパラダイムに最適であることが判明しました：
- シンプルなセットアップ: JavaScriptだけ。サーバー、データベース、複雑なツールは不要。
- 即座のフィードバック: 変更がすぐにブラウザにレンダリングされる。
- 視覚的な出力: AIが正しく（または興味深く間違えて）動作しているかを目で確認できる。
- 寛容なAPI: Three.jsがGPUの複雑さを抽象化し、失敗モードを減らす。
バイブコーディング・ゲームジャム
2025年、Pieter Levelsが初のバイブコーディング・ゲームジャムを開催しました：AIツールを使って48時間以内にプレイ可能なゲームを作る。
結果：
- 1,000以上のゲームが応募
- 審査員にはmrdoob（Three.js作者）とAndrej Karpathyが参加
- 1位：「The Great Taxi Assignment」—AIアシスタンスのみで作られたレトロ3Dタクシーシム
2025年7月までに、ウォール・ストリート・ジャーナルはプロのエンジニアが商用プロジェクトでバイブコーディングを採用していると報じました。
これが意味すること
デフォルトの3DライブラリとしてのThree.jsの地位は、AIツールによってさらに強化されています。誰かがClaudeやChatGPTに「3Dゲームを作って」と頼むと、生成されるコードはThree.jsを使っています。
4. 海外テック企業の3D Web投資
海外の大手テック企業も、3D Webエクスペリエンスに積極的に投資しています。
その代表例がShopifyです。2025年、Shopifyは新機能発表ページ「Shopify Editions Winter 2026」で、没入型の3D Webエクスペリエンスを採用しました。スクロールに連動した3Dアニメーション、インタラクティブな要素、そしてWebGPUを活用した滑らかなパフォーマンス—これらは単なる「おしゃれなサイト」ではなく、ビジネスメッセージを伝える強力な手段として機能しています。
このトレンドは、日本企業にとっても重要な示唆を与えます。グローバル市場で競争するためには、Webサイトも「見せる」から「体験させる」へと進化する必要があります。
5. Webサイトを超えて：Three.jsで本格アプリケーション
驚くべきことに、Three.js + WebGPUは数百万のデータポイントを処理するアプリケーションでも実用的になりました。
事例：Segments.ai
私たちはSegments.aiの3Dセグメンテーションプラットフォームを、WebGLからWebGPUへ移行するサポートを行いました。
Segments.aiの事業: LiDAR点群データのラベリングツールを提供—自動運転AI訓練に不可欠。ユーザーは数百万の3Dポイントを含むデータセットを表示、ナビゲート、選択する必要があります。
課題: WebGLでは追いつかなくなっていました。インタラクションが遅く、複雑なシーンではフレーム落ちが発生。
WebGPU移行後:
- 重い操作で100倍のパフォーマンス向上
- 100万ポイントのデータセットでもスムーズなインタラクション
- 選択・アノテーションツールの強化
この技術的改善は、自動運転業界の主要企業との契約獲得にも貢献しました。
なぜこれが重要か
Three.js + WebGPUは、マーケティングサイトやプロダクトコンフィギュレーターだけのものではありません。パフォーマンスが妥協できないプロフェッショナルツールを動かせる能力を持つようになりました。
6. ブラウザを超えて：インタラクティブインスタレーション
Three.jsはラップトップのブラウザタブを必要としません。JavaScriptが動くところならどこでも動きます—美術館、小売店、公共施設の大型ディスプレイを含めて。
事例：大阪万博2025での北斎
私たちは大阪万博2025で、来場者が自分の体で北斎の大波を操作できるインタラクティブインスタレーション**「Waves of Connection」**を制作しました。
技術的なセットアップ：
- WebGPU + Three.jsでレンダリング
- 約100万パーティクルをリアルタイムでシミュレーション
- Kinect深度カメラで複数人の身体追跡
- 98インチ4Kディスプレイで没入感のあるスケール
VRヘッドセットなし。コントローラーなし。来場者はただ動くだけ—そして波が反応しました。
7日間の展示で10,000以上のインタラクションがありました。子供たちは何度も列に並び直しました。最初は戸惑っていた大人も、最後には両腕を振って笑っていました。
これが示すもの
Three.jsのスキルはWeb以外にも応用できます。同じコードベースパターン、同じパーティクルシステム、同じシェーダーテクニック—それらは物理的なインスタレーション、キオスク、デジタルサイネージ、没入型体験にも機能します。
7. 次に来るもの：注目すべきトレンド
WebXRの拡大
WebXR（ブラウザでのVR/AR標準）が成熟しています。Three.jsはこれを直接サポートしており、ヘッドセットが普及するにつれ、ブラウザベースの没入型体験が成長するでしょう。
AI生成アセット
NVIDIA GauGANやAdobe Substance 3D Samplerなどのツールがテクスチャやマテリアルの生成を自動化しています。Three.jsプロジェクトはAI生成アセットをますます取り入れ、制作時間を削減するでしょう。
ML用コンピュートシェーダー
WebGPUのコンピュートシェーダーにより、ブラウザでMLモデルをGPU上で直接実行できます。Transformers.jsなどのライブラリがすでにこれを活用しています。Three.jsプロジェクトでもリアルタイムエフェクトのためのローカルAI推論が統合されることが予想されます。
8. Utsuboについて
Utsuboは、以下を専門とするインタラクティブクリエイティブスタジオです：
- Web3D体験: ブランドサイト、プロダクトコンフィギュレーター、没入型ストーリーテリング
- インタラクティブインスタレーション: 美術館、小売店、イベント、公共空間
- WebGPU開発: リアルタイム3Dを必要とする高性能アプリケーション
主要ブランドや文化機関と協働してきました。私たちのプロジェクトはAwwwards、FWA、The Webby Awardsで認められています。
9. ご相談ください
Three.jsプロジェクトを計画している場合—Webサイト、アプリケーション、物理インスタレーションを問わず—目標と技術的アプローチについて話し合うため、無料30分コンサルテーションを提供しています。
以下についてお手伝いできます：
- WebGLからWebGPUへの移行戦略
- 複雑なシーンのパフォーマンス最適化
- インタラクティブインスタレーションの設計と開発
- フルスタック3D Webエクスペリエンス
まとめ：プロジェクトへの影響
2026年のThree.jsは3つの変化で定義されます：WebGPUが全ブラウザで本番対応になったこと、AI支援開発が参入障壁を下げたこと、そしてライブラリがWebサイトを超えて物理インスタレーションに拡大したことです。
新規プロジェクトの場合： WebGPUで始めてください。自動フォールバックがあるのでリスクはゼロです。
既存プロジェクトの場合： パフォーマンスの限界に達していない限り、急いで移行する必要はありません。移行すれば、複雑なシーンで2〜10倍の改善が期待できます。
採用とチームについて： Three.jsのスキルは、Web、モバイル、物理インスタレーションの仕事で共通して活用できます。週270万ダウンロードは、成熟した充実したエコシステムの証です。
参考文献
よくある質問
2025〜2026年のThree.jsで何が新しくなりましたか？
最大の変化は、本番環境対応のWebGPUサポートです。r171（2025年9月）以降、設定不要でWebGPURendererをインポートできます。Safari 26のWebGPUサポート追加と相まって、すべてのユーザーにWebGPUを提供できるようになりました。その他の改善点として、TypeScriptサポートの向上、ポストプロセッシングエフェクトの強化、React Three Fiber周りのエコシステム成長が続いています。
WebGPUは本番環境で使えますか？
はい。2025年9月時点で、WebGPUはChrome、Edge、Firefox、Safari（iOS含む）でサポートされています。Three.jsは古いブラウザ向けにWebGL 2への自動フォールバックを提供するため、互換性を損なうことなくWebGPUを採用できます。新規プロジェクトはWebGPUで開始し、既存プロジェクトはパフォーマンス向上が投資に見合う場合に移行してください。
WebGLからWebGPUに移行すべきですか？
ユースケースによります。現在のWebGLアプリケーションがスムーズに動作していて、パフォーマンスの限界に達していないなら、緊急に移行する必要はありません。新しいものを構築するなら、WebGPUで始めてください。パフォーマンスの壁にぶつかっている（複雑なシーン、多くのドローコール、重いコンピュート）なら、移行で2〜10倍の改善が得られる可能性があります。
バイブコーディングとは何ですか？
バイブコーディングとは、開発者がAIアシスタント（Claude、ChatGPT、Cursorなど）を使い、欲しいものを自然言語で説明することでコードを生成するプログラミングアプローチです。この用語は2025年2月にAndrej Karpathyによって作られ、コリンズ辞書の年間ワードに選ばれました。Three.jsはセットアップが簡単で、即座に視覚的なフィードバックが得られ、AIモデルが訓練されている豊富なドキュメントがあるため、バイブコーディングで特に人気があります。
Three.jsはブラウザの外で動きますか？
はい。Three.jsはJavaScriptが動くところならどこでも動きます。私たちは大型ディスプレイ、キオスク、インタラクティブ展示での物理インスタレーションに使用しています。レンダリングはローカルマシン上で行われ（Webブラウザタブ経由ではなく）、コードベースは標準のThree.jsです。つまり、スキルとコンポーネントはWebプロジェクトと物理インスタレーションの間で直接転用できます。
Three.jsプロジェクトの費用はどのくらいですか？
スコープによって大きく異なります。シンプルなプロダクトコンフィギュレーターなら200万〜450万円程度。複数の3Dシーンを持つ没入型ブランドサイトは通常600万〜1,500万円。美術館やイベント向けのインタラクティブインスタレーションは、ハードウェア、規模、カスタマイズに応じて750万〜3,000万円以上になることがあります。具体的なニーズについてはコンサルテーションでお気軽にご相談ください。
大阪・心斎橋発。記憶に残るWeb体験を。
