◽️ ⚜️ 🙆 Fünf erstaunliche WebGL-Präsentationen 🖕🏽 🌀 ↘️

Ein Browser auf einem Computer, ein Browser auf einem Telefon oder einer Smartwatch oder vielleicht sogar jemand in einer Teekanne? Webtechnologien umgeben uns von allen Seiten und während sich die Eisenfüllung entwickelt, werden sie spektakulärer und perfekter. Noch vor wenigen Jahren wurde WebGL als lustiges Spielzeug mit vagen Perspektiven bezeichnet. Aber viel hat sich geändert und der bisher beliebte Flash wird durch fortschrittlichere HTML5 / WebGL-Technologien ersetzt.

Die Zeit ist vergangen, als die Demonstrationen von WebGL primitives, handwerkliches Handwerk oder Demonstrationsdemos von Softwareentwicklern waren. Jetzt verwenden viele bekannte Marken diese Technologie für Präsentationen und viele von ihnen sehen sehr überzeugend aus.

Porshe 911

Jeder hat vom Porsche gehört. Jemand hat es gerade gesehen, jemand reibt liebevoll ein Tuch in seiner Garage. Nun, der Rest des berühmten deutschen Herstellers bietet an, sich auf seiner Website mit der Maschine vertraut zu machen . Schauen Sie sich nicht nur die Bilder an, sondern „prüfen“ Sie die Bedienelemente, um mehr über einige technologische Highlights zu erfahren.

Das erste, was Ihnen beim Starten einer Demo auffällt, ist die Qualität. Das Modell sieht aus wie ein "lebendes" Auto. Mit kleinen, liebevoll gemachten Details, Szenenreflexionen, Chromoberflächen. Und am interessantesten ist, dass der Browser nicht gebremst wird!

Kostenloses Scrollen des Modells und Skalieren ermöglichen es Ihnen, buchstäblich alles zu betrachten und sogar in den Innenraum zu schauen. Die Entwickler haben ihr Bestes gegeben, die Szene perfekt optimiert und nicht auf Kosten der Schönheit.

Und wer es satt hat, das Modell zu drehen, kann das Lenkrad „drehen“. Tatsächlich zeigt die vorgeschlagene Maßnahme die Fähigkeiten der adaptiven Beleuchtung und des dynamischen Fernlichts, aber nicht nur der Junge wird ein großartiges Auto „lenken“ wollen. Es sieht einfach toll aus!

Umsichtige Deutsche beschränkten sich jedoch nicht nur auf das Aussehen des Autos und erlaubten einen Blick in sein Inneres. Natürlich sind alle Bilder von fotografischer Qualität geprägt, egal ob es sich um einen Innenraum, technologische Aufhängungen oder einen funkelnden Motor handelt. Alles dreht sich, dreht sich und bietet eine Menge Informationen. Einige Details sind so präzise, dass Zweifel aufkommen, und sind diese Fotos nicht „straff“ auf dem Rahmen von Primitiven?

Als Apotheose oder einfach nur als Wunsch, den Kunden zu „quetschen“, wird am Ende der Präsentation eine Art Designer angeboten, bei dem Sie eine Fahrzeugmodifikation auswählen, die Räder wechseln oder die Farbe ändern können. Das alles ist natürlich nur ein erfolgreicher Marketing-Schachzug, aber was für eine hochwertige Visualisierung hier! Übrigens verwenden viele bekannte Marken (ay, AvtoVAZ!) Einen ähnlichen Ansatz für die Demonstration neuer Autos.

Gehen Sie auf dem Mars

Wenn die erste Präsentation mit der three.js-Engine erstellt wurde, ist das nächste Programm das Verdienst unserer Programmierer. Nein, die Anwendung selbst wurde im Darm der NASA erstellt, nur die inländische Entwicklung Blend4Web wurde als Grundlage verwendet. Also, was ist hier interessant ...

2012 wurde ein Gerät mit dem bescheidenen Namen Curiosity an die Oberfläche des Mars geliefert (übersetzt aus dem Englischen "Curiosity"). Der Rover kroch leise und friedlich auf der Oberfläche des Planeten, analysierte den Boden, sandte zahlreiche Fotos der Marslandschaft und begeisterte die wissenschaftlichen Brüder mit zahlreichen Entdeckungen. Alles wäre in Ordnung, aber die NASA beschloss, den Betrieb der Einheit bekannt zu machen und erstellte eine einzigartige WebanwendungSo können Sie nicht nur die Designmerkmale des Geräts bewundern, sondern auch in Echtzeit mit den „Augen“ der Neugier auf den Mars schauen.

Das Hauptmerkmal dieser Anwendung sind die realen Flugbahnen der Apparatur auf der Marsoberfläche. Darüber hinaus wird dies von einem Video begleitet, das von mehreren Kameras des Rovers aufgenommen wurde. Die Flugbahn verläuft durch mehrere Schlüsselpunkte, an denen einige Aktionen von den Bedienern des Geräts ausgeführt wurden. Von der Seite macht es Spaß zu beobachten, wie das Gerät den Manipulator bewegt und sich an die Aufgabe anpasst. Gleichzeitig kommentieren die Voice-Overs das Geschehen und gleichzeitig werden an das Gelände gebundene Fotos gezeigt.

Und für diejenigen, die es satt haben, sich das Gerät anzusehen, haben die Entwickler eine kleine Online-Hilfe zu seinem Design vorbereitet. Wenn Sie auf die Details klicken, die die Maus angezogen haben, können Sie viele interessante Dinge herausfinden. Darüber hinaus können besonders ätzende Benutzer die Rover-Manipulatoren natürlich manuell innerhalb der verfügbaren drehen.

Geben Sie in SkyNet

Die von SkyNet betriebene Apokalypse kommt! Und wenn Sie zukünftige Feinde treffen möchten, ist es Zeit, das Netzwerk zu betreten .

Die angegebene Site ist nichts anderes als eine ausgezeichnete Versuchung, den Film „Terminator: Genesis“ anzusehen. Neben Standardplakaten, Trailern und Teasern haben sich die Filmemacher eine so großartige interaktive Show ausgedacht.

Der Höhepunkt der Idee besteht darin, dreidimensionale Grafiken mit realen Bildern aus dem Film zu verknüpfen. Ein SkyNet-Besucher kann interessante Details über die Hauptfiguren erfahren, sowohl Roboter als auch Live-Schauspieler. Zum Beispiel SpIder Tank. Was für ein Monster ist das? Und so drehte er das Modell (übrigens qualitativ gemacht), las die Informationen über die Schlüsselknoten und sah sich sogar ein Video an, das sich auf die Fähigkeiten des Monsters bezog.

Ehrlich gesagt sieht diese Präsentation von Informationen über den Film innovativ und sehr verlockend aus. WebGL / HTML5 legt die Messlatte auf eine völlig andere Wahrnehmungsebene.

Biodigitaler Mensch

Und das ist eine ganz andere Ebene. Wenn in den ersten drei Fällen die WebGL-Technologie eher zu Unterhaltungszwecken verwendet wurde, bieten die Entwickler hier ihre Best Practices in einem Lernkontext an.

Dieses Projekt konzentriert sich auf Organisationen, die mit der medizinischen Industrie verbunden sind. Qualitativ ausgeführte Modelle verschiedener Organe, genaue Visualisierung laufender Prozesse, spezielle Betrachtungsmodi - all dies ermöglicht es uns, den Lernprozess zu vereinfachen oder die Merkmale des Krankheitsverlaufs zu demonstrieren.

Und hier geht es nicht einmal um die Qualität der Modelle, sondern um die Genauigkeit der Implementierung. Wenn Sie beispielsweise die Funktionsweise des Kniegelenks demonstrieren, können Sie es nicht mehr als erwartet biegen.

Darüber hinaus gibt es einen sehr interessanten „Röntgen“ -Modus, der über eine spezielle Taste im Player aktiviert wird. In diesem Fall wird das Modell durchscheinend, wobei einige interne Merkmale berücksichtigt werden können. Darüber hinaus können Sie bei Bedarf einen Teil des Objekts vor dem Hintergrund des „Röntgenbildes“ hervorheben. Im folgenden Screenshot können Sie den Bandriss klar betrachten.

Nach Angaben der Entwickler wurden insgesamt etwa 5.000 Objekte erstellt und mehrere vollständige Lektionen zur menschlichen Anatomie durchgeführt. Es scheint, dass ein solcher Lernansatz viel effektiver sein wird als bei herkömmlichen Papieratlanten.

Hallo Halo!

Webgl eignet sich perfekt zum Erstellen interaktiver Szenen, Präsentationen, Spiele und vereint vor allem Benutzer verschiedener Plattformen in einem Browserfenster. Die Schöpfer der berühmten Serie des Spiels Halo, nutzten die einzigartigen Möglichkeiten moderner Browser - Technologien und einen speziellen „Gast“ erstellt Raum .

Die Idee ist einfach zu blamieren, aber dank WebGL war es möglich, ein ungewöhnliches visuelles Bild (Sie müssen „live“ aussehen, da der Screenshot den Effekt nicht überträgt) mit einem Massen-Message Board zu kombinieren.

Tatsächlich sind die Partikel, die die Helmform aus dem berühmten Spiel bilden, die Wünsche des Benutzers. Hunderte und Hunderte von Nachrichten, die auf der Site-Seite hinterlassen werden, bilden nach und nach ein integrales Modell. Anfangs war der Helm ein einfaches, primitives Gitter. Sie können dies überprüfen, wenn Sie den Schieberegler in der Zeitleiste am unteren Bildschirmrand verschieben. Ich frage mich, wie der Helm nach Erreichen einer bestimmten Schwelle aussehen wird. In der Zwischenzeit können Sie sich auch denen anschließen, die auf das Spiel warten, und ein paar Zeilen auf dieses ungewöhnliche „Message Board“ schreiben.

P.S.

Wie Sie sehen können, zeigen alle ausgewählten Präsentationen die Notwendigkeit und Benutzerfreundlichkeit der WebGL-Technologie. Näher und näher sind PCs mit mobilen Systemen. Es wird eine Zeit kommen, in der Browseranwendungen wirklich plattformübergreifend werden.