Cinq présentations WebGL qui étonnent

Un navigateur sur un ordinateur, un navigateur sur un téléphone ou une smartwatch, ou peut-être même quelqu'un dans une théière? Les technologies Web nous entourent de tous les côtés et à mesure que le remplissage en fer se développe, elles deviennent plus spectaculaires et parfaites. Il y a quelques années à peine, WebGL était considéré comme un jouet amusant aux perspectives vagues. Mais beaucoup de choses ont changé et le flash précédemment populaire est remplacé par des technologies HTML5 / WebGL plus avancées.

Le temps a passé lorsque les démonstrations de WebGL étaient des artisanats primitifs, artisanaux ou des démonstrations de démonstration de développeurs de logiciels. Maintenant, de nombreuses marques bien connues utilisent cette technologie pour des présentations et beaucoup d'entre elles semblent très convaincantes.



Porshe 911


Tout le monde a entendu parler de la Porsche. Quelqu'un vient de voir, quelqu'un frotte avec amour un chiffon dans son garage. Eh bien, le reste du célèbre fabricant allemand propose de se familiariser avec la machine sur son site Web . Et pas seulement regarder les images, mais «sonder» les commandes, en savoir plus sur certains points forts technologiques.

La première chose qui vous frappe lorsque vous démarrez une démo est la qualité. Le modèle ressemble à une voiture «en direct». Avec de petits détails faits avec amour, des reflets de scène, des surfaces chromées. Et, plus intéressant encore, pas de freins dans le navigateur!

Le défilement gratuit du modèle, la mise à l'échelle vous permettent de considérer littéralement tout et même de regarder à l'intérieur. Les développeurs ont fait de leur mieux, optimisant parfaitement la scène et non au détriment de la beauté.



Et ceux qui en ont assez de tordre le modèle peuvent «tordre» le volant. En fait, l'action proposée démontre les capacités d'éclairage adaptatif et de feux de route dynamiques, mais non seulement le garçon voudra «diriger» une magnifique voiture. Ça a l'air génial!

Cependant, les Allemands prudents ne se sont pas limités à l'apparence de la voiture et ont permis un aperçu de l'intérieur. Bien sûr, toutes les images sont marquées par la qualité photographique, que ce soit un intérieur de voiture, des suspensions technologiques ou un moteur étincelant. Tout tourne, tourne et offre une tonne d'informations. Certains détails sont si précis que le doute se glisse, et ces photos ne sont-elles pas «tendues» sur le cadre des primitives?

En guise d'apothéose ou juste pour «presser» le client, à la fin de la présentation, une sorte de designer vous est proposée où vous pouvez choisir une modification de voiture, changer de roue ou de couleur. Bien sûr, tout cela n'est qu'un succès marketing, mais quelle visualisation de haute qualité ici! Soit dit en passant, de nombreuses marques bien connues (ay, AvtoVAZ!) Utilisent une approche similaire pour les démonstrations de voitures neuves.

Marcher sur mars


Si la première présentation a été faite en utilisant le moteur three.js, alors le programme suivant est le mérite de nos programmeurs. Non, l'application elle-même a été créée dans les entrailles de la NASA, seul le développement domestique Blend4Web a été utilisé comme base. Donc, ce qui est intéressant ici ...

En 2012, un appareil avec le nom modeste Curiosity a été livré à la surface de Mars (traduit de l'anglais "Curiosity"). Rôdant tranquillement et paisiblement à la surface de la planète, le rover a analysé le sol, envoyé de nombreuses photographies du paysage martien et excité les frères scientifiques avec de nombreuses découvertes. Tout irait bien, mais la NASA a décidé de populariser le fonctionnement de l'unité et a créé une application Web unique, permettant non seulement d'admirer les caractéristiques de conception de l'appareil, mais aussi de regarder en temps réel sur Mars avec les «yeux» de Curiosity.



La principale caractéristique de cette application est les trajectoires réelles de l'appareil à la surface de Mars. De plus, tout cela est accompagné d'une vidéo tournée par plusieurs caméras du rover. La trajectoire passe par plusieurs points clés où certaines actions ont été réalisées par les opérateurs de l'appareil. De côté, il est amusant de voir comment l’unité agite le manipulateur, s’adaptant à la tâche. Dans le même temps, les voix off commentent ce qui se passe et, en même temps, des photographies liées au terrain sont montrées.

Et pour ceux qui en ont assez de regarder l'appareil, les développeurs ont préparé une petite aide en ligne sur sa conception. En cliquant sur les détails qui ont attiré la souris, vous pouvez découvrir beaucoup de choses intéressantes. En outre, les utilisateurs particulièrement corrosifs peuvent tordre manuellement les manipulateurs de rover, bien sûr, dans les limites du disponible.

Entrez dans SkyNet


Apocalypse piloté par SkyNet arrive! Et, si vous voulez rencontrer de futurs ennemis, il est temps d'entrer dans le réseau .



Le site spécifié n'est rien d'autre qu'une excellente tentation de regarder le film "Terminator: Genesis". En plus des affiches standard, des bandes-annonces, des teasers - les cinéastes ont proposé un si grand spectacle interactif.

Le point culminant de l'idée est de lier des graphiques en trois dimensions à de vraies images du film. Un visiteur de SkyNet peut apprendre des détails intéressants sur les personnages principaux, les robots et les acteurs en direct. Par exemple, SpIder Tank. Quel genre de monstre est-ce? Et donc, il a tordu le modèle (en passant, fait qualitativement), a lu les informations sur les nœuds clés, et a même regardé une vidéo liée aux capacités du monstre.



Honnêtement, cette présentation d'informations sur le film semble innovante et très séduisante. WebGL / HTML5 élève la barre à un niveau de perception complètement différent.

Humain bio-numérique


Et c'est un niveau complètement différent. Si, dans les trois premiers cas, la technologie WebGL était davantage utilisée à des fins de divertissement, les développeurs proposent ici leurs meilleures pratiques dans un contexte d'apprentissage.



Ce projet se concentre sur les organisations liées à l'industrie médicale. Modèles qualitativement exécutés de divers organes, visualisation précise des processus en cours, modes de visualisation spéciaux - tout cela nous permet de simplifier le processus d'apprentissage ou de démontrer les caractéristiques de l'évolution de la maladie.

Et ici ce n'est même pas la qualité des modèles, mais la précision de l'implémentation. Par exemple, lors de la démonstration du fonctionnement de l'articulation du genou, vous ne pourrez pas la plier plus que prévu.

De plus, il existe un mode «Rayons X» très intéressant, qui est activé par un bouton spécial dans le lecteur. Dans ce cas, le modèle devient translucide avec la possibilité de considérer certaines fonctionnalités internes. De plus, si nécessaire, vous pouvez mettre en évidence une partie de l'objet sur le fond de «l'image radiographique». Ainsi, dans la capture d'écran ci-dessous, vous pouvez clairement considérer la rupture du ligament.



Selon les développeurs, un total d'environ 5 000 objets ont été créés et plusieurs leçons complètes sur l'anatomie humaine ont été faites. Il semble qu'une telle approche de l'apprentissage sera beaucoup plus efficace qu'avec les atlas en papier conventionnels.

Salut Halo!


Webgl est parfait pour créer des scènes interactives, des présentations, des jeux et, plus important encore, rassemble les utilisateurs de diverses plates-formes dans une fenêtre de navigateur. Les créateurs de la célèbre série du jeu Halo, ont profité des capacités uniques des technologies de navigateur modernes et ont créé une chambre spéciale «invité» .



L'idée est simple à déshonorer, mais grâce à WebGL, il a été possible de combiner une image visuelle inhabituelle (vous devez avoir l'air "en direct", car la capture d'écran ne transmet pas l'effet) avec un certain babillard.

En fait, les particules qui forment la forme du casque du célèbre jeu sont les souhaits des utilisateurs. Des centaines et des centaines de messages laissés sur la page du site, forment progressivement un modèle intégral. Initialement, le casque était une grille simple et primitive. Vous pouvez le vérifier si vous déplacez le curseur sur la chronologie en bas de l'écran. Je me demande à quoi ressemblera le casque après avoir atteint un certain seuil. En attendant, vous pouvez également rejoindre ceux qui attendent le jeu et griffonner quelques lignes sur ce «babillard» inhabituel.

P.S


Comme vous pouvez le voir, toutes les présentations sélectionnées montrent le besoin et la facilité d'utilisation de la technologie WebGL. Les ordinateurs personnels avec des systèmes mobiles sont de plus en plus proches. Il viendra un temps où les applications de navigation deviendront véritablement multiplateformes.

Source: https://habr.com/ru/post/fr386071/


All Articles