30 expériences WebGL qui sont simplement géniales!

Voici, car un grand outil avec de grandes promesses vient à vos yeux. C'est rapide et lisse. Il rend la 3D et, avec l'intégration, il s'anime, devinez quoi? HTML5? CSS3? Non, cela s'appelle WebGL, une bibliothèque de logiciels qui étend la capacité de JavaScript à générer des graphiques 3D interactifs, et oui, sans aucun plugin!

Dans cette vitrine, nous ne voulons pas vous montrer les choses habituelles. Nous voulons vous montrer 30 expérience WebGLs sont conçus avec soin par des développeurs professionnels pour vous permettre de voir la véritable puissance de WebGL. Ils sont non seulement inspirants, mais vous permettent également de vous faire une idée de ce à quoi le futur du Web pourrait ressembler. Saut dans le futur après le clic!

Il est fortement recommandé d'afficher ces démonstrations à l'aide de la dernière version de la version pour développeurs de Google Chrome. La plupart des démos supportent la dernière version de Firefox, Google Chrome et Safari, bien que.

3 rêves de noir

Créé par Google Data Arts Team, 3 Dreams of Black vous transporte dans 3 mondes de rêves construits à l'aide d'une combinaison de dessins 2D riches et d'animations entrelacées de séquences 3D interactives. Découvrez les merveilles pour une expérience merveilleuse!

Particules de volume animé

Celui-ci est vraiment artistique - des animaux animés construits par des particules 3D à l'aide de textures flottantes et d'objets tampons d'image. Plus de surprise si vous déplacez la souris!

Aquarium

Simuler un environnement sous-marin? Ce n'est pas un problème pour WebGL. La démo présente des modèles 3D avec des textures de haute qualité, une animation de scène, une animation de pixel shader, des réflexions, une réfraction et des caustiques, tout ce dont vous avez besoin pour créer une scène sous-marine réaliste!

Azathioprine

Probablement la démo la plus épique de WebGL, assez dit. Pointe du chapeau à l'auteur Jochen Wilhelmy.

Voyage d'attracteurs

Si vous voulez faire l'expérience de la 3D, c'est la meilleure démo pour vous, mais méditez aussi avec l'immense beauté des graphismes générés par WebGL à l'aide de la formule Hopalong de Martin.

Méduse

“Modélisation procédurale réalisée avec Side FX Houdini. Exporté avec un exportateur Python au format json. Texture peinte avec Autodesk Mudbox. Animé avec un vertex shader.”

Chrysaora

Il ne s’agit pas d’une démonstration d’animation classique, mais elle propose des squelettes simulés dynamiquement, une simulation partielle côté serveur et une synchronisation avec WebSocket, un système de particules orienté caméra, un effet de lumière volumétrique et la bibliothèque de matrices mjs de Vladimir Vukićević. En bref, une expérience incroyable avec des œuvres complexes.

HelloRacer

Présentation de la simulation de voiture interactive haut de gamme, présentée exclusivement par HelloEnjoy.

Matériaux: Voitures

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 et Chevrolet Camaro dans votre navigateur. Choisissez votre balade et profitez de la vue. Heck, vous pouvez même choisir leurs couleurs.

WebGL Cars

L'avenir de la série Need For Speed ​​sera dans le navigateur Web. Trop ambitieux? Certainement pas si vous avez visité ces voitures rendues avec des cartes de cubes dynamiques, des cartes fantômes et des effets de post-traitement.

Ma nation de robot

Eh bien, si la figure n’est pas votre préférée, essayez de construire un robot charmant et charmant et montrez-la à votre ami! Vous pouvez même dépenser votre argent pour en faire une vraie affaire.

Pacmaze

Que diriez-vous d'un jeu 3D Pac-Man? Les graphismes et le gameplay sont sympas, et surtout c'est amusant!

Hotte de tir rouge

Maintenant, voici un mignon… ou sanglant. Celui-ci n’est rien d’autre qu’un jeu intéressant pour vous montrer les capacités de WebGL lorsqu’il est développé en jeu de tireur de haut en bas. Amusant et amusant à coup sûr.

TankWorld

Vous l'aurez deviné, un jeu de tir de chars agréable avec des armes à utiliser et des cartes à explorer, et à certains niveaux, vous pouvez même obtenir un hélicoptère pour explorer le monde! C'est vraiment plus qu'un simple jeu, et le graphisme semble confortable!

