30 Experimente WebGL care sunt doar Wow!

Iată, pentru o minunată unealtă cu mari promisiuni vine în ochii tăi. Este rapid și neted. Ea face 3D, și cu integrarea animă, ghici ce este? HTML5? CSS3? Nu, se numește WebGL, o bibliotecă software care extinde capacitatea JavaScript pentru a genera grafică 3D interactivă și da, fără niciun plugin!

În această prezentare, nu vrem să vă arătăm lucrurile obișnuite. Vrem să vă prezentăm 30 Experiment WebGLuri care sunt elaborate cu atenție de către dezvoltatorii profesioniști pentru ca dvs. să asistați la adevărata forță a WebGL, care nu numai că vă inspiră, ci și să vă bucurați de cum ar putea să pară viitorul webului. Salt în viitor după ce faceți clic!

Vă recomandăm cu tărie să vizualizați aceste demonstrații utilizând cea mai recentă versiune a versiunii pentru dezvoltatori a Google Chrome. Majoritatea demo-urilor suportă cea mai recentă versiune de Firefox, Google Chrome și Safari.

3 visele de negru

Autorul echipei Google Data Arts, 3 Dreams of Black vă aduce în 3 lumi de vis construite printr-o combinație de desene 2D bogate și animații interconectate cu secvențe 3D interactive. Check out minunate pentru o experiență minunată!

Particule de volum animat

Aceasta este o animație animală cu adevărat animată, construită din particule 3D folosind texturi plutitoare și obiecte tampon cadru. Mai multă surpriză dacă mutați mouse-ul!

Acvariu

Simulați un mediu subacvatic? Aceasta nu este o problemă pentru WebGL. Demo-ul dispune de modele 3D cu texturi de înaltă calitate, animații de scenă, animație pixel shader, reflexii, refracție și caustică, doar totul pentru a pune în scenă realitatea subacvatică!

Azathioprine

Probabil cel mai epic demo WebGL, a spus suficient. Sfat de hat pentru autor Jochen Wilhelmy.

Atracții de călătorie

Dacă doriți să experimentați 3D acest lucru este cel mai bun demo pentru dvs., primiți, de asemenea, meditație cu frumusețea imensă a graficelor generate de WebGL folosind formula lui Hopalong de la Martin.

meduză

“Modele de proceduri efectuate cu Side FX Houdini. Exportați cu un exportator Python în format json. Textura pictata folosind Autodesk Mudbox. Animat cu un shader de vertex.”

Chrysaora

Acesta nu este un demo de animație obișnuit, ci include schelete dinamice simulate, simulare parțială pe server și sincronizare cu WebSocket, sistem de particule cu fața la cameră, efect de volum de lumină și bibliotecă de matrice mjs a lui Vladimir Vukićević. Pe scurt, un experiment uimitor cu lucrări complexe.

HelloRacer

Introducerea simulării de mașini interactive de ultimă generație, adusă exclusiv de HelloEnjoy.

Materiale: Mașini

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 și Chevrolet Camaro în browser-ul dvs. Alegeți-vă plimbarea și bucurați-vă de vedere. Heck, chiar poți alege culorile lor.

WebGL Cars

Viitorul seriei Need for Speed ​​va fi în browserul web. Prea ambitioasa? Cu siguranță nu dacă ați vizitat aceste mașini care sunt redate cu hărți cub dinamice, hărți umbre și efecte postprocesare.

Națiunea robotului meu

Dacă figura nu este preferată, atunci încercați să construiți un robot răcoros și fermecător și să-i arătați prietenului dvs.! Puteți chiar să-ți petreci banii pentru a face o afacere reală.

Pacmaze

Ce zici de un joc 3D Pac-Man? Grafica si gameplay-ul sunt frumoase, si cel mai important este distractiv!

Cap roșu

Acum e un drăguț ... sau unul sângeros. Acesta nu este altceva decât un joc interesant care vă va arăta capabilitățile WebGL atunci când este dezvoltat în jocul de sus în jos shooter. Distracție și amuzament sigur.

TankWorld

Ai ghicit-o, un joc distractiv de tir cu tanc cu arme de folosit și hărți pentru a explora, iar la unele nivele poți obține chiar și un elicopter pentru a explora lumea! Este cu adevărat mai mult decât un joc obișnuit, iar graficul arată confortabil!

Pulpo

Cel mai bun exemplu al modului în care grafica simplă și animația pot impresiona oamenii atunci când se fac bine.

