コアポイント
今日のWebブラウザは、ティムバーナーズirリーと彼のNexusソフトウェア時代以来、大きな進歩を遂げています。 WebGLのような優れたJavaScript APIのおかげで、最新のブラウザは、サードパーティのプラグインを使用して高度な2Dおよび3Dグラフィックスを完全にレンダリングできます。専用のグラフィックスプロセッサのパワーを活用することにより、WebGLを使用すると、Webページが動的なシェーディングと現実的な物理効果にアクセスできます。ご想像のとおり、このような強力なAPIは通常、欠点を引き起こします。もちろん、WebGLも例外ではなく、その欠点はその複雑さにあります。しかし、心配しないでください。WebGLを使用するときに、それをより簡単に、さらに効率的にするために設計された2つの強力なフレームワークを検討しました。
3Dフレームワークの起源
人気のあるThree.jsと新しいBabylon.jsは、アニメーションのロゴから完全にインタラクティブな3Dゲームに至るまで、Web開発者が機能豊富なWebGL作品を作成するための抽象的な基盤を提供します。 Three.jsは2009年4月に開始され、もともとActionScriptで書かれ、後にJavaScriptに翻訳されました。 WebGLが導入される前に作成されて以来、Three.jsにはモジュラーレンダリングインターフェイスのユニークな利点があり、WebGLに加えてSVGおよびHTML5のキャンバス要素で動作します。 Babylon.JSは、2013年の夏に逃亡者としてリリースされました。 Microsoft、Babylon.JS、Internet Explorer 11によって開発された11は、初めてWebGL APIを正式にサポートしています。レドモンドの研究室での起源にもかかわらず、Babylon.JS（および3.JS）は依然としてオープンソースライセンスを維持しています。
微妙なデザインの違い
3.jsとbabylon.jsはどちらも、webglアニメーションの複雑さを処理するための使いやすいライブラリを提供します。次のシーン、レンダラー、カメラ、およびオブジェクトアニメーションモデルでは、これらのフレームワークはWebGLの使用方法が非常に似ています。 HTMLでそれらを使用することは、対応するJavaScriptファイルをリンクするのと同じくらい簡単です。注：Babylon.jsにはいくつかの依存関係があり、オープンソースHand.jsも含める必要があります。
3.js：
<🎜>
babylon.js：
<🎜> <🎜>
これら2つのフレームワークの主な違いは、その目的の使用です。両方のフレームワークを使用して同じ3Dアニメーションを作成できますが、各フレームワークの作成目標を理解することが重要です。 Three.jsには、Webベースのレンダラーを使用してGPU強化3Dグラフィックとアニメーションを作成するという目標が1つしかありません。したがって、このフレームワークは、単一のアニメーションフィールドに焦点を当てることなく、Webグラフィックスに対する非常に広範なアプローチを採用しています。この柔軟なデザインにより、Three.jsは、ロゴやモデリングアプリケーションなどのユニバーサルWebアニメーションに理想的なツールになります。 Three.JSはWebGLに幅広いアニメーション機能を提供しようとしますが、Babylon.JSはよりターゲットを絞ったアプローチを取ります。もともとSilverlightゲームエンジンとして設計されたBabylon.JSは、依然としてWebベースのゲーム開発と衝突検出やアンチエイリアスなどの機能を好みます。前述のように、Babylon.jsは依然として一般的なWebグラフィックとアニメーションが完全に能力があります。
webglテクノロジーの並んでデモンストレーション
これら2つのフレームワークの類似性と相違点をさらに実証するために、高速3Dアニメーションを構築しましょう。選択したアイテムは、非常にシンプルなキューブで、ゆっくりと回転します。これら2つのサンプルプロジェクトを作成するとき、これらの2つのテクノロジーが徐々に分岐し、独自の強みを実証する方法を理解し始める必要があります。始めましょう。ほぼすべてのタイプの創造的なプロジェクトを構築する最初のステップは、3Dアニメーションを含む空白のキャンバスを含むことです。
3.js：
<div style="height:250px; width: 250px;" id="three"></div>
var div = document.getElementById('three');babylon.js：
<div style="height:250px; width: 250px;" id="babylon"> <canvas id="babylonCanvas"></canvas> </div>
var canvas = document.getElementById('babylonCanvas');3つのjsでは、アニメーションコンテナとして空のdivを作成する必要があります。一方、Babylon.jsは、明確に定義されたHTML5キャンバスを使用して3Dグラフィックを保存します。次に、レンダラーをロードします。レンダラーは、シーンの準備とキャンバスに描画する責任があります。
3.js：
var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); div.appendChild(renderer.domElement);
babylon.js：
var engine = new BABYLON.Engine(canvas, true);
ここではあまりにも派手なものはありません。レンダラー（Babylon.jsの場合のエンジン）を初期化し、キャンバスに取り付けます。私たちの次のステップは、カメラとキューブを収容するためのシーンをセットアップするため、もう少し複雑になりました。
3.js：
var sceneT = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000); camera.position.z = 400;
babylon.js：
var sceneB = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera
("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), sceneB);
sceneB.activeCamera.attachControl(canvas);
var light = new BABYLON.DirectionalLight
("light", new BABYLON.Vector3(0, -1, 0), sceneB);
light.diffuse = new BABYLON.Color3(1, 0, 0);
light.specular = new BABYLON.Color3(1, 1, 1);ここでは、ほぼ同じ方法でシーンを作成し、カメラを実装します（両方のフレームはさまざまな種類のカメラをサポートします）。そこから実際に作成されたシーンを表示します。カメラに渡されたパラメーターは、視野、アスペクト比、深さなど、カメラの視聴角のさまざまな詳細を決定します。また、Babylon.jsの方向アライトを含め、後で暗いアニメーションを見るのを避けるために、私たちのシーンに添付しました。
キャンバス、シーン、カメラを使用すると、レンダリングとアニメーションの前にキューブ自体を描くだけです。
3.js：
var cube = new THREE.CubeGeometry(100, 100, 100);
var texture = THREE.ImageUtils.loadTexture('texture.gif');
texture.anisotropy = renderer.getMaxAnisotropy();
var material = new THREE.MeshBasicMaterial({ map: texture });
var mesh = new THREE.Mesh(cube, material);
sceneT.add(mesh);babylon.js：
<🎜>
最初に、指定されたサイズのキューブオブジェクトを作成し、次にキューブに描画される材料/メッシュ（テクスチャを考えてください）を作成します。任意の画像ファイルはテクスチャとして使用でき、どちらのフレームワークもBlenderなどの3Dモデリングツールからのメッシュエクスポートをサポートしています。最後のステップでは、わずかな回転をアニメーション化してから、シーンをレンダリングします。
3.js：
<🎜> <🎜>
babylon.js：
<div style="height:250px; width: 250px;" id="three"></div>
Three.jsとbabylon.jsはどちらもアニメーションまたはレンダリングループを使用してキャンバスを更新し、新しい回転グラフィックを描画します。また、3つのjsがBabylon.jsとはわずかに異なることに気付くでしょう。これは、レンダリング時にカメラを取り付けます。私たちの最終製品は、空気中を優しく回転する2つの立方体です。とてもシンプルですよね？
2つのフレームのストーリー
それだけです。 2つの非常に強力なWebGLフレームワークは同じ基盤で構築されていますが、強化されたWebグラフィックのさまざまな側面に焦点を当てています。次のシーン、レンダラー、カメラ、オブジェクトパラダイムの両方で、彼らのアプローチがアニメーションでどれほど似ているかを直接見ました。類似点にもかかわらず、Babylon.JSは、エンジンやカスタム照明などの従来のゲームエンジンのニーズに焦点を当てることにより、巧妙に区別しています。最終的に、これら2つの比較的若いフレームワークにより、Web開発者はWebGLが提供する強力な3D機会を簡単に利用できます。したがって、3D Web開発に興味のある人なら誰でも、この最先端の技術を慎重に研究する必要があります。
（これには、デモコードをダウンロードするためのzipファイルリンクが含まれている必要があります）
（Three.jsとBabylon.jsの比較に関するよくある質問をここに含める必要があります）スペースの制限のため、FAQセクション全体をここに追加することはできません。 ただし、提供された元のテキストのFAQセクションに基づいて、より簡潔で明確なバージョンに再編成して磨くことができます。
以上がThree.jsおよびBabylon.js：WebGLフレームワークの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
