Three.js и Babylon.js: сравнение фреймворков WebGL

Сегодняшние веб-браузеры прошли долгий путь со времен сэра Тима Бернерса-Ли и его программного обеспечения Nexus. Благодаря фантастическим API-интерфейсам JavaScript, таким как WebGL, современные браузеры полностью способны воспроизводить продвинутую 2D и 3D-графику без помощи сторонних плагинов. Используя мощь выделенных графических процессоров, WebGL дает нашим веб-страницам доступ к динамическому затенению и реалистичной физике.

Как вы уже догадались, такие мощные API обычно имеют недостаток. WebGL, конечно, не исключение, и его недостаток проявляется в форме сложности. Не бойтесь, однако, поскольку мы исследовали две полностью функциональные платформы, которые призваны сделать вашу жизнь проще и, возможно, даже на ощупь более продуктивной при работе с WebGL.

Скромное происхождение 3D-фреймворков

Всегда популярный Three.js вместе с более новым Babylon.js предлагают веб-разработчикам абстрактную основу для создания многофункциональных творений WebGL — от анимированных логотипов до полностью интерактивных 3D-игр.

Three.js начал свою работу еще в апреле 2009 года и изначально был написан на ActionScript, а затем переведен на JavaScript. Будучи созданным до появления WebGL, Three.js обладает уникальным удобством модульного интерфейса рендеринга, позволяющего использовать его вместе с SVG и HTML5-элементом canvas в дополнение к WebGL.

Babylon.js, будучи относительным новичком, вышел на сцену летом 2013 года. Представленный вам умом в Microsoft, Babylon.js был представлен вместе с первой официальной поддержкой Internet Explorer 11 для API WebGL. Несмотря на происхождение из лабораторий Редмонда, Babylon.js (как и Three.js) поддерживает лицензию с открытым исходным кодом.

Тонкая разница в дизайне

И Three.js, и Babylon.js представляют собой простые в использовании библиотеки для работы со сложностями анимации WebGL.

Следуя сцене, рендереру, камере, объектам модели анимации, эти фреймворки используют аналогичные методы для использования 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>

Основное различие между ними заключается в их предполагаемом использовании. Хотя это может быть правдой, любой из этих фреймворков можно использовать для создания одной и той же 3D-анимации, важно знать, для чего каждая из них была создана.

Three.js был создан с одной целью: использовать веб-рендеры для создания трехмерной графики и анимации с улучшенным графическим процессором. Таким образом, эта структура использует очень широкий подход к веб-графике, не сосредотачиваясь на какой-либо отдельной нише анимации.

Этот гибкий дизайн делает Three.js отличным инструментом для веб-анимации общего назначения, такой как логотипы или приложения для моделирования (отличные примеры можно найти здесь ).

В то время как Three.js пытается привнести в таблицу WebGL широкий спектр анимационных функций, Babylon.js использует более целенаправленный подход. Первоначально разработанный как игровой движок Silverlight, Babylon.js сохраняет склонность к разработке веб-игр с такими функциями, как обнаружение столкновений и сглаживание. Как указывалось ранее, Babylon.js по-прежнему полностью поддерживает веб-графику и анимацию, о чем свидетельствуют демонстрации, размещенные на первой странице его веб-сайта .

Параллельная демонстрация технологий WebGL

Чтобы дополнительно продемонстрировать сходство и различие этих двух структур, давайте создадим быструю 3D-анимацию. Наш проект будет очень простым кубом с медленным вращением. Создавая эти два примера проектов, вы должны начать понимать, как две технологии постепенно расходятся и демонстрировать свои уникальные преимущества. С этого, давайте начнем.

 <div style="height:250px; width: 250px;" id="three"></div>

 var div = document.getElementById('three');

 <div style="height:250px; width: 250px;" id="babylon">
<canvas id="babylonCanvas"></canvas></div>

 var canvas = document.getElementById('babylonCanvas');

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

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

 var sceneT = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 400;

 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);

 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);

 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);

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

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