Suprafaţă

Check out Surface, un experiment elegant și inspirat realizat de Paul Lewis. Nu puteți numai să modificați magnitudinea, elasticitatea, orbita auto, schema de sârmă și picăturile de ploaie în demo, dar și drag-and-drop propriile imagini în ea pentru a simți efectul diferit.

Foto Particule

Dați-vă imaginea preferată în această demonstrație și bucurați-vă că o vedeți explodând într-o tonă de particule și interacționați cu o anumită formă de magnetism. Experimentul este o combinație a patru tehnologii: Drag and Drop HTML5, File API, Canvas și WebGL.

Rutt-Etra-Izer

Rutt-Etra-Izer este o emulație WebGL a sintetizatorului clasic Rutt-Etra. Demo-ul vă permite să vă puneți propriile imagini în interior și să le manipulați. Cu aceste lucruri, o imagine 2D poate chiar să arate ca un 3D!

Dansul Wobble

Un demo simplu dar demn de remarcat care arata cat de lichid poate fi WebGL, cu shader de lumina anizotropica si deformare a varfului.

Ultranoir

Un alt experiment excelent prezentând potențialul WebGL. Nouvelle Vague oferă o experiență 3D poetică și interactivă în timp real, bazată pe Twitter, și ceea ce vedeți va fi tweets care sunt realizate cu obiecte zburatoare diferite. Desigur, o modalitate artistică de a vă bucura de tweets.

Maimuța care alunecă

“De data aceasta am vrut doar să fac un test pentru a vedea câte poziții de vârfuri și normale am putut actualiza direct în JavaScript. Se pare că 2000 sunt doar bine :) Am adăugat, de asemenea, într-un pic de cartografiere a mediului. Și ciudățenia. Adăugați întotdeauna ciudate.”

Video FX

Aplicație impresionantă realizată de Daniel Pettersson, care vă permite să aplicați mai multe efecte de postprocesare simultană unui trailer Happy Feet 2. Încercați să vă distrați!

Voxels Liquid

Reprezentarea 3D a algoritmului clasic al efectului de apă 2D vă arată, de asemenea, modul în care este WebGL interactiv.

Biblioteca WebGL

Navigați peste 10.000 de cărți cu această bibliotecă WebGL, dezvoltată de echipa Google Data Arts. De asemenea, puteți căuta după subiect, deschideți un model 3D din fiecare făcând clic pe el și descărcați cărți pe telefonul dvs. cu codul QR.

WebGL Globe

Un experiment amuzant al echipei Google, care vă face să vă simțiți ca și cum ați fi în viitor cu vizualizarea sa frumoasă, elegantă și futuristă.

Zboruri internaționale

O altă aplicație vizuală de vizualizare a datelor, care vizualizează rutele principale de zboruri ale companiilor aeriene, arată promițătoare!

Filtru de imagini WebGL

Aplicația editorului grafic cu WebGL? Nu este niciodată imposibil. Cel mai bine, este rapid și neted!

WebGL Water

“Un bazin de apă prestate cu reflexie, refracție, caustică și ocluzie ambientală. Piscina este simulată cu un câmp de înălțime și conține o sferă care poate interacționa cu suprafața apei.”

Reflecţie

Cea mai mare problemă cu care sa confruntat WebGL este, probabil, securitatea. Potrivit Wikipedia, echipa americană de pregătire pentru situații de urgență (US-CERT) a emis avertismentul că WebGL conține mai multe probleme de securitate care ar putea conduce la execuția codului arbitrar, la negarea serviciilor și chiar la atacurile pe mai multe domenii. Acest lucru înseamnă foarte, foarte mult proprietarului site-ului.

Cu toate acestea, Grupul Khronos care include Mozilla și Google a sugerat posibile soluții și abordări viitoare de dezvoltare pentru a consolida securitatea împotriva posibilelor amenințări de securitate. Sperăm că problemele pot fi reduse și chiar pot fi rezolvate în viitor, deoarece WebGL are atâtea posibilități prezentate de dezvoltatorii talentați și profesioniști!

Spuneți-ne ce experiment vă uimește cel mai mult și, bineînțeles, ne arătați dacă aveți unul!

Mai multe postări corelate:

• Site-ul HTML5: 48 Demo-uri ucigatoare cu potențialul Flash
• Site HTML5: 15 mai multe experimente
• Inspiră demo-uri de animație CSS3