Unser großes WebGL-eDossier – jetzt mit neuen Making-ofs & Workshops

Praxisberichte und Case Studys aus Design und Development mit WebGL, Three.js und Co. 



WebGL, Design, Development, three.js, JavaScript, HTML5, web 3d, graphics library

Blühende Landschaften – so könnte das Zwischenfazit rund um die JavaScript-Schnittstelle WebGL lauten. Seit wir 2015 das PAGE eDossier »WebGL: Making-ofs & Workshops« in den PAGE Shop stellten, hat sich wahrlich einiges getan – die Web Graphics Library ist endgültig angekommen im digitalen Agenturalltag und beschert uns anspruchsvolle, unterhaltsame Projekte jenseits des Einheitsbreis, den wir in puncto Webdesign 2016 zu beklagen hatten.

Aus diesem Grund haben wir unser eDossier »WebGL: Making-ofs & Workshops« um frische neue Praxiscases erweitert:

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

Das interaktive WebGL-Game »Way to Go«
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


Button, call to action, onlineshop, PAGE

Plus diesen WebGL-Praxiscases …:

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


Button, call to action, onlineshop, PAGE

… und diesen Step-by-Step-Workshops und -Tutorials:

Polygon-Illus – Step by Step
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.


Button, call to action, onlineshop, PAGE

 

Zur Geschichte der JavaScript-Schnittstelle WebGL

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.

Das PAGE eDossier »WebGL: Making-ofs und 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.


Button, call to action, onlineshop, PAGE

Frühe und frische WebGL-Projekte – lesen Sie weiter im PAGE eDossier »WebGL: Making-ofs & Workshops«.

 

ID671

 

 


Schlagworte: , , , ,




Kommentieren

Einfach mit dem PAGE Account anmelden oder Formular ausfüllen

Name *

Email *

*Pflichtfeld

Ihr Kommentar *

 
 

Das könnte Sie auch interessieren