Three.jsは、 WebGLを使用してWebブラウザ上でアニメーション化された3Dコンピュータグラフィックスを作成・表示するための、クロスブラウザ JavaScriptライブラリおよびアプリケーションプログラミングインターフェース（API）です。ソースコードはGitHubのリポジトリでホストされています。[3]

概要

Three.jsは、独自のブラウザプラグインに頼ることなく、ウェブサイトの一部としてJavaScript言語を使用してグラフィック処理装置（GPU）で加速された3Dアニメーションを作成することを可能にします。[4] [5]これは、Web専用に作成された低レベルのグラフィックAPIであるWebGL [ 6]の登場により可能になりました。 [7]

Three.js、 Babylon.js、Verge3Dなどの高レベルライブラリを使用すると、従来のスタンドアロンアプリケーションやプラグインに必要な労力をかけずに、ブラウザで表示するための複雑な3Dコンピュータアニメーションを作成できます。[8]

歴史

Three.jsは、2010年4月にRicardo CabelloによってGitHubで初めてリリースされました。[2]このライブラリの起源は、 2000年代初頭の彼のデモシーンへの関与に遡ります。 [9]このコードは元々 Adobe Flashで使用されていたActionScript言語で開発され、後に2009年にJavaScriptに移植されました。Cabelloは、ActionScriptからの移行を正当化する2つの利点があると考えていました。第一に、JavaScriptはプラットフォーム独立性が高いこと。第二に、JavaScriptで書かれたアプリケーションは、Flashアプリケーションとは異なり、開発者が事前にコンパイルする必要がないことです。

Cabello のその他の貢献には、API 設計、CanvasRenderer、SVGRenderer があり、さまざまな貢献者によるコミットをプロジェクトにマージする責任を担っています。

WebGLの登場により、Paul BruntはThree.jsのレンダリングコードをコア自体ではなくモジュールとして設計していたため、新しいレンダリング技術を非常に容易に実装することができました。[10]初期の貢献者であるBranislav Uličnýは、自身のサイトにWebGLのデモを多数投稿した後、2010年にThree.jsの開発を始めました。彼はThree.jsのWebGLレンダラー機能をCanvasRendererやSVGRendererを超えるものにしたいと考えていました。[10]彼の主な貢献は、マテリアル、シェーダー、ポストプロセスです。

2011年3月にFirefox 4でWebGL 1.0が導入された直後、Joshua Kooが参加しました。彼は2011年9月にThree.jsで最初の3Dテキストデモを作成しました。[10]彼の貢献は主にジオメトリ生成に関するものです。

Three.jsはバージョン118以降、デフォルトでWebGL 2.0を使用します。以前のバージョンの標準は、WebGL1Rendererクラスを介して引き続き利用可能です。[11]

Three.jsはGitHub上で1950人以上の貢献者がいます。[12]

特徴

Three.jsには以下の機能が含まれています。[13]

  • 効果: アナグリフ、交差視差、視差バリア。
  • シーン: 実行時にオブジェクトを追加および削除する; フォグ
  • カメラ: パースペクティブと正投影; コントローラー: トラックボール、FPS、パスなど
  • アニメーション: アーマチュア、順方向運動学、逆方向運動学、モーフ、キーフレーム
  • ライト: アンビエントライト、方向ライト、ポイントライト、スポットライト; 影: 投影と受光
  • マテリアル: Lambert、Phong、スムーズシェーディング、テクスチャなど
  • シェーダー: 完全な OpenGL シェーディング言語 ( GLSL ) 機能へのアクセス:レンズフレア、深度パス、広範な後処理ライブラリ
  • オブジェクト: メッシュ、パーティクル、スプライト、ライン、リボン、ボーンなど、すべて詳細レベル付き
  • ジオメトリ: 平面、立方体、球、トーラス、3D テキストなど。修飾子: 旋盤、押し出し、チューブ
  • インポート/エクスポート: JSON、glTF、OBJ、USDZなどによるネイティブのシリアル化/逆シリアル化。
  • ユーティリティ:視錐台、マトリックス、クォータニオン、UVなどを含む、時間と 3D 数学関数の完全なセット
  • サポート: APIドキュメントは現在作成中です。公開フォーラムとWikiはフル稼働しています。
  • 例: 150 以上のコーディング例ファイルに加え、フォント、モデル、テクスチャ、サウンド、その他のサポート ファイル
  • デバッグ: Stats.js、[14] WebGLインスペクター、[15] Three.jsインスペクター[16]
  • WebXRによる仮想現実と拡張現実[17]
  • 物理ベースレンダリング（PBR）：MeshStandardMaterialやMeshPhysicalMaterialのような物理的に正確なマテリアルのサポート[18] [19]
  • インスタンス化：InstancedMeshを使用して数千の繰り返しオブジェクトを効率的にレンダリングする[20]
  • 後処理：ブルーム、被写界深度、アウトライン、モーションブラー、SSAO、FXAAなどのエフェクトを備えた組み込みの後処理パイプライン[21] [22]
  • 組み込みエディタ：3Dシーンの構築とエクスポートにオンラインで利用できるグラフィカルシーンエディタ[23]
  • インタラクティブコントロール：ユーザーインタラクションとナビゲーションのためのOrbitControls、DragControls、TransformControls、PointerLockControlsなどの組み込みコントロール[24] [25]
  • 代替レンダラー:WebGLRenderer [26]に加えて、Three.jsはSVGRenderer [27]とCSS3DRenderer [28]も提供しており、WebGPURendererの実験的なサポートも提供しています。