Pulpo

Meilleur exemple de la façon dont de simples graphiques et animations peuvent impressionner les gens quand ils sont bien faits.

Surface

Découvrez la surface, une expérience élégante et inspirante faite par Paul Lewis. Vous pouvez non seulement modifier la magnitude, l'élasticité, l'orbite automatique, les images filaires et les gouttes de pluie dans la démo, mais aussi y glisser-déposer vos propres images pour ressentir l'effet différemment..

Photo Particules

Déposez simplement votre image préférée dans cette démo et profitez-en pour la voir exploser en une tonne de particules et interagir avec une forme de magnétisme. L’expérience combine quatre technologies: le glisser-déposer HTML5, l’API de fichier, Canvas et WebGL..

Rutt-Etra-Izer

Rutt-Etra-Izer est une émulation WebGL du synthétiseur vidéo classique Rutt-Etra. La démo vous permet de mettre vos propres images à l'intérieur et de les manipuler. Avec ce genre de choses, une image 2D peut même ressembler à une image 3D.!

La danse vacillante

Une démo simple mais remarquable qui montre à quel point le WebGL peut être liquide, avec un shader léger anisotrope et une déformation de vertex wobble.

Ultranoir

Une autre grande expérience mettant en valeur le potentiel du WebGL. Nouvelle Vague offre une expérience 3D en temps réel, poétique et interactive, basée sur Twitter. Ce que vous voyez sera des tweets réalisés avec différents objets volants. Certainement une façon artistique de profiter des tweets.

Singe ondulant

“Cette fois, je voulais juste faire un test pour voir combien de positions de vertex et de normales je pouvais mettre à jour directement en JavaScript. Il s'avère que 2 000 c'est très bien :) J'ai aussi ajouté un peu de cartographie de l'environnement. Et l'étrangeté. Toujours ajouter l'étrangeté.”

FX vidéo

Application impressionnante réalisée par Daniel Pettersson qui vous permet d'appliquer plusieurs effets de post-traitement simultanés à une bande-annonce de Happy Feet 2. Essayez et amusez-vous!

Voxels Liquid

Représentation 3D de l'algorithme classique de l'effet de l'eau en 2D, vous montre également comment WebGL est interactif.

Bibliothèque WebGL

Parcourez plus de 10 000 couvertures de livres avec cette bibliothèque WebGL, développée par l'équipe Google Data Arts. Vous pouvez également effectuer une recherche par sujet, ouvrir un modèle 3D de chacun en cliquant dessus et télécharger des livres sur votre téléphone avec le code QR..

WebGL Globe

Une expérience Google cool qui vous fait sentir comme si vous étiez dans le futur avec sa visualisation de données belle, élégante et futuriste.

Vols du monde

Une autre application de visualisation de données attrayante visuellement qui visualise les itinéraires de vol des principales compagnies aériennes semble prometteuse!

Filtre d'image WebGL

Application d'édition graphique avec WebGL? Ce n'est jamais impossible. Le meilleur de tous, c'est rapide et lisse!

WebGL Water

“Une piscine d'eau rendue par la réflexion, la réfraction, les caustiques et l'occlusion ambiante. La piscine est simulée avec un relief et contient une sphère pouvant interagir avec la surface de l'eau.”

Réflexion

Le principal problème rencontré par WebGL est peut-être sa sécurité. Selon Wikipédia, l'équipe américaine de préparation aux urgences informatiques (US-CERT) a averti que WebGL contenait de nombreux problèmes de sécurité pouvant entraîner l'exécution arbitraire de code, le déni de service et même des attaques interdomaines. Cela signifie beaucoup pour le propriétaire du site..

Cependant, le groupe Khronos, qui comprend Mozilla et Google, a suggéré des solutions possibles et une approche de développement futur pour renforcer la sécurité contre les menaces de sécurité possibles. Espérons que les problèmes pourront être réduits et même résolus à l'avenir, car WebGL offre de nombreuses possibilités, présentées par des développeurs talentueux et professionnels.!

Dites-nous quelle expérience vous étonne le plus et, bien sûr, montrez-nous si vous en avez une!

Plus de messages liés:

• Site Web HTML5: 48 démonstrations potentielles de destruction Flash
• Site Web HTML5: 15 autres expériences
• Inspirer des démonstrations d'animation CSS3