Drei.js und babylon.js: Ein Vergleich von WebGL -Frameworks

Kernpunkte

• Drei.js und babylon.js sind beide leistungsstarke WebGL-Frameworks, die Webentwicklern eine abstrakte Grundlage für das Erstellen von Funktionsarbeiten für Funktionsfunktionen wie animierte Logos und vollständig interaktive 3D-Spiele bieten.
• drei.js (im Jahr 2009) zielt darauf ab, mit einem webbasierten Renderer GPU-verbesserten 3D-Grafiken und Animationen zu erstellen, was es zu einem idealen Tool für universelle Webanimationen macht. Babylon.js (2013 von Microsoft gestartet) verfolgt einen zielgerichteten Ansatz und konzentriert sich auf webbasierte Spielentwicklung sowie Funktionen wie Kollisionserkennung und Anti-Aliasing.
• Beide Frames folgen Szene, Renderer, Kamera, Objektanimationsmodellen und können zum Erstellen ähnlicher 3D -Animationen verwendet werden. Babylon.js unterscheidet sich jedoch von drei. Js, indem sie sich auf die Bedürfnisse traditioneller Spiele wie Motoren und maßgeschneiderte Beleuchtung konzentriert.
• Während sowohl drei.js als auch babylon.js hohe Leistung bieten, ist drei.js für seine Einfachheit und Benutzerfreundlichkeit bekannt, die für Anfänger oder kleine Projekte geeignet ist. für große, komplexere Projekte.

Die heutigen Webbrowser haben seit Sir Tim Berners Lee und seiner Nexus -Software -Ära große Fortschritte erzielt. Dank hervorragender JavaScript-APIs wie WebGL können moderne Browser die fortschrittlichen 2D- und 3D-Grafiken ohne Plugins von Drittanbietern in vollem Umfang rendern. Durch die Nutzung der Leistung eines dedizierten Grafikprozessors können unsere Webseiten auf dynamische Schattierung und realistische physikalische Effekte zugreifen. Wie Sie vielleicht erraten haben, bringt eine so mächtige API normalerweise die Nachteile. WebGL ist natürlich keine Ausnahme, sein Nachteil liegt in seiner Komplexität. Machen Sie sich jedoch keine Sorge, wir haben zwei leistungsstarke Frameworks erkundet, die es bei der Verwendung von WebGL einfacher und noch effizienter machen sollen.

Der Ursprung des 3D -Frameworks

Die beliebten drei.js und die neueren babylon.js bieten eine abstrakte Grundlage für Webentwickler, um featurereiche WebGL-Werke zu erstellen, die von animierten Logos bis hin zu vollständig interaktiven 3D-Spielen reichen. Drei.js begann im April 2009 und wurde ursprünglich in ActionScript geschrieben und später in JavaScript übersetzt. Da es vor der Einführung von WebGL erstellt wurde, hat drei.js den einzigartigen Vorteil einer modularen Rendering -Schnittstelle, sodass es neben WebGL neben WebGL mit SVG und HTML5 -Elementen funktioniert. Babylon.js wurde im Sommer 2013 als Nachzügler veröffentlicht. Entwickelt von Microsoft, Babylon.js und Internet Explorer 11 unterstützen die WebGL -API zum ersten Mal offiziell. Trotz seiner Herkunft in Redmonds Labor unterhält Babylon.js (und drei.js) immer noch eine Open -Source -Lizenz.

subtile Designunterschiede

drei.js und babylon.js bieten beide einfach zu verwendende Bibliotheken, um die Komplexität von WebGL-Animationen zu bewältigen. In den folgenden Szenen, Renderern, Kameras und Objektanimationsmodellen sind diese Frameworks in der Verwendung von WebGL sehr ähnlich. Die Verwendung in Ihrem HTML ist so einfach wie das Verknüpfen der entsprechenden JavaScript -Datei. Hinweis: babylon.js hat einige Abhängigkeiten und muss auch Open Source Hand.js.

drei.js:

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

babylon.js:

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

Der Hauptunterschied zwischen diesen beiden Frameworks ist ihre beabsichtigte Verwendung. Während beide Frameworks verwendet werden können, um dieselbe 3D -Animation zu erstellen, ist es wichtig, die Erstellungsziele jedes Frameworks zu verstehen. Three.js hat nur ein Ziel des Erstellens: Erstellen Sie mit einem webbasierten Renderer. In diesem Framework wird daher einen sehr breiten Ansatz für Webgrafiken verwendet, ohne sich auf ein einzelnes Animationsfeld zu konzentrieren. Dieses flexible Design macht drei.Js zu einem idealen Tool für universelle Webanimationen wie Logo oder Modellierungsanwendungen. Während drei.js versucht, eine breite Palette von Animationsfunktionen für WebGL zu bieten, verfolgt Babylon.js einen zielgerichteten Ansatz. Babylon.js wurde ursprünglich als Silverlight Game Engine entwickelt und bevorzugt nach wie vor webbasierte Spielentwicklung und Funktionen wie Kollisionserkennung und Anti-Aliasing. Wie bereits erwähnt, ist babylon.js nach wie vor vollständig zu allgemeinen Webgrafiken und Animationen in der Lage.

