mata teras

Three.js dan Babylon.js adalah kedua-dua rangka kerja WebGL yang kuat yang menyediakan pemaju web dengan asas abstrak untuk mencipta karya WebGL yang kaya dengan ciri-ciri seperti logo animasi dan permainan 3D interaktif sepenuhnya.
Three.js (bermula pada tahun 2009) bertujuan untuk mewujudkan grafik dan animasi 3D yang dipertingkatkan dengan GPU dengan penghantar berasaskan web, menjadikannya alat yang ideal untuk animasi web sejagat. Babylon.js (yang dilancarkan oleh Microsoft pada tahun 2013) mengambil pendekatan yang lebih disasarkan, memberi tumpuan kepada pembangunan permainan berasaskan web, dan ciri-ciri seperti pengesanan perlanggaran dan anti-aliasing.
Kedua -dua bingkai mengikuti adegan, penerima, kamera, model animasi objek dan boleh digunakan untuk membuat animasi 3D yang sama. Walau bagaimanapun, Babylon.js membezakan dirinya dari tiga.js dengan memberi tumpuan kepada keperluan enjin permainan tradisional, seperti enjin dan pencahayaan tersuai.
Walaupun kedua -dua.js dan Babylon.js menawarkan prestasi tinggi, tiga.js terkenal dengan kesederhanaan dan kemudahan penggunaannya, sesuai untuk pemula atau projek kecil; Untuk projek yang lebih besar dan lebih kompleks.

Pelayar web hari ini telah membuat kemajuan yang besar sejak Sir Tim Berners Lee dan era perisian Nexusnya. Terima kasih kepada API JavaScript yang sangat baik seperti WebGL, pelayar moden sepenuhnya mampu memberikan grafik 2D dan 3D maju tanpa plugin pihak ketiga. Dengan memanfaatkan kuasa pemproses grafik yang berdedikasi, WebGL membolehkan laman web kami untuk mengakses teduhan dinamik dan kesan fizikal yang realistik. Seperti yang anda fikirkan, API yang kuat seperti biasanya membawa kelemahan. WebGL tentu saja tidak terkecuali, kelemahannya terletak pada kerumitannya. Tetapi, jangan risau, kami telah meneroka dua kerangka kuat yang direka untuk memudahkan dan lebih efisien apabila menggunakan WebGL.

asal rangka 3D

Tiga.js yang popular dan Babylon.js yang lebih baru menyediakan asas abstrak untuk pemaju web untuk membuat kerja-kerja webgl yang kaya dengan ciri dari logo animasi ke permainan 3D interaktif sepenuhnya. Tiga.js bermula pada bulan April 2009 dan pada asalnya ditulis dalam ActionScript dan kemudian diterjemahkan ke dalam JavaScript. Oleh kerana ia dibuat sebelum WebGL diperkenalkan, tiga.js mempunyai kelebihan unik antara muka rendering modular, menjadikannya berfungsi dengan elemen kanvas SVG dan HTML5 sebagai tambahan kepada WebGL. Babylon.js dibebaskan pada musim panas tahun 2013 sebagai latecomer. Dibangunkan oleh Microsoft, Babylon.js dan Internet Explorer 11 secara rasmi menyokong API WebGL untuk kali pertama. Walaupun asalnya di makmal Redmond, Babylon.js (dan tiga.js) masih mengekalkan lesen sumber terbuka.

Perbezaan reka bentuk halus

Three.js dan Babylon.js kedua-duanya menyediakan perpustakaan yang mudah digunakan untuk mengendalikan kerumitan animasi webgl. Berikutan adegan, penerima, kamera, dan model animasi objek, rangka kerja ini sangat serupa dengan cara WebGL digunakan. Menggunakannya dalam HTML anda adalah semudah menghubungkan fail JavaScript yang sepadan. Nota: Babylon.js mempunyai beberapa kebergantungan dan juga perlu memasukkan sumber terbuka.

Three.js:

<??>

Babylon.js:

<??>
<??>

Perbezaan utama antara kedua -dua kerangka ini adalah penggunaan yang dimaksudkan. Walaupun kedua -dua kerangka boleh digunakan untuk mencipta animasi 3D yang sama, adalah penting untuk memahami matlamat penciptaan setiap rangka kerja. Tiga.js hanya mempunyai satu matlamat untuk mencipta: Buat grafik dan animasi 3D yang dipertingkatkan dengan GPU dengan penghantar berasaskan web. Oleh itu, kerangka ini mengamalkan pendekatan yang sangat luas untuk grafik web tanpa memberi tumpuan kepada mana -mana bidang animasi tunggal. Reka bentuk fleksibel ini menjadikan tiga.js alat yang ideal untuk animasi web sejagat seperti logo atau aplikasi pemodelan. Walaupun tiga.js cuba menyediakan pelbagai keupayaan animasi untuk WebGL, Babylon.js mengambil pendekatan yang lebih disasarkan. Pada asalnya direka sebagai enjin permainan Silverlight, Babylon.js masih lebih suka pembangunan permainan berasaskan web dan ciri-ciri seperti pengesanan perlanggaran dan anti-aliasing. Seperti yang dinyatakan sebelum ini, Babylon.js masih mampu sepenuhnya grafik dan animasi web umum.