Three.js は、WebGL 1.0 または WebGL 2.0 をサポートするすべてのブラウザーで実行されます。

Three.jsはMITライセンスの下で利用可能です。[1]

参照

参考文献

  1. ^ abc "Three.js/license". github.com/mrdoob . 2012年5月20日閲覧。
  2. ^ ab "最初のコミット". github.com/mrdoob . 2012年5月20日閲覧。
  3. ^ Mr.doob (2021-03-04), mrdoob/three.js 、2021年3月4日閲覧
  4. ^ O3D
  5. ^ Unity（ゲームエンジン）
  6. ^ 「Khronos、WebGL 1.0最終仕様を発表」Khronos Group 2011年3月3日. 2012年6月2日閲覧。
  7. ^ "WebGL". The Khronos Group . 2011年7月19日. 2022年1月22日閲覧。
  8. ^ Crossley, Rob (2010年1月11日). 「調査：平均開発コストは2800万ドルにも」Intent Media Ltd. 2010年1月13日時点のオリジナルよりアーカイブ。 2012年6月2日閲覧。
  9. ^ NVScene (2015年3月24日). 「NVScene 2015 セッション: Reinventing The Wheel - One Last Time (Ricardo Cabello)」. YouTube.
  10. ^ abc 「Three.jsホワイトペーパー」. Github.com. 2012年5月21日. 2013年5月9日閲覧。
  11. ^ 「リリース r118 · mrdoob/three.js」（プレスリリース） . 2023年5月24日閲覧。
  12. ^ Mr.doob (2020-08-03), mrdoob/three.js 、2025年4月13日閲覧。
  13. ^ mrdoob (2012年11月26日). 「Features mrdoob/three.js Wiki GitHub」. Github.com . 2013年5月9日閲覧。
  14. ^ "Stats.js". Github.com . 2013年5月9日閲覧。
  15. ^ “WebGL Inspector”. Benvanik.github.com. 2023年3月14日時点のオリジナルよりアーカイブ。2013年5月9日閲覧。
  16. ^ “Three.js Inspector Labs”. Zz85.github.com. 2023年1月27日時点のオリジナルよりアーカイブ。2013年5月9日閲覧。
  17. ^ 「three.js の例」。threejs.org。
  18. ^ 「MeshStandardMaterial – three.js ドキュメント」。threejs.org。
  19. ^ 「MeshPhysicalMaterial – three.js ドキュメント」。threejs.org。
  20. ^ 「InstancedMesh – three.js ドキュメント」。threejs.org。
  21. ^ 「EffectComposer – three.js ドキュメント」。threejs.org。
  22. ^ 「後処理の例 – three.js」。threejs.org。
  23. ^ 「three.js エディター」。threejs.org。
  24. ^ 「OrbitControls – three.js ドキュメント」。threejs.org。
  25. ^ 「TransformControls – three.js ドキュメント」。threejs.org。
  26. ^ 「WebGLRenderer – three.js ドキュメント」threejs.org。
  27. ^ 「SVGRenderer – three.js ドキュメント」threejs.org。
  28. ^ 「CSS3DRenderer – three.js ドキュメント」threejs.org。

さらに読む

  • Dirksen, Jos (2013). Learning Three.js: The JavaScript 3D Library for WebGL. イギリス: Packt Publishing. ISBN 9781782166283. 2014年7月8日時点のオリジナルよりアーカイブ。2013年10月22日閲覧。
  • パリシ、トニー (2012). WebGL Up and Running . セバストーポル: Oreilly & Associates Inc. ISBN 9781449323578。
  • セイデリン、ジェイコブ (2012). HTML5ゲーム：HTML5、CSS3、WebGLで楽しく作る. 英国ウェスト・サセックス州チチェスター: John Wiley & Sons. pp.  412– 414. ISBN 978-1119975083。- 「Three.jsは低レベルの詳細を処理することでゲーム開発を容易にします」
  • ウィリアムズ、ジェームズ (2012). 『HTML5ゲームプログラミングを学ぶ：Canvas、SVG、WebGLを使ったオンラインゲーム構築の実践ガイド』アッパーサドルリバー、ニュージャージー州: アディソン・ウェスリー. pp. 117–120, 123– 131, 136, 140– 142. ISBN 978-0321767363。
  • ラーシュ、ジョン (2011). Smashing WebKit . チチェスター: Wiley. pp. 181, 182, 216. ISBN 978-1119999133。
Wikimedia Commons にはThree.jsに関連するメディアがあります。
  • 公式サイト