Nebenseite Demonstration der WebGL-Technologie

Um die Ähnlichkeiten und Unterschiede zwischen diesen beiden Frameworks weiter zu demonstrieren, erstellen wir eine schnelle 3D -Animation. Der von uns ausgewählte Artikel wäre ein super einfacher Würfel und wenden sich eine langsame Rotation an. Beim Erstellen dieser beiden Beispielprojekte sollten Sie verstehen, wie diese beiden Technologien allmählich abweichen und ihre einzigartigen Stärken demonstrieren. Fangen wir an. Der erste Schritt beim Aufbau eines kreativen Projekts von fast jedem Typ besteht darin, eine leere Leinwand aufzunehmen, die unsere 3D -Animationen enthält.

drei.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>

In drei.js müssen wir nur ein leeres Div als Animationsbehälter erstellen. Babylon.js hingegen verwendet gut definierte HTML5-Leinwand, um seine 3D-Grafik zu speichern. Als nächstes laden wir den Renderer, der dafür verantwortlich ist, die Szene vorzubereiten und auf die Leinwand zu ziehen.

drei.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>

Nichts ist hier zu schick, wir initialisieren nur die Renderer (den Motor im Fall von babylon.js) und hängen sie an unsere Leinwand an. Unser nächster Schritt wurde etwas komplizierter, als wir eine Szene für unsere Kamera und Würfel einrichten.

drei.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>

Hier erstellen wir unsere Szene auf fast die gleiche Weise und implementieren dann die Kamera (beide Rahmen unterstützen verschiedene Arten von Kameras), aus denen wir die erstellte Szene tatsächlich anzeigen werden. Die an die Kamera übergebenen Parameter bestimmen verschiedene Details des Betrachtungswinkels der Kamera, wie z. B. Sichtfeld, Seitenverhältnis und Tiefe. Wir haben auch ein DirectionAllight für babylon.js aufgenommen und an unserer Szene angehängt, um zu vermeiden, dass die dunkle Animation später gesehen wird.

Mit unseren Leinwand, Szenen und Kameras müssen wir nur den Würfel selbst zeichnen, bevor wir rendern und animieren.

drei.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>

Erstens erstellen wir ein Würfelobjekt der angegebenen Größe und erstellen dann ein Material/ein Mesh (denken Sie an Textur), das auf dem Würfel gezogen wird. Jede Bilddatei kann als Textur verwendet werden, und beide Frameworks unterstützen den Mesh -Export von 3D -Modellierungswerkzeugen wie Blender. Im letzten Schritt animieren wir die leichte Rotation und machen dann die Szene.

drei.js:

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

babylon.js:

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

drei.js und babylon.js verwenden beide Animation oder Rendering -Schleifen, um die Leinwand zu aktualisieren und neue gedrehte Grafiken zu zeichnen. Sie werden auch feststellen, dass sich drei.js leicht von babylon.js unterscheiden, was beim Rendern eine Kamera anhält. Unser Endprodukt sind zwei Würfel, die sich sanft in der Luft drehen. Sehr einfach, oder?

Geschichten von zwei Frames

Das war's. Zwei sehr leistungsstarke WebGL -Frameworks sind auf derselben Basis aufgebaut, konzentrieren sich jedoch auf verschiedene Aspekte der verbesserten Webgrafiken. Sie haben aus erster Hand gesehen, wie ähnlich ihre Ansätze in Animation sind, sowohl folgende Szenen, Renderer, Kameras und Objektparadigmen. Trotz der Ähnlichkeiten unterscheidet sich babylon.js geschickt, indem sie sich auf die Bedürfnisse traditioneller Spiele wie Motoren und maßgeschneiderte Beleuchtung konzentriert. Letztendlich erleichtern diese beiden relativ jungen Frameworks den Webentwicklern, die leistungsstarken 3D -Möglichkeiten zu nutzen, die WebGL bietet. Daher sollte jeder, der an 3D-Webentwicklung interessiert ist, diese modernste Technologie sorgfältig untersuchen.

(Dies sollte einen Link zur ZIP -Datei zum Herunterladen des Demo -Codes enthalten)

(häufig gestellte Fragen zu drei.js und babylon.js -Vergleiche sollten hier enthalten sein) Sie können sie jedoch in eine prägnantere und klarere Version des FAQ -Abschnitts im bereitgestellten Originaltext neu organisieren und polieren.

Das obige ist der detaillierte Inhalt vonDrei.js und babylon.js: Ein Vergleich von WebGL -Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!