Homepage » Web Design » 30 WebGL kísérlet, ami csak Wow!

    30 WebGL kísérlet, ami csak Wow!

    Íme, nagyszerű ígéretekkel rendelkező szerszám jön a szemedbe. Gyors és sima. Ez 3D-t alakít ki, és integrációval élénkíti, kitalálja, mi az? HTML5? CSS3? Nem, az úgynevezett WebGL, egy szoftverkönyvtár, amely kiterjeszti a JavaScript képességét az interaktív 3D-s grafikák létrehozására, és igen, plugin nélkül!

    Ebben a kirakatban nem akarjuk megmutatni a szokásos dolgokat. Szeretnénk bemutatni neked 30 WebGL kísérletA professzionális fejlesztők által gondosan megtervezett, hogy a WebGL igazi esélyeit tanúja lehessen, amelyek nemcsak inspirálóak, hanem megnézhetik, hogyan nézhet ki az internet jövője. Ugrás a jövőben a kattintás után!

    Javasoljuk, hogy ezeket a bemutatókat a Google Chrome Fejlesztői verziójának legújabb verziójával nézze meg. A legtöbb demó azonban támogatja a Firefox, a Google Chrome és a Safari legújabb verzióját.

    3 Fekete álmok

    A Google Adatművészek csoportja által készített 3 Dreams of Black 3 álomvilágot hoz létre a gazdag 2D rajzok és az interaktív 3D-s szekvenciákkal összefonódó animációk kombinációjával. Nézd meg a csodákat a csodálatos élményért!

    Animált kötet részecskék

    Ez valóban művészi - animált állatok, amelyeket 3D-s részecskék alkotnak úszó textúrák és keret pufferobjektumok segítségével. Több meglepetés, ha az egeret mozgatja!

    Akvárium

    Szimulálja a víz alatti környezetet? Ez nem jelent problémát a WebGL számára. A demó 3D-s modelleket kínál kiváló minőségű textúrákkal, jelenet animációval, pixel árnyékoló animációval, reflexiókkal, refrakcióval és kozmetikával, mindent, ami a reális víz alatti jelenetet tartalmazza!

    Az azathioprin

    Valószínűleg a leginkább epikus WebGL demó, elég. Kalap csúcsa a szerzőnek, Jochen Wilhelmynek.

    Attractors Trip

    Ha a 3D-t szeretné megtapasztalni, akkor ez a legjobb demó az Ön számára is, meditáljon a WebGL által generált grafika óriási szépségével Martin Hopalong képletével.

    medúza

    “A Side FX Houdini-lal végzett eljárási modellezés. Exportált Python exportőrrel json formátumba. Az Autodesk Mudbox segítségével festett textúra. Animált egy csúcs árnyékolóval.”

    Chrysaora

    Ez nem egy rendszeres animációs demó, de dinamikusan szimulált csontvázakkal, részleges szerveroldali szimulációval és szinkronizálással rendelkezik a WebSocket, a kamera felé néző részecske rendszer, volumetrikus fényhatás és Vladimir Vukićević mjs mátrixkönyvtárával. Röviden, egy csodálatos kísérlet komplex munkákkal.

    HelloRacer

    Bemutatjuk a high-end interaktív autós szimulációt, amelyet kizárólag a HelloEnjoy szolgáltatott.

    Anyagok: autók

    Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 és Chevrolet Camaro a böngészőben. Válassza ki az utazást, és élvezze a kilátást. Heck, akkor is választhat a színek.

    WebGL autók

    A Need For Speed ​​sorozat jövője a webböngészőben lesz. Túl ambiciózus? Természetesen nem, ha meglátogatta ezeket az autókat, amelyek dinamikus kocka térképekkel, árnyék térképekkel és utófeldolgozási hatásokkal vannak ellátva.

    Robot nemzetem

    Nos, ha az alak nem a kedvenced, akkor próbálj meg hűvös és bájos robotot építeni, és mutasd meg barátodnak! Még a dollárt is eltöltheti, hogy igazi üzlet legyen.

    Pacmaze

    Mit szólnál egy 3D Pac-Man játékhoz? A grafika és a játékmenet szép, és ami a legfontosabb, hogy szórakoztató!

    Piros lövés kapucnis

    Most itt egy aranyos ... vagy véres. Ez nem más, mint egy érdekes játék, amely megmutatja a WebGL képességeit, amikor az a legfelső lövöldözős játékgá alakult. Szórakoztató és szórakoztató.

    TankWorld

    Azt hiszem, egy élvezetes tartály lövöldözős játék fegyverekkel, és térképeket feltárni, és bizonyos szinteken még egy helikoptert is kaphat a világ felfedezéséhez! Ez tényleg több, mint egy rendszeres játék, és a grafika kényelmesnek tűnik!

    Pulpo

    A legjobb példa arra, hogy az egyszerű grafika és az animáció lenyűgözheti az embereket, ha azok helyesen vannak.

    Felület

    Nézze meg a Surface-t, egy elegáns és inspiráló Paul Lewis kísérletet. A demóban nemcsak a nagyságrendet, a rugalmasságot, az automatikus pályát, a drótvázot és az esőcseppeket változtathatja meg, hanem a saját képeit is elhúzhatja, hogy másképp érezze a hatást.

    Fotó Részecskék

    Csak dobja el kedvenc képét a demóba, és élvezze, hogy egy tonna részecskékre robban-e, és kölcsönhatásba lép valamilyen mágnesességgel. A kísérlet négy technológia kombinációja: HTML5 Drag and Drop, File API, Canvas és WebGL.

    Rutt-Etra-Izer

    A Rutt-Etra-Izer a klasszikus Rutt-Etra videó szintetizátor WebGL emulációja. A demó lehetővé teszi, hogy saját képeket helyezzen be és manipulálja őket. Ezzel a dologgal a 2D-s kép akár 3D-snek is tűnik!

    A Wobble Dance

    Egy egyszerű, de figyelemre méltó demó, amely megmutatja, hogy mennyire lehet folyékony a WebGL, anizotróp fényes árnyékolóval és a hullámzó csúcs deformációval.

    Ultranoir

    Egy másik nagyszerű kísérlet, amely bemutatja a WebGL potenciálját. A Nouvelle Vague a Twitteren alapuló, költői és interaktív, valós idejű 3D-s élményt nyújt, és amit látni fog, a különböző repülőobjektumokkal végrehajtott tweetek. Természetesen művészi módja annak, hogy élvezze a tweeteket.

    Undulating Monkey

    “Ezúttal csak egy tesztet akartam csinálni, hogy lássam, hogy hány csúcspontot és normát tudok frissíteni közvetlenül a JavaScript-ben. Kiderül, hogy 2000 csak finom :) Én is hozzáadtam egy kis környezeti térképezést. És furcsa. Mindig legyen furcsa.”

    Videó FX

    Lenyűgöző alkalmazás, amit Daniel Pettersson végez, amely lehetővé teszi, hogy többszörös egyidejű utófeldolgozási hatásokat alkalmazzon egy Happy Feet 2 pótkocsira. Próbáld ki és érezd jól magad!

    Voxels folyadék

    A klasszikus 2D vízhatékonysági algoritmus 3D-s ábrázolása azt is mutatja, hogy az interaktív WebGL.

    WebGL Könyvespolc

    Böngésszen több mint 10 000 könyvborítóval a WebGL könyvespolc segítségével, amelyet a Google Data Arts Team fejlesztett ki. A témakörben is kereshet, mindegyikre kattintva megnyithat egy 3D-s modellt, és a QR-kóddal tölthet le könyveket a telefonján.

    WebGL Globe

    A jó, elegáns és futurisztikus adatmegjelenítéssel egy hűvös Google-csapat kísérlet, amely valóban úgy érzi, hogy a jövőben érzi magát.

    Világjegyek

    Egy másik vizuálisan vonzó adatmegjelenítő alkalmazás, amely a nagyobb légitársaságok repülési útvonalát vizualizálja, ígéretesnek tűnik!

    WebGL képszűrő

    Grafikus szerkesztő alkalmazás a WebGL-rel? Soha nem lehetetlen. A legjobb az, hogy gyors és sima!

    WebGL víz

    “A víz visszaverődéssel, refrakcióval, kozmetikával és környezeti elzáródással. A medencét magasságmezővel szimulálják, és tartalmaz egy gömböt, amely kölcsönhatásba léphet a víz felszínével.”

    Visszaverődés

    A WebGL legnagyobb problémája talán a biztonsága. A Wikipédia szerint az Egyesült Államok Számítógépes Sürgősségi Felkészülési Csapata (US-CERT) figyelmeztetést adott arra, hogy a WebGL több lehetséges biztonsági problémát tartalmaz, amelyek tetszőleges kódfuttatást, szolgáltatásmegtagadást és akár domainek közötti támadásokat eredményezhetnek. Ez nagyon, nagyon sokat jelent a weboldal tulajdonosának.

    A Mozilla-t és a Google-t magában foglaló Khronos-csoport azonban lehetséges megoldásokat és jövőbeli fejlesztési megközelítést javasol a biztonság fokozására a lehetséges biztonsági fenyegetésekkel szemben. Remélhetőleg a jövőben is csökkenthetők és megoldhatók a problémák, mivel a WebGL-nek olyan sok lehetősége van, mint amit a tehetséges és professzionális fejlesztők mutatnak be!

    Tudassa velünk, hogy melyik kísérlet csodálja meg a legtöbbet, és természetesen mutasson nekünk, ha van ilyen!

    További kapcsolódó hozzászólások:

    • HTML5 Weboldal: 48 potenciális Flash Killing Demos
    • HTML5 weboldal: 15 további kísérlet
    • Inspiráló CSS3 animációs demók