Lernen von WebGL und three.js [geschlossen]

Ich bin neu und fange an, etwas über 3D-Computergrafiken in Webbrowsern zu lernen. Ich bin daran interessiert, 3D-Spiele in einem Browser zu erstellen. Für alle, die sowohl WebGL als auch three.js gelernt haben ...

1. Sind Kenntnisse in WebGL erforderlich, um three.js verwenden zu können?

2. Was sind die Vorteile von three.js gegenüber WebGL?

Da Sie große Ambitionen haben, müssen Sie die Zeit investieren, um die Grundlagen zu lernen. Es geht nicht darum, was Sie zuerst lernen - Sie können sie gleichzeitig lernen, wenn Sie möchten. (Das ist, was ich tat.)

Dies bedeutet, dass Sie verstehen müssen:

1. WebGL-Konzepte
2. Three.js
3. Die zugrunde liegenden mathematischen Konzepte

Three.js. Three.js hat hervorragende Arbeit geleistet, um viele Details von WebGL zu abstrahieren. Ich persönlich würde daher vorschlagen, Three.js für Ihr Projekt zu verwenden. Aber denken Sie daran, Three.js ist in Alpha und ändert sich häufig. Sie müssen also darauf vorbereitet sein. Die meisten Leute lernen Three.js, indem sie die Beispiele studieren. Vermeiden Sie veraltete Bücher und Tutorials und vermeiden Sie Beispiele aus dem Internet, die auf alte Versionen der Bibliothek verweisen.

WebGL. Wenn Sie Three.js verwenden, müssen Sie nicht wissen, wie man in WebGL programmiert, sondern nur die WebGL-Konzepte verstehen. Das bedeutet, dass Sie nur den WebGL-Code einer anderen Person lesen und verstehen müssen, was Sie lesen. Das ist viel einfacher, als erwartet zu werden, dass Sie ein WebGL-Programm selbst von Grund auf neu schreiben. Sie können die WebGL-Konzepte mit einem der Tutorials im Internet ausreichend gut lernen, z. B. mit dem Tutorial für Anfänger unter WebGLFundamentals.org und Learning WebGL .

Mathematik. Auch hier müssen Sie zumindest die Konzepte verstehen. Drei gute Bücher sind:

1. 3D Math Primer für Grafik und Spieleentwicklung von Fletcher Dunn und Ian Parberry

2. Grundlegende Mathematik für Spiele und interaktive Anwendungen: Ein Programmierhandbuch von James M. Van Verth und Lars M. Bishop

3. Mathematik für 3D-Spielprogrammierung und Computergrafik von Eric Lengyel

Ich hoffe das ist hilfreich für dich. Viel Glück.

Es gibt einen sehr guten Online-Kurs - Interaktive 3D-Grafik unter https://www.udacity.com/course/cs291 auf THREE.js. Dieser Kurs beinhaltet auch Aufgaben, um praktische Erfahrungen zu sammeln. Es behandelt alle Grundkonzepte von Three.js und Computer Graphics

Meine persönlichen Gedanken sind folgende:

• Wenn Sie genügend Zeit haben, können Sie beides lernen. Beachten Sie jedoch, dass WebGL viel niedriger ist als Three.js.
• Für ein erstes 3D-Projekt schlagen Experten vor, eine Bibliothek wie Three.js zu verwenden, um sich an die Begriffe und das allgemeine 3D-Modell zu gewöhnen.

Unabhängig davon, in welche Richtung Sie sich entscheiden, empfehle ich Ihnen, Ihre linearen Algebra-Fähigkeiten zu erlernen / zu verbessern . Dann lernen oder vertiefen Sie Ihr Verständnis der MVP-Dimensionen (Model View Projection) . Three.JS kann viel davon weg abstrahieren, aber ich denke, es ist wichtig, dass man diese Konzepte gut versteht, bevor man sich ernsthaft mit einer 3D-Entwicklung befasst.

Ich habe einen Einführungsartikel über MVP geschrieben, als ich zum ersten Mal 3D-Programmierung mit OpenGL lernte. Ich erkannte, dass ich, bis ich erklären konnte, was diese Transformationsmatrizen sind und wie sie sich auf die verschiedenen Dimensionen / Räume beziehen, überhaupt keine 3D-Programmierung kannte , obwohl ich Objekte auf dem Bildschirm rendern konnte.

Da es Ihr Ziel ist, Spiele zu erstellen, werden Sie wahrscheinlich viel davon profitieren, wenn Sie zuerst etwas rohes WebGL lernen, selbst wenn Sie am Ende ein Framework wie Three.js verwenden, um Ihren Code später schreiben zu können.

"WebGL ist eine 2D-API und keine 3D-API"

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

Dieser Artikel beschreibt die grundlegenden Unterschiede zwischen WebGL- und 3D-Bibliotheken wie three.js.
Was meine Wahl zwischen WebGL oder Three.js zu einem Kinderspiel machte.

Ich kam damals aus einem Unity3D-Hintergrund sowie aus Papervision3D, daher hatte ich ein gutes Verständnis für den Umgang mit 3D-Raum. Three.js ist der richtige Weg, um zu lernen, wie man mit WebGL-Projekten umgeht. Die API ist sehr gut, sie ist sehr leistungsfähig und wenn Sie von einer anderen 3D-Technologie kommen, sind Sie mit sehr wenig Zeit einsatzbereit.

Ich habe viel Zeit mit den Beispielen von Threejs.org verbracht - es gibt eine Menge davon und sie sind sehr gut darin, dich loszuwerden und in die richtige Richtung zu rennen. Die Dokumente sind anständig genug, besonders wenn Sie sie mit anderen webGL 3D-APIs vergleichen.

Sie könnten auch in Betracht ziehen, die kostenlose Version von Unity3D und den kostenlosen Collada-Exporter (war kostenlos, als ich ihn bekam) aus ihrem App Store (Fenster> App Store) zu beziehen. Ich fand es einfach genug, meine Szene in Unity einzurichten und zur Verwendung mit Three.js nach Collada zu exportieren.

Außerdem habe ich diese Klasse gepostet, die ich mit Three.js namens neo ( http://rockonflash.com/webGL/three/neo.js ) verwende. Fügen Sie es einfach Ihrem Projekt hinzu, rufen Sie dann Neo.JackIntoThree () auf und es fügt Object3D die Methoden / Eigenschaften zur Verwendung in Ihrem Projekt hinzu. Dinge wie DrawAllAxis () sind beim Debuggen Ihrer Szene usw. von unschätzbarem Wert.

Zweifellos ist Three.js ein guter Weg - es ist flexibel genug, um Ihre eigenen Shader / Objekte usw. zu schreiben, und leistungsstark genug, um Ihre Ziele zu erreichen.

Ich habe drei.js aufgenommen, bin aber auch in GLSL gesprungen und habe viel mit drei.js shaderMaterial experimentiert. Eine Möglichkeit, dies zu tun: three.js abstrahiert immer noch einen Großteil der Dinge für Sie, bietet Ihnen aber auch einen sehr sauberen Zugriff auf alle Rendering-Funktionen (Projektion, Animation) auf niedriger Ebene.

Auf diese Weise können Sie sogar so etwas wie diesem fantastischen Open-Gl-Tutorial folgen . Sie müssen die Matrizen und typisierten Arrays nicht einrichten, da drei sie bereits für Sie einrichten und sie bei Bedarf aktualisieren. Den Shader können Sie jedoch von Grund auf neu schreiben - eine einfache Farbwiedergabe würde aus zwei Zeilen GLSL bestehen. Es gibt auch ein Nachbearbeitungs-Plug-In für three.js, das alle Puffer, Vollbild-Quads und Dinge einrichtet, die Sie für die Effekte benötigen. Der Shader kann jedoch zunächst sehr einfach sein.

Da programmierbare Shader die Essenz moderner 3D-Grafiken sind, hoffe ich, dass meine Antwort nicht den Punkt verfehlt :) Früher oder später muss jeder, der dies tut, zumindest verstehen, was unter der Haube vor sich geht, es liegt in der Natur des Tieres. Auch das Verständnis der 4. Dimension im homogenen Raum ist wahrscheinlich wichtig.

Dieses Buch ist gut für WebGL.

Ich habe gerade ein wenig von beidem gelernt und ich habe das Gefühl, dass ich die Grundlagen von Webgl verstehe. Ich denke, eine Einführung in Webgl ist ausreichend und springe dann in drei js. Sobald Sie die zugrunde liegenden Konzepte von WebGL verstanden haben, wird dies ziemlich einfach sein. Nützliche Links:

1. Bestes Intro, das ich gelesen habe: http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. Umfassende Tutorials: http://www.johannes-raida.de/tutorials.htm