30 WebGL-Experimente, die einfach nur wow sind!
Siehe, ein großes Werkzeug mit großen Versprechen kommt in Ihre Augen. Es ist schnell und reibungslos. Er rendert 3D und mit der Integration animiert erraten Sie, was es ist? HTML5? CSS3? Nein, es heißt WebGL, eine Softwarebibliothek, die die Funktionalität von JavaScript zur Erzeugung interaktiver 3D-Grafiken erweitert, und zwar ohne Plugins!
In diesem Schaufenster möchten wir Ihnen nicht die üblichen Dinge zeigen. Wir möchten Ihnen präsentieren 30 WebGL-ExperimentDiese wurden von professionellen Entwicklern sorgfältig erstellt, damit Sie die wahre Stärke des WebGL kennenlernen können, die nicht nur inspirierend ist, sondern auch einen Einblick in die Zukunft des Webs gibt. Nach Klick in die Zukunft springen!
Es wird dringend empfohlen, diese Demos mit der neuesten Version der Entwicklerversion von Google Chrome anzuzeigen. Die meisten Demos unterstützen jedoch die neueste Version von Firefox, Google Chrome und Safari.
3 Träume von Schwarz
3 Dreams of Black wurde vom Google Data Arts Team verfasst und führt Sie in 3 Traumwelten, die aus einer Kombination aus 2D-Zeichnungen und Animationen bestehen, die mit interaktiven 3D-Sequenzen verwoben sind. Überprüfen Sie die Wunder für wundervolle Erfahrung!
Animierte Volumenpartikel
Dies ist wirklich künstlerisch - animierte Tiere, die aus 3D-Partikeln mit Float-Texturen und Bildpuffer-Objekten konstruiert wurden. Noch mehr Überraschung, wenn Sie die Maus bewegen!
Aquarium
Simulieren Sie eine Unterwasserumgebung? Für WebGL ist das kein Problem. Die Demo bietet 3D-Modelle mit hochwertigen Texturen, Szenenanimationen, Pixel-Shader-Animationen, Reflexionen, Refraktion und Kaustiken - alles, um die realistische Unterwasserszene aufzustellen!
Azathioprin
Wahrscheinlich die epischste WebGL-Demo, genug gesagt. Hat Tipp an den Autor Jochen Wilhelmy.
Attractors Trip
Wenn Sie das 3D-Erlebnis erleben möchten, ist dies die beste Demo für Sie. Lassen Sie sich auch mit der immensen Schönheit der von WebGL generierten Grafiken mit der Martin-Hopalong-Formel meditieren.
Qualle
“Prozedurale Modellierung mit Side FX Houdini. Exportiert mit einem Python-Exporter in das Json-Format. Textur mit Autodesk Mudbox gemalt. Animiert mit einem Vertex-Shader.”
Chrysaora
Dies ist keine reguläre Animationsdemo, aber es bietet dynamisch simulierte Skelette, teilweise serverseitige Simulation und Synchronisierung mit WebSocket, ein kameragesichtiges Partikelsystem, einen volumetrischen Lichteffekt und die Matrix-Bibliothek von Vladimir Vukićević. Kurz gesagt, ein erstaunliches Experiment mit komplexen Werken.
HalloRacer
Vorstellung der interaktiven High-End-Fahrzeugsimulation, die exklusiv von HelloEnjoy zur Verfügung gestellt wird.
Materialien: Autos
Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 und Chevrolet Camaro in Ihrem Browser. Wählen Sie Ihre Fahrt und genießen Sie die Aussicht. Heck, du kannst sogar ihre Farben wählen.
WebGL-Autos
Die Zukunft der Need For Speed-Serie wird im Webbrowser sein. Zu ehrgeizig? Bestimmt nicht, wenn Sie diese Autos besucht haben, die mit dynamischen Würfelkarten, Schattenkarten und Nachbearbeitungseffekten gerendert wurden.
Meine Roboternation
Wenn die Figur nicht dein Favorit ist, dann versuche einen coolen und charmanten Roboter zu bauen und deinem Freund zu zeigen! Sie können sogar Ihr Geld ausgeben, um es zu einem echten Geschäft zu machen.
Pacmaze
Wie wäre es mit einem 3D-Pac-Man-Spiel? Die Grafik und das Gameplay sind nett und vor allem macht es Spaß!
Rote Schießhaube
Nun, hier ist ein süßer… oder verdammter. Dies ist nichts anderes als ein interessantes Spiel, das Ihnen die Fähigkeiten von WebGL zeigt, wenn es zum Top-Down-Shooter-Spiel entwickelt wurde. Spaß und amüsant für sicher.
TankWorld
Sie denken, ein unterhaltsames Panzer-Shooter-Spiel mit Waffen und Karten zum Erkunden. In einigen Levels können Sie sogar einen Hubschrauber bekommen, um die Welt zu erkunden! Es ist wirklich mehr als nur ein normales Spiel, und die Grafik sieht bequem aus!
Pulpo
Bestes Beispiel dafür, wie einfache Grafiken und Animationen Menschen beeindrucken können, wenn sie richtig gemacht werden.
Oberfläche
Schauen Sie sich die Oberfläche an, ein elegantes und inspirierendes Experiment von Paul Lewis. Sie können Größe, Elastizität, automatischen Orbit, Drahtgitter und Regentropfen in der Demo nicht nur ändern, sondern auch Ihre eigenen Bilder ziehen und ablegen, um den Effekt anders zu fühlen.
Fototeilchen
Legen Sie einfach Ihr Lieblingsbild in dieser Demo ab und genießen Sie es zu sehen, wie es in eine Tonne von Partikeln explodiert und mit irgendeiner Form von Magnetismus interagiert. Das Experiment ist eine Kombination aus vier Technologien: Drag & Drop von HTML5, File API, Canvas und WebGL.
Rutt-Etra-Izer
Rutt-Etra-Izer ist eine WebGL-Emulation des klassischen Rutt-Etra-Videosynthesizers. In der Demo können Sie Ihre eigenen Bilder einfügen und bearbeiten. Mit diesem Zeug kann ein 2D-Bild sogar wie ein 3D aussehen!
Der Wackeltanz
Eine einfache, aber bemerkenswerte Demo, die zeigt, wie flüssig der WebGL sein kann, mit anisotropem Lichtshader und einer Deformation des Wobble-Vertex.
Ultranoir
Ein weiteres großartiges Experiment, das das Potenzial der WebGL aufzeigt. Nouvelle Vague bietet ein poetisches und interaktives 3D-Echtzeiterlebnis auf Twitter-Basis. Was Sie sehen, sind Tweets, die mit verschiedenen Flugobjekten ausgeführt werden. Sicher eine künstlerische Art, die Tweets zu genießen.
Wellenförmiger Affe
“Dieses Mal wollte ich nur testen, wie viele Vertexpositionen und Normalen ich direkt in JavaScript aktualisieren kann. Es stellt sich heraus, dass 2.000 ganz gut ist :) Ich habe auch ein bisschen Umgebungs-Mapping hinzugefügt. Und Verrücktheit. Füge immer Verrücktheit hinzu.”
Video-FX
Beeindruckende App von Daniel Pettersson, mit der Sie mehrere gleichzeitige Nachbearbeitungseffekte auf einen Happy Feet 2-Trailer anwenden können. Versuchen und Spaß haben!
Voxels Liquid
Die 3D-Darstellung des klassischen 2D-Wassereffektalgorithmus zeigt Ihnen auch, wie interaktiv WebGL ist.
WebGL-Bücherregal
Durchsuchen Sie mit diesem WebGL-Bookcase, das vom Google Data Arts-Team entwickelt wurde, mehr als 10.000 Buchumschläge. Sie können auch nach Betreff suchen, durch Anklicken ein 3D-Modell öffnen und Bücher mit QR-Code auf Ihrem Telefon herunterladen.
WebGL-Globus
Ein cooles Google-Team-Experiment, bei dem Sie sich mit seiner schönen, eleganten und futuristischen Datenvisualisierung tatsächlich wie in der Zukunft fühlen.
Weltflüge
Eine weitere visuell ansprechende Datenvisualisierungs-App, die die Flugrouten wichtiger Fluggesellschaften visualisiert, sieht vielversprechend aus!
WebGL-Bildfilter
Grafische Editoranwendung mit WebGL? Es ist niemals unmöglich. Das Beste ist, es ist schnell und reibungslos!
WebGL-Wasser
“Ein Wasserbecken mit Reflexion, Refraktion, Kaustik und Umgebungsokklusion. Der Pool wird mit einem Höhenfeld simuliert und enthält eine Kugel, die mit der Wasseroberfläche interagieren kann.”
Reflexion
Das größte Problem, mit dem WebGL konfrontiert war, ist möglicherweise die Sicherheit. Laut Wikipedia gab das Computer Emergency Readiness Team der USA (US-CERT) die Warnung heraus, dass WebGL mehrere mögliche Sicherheitsrisiken enthält, die zur Ausführung von willkürlichem Code, Denial-of-Service und sogar domänenübergreifenden Angriffen führen können. Dies bedeutet sehr, sehr viel für den Inhaber der Website.
Die Khronos-Gruppe, zu der Mozilla und Google gehören, hat jedoch mögliche Lösungen und einen zukünftigen Entwicklungsansatz vorgeschlagen, um die Sicherheit gegen mögliche Sicherheitsbedrohungen zu erhöhen. Hoffentlich können die Probleme in Zukunft verringert und sogar gelöst werden, da der WebGL so viele Möglichkeiten bietet, wie er von talentierten und professionellen Entwicklern gezeigt wird!
Sagen Sie uns, welches Experiment Sie am meisten begeistert, und zeigen Sie uns natürlich, wenn Sie eines bekommen haben!
Weitere ähnliche Beiträge:
- HTML5-Website: 48 potentielle Flash-Kill-Demos
- HTML5-Website: 15 weitere Experimente
- Inspirierende CSS3-Animationsdemos