demonstrasi teknologi webgl bersebelahan

Untuk terus menunjukkan persamaan dan perbezaan antara kedua -dua kerangka ini, mari kita membina animasi 3D yang cepat. Item yang kami pilih akan menjadi kiub super sederhana dan memohon putaran perlahan. Apabila membuat kedua -dua projek sampel ini, anda harus mula memahami bagaimana kedua -dua teknologi ini secara beransur -ansur menyimpang dan menunjukkan kekuatan unik mereka. Mari bermula. Langkah pertama dalam membina projek kreatif hampir mana -mana jenis adalah untuk memasukkan kanvas kosong di dalamnya yang mengandungi animasi 3D kami.

Three.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');

Dalam tiga.js, kita hanya perlu membuat div kosong sebagai bekas animasi. Babylon.js, sebaliknya, menggunakan kanvas HTML5 yang jelas untuk menyelamatkan grafik 3Dnya. Seterusnya, kami memuatkan penerima, yang akan bertanggungjawab untuk menyediakan tempat kejadian dan menariknya ke kanvas.

Three.js:

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

Babylon.js:

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

Tidak ada yang terlalu mewah di sini, kami hanya memulakan penyajian (enjin dalam kes Babylon.js) dan melampirkannya ke kanvas kami. Langkah seterusnya kami menjadi lebih rumit ketika kami menubuhkan adegan untuk menampung kamera dan kiub kami.

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

di sini kita membuat adegan kita dengan cara yang sama dan kemudian melaksanakan kamera (kedua -dua bingkai menyokong pelbagai jenis kamera), dari mana kita sebenarnya akan melihat adegan yang dicipta. Parameter yang diluluskan ke kamera menentukan pelbagai butiran sudut tontonan kamera, seperti bidang pandangan, nisbah aspek, dan kedalaman. Kami juga menyertakan arah untuk Babylon.js dan melampirkannya ke tempat kejadian kami untuk mengelakkan melihat animasi gelap kemudian.

Dengan kanvas, adegan dan kamera kami, kami hanya perlu menarik kiub itu sendiri sebelum membuat dan animasi.

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:

<??>

Pertama, kita membuat objek kiub saiz yang ditentukan, dan kemudian membuat bahan/mesh (berfikir tekstur) yang akan ditarik pada kiub. Mana -mana fail imej boleh digunakan sebagai tekstur, dan kedua -dua kerangka menyokong eksport mesh dari alat pemodelan 3D seperti Blender. Dalam langkah terakhir, kami menghidupkan sedikit putaran dan kemudian menjadikan tempat kejadian.

Three.js:

<??>
<??>

Babylon.js:

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

Three.js dan Babylon.js kedua -duanya menggunakan animasi atau rendering gelung untuk mengemas kini kanvas dan menarik grafik berputar baru. Anda juga akan melihat bahawa tiga.js sedikit berbeza dari Babylon.js, yang melampirkan kamera semasa rendering. Produk akhir kami adalah dua kiub yang berputar perlahan di udara. Sangat mudah, bukan?

Cerita Dua Bingkai

itu sahaja. Dua rangka kerja WebGL yang sangat kuat dibina atas dasar yang sama tetapi memberi tumpuan kepada aspek yang berbeza dari grafik web yang dipertingkatkan. Anda telah melihat secara langsung bagaimana pendekatan mereka yang serupa dalam animasi, kedua-dua adegan berikut, penerima, kamera, paradigma objek. Walaupun persamaan, Babylon.js bijak membezakan dirinya dengan memberi tumpuan kepada keperluan enjin permainan tradisional, seperti enjin dan pencahayaan tersuai. Pada akhirnya, kedua -dua rangka kerja yang agak muda ini memudahkan pemaju web untuk memanfaatkan peluang 3D yang kuat yang ditawarkan oleh WebGL. Oleh itu, sesiapa yang berminat dalam pembangunan web 3D perlu mengkaji dengan teliti teknologi canggih ini.

(ini harus termasuk pautan fail zip untuk memuat turun kod demo)

(Soalan -soalan yang sering ditanya mengenai tiga.js dan Babylon.js perbandingan harus dimasukkan di sini) kerana batasan ruang, saya tidak dapat menambah bahagian FAQ penuh di sini. Walau bagaimanapun, anda boleh menyusun semula dan menggilapnya menjadi versi yang lebih ringkas dan jelas berdasarkan bahagian FAQ dalam teks asal yang disediakan.

Atas ialah kandungan terperinci Tiga.js dan Babylon.js: Perbandingan kerangka webgl. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!