今天的web瀏覽器已經走了很長的路。由於出色的JavaScript WebGL api ,現代瀏覽器完全有能力在沒有第三方外掛幫助的情況下呈現先進的2 d和3 d圖形。利用專用的圖形處理器的效能,WebGL使我們訪問的網頁實現動態陰影和現實的物理。

正如你可能已經猜到的,如此強大的api通常有一個缺點。WebGL當然也不例外,其缺點是形式的複雜性。不要害怕,然而,當我們探索兩個完全有能力框架的目標是,讓你的生活更容易,甚至可能使用WebGL時更有效率。

三維框架的出身

曾經流行的 Three.js(http://threejs.org/)隨著新的 Babylon.js(http://www.babylonjs.com/

Three.js 早在2009年4月開始出生,在換成JavaScript語言之前最初是用ActionScript。在WebGL的引入之前已經建立了three.js獨特方便的模組化渲染介面，並在不用WebGL的情況下允許它使用SVG和HTML5畫布元素。

Babylon.js, 是相對陌生的來者, 它出生在2013年的夏天。由微軟心中釋出了Babylon.js和首次正式支援WebGL API的Internet Explorer 11。

設計的細微差異

Three.js and Babylon.js 兩者都提供了易於使用的介面來處理錯綜複雜的WebGL動畫。

利用在HTML一樣簡單的一行指令碼語句引入相應的JavaScript檔案。注意:Babylon.js的依賴性,需要引入開源的hand.js。

Three.js:

<script src="three.js"></script>

Babylon.js:

<script src="babylon.js"></script>
<script src="hand.js"></script>

兩者之間的主要區別在於他們的預期用途。雖然兩者都可以產生相同的效果，但是瞭解他們兩個的過程是很重要的。

Three.js的一個創作目標是:利用基於web的渲染器建立GPU增強的3d圖形和動畫。這樣,這個框架使用非常廣泛的方法web圖形,而不需要不關注動畫的任何一個細節。這種靈活的設計使得Three.js成為一個好工具(可以在

儘管Three.js試圖給WebGL帶來許多的動畫方式,而Babylon.js採用更有針對性的方法。最初設計作為一個Silverlight遊戲引擎,Babylon.js的維護傾向於基於web的遊戲開發與碰撞檢測和抗鋸齒等特性。在其官網http://www.babylonjs.com/上可以看到許多的例子。

並排比較

為進一步體現這兩個框架的相似點和不同點,讓我們快速構建一個3d動畫。我們的專案的選擇將會是一個超級簡單的立方體緩慢旋轉的應用。在建立這兩個示例專案,你應該開始瞭解這兩種技術和逐漸發現他們獨特的優勢。讓我們開始吧。

第一個任務是初始化一個空白的畫布，以便中包含我們的3 d動畫。

Three.js:

<div style="height:250px; width: 250px;" id="three"></div>
var div = document.getElementById('three');

Babylon.js:

var canvas = document.getElementById(‘babylonCanvas’);
With Three.js we simply create an empty div as our container for the animation. Babylon.js on the other hand makes use of an explicitly defined HTML5 canvas to hold its 3D graphics.在使用Three.js時我們簡單地建立一個空的div容器。而Babylon.js利用顯式定義的HTML5 canvas來開始3D影象。

接下來,我們載入渲染器然後準備場景並繪製到畫布上。

Three.js:

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
div.appendChild(renderer.domElement);

Babylon.js:

var engine = new BABYLON.Engine(canvas, true);

這一步沒有太多東西,我們只是初始化渲染器並把它們貼到我們的畫布上。

下一步我們設定一個場景來裝下我們的相機和立方體cube。

Three.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加入方向性光源，同時將它附加到我們場景中，避免待會我們只能盯著漆黑一片的動畫。

我們的畫布,場景和相機都已經準備好了，在渲染和動畫起來之前我們只需要加入方塊。

Three.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:

var box = BABYLON.Mesh.CreateBox("box", 3.0, sceneB);
var material = new BABYLON.StandardMaterial("texture", sceneB);
box.material = material;
material.diffuseTexture = new BABYLON.Texture("texture.gif", sceneB);

First, we create our cube objects of the specified size and then create our material/mesh (think texture) that will be painted onto the cubes. Any image file will work for the texture and both frameworks support mesh exports from 3D modeling tools like Blender (http://www.blender.org/).

首先,我們建立指定大小的立方體物件,然後建立我們的材質/網格，把材質塗在立方體的各個面。任何影象檔案都可以匯入紋理texture,而且兩個框架都支援從3D模型工具軟體(如 Blender)中匯出模型。

在最後一步,我們新增一個緩慢的旋轉動畫,然後渲染場景。

Three.js:

function animate() {
     requestAnimationFrame(animate);
     mesh.rotation.x += 0.005;
     mesh.rotation.y += 0.01;
     renderer.render(sceneT, camera);
}

Babylon.js:

engine.runRenderLoop(function () {
     box.rotation.x += 0.005;
     box.rotation.y += 0.01;
     sceneB.render();
     });

Three.jsjs和Babylon.js兩者使用動畫或渲染迴圈去更新一個新的旋轉角度內容到畫布上。您還將注意到Three.js與Babylon.js稍有不同。我們的最終產品是兩個立方體在半空中輕輕旋轉。

後言
兩個WebGL框架基於相同的Web圖形介面,但專注於增強的不同方面,。

最後,這兩個相對年輕的框架使web開發人員產生了能夠更容易地利用強大的3 d WebGL的機會。這樣,任何有興趣進行3d web開發的同學，當然應該仔細看看這前沿技術。