Einsteigerguide: Hilfreiche Ressourcen für WebGL und Three.js.

Sie möchten mit WebGL und Three.js beginnen, haben aber keine Ahnung, wo Sie anfangen sollen? Entspannen Sie sich, holen Sie tief Luft und lesen Sie sich diesen Beitrag genau durch.

Online-Ressourcen.

Ein guter Ausgangspunkt sind z.B. die Kurse von Pluralsights über WebGL und Three.js. In etwas mehr als 2 Stunden können sich Nutzer auf den neuesten Stand bringen. Zu Beginn wird zunächst kurz auf die Geschichte von WebGL und Three.js eingegangen, anschließend werden Grundlagen wie Meshes, Lighting oder Material vermittelt. Es werden aber auch weiterführende Themen wie Collision Detection und Physik-Engines behandelt. Mit der Zusammenstellung einer 3D-Version des Klassikers Frogger schließt das Tutorial ab.

Nicht unerwähnt soll an dieser Stelle ein Workshop bleiben, der für das MelbJS-Camp auf Three.js-Basis erstellt wurde. Für Interaktive 3D-Grafiken möchten wir ihnen den Kurs von UDACity ans Herz legen, der auf einige der eher technischen Aspekte von WebGL und 3D-Programmierung eingeht.

Bücher.

Für diejenigen unter uns, die Bücher zum Lernen bevorzugen, haben wir eine kleine Liste zusammengestellt:

• 3D Programming for Kids: Dies ist ein großartiges Buch, um sehr schnell auf den neuesten Stand zu kommen und hat eine solide Erklärung für einige der mathematischen Grundlagen der 3D-Programmierung.
• Learning Three.js: The JavaScript Library for WebGL: Dieses Buch gibt einen ausgezeichneten Überblick über das Framework und jeder Programmierer sollte dieses Buch immer in greifbarer Nähe haben. Es ist auch erwähnenswert, dass der Autor alle Beispiele aus dem Buch online zur Verfügung gestellt hat (stellen Sie sicher, dass Sie diese ausprobieren – einige sind wirklich fantastisch).
• WebGL up and running: Der Autor Tony Parisi war einer der Verantwortlichen für die VRML-Spezifikation und einige andere 3D-bezogene Standards. So können Sie sicher sein, dass er wirklich weiß, wovon er spricht. Mit gefällt, dass er einige fortgeschrittene Themen behandelt, zusammen mit einigen großartigen Beispielen. Eine Sache, die negativ anzumerken ist, ist, dass die Beispiele eine Bibliothek des Autors (sim.js) verwenden, was die Übersetzung etwas schwieriger macht, wenn Sie diese Bibliothek nicht verwenden wollen.

Webseiten.

Im Internet finden sich zahlreiche hilfreiche Webseiten, mit denen Sie einen Einstieg in die Thematik finden oder ihre bereits vorhandenen Kenntnisse weiter vertiefen können:

• Three.js Examples: Hierbei handelt es sich um eine insgesamt sehr hilfreiche Quelle, allerdings sollten Sie beachten, dass die Beispiele eine ältere Version der Bibliothek verwenden, so dass Sie den Code möglicherweise ein wenig ändern müssen.
• The concepts of WebGL: Hier finden sich hilfreiche Erklärungen, wie Sie WebGL auf Low-Level nutzen können.
• WebGL Fundamentals: Hier bekommen Sie einen guten Überblick über die Funktionsweise von WebGL.
• Learning WebGL: Hier lernen Sie, wie Sie WebGL ohne Framework verwenden können.
• Physisjs: Phsysisjs Physics Library für Three.js wickelt eine weitere Bibliothek mit der Bezeichnung ammo.js (eine Emscripten-Portierung von Bullet) ein. Physijs macht es einfach, ihren Szenen Physik aus der realen Welt hinzuzufügen und es enthält einige gute Beispiele, die Sie als Sprungbrett für ihre Anwendungen verwenden können.
• TF3DM: Sind Sie ein 3D-Designer? Kein Problem. Dieser Artikel wirft einen Blick auf eine große Auswahl an leicht durchsuchbaren Modellen, die in verschiedenen Formaten erhältlich sind. Beachten Sie, dass einige Modelle frei verwendbar sind und andere nicht.
• Blender: Sie sollten sich mit Blender beschäftigen, wenn Sie auf der Suche nach einem kostenlosen Open-Source-Modellierungspaket sind. Es ist nicht gerade einfach zu bedienen und hat eine steile Lernkurve. Sie werden mit ziemlicher Sicherheit einige Tutorials durcharbeiten müssen, aber es ist eine leistungsstarke Anwendung – und sie ist kostenlos.
• OpenArtGame: Dies ist eine gute Quelle für Texturen und Bilder für ihre Spiele und Anwendungen.

Von Grund auf neu beginnen.

Bitte beachten Sie, dass dies zwar alles großartige Ressourcen sind, die ihnen den Einstieg in WebGL und Three.js erleichtern, aber einige sind etwas komplexer als andere. Um zu vermeiden, dass Sie sich frustriert fühlen, wenn Sie fertig sind, sollten Sie ihre Journey mit dem bereits erwähnten Pluralsights-Kurs und dem Buch „3D-Programming for Kids“ beginnen. Nachdem Sie sich die entsprechenden Grundlagen selbst vermittelt haben, können Sie etwas tiefer in die Materie einsteigen.

Alternativ können Sie natürlich auch unsere Serie zur Vermittlung der WebGL-Grundlagen durcharbeiten. Diese haben den Vorteil, dass Sie keine Englisch-Kenntnisse aufweisen müssen.

Vielen Dank für ihren Besuch.