10 Case Studys und Step-by-Step-Tutorials aus Design und Development mit WebGL, Three.js und Co.
Blühende Landschaften – so lautete unser Zwischenfazit rund um die JavaScript-Schnittstelle WebGL, als wir das PAGE eDossier »WebGL: Making-ofs & Workshops« 2017 um ergänzende Cases erweiterten. Die Web Graphics Library war endgültig angekommen im digitalen Agenturalltag und beschert uns seither anspruchsvolle, unterhaltsame und visuell bahnbrechende Projekte. Das PAGE eDossier »WebGL: Making-ofs & Workshops«berichtet von frühen und aktuellen WebGL-Projekten in Digitalagenturen und vermittelt grundlegende Skills im Umgang mit dem Webgrafikstandard im Zusammenspiel mit der JavaScript-3D-Bibliothek Three.js.
Verschaffen Sie sich einen Überblick darüber, was alles möglich ist mit WebGL – in unseren Praxis-Case-Studies und Hands-on-Tutorials aus den Digitalagenturen Dunckelfeld, Demodern, Ufomammoot, Artificial Rome, Philipp und Keuntje, Tool of North America, Ultranoir und Sehsucht.
Case Studies:
Interaktive Slot Machine für die Webseite der Hamburger Hip-Hop-Crew Beginner
WebGL eignet sich nicht nur, um 3D-Inhalte im Browser darzustellen, man kann mit der Grafikbibliothek auch Videos in Echtzeit rendern. Diese Möglichkeit nutzte die Kölner Digitalagentur Dunckelfeld für die Gestaltung des neuen Webauftritts der Hamburger Hip-Hop-Pioniere Beginner. Das Ergebnis: ein interaktiver einarmiger Bandit, auf dessen virtuellen Walzen statt der obligatorischen Früchtchen oder Spielkarten Videos der drei Rapper rotieren. Dabei setzte die Agentur extensiv WebGL-Shader ein, um die Videos live im Browser zu rendern. Software: HTML5, CSS3, JavaScript, WebGL und die 3D-Grafik-Engine Cables
3D-Konfigurator für helmade.com
Die Hamburger Digitalagentur Demodern konzipierte und realisierte einen 3D-Produktkonfigurator für das Frankfurter Start-up helmade. Die ausgeklügelte, in den Magento-Webshop der Seite integrierte Anwendung bietet eine bemerkenswerte User Experience. Nico Zimmermann, Director Creative Engineering bei Demodern, erläutert die Texturierung in WebGL. Eine Geschichte über Design und Development mit Three.js, HTML5, CSS3/Sass, Autodesk Maya, InVision, Trello, JIRA und Magento und natürlich WebGL
3D-Inszenierung des neuen DFB-Fußballtrikots
Die in der Berliner Digitalagentur Ufomammoot erstellte, inzwischen Open Source erhältliche 3D-Browser-Engine Cables bildet das Zentrum dieser Projektgeschichte rund um das Online-Special zur 2016er DFB-Kollektion für den Sportartikelhändler 11teamsports. Thomas Kombüchen, Entwickler bei undefined development in Berlin, berichtet, wie er mit Cables WebGL-Projekte beschleunigt. Software: HTML5, CSS3, WebGL, 3D-Grafik-Engine Cables, JavaScript, SVG, Node.js, gulp.js, WebSockets
Crossplatform-Kampagne für Sennheiser
Für den geradezu bombastischen Sennheiser-Auftritt des High-End-Kopfhörers Orpheus loteten Artificial Rome und Philipp und Keuntje gemeinsam mit dem Animationsstudio Sehsucht die Grenzen von WebGL aus. Wir berichten über Konzept und Umsetzung der immersiven Kampagnenwebsite. Die Tools: Axure, Adobe Creative Suite, CoffeeScript, Grunt, Node.js, Three.js, Unity, WebGL
PDF-Download: eDossier: »WebGL: Making-ofs und Workshops«
Das Experience Game »Way to Go« mixt von Hand gezeichnete Animationen mit realistischen und kunstvoll verfremdeten 360-Grad-Videos. Entstanden ist ein traumhafter Trip in die kanadischen Wälder mit Google Chrome, After Effects, GoPano, GoPro Hero3+, JavaScript, HTML5, WebGL, Three.js und der Web Audio API und WebGL
»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.
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.
PDF-Download: eDossier: »WebGL: Making-ofs und Workshops«
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
3D-Shop-Konfigurator – Step by Step
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.
PDF-Download: eDossier: »WebGL: Making-ofs und Workshops«
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: WebGL ermöglicht die Darstellung von 3D-Grafiken direkt im Browser, ohne zusätzliche Plugins. Dafür nutzt sie den auf dem System vorhandenen Grafikprozessor.
WebGL ist selbst keine 3D-Engine, sondern eine JavaScript Programmierschnittstelle für Webbrowser, die auf OpenGL ES 2.0 basiert. 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 HTML5-<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.
Am 1. März 2017 veröffentlichte die Khronos Group nun WebGL 2.0. Die neue Version verspricht unter anderem ein verbessertes Grafik-Rendering, steht bisher aber lediglich unter Firefox (ab Version 51), Google Chrome (ab Version 56) und Opera (ab Version 42) standardmäßig zur Verfügung.
WebGL funktioniert auch auf mobilen Devices. Geht es um 3D-Grafik, 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) ist die mobile Version von (nativem) OpenGL und 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. WebGL ist die Portierung genau dieses Standards in die Web-Welt (WebGL 1.0 ist OpenGl ES 2.0 für Browser/JavaScript, WebGL 2.0 ist OpenGl ES 3.0 für Browser/JavaScript).
WebGL-Inhalte kann man selbst programmieren. Wesentlich einfacher ist es allerdings, wenn man auf Grafiksoftware oder JavaScript-Bibliotheken zurückgreift. Schließlich ist auch mit Grafiksoftware wie Blender, CopperCube oder Maya der Export nach WebGL möglich. Daneben gibt es eine Reihe an Tools und Frameworks, die die Programmierung erleichtern beziehungsweise mit denen sich der Umfang des Codes auf einen Bruchteil reduzieren lässt. Hier erfreut sich das JavaScript-Framework Three.js großer Beliebtheit, daneben stehen weitere Frameworks und Tools wie Babylon.js, PlayCanvas oder Goo Engine zur Verfügung.
Diese günstigen Entwicklungsoptionen, gepaart mit guten Performancewerten haben dazu geführt, dass WebGL mittlerweile in den Webprojekten vieler Digitalagenturen verwendet wird – in ganz unterschiedlichen Anwendungen und Plattformen, auf Desktop-Computern, Tablets, Smartphones sowie auf VR-Brillen. Sogar in Onlineshops lässt sich die Grafikbibliothek einbinden, ohne dass die Seite an Geschwindigkeit einbüßt. Aufgrund ihrer Effizienz wird sie mittlerweile auch dezent zweckentfremdet und fürs Live-Rendering und die Manipulation von Videoclips eingesetzt.
