Wie WebGL das Erbe von Flash neu erfindet
Erinnern Sie sich an all diese Projekte mit herausragenden Interaktionen, atemberaubenden Animationen und spannenden begleitenden Sound-Effekten, die zu einer immersiven Benutzererfahrung führten? Ja, es gibt Chancen, die mit Hilfe von Flash erstellt wurden.
Wie auch immer, ich muss zugeben, dass die Ära der Multimedia-Plattform zu Ende gegangen ist. Flash ist endlich tot. Aber fürchte dich nicht! Wie es oft passiert, wenn sich eine Tür schließt, öffnet sich eine andere, und Flash wird langsam durch einen frischeren, kräftigeren Nachfolger ersetzt. Technologien wie WebGL und begleitende JavaScript-Bibliotheken wie Drei .js wachsen schnell und ermöglichen es Entwicklern, Flash-ähnliche Projekte ohne die damit verbundenen Sicherheitsprobleme zu erstellen.
Heute werden wir uns auf WebGL und Three.js konzentrieren. Diese Paarung ist eine leistungsstarke Option für immersive UX.
WebGL und Three.js
WebGL dient als Grundlage, die Instrumente zur Manipulation mit interaktiven 3D- und 2D-Computergrafiken bietet. Sie haben die Möglichkeit, Elemente mit HTML-Elementen zu kombinieren und mit anderen Elementen der Seite oder des Hintergrunds zu kombinieren.
Three.js ist eine Javascript-Bibliothek mit einer Liste von High-End-Funktionen, mit denen Sie mit Szenen, Kameras, Lichtern, Geometrie und mehr arbeiten können. Es soll das Potenzial von WebGL erschließen, indem der Plattform zusätzliche Funktionen hinzugefügt werden. Es macht es einfach, GPU-beschleunigte 3D-Animationen zu erstellen, ohne auf Browser-Plugins angewiesen zu sein.
Kompatibilitätsprobleme
Mit den modernen Technologien sind Sie immer in einem Dilemma: Entweder erstellen Sie ein "one size fits all" -Projekt, das auf verschiedenen Geräten läuft und konsistente Benutzererfahrung bietet, oder stellen Sie alles auf die Reihe und beeindrucken Sie sofort die Zielgruppe, die Sie erreichen können .
Mit WebGL und Three.js ist es die gleiche Geschichte. Safari, Opera und die meisten mobilen Browser (und damit auch der Internet Explorer) sind wie eine Fliege in Ihrem Chardonnay. Leider sind viele Benutzer mit Legacy-Browsern beschäftigt, so dass die Kompatibilität ein großes Hindernis darstellt - aber die Unterstützung nimmt zu (was mehr ist als für Flash zu sagen) und vorausgesetzt, Sie verwenden sie nicht für geschäftskritische Anwendungen, WebGL und Three.js sind ausgezeichnete Optionen.
Beispiele
Leere
Leere ist ein Experiment von Hi-ReS !, einem kreativen Studio in London. Die Entwickler wollten von den Einschränkungen moderner Plattformen und Browser abstrahieren und die Grenzen der aktuellen Technologien testen. Es scheint, dass sie es genagelt haben.
Es handelt sich um eine reine Desktop-Anwendung, die mit WebGL- und Web-Audio-Funktionen ausgestattet ist. Zusammen mit Howler.js, GSAP und Coffee Collider hat Three.js an der Produktion dieses außergewöhnlichen Spielplatzes mitgewirkt, der die Online-Besucher unaufhaltsam zu einer Reise führt, die einem digitalen Buch ähnelt.
Umgestaltung von Exzellenz
Diese interaktive Kampagne Sennheisers Jubiläum gewidmet ist eine epische Odyssee, die nicht nur dramatische Science-Fiction-Landschaften, sondern auch zahlreiche topaktuelle Features und Details vereint. Es ist ein reines Chrome-Experiment, bei dem Besucher sich an der Gestaltung und Gestaltung eines Klangmonuments beteiligen können. Obwohl die Phase der Ausbildung abgeschlossen wurde - eine Million Menschen auf der ganzen Welt nahmen an der Veranstaltung teil -, wird es immer schwächer. Gern können Sie Ihren Beitrag dazu leisten, diese massive Klangskulptur begutachten und das Intro-Video und die erstklassige Ausführung genießen.
Bruno Quintela
Das persönliche Portfolio von Bruno Quintela ist ein in Echtzeit gerenderter WebGL-Versuch, der das Potenzial des Künstlers und die Möglichkeiten der aktuellen Webtechnologien aufzeigt. Verwenden Sie Ihre Maus, um die Szene gründlich zu untersuchen. Ziehen Sie es in verschiedene Richtungen, um zu sehen, was in dieser Masse von genau zusammengesetzten 3D-Polygonen mit glänzenden Oberflächen verborgen ist. Die Idee dient als hervorragende Eröffnung für die Website, die einen starken, nachhaltigen ersten Eindruck hinterlässt.
Partikeltest
Dieses Projekt zeigt einen Wirbelwind von weniger geordneten und organisierten Röhren von Partikeln, die von High-Tech-Atmosphäre ausstrahlen. Es gibt ein Kontrollzentrum, das Sie dazu ermutigt, mit Attributen wie dem Radius einer zylinderförmigen Wolke, der Dichte von Röhren, der Höhe, der Skalierung und vielem mehr zu spielen. Das Konzept ist faszinierend.
Wasser-Shader
Dieser Künstler hat es geschafft ahmt eine Wasseroberfläche nach durch Nachahmung des natürlichen Verhaltens von Flüssigkeit. Die konvexe Form und die wellenförmige Oberfläche mit Sonnenreflexen als letzten Schliff erzeugen eine wirklich realistische Szene, die von der ersten Sekunde an auffällt.
WebGL-Partikelkopf
Als Flash erfolgreich war, sind Partikel heutzutage der letzte Schrei. Animationen verschiedener Größe und Art sind in zahlreichen Projekten zu sehen diese Arbeit ist eine solche. Die subtile Version eines Kopfes, der vage an einen intelligenten menschenähnlichen Roboter aus Isaac Asimovs Romanen erinnert, ist ein wahres Meisterwerk. Nicht nur die Umsetzung überrascht, sondern auch ihr Verhalten. Es reagiert auf Mausbewegungen, neigte den Kopf natürlich nach rechts, links, oben und unten.
Dynamischer 3D-Konfetti-Text
Text-Effekt ist eine der Möglichkeiten, langweilige Interfaces mit einem Hauch von Verspieltheit und Coolness aufzupeppen und den gewünschten Schriftzug zu betonen. Rachel Smiths Konfetti-inspirierte Lösung wird sicherlich dazu beitragen, das Design mit hellen Emotionen zu bereichern und den Titel in den Mittelpunkt zu stellen. Geben Sie ein Wort in das Eingabefeld ein, um die ganze Magie zu sehen. Lebendige und lebendige geometrische 3D-Teile werden die Anfrage formen und das Ergebnis interaktiv gestalten.
3D-Panorama-Betrachter
Three.js ist in gemeinsamen Projekten nützlich, wie Max Chuhryaev beweist. Seine Lösung wandelt Panoramabilder mühelos in ein wesentliches Detail der Benutzererfahrung um. Es hat eine angenehme Perspektive und eine sich langsam bewegende Kamera: Zusammen fühlen sie sich als Teil der Komposition. Es passt gut zu den Landschaften, Stadtansichten und Innenräumen und ermöglicht den Benutzern, die Schönheit statischer Multimedia zu genießen.
Dreieck-Muster-Generator
Dieses Experiment gibt dir einen fantastischen polygonalen Hintergrund mit einem schönen 3D-Gefühl. Es fungiert auch als ein Spielplatz, wo Sie einige Bereiche heller und andere dimmen können: Verwenden Sie einfach Ihre Maus. Mit der Optionspalette können Sie einen Großteil der Details der Arbeitsfläche einstellen, einschließlich Licht-, Netz-, Render- und sogar Exporteinstellungen.