Praxisberichte und Case Studys aus Design und Development mit WebGL, Three.js und Co.
●Web Graphics Library – dafür steht das Kürzel WebGL. Bewegte 3D-Computergrafiken im Web flüssig auszuspielen, galt lange Zeit als extrem sportliche Übung. Doch dank der im März 2009 auf Geheiß der Mozilla Foundation von der Khronos Group gegründeten WebGL-Arbeitsgruppe »Accelerated 3D on Web« ist das heute anders: Schon im Dezember 2009 präsentierte das mit der Schaffung offener Multimedia-Standards befasste Industriekonsortium einen ersten funktionstüchtigen Entwurf für einen Standard zur Darstellung von 3D-Grafiken im Web mithilfe des canvas-Elements und JavaScript. Frühe WebGL-Unterstützer waren bekanntlich Mozilla Firefox, die Grafikprozessor- und Chiphersteller AMD und Nvidia, der Telekommunikationsanbieter Ericsson sowie Google und Apple mit der freien HTML-Rendering-Engine WebKit.
Am 3. März 2011 gab die Khronos Group das Release der WebGL-1.0-Spezifikation auf der Game Developers Conference in San Francisco bekannt. Seither unterstützen Google Chrome und Mozilla Firefox WebGL und auch Safari und Opera zogen schnell nach – inzwischen sind auch Microsofts Internet Explorer (seit Version 11), iOS Safari (seit 8.3) sowie Android Browser (seit 40) und Chrome for Android (seit Version 41) mit an Bord.
Geht es um 3D-Grafik auf mobilen Devices, führt die Spur zur Programmierschnittstelle OpenGL ES, die ebenfalls aus dem Herzen der Khronos Group stammt. Die OpenGL-ES-Spezifikation (ES steht für Embedded Systems) definiert die Entwicklung für mobile Anwendungen auf Smartphones, PDAs und Spielekonsolen – aber auch (in abgespeckter Form) für sicherheitskritische Systeme in Luftfahrt, Industrie, Militär und Automobilindustrie.
Im November 2011 zertifizierte die Khronos Group das Google-Projekt Angle (Almost Native Graphics Layer Engine) für OpenGL ES 2.0 – Startpunkt für plattformübergreifende Anwendungen mit WebGL-Unterstützung für Windows, Mac OS, Linux und andere Betriebssysteme.
Da sich 3D-Inhalte für WebGL mit Grafiksoftware wie Blender, CopperCube oder Maya ohne Programmierung erstellen lassen, dauerte es nicht lange, bis die Digital-Design-Szene den Standard zu schätzen lernte, sodass WebGL – meist im Verbund mit der freien JavaScript-3D-Library Three.js – auch in den Agenturen Einzug hielt.
Das PAGE eDossier »WebGL: Making-ofs und Workshops« berichtet von frühen und frischen WebGL-Projekten in Digitalagenturen und vermittelt grundlegende Skills im Umgang mit dem Webgrafikstandard im Zusammenspiel mit der JavaScript-3D-Bibliothek Three.js.
• Praxiscase: »A World of Belonging« für Airbnb
Der 3D-Globus für die Airbnb-Kampagne »#OneLessStranger« erwies sich als äußerst performancekritisches Projekt: Ben Priddy, Creative Director Technology bei Tool of North America in Santa Monica, erläutert die Umsetzung in WebGL und Three.js.
• Praxiscase: HTML5-Spiel »Flamingo Pablo«
Eigentlich ist das HTML5-Game mit dem tanzenden Flamingo ein privates Codeprojekt – und ein freier Versuch zu der Frage, wie interaktive Werbung sein muss. Nathan Gordon, Creative Developer bei der Digitalagentur Ultranoir, berichtet von der Realisierung der cursorsensitiven, supersympathischen HTML-Seite mittels WebGL, Matter.js und Three.js.
• Workshop: Polygon-Illus
Mit wenigen Vielecken erbaute Bildwelten faszinieren durch ihre eigenwillige Ästhetik. Evan Boehm erklärt, wie er die polygonalen Strukturen von »The Carp and the Seagull« mit Cinema 4D, WebGL und Three.js erzeugte
• Tutorial: 3D-Shop-Konfigurator
Die Interactive-Developer Thomas Reufer und Martin Panknin erläutern ihr Projekt Schritt für Schritt – vom Entwurf der 3D-Modelle und der Erstellung ihrer Texturen über die Wahl des passenden Frameworks und Renderers bis hin zur Konvertierung der 3D-Daten und dem Einbau der Interaktionen.
• Workshop: Musik-Game »The Zoetrope«
Aus ihrem schicken 3-D-Intro für die Frankfurter MTV European Music Awards 2012 entwickelte die Motion-Design-Agentur SEHSUCHT ein Browsergame, in dem der User die Puppen tanzen lässt – alles im Takt zur Musik. Producerin Christina Geller und Designer David Weidemann erklären, was es in puncto Performance zu beachten gibt.
Frühe und frische WebGL-Projekte – lesen Sie weiter im PAGE eDossier »WebGL: Making-ofs und Workshops«.