Trois.js et babylon.js: une comparaison des frameworks Webgl

Points de base

• trois.js et babylon.js sont tous deux de puissants frameworks WebGL qui fournissent aux développeurs Web une base abstraite pour créer des œuvres Webgl riches en fonctionnalités telles que des logos animés et des jeux 3D entièrement interactifs.
• trois.js (démarré en 2009) vise à créer des graphiques et des animations 3D améliorés par GPU avec un rendu basé sur le Web, ce qui en fait un outil idéal pour l'animation Web universelle. Babylon.js (lancé par Microsoft en 2013) adopte une approche plus ciblée, se concentrant sur le développement de jeux Web, et des fonctionnalités telles que la détection de collision et l'anti-aliasing.
• Les deux cadres suivent la scène, le rendu, la caméra, les modèles d'animation d'objets et peuvent être utilisés pour créer des animations 3D similaires. Cependant, Babylon.js se distingue de trois.js en se concentrant sur les besoins des moteurs de jeu traditionnels, tels que les moteurs et l'éclairage personnalisé.
• Alors que trois.js et babylon.js offrent des performances élevées, Three.js est connu pour sa simplicité et sa facilité d'utilisation, adaptés aux débutants ou aux petits projets; pour les grands projets plus complexes.

Les navigateurs Web d'aujourd'hui ont fait de grands progrès depuis Sir Tim Berners Lee et son époque du logiciel Nexus. Grâce à d'excellentes API JavaScript comme WebGL, les navigateurs modernes sont entièrement capables de rendre des graphiques 2D et 3D avancés sans plugins tiers. En tirant parti de la puissance d'un processeur graphique dédié, WebGL permet à nos pages Web d'accéder à l'ombrage dynamique et aux effets physiques réalistes. Comme vous pouvez le deviner, une API aussi puissante réduit généralement les inconvénients. WebGL ne fait bien sûr pas exception, son désavantage réside dans sa complexité. Mais, ne vous inquiétez pas, nous avons exploré deux frameworks puissants conçus pour le rendre plus facile et encore plus efficace lors de l'utilisation de WebGL.

L'origine du cadre 3D

Les trois.js populaires et les nouveaux babylon.js fournissent une base abstraite pour les développeurs Web afin de créer des œuvres Webgl riches en fonctionnalités allant des logos animés aux jeux 3D entièrement interactifs. Three.js a commencé en avril 2009 et a été à l'origine écrit dans ActionScript puis traduit en JavaScript. Depuis sa création avant l'introduction de WebGL, Three.js a l'avantage unique d'une interface de rendu modulaire, ce qui le fait fonctionner avec les éléments de toile de SVG et HTML5 en plus de WebGL. Babylon.js est sorti à l'été 2013 en tant que retardateur. Développé par Microsoft, Babylon.js et Internet Explorer 11 Soutenez officiellement l'API WebGL pour la première fois. Malgré ses origines dans le laboratoire de Redmond, Babylon.js (et trois.js) maintient toujours une licence open source.

Différences de conception subtiles

trois.js et babylon.js fournissent tous deux des bibliothèques faciles à utiliser pour gérer la complexité des animations WebGL. Suivant des scènes, des rendus, des caméras et des modèles d'animation d'objets, ces cadres sont très similaires dans la façon dont WebGL est utilisé. Les utiliser dans votre HTML est tout aussi simple que de lier le fichier JavaScript correspondant. Remarque: babylon.js a certaines dépendances et doit également inclure la main open source.js.

trois.js:

<code class="language-html"></code>

babylon.js:

<code class="language-html">
</code>

La principale différence entre ces deux cadres est leur utilisation prévue. Bien que les deux cadres puissent être utilisés pour créer la même animation 3D, il est important de comprendre les objectifs de création de chaque cadre. Three.js n'a qu'un seul objectif de création: créer des graphiques et des animations 3D améliorés par GPU avec un rendu basé sur le Web. Par conséquent, ce cadre adopte une approche très large des graphiques Web sans se concentrer sur un seul champ d'animation. Cette conception flexible fait de trois.js un outil idéal pour les animations Web universelles telles que le logo ou les applications de modélisation. Alors que Three.js essaie de fournir un large éventail de capacités d'animation pour WebGL, Babylon.js adopte une approche plus ciblée. Conçu à l'origine comme un moteur de jeu Silverlight, Babylon.js préfère toujours le développement de jeux Web et des fonctionnalités telles que la détection de collision et l'anti-aliasing. Comme mentionné précédemment, Babylon.js est toujours entièrement capable de graphiques et d'animations Web généraux.

Démonstration côte à côte de la technologie WebGL

pour démontrer davantage les similitudes et les différences entre ces deux cadres, construisons une animation 3D rapide. L'élément que nous avons sélectionné serait un cube super simple et appliquer une rotation lente. Lors de la création de ces deux exemples de projets, vous devez commencer à comprendre comment ces deux technologies divergent progressivement et démontrent leurs forces uniques. Commençons. La première étape de la construction d'un projet créatif de presque tous les types est d'inclure une toile vierge qui contient nos animations 3D.

trois.js:

<code class="language-html"><div style="height:250px; width: 250px;" id="three"></div></code>

<code class="language-javascript">var div = document.getElementById('three');</code>

babylon.js:

<code class="language-html"><div style="height:250px; width: 250px;" id="babylon">
  <canvas id="babylonCanvas"></canvas>
</div></code>

<code class="language-javascript">var canvas = document.getElementById('babylonCanvas');</code>

Dans trois.js, nous avons juste besoin de créer une div vide comme conteneur d'animation. Babylon.js, en revanche, utilise une toile HTML5 bien définie pour enregistrer ses graphiques 3D. Ensuite, nous chargeons le rendu, qui sera responsable de la préparation de la scène et de la dessin sur la toile.

trois.js:

<code class="language-javascript">var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
div.appendChild(renderer.domElement);</code>

babylon.js:

<code class="language-javascript">var engine = new BABYLON.Engine(canvas, true);</code>

Rien n'est trop sophistiqué ici, nous initialisons simplement les rendus (le moteur dans le cas de babylon.js) et les attachons à notre toile. Notre prochaine étape est devenue un peu plus compliquée alors que nous mettons en place une scène pour accueillir notre appareil photo et nos cubes.

trois.js:

<code class="language-javascript">var sceneT = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 400;</code>

babylon.js:

<code class="language-javascript">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);</code>

Ici, nous créons notre scène presque de la même manière, puis implémentons la caméra (les deux cadres prennent en charge différents types de caméras), à partir de laquelle nous verrons réellement la scène créée. Les paramètres transmis à la caméra déterminent divers détails de l'angle de vision de la caméra, tels que le champ de vision, le rapport d'aspect et la profondeur. Nous avons également inclus une direction pour babylon.js et l'avons attachée à notre scène pour éviter de voir l'animation sombre plus tard.

Avec notre toile, nos scènes et nos caméras, nous avons juste besoin de dessiner le cube lui-même avant le rendu et l'animation.

trois.js:

<code class="language-javascript">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);</code>

babylon.js:

<code class="language-html"></code>

Tout d'abord, nous créons un objet cube de la taille spécifiée, puis créons un matériau / maillage (pensez à la texture) qui sera dessiné sur le cube. Tout fichier image peut être utilisé comme texture, et les deux cadres prennent en charge l'exportation de maillage des outils de modélisation 3D tels que Blender. Dans la dernière étape, nous animons la légère rotation, puis rendons la scène.

trois.js:

<code class="language-html">
</code>

babylon.js:

<code class="language-html"><div style="height:250px; width: 250px;" id="three"></div></code>

trois.js et babylon.js utilisent tous deux des boucles d'animation ou de rendu pour mettre à jour le canevas et dessiner de nouveaux graphiques tournés. Vous remarquerez également que trois.js sont légèrement différents de Babylon.js, qui attache une caméra lors du rendu. Notre produit final est deux cubes qui tournent doucement dans l'air. Très simple, non?

Histoires de deux images

c'est tout. Deux frameworks WebGL très puissants sont construits sur la même base, mais se concentrent sur différents aspects des graphiques Web améliorés. Vous avez vu de première main à quel point leurs approches sont similaires dans l'animation, à la fois des scènes suivantes, des rendus, des caméras, des paradigmes d'objets. Malgré les similitudes, Babylon.js se distingue intelligemment en se concentrant sur les besoins des moteurs de jeu traditionnels, tels que les moteurs et l'éclairage personnalisé. En fin de compte, ces deux cadres relativement jeunes permettent aux développeurs Web de profiter plus facilement des puissantes opportunités 3D que WebGL offre. Par conséquent, toute personne intéressée par le développement Web 3D devrait étudier attentivement cette technologie de pointe.

(Cela devrait inclure un lien de fichier zip pour télécharger le code de démonstration)

(Les questions fréquemment posées sur les comparaisons de trois.js et babylon.js doivent être incluses ici) En raison des limitations de l'espace, je ne peux pas ajouter la section FAQ complète ici. Cependant, vous pouvez le réorganiser et le polir en une version plus concise et claire basée sur la section FAQ dans le texte original fourni.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!