Lernen von WebGL und three.js [geschlossen]

142

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?

r1nzler
quelle
10
Verwenden Sie Three.js. Zeitraum. Es ist genau das, was West unten sagt, obwohl es theoretisch einfach ist, WebGL von Grund auf neu zu schreiben, ist ein Schmerz. Es gibt so viele Dinge, die fast jede WebGL-Anwendung tun muss / möchte. Diese Dinge können von dir weg abstrahiert werden. Außerdem hat sich Three.js zu einer erstaunlichen Bibliothek entwickelt. Wenn Sie Google Trends oder die Anzahl der SO-Fragen hier überprüfen, werden Sie feststellen, dass es der Konkurrenz weit voraus ist.
Theblang
4
@GeorgeStocker Tatsächlich basierten die Antworten auf diese Frage nicht in erster Linie auf Meinungen, sondern auf Fakten, Referenzen und spezifischem Fachwissen. Dies war ein wertvoller Beitrag für die there.js-Community, und Teil (2) der Frage ist sicherlich akzeptabel. Wie würden Sie empfehlen, es neu zu formulieren, damit es für Sie akzeptabel ist - ohne die Bedeutung / Absicht der Frage zu ändern?
WestLangley
@ WestLangley Ich habe in den gegebenen Antworten nur Meinungen gehört. Ganz zu schweigen von "Vor- und Nachteile der Verwendung von [Bibliothek]" ist für Stack Overflow etwas zu weit gefasst.
George Stocker
2
@ GeorgeStocker Ihre Antwort ist selbst eine Meinung, und ich bin damit überhaupt nicht einverstanden. Wie würden Sie empfehlen, den Beitrag neu zu formulieren, damit er für Sie akzeptabel ist?
WestLangley
1
Vielleicht könnten die Fragen umformuliert werden, um zu fragen, wie vorteilhaft das Erlernen von WebGL für die Verwendung von Three.js ist. Die Antwort darauf würde durch Fakten, Referenzen und Fachwissen gestützt.
zz85

Antworten:

203

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.

WestLangley
quelle
Was ist die beste Seite, um Webgl-Konzepte von Anfang bis Ende in einfachem Englisch zu lernen? Oder zumindest, wenn der Autor ein „Wort“ verwendet, tut er dies, nachdem er es zuvor einmal beschrieben hat, und baut darauf auf.
Muhammad Umer
Siehe den Link zum Learning WebGL-Tutorial im Hauptteil des Beitrags.
WestLangley
22

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

Bhupendra
quelle
13

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.
Dan D.
quelle
3
Ich stimme dem zu. An diesem Punkt scheint es eine gute Sache zu sein, beides in Ihrem Werkzeuggürtel zu haben. Ich begann mit dem Erlernen von Three.JS, machte dann einige Shader mit GLSL und versuchte die ganze Zeit, mehr über WebGL zu erfahren.
Cory Gross
11

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.

Rodrigo-Silveira
quelle
10

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

Bob Fanger
quelle
Das Zitat stammt nicht aus dem Haupttext der verlinkten Seite. Ich akzeptiere die auf der verlinkten Seite angegebenen Argumente jedoch teilweise. Nicht um eine 2D-API zu sein, sondern um eine Rasterisierungs-API (die für 2D- und 3D-Grafiken geeignet ist).
Elias Hasle
6

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.

neoRiley
quelle
3

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.

Eimerkopf
quelle
2

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
Raj
quelle