Koduleht » Veebidisain » 30 WebGL-i katset, mis on lihtsalt Wow!

    30 WebGL-i katset, mis on lihtsalt Wow!

    Vaata, sest teie silmadele tuleb suur töö, millel on suured lubadused. See on kiire ja sile. See muudab 3D-d ja integreerib selle, arvab, mis see on? HTML5? CSS3? Ei, seda nimetatakse WebGL-ks, tarkvara raamatukoguks, mis laiendab JavaScripti võimalusi interaktiivse 3D-graafika loomiseks, ja jah, ilma lisanditeta!

    Selles presentatsioonis ei taha me teile tavalisi asju näidata. Me tahame teile tutvustada 30 WebGLi eksperiments, mida professionaalsed arendajad on hoolikalt ette valmistanud, et sa tunneksid WebGLi tõelist võimet, mis ei ole mitte ainult inspireeriv, vaid võimaldab teil ka pilguheit, kuidas veebi tulevik näeb välja. Hüppa tulevikku pärast klõpsamist!

    Soovitame tungivalt vaadata neid demosid kasutades Google Chrome'i arendajaversiooni uusimat versiooni. Enamik demosid toetavad siiski Firefoxi, Google Chrome'i ja Safari uusimat versiooni.

    3 Mustad unistused

    Google Data Arts'i meeskonna poolt loodud 3 Dreams of Black toob teid 3 unistusmaailma, mis on ehitatud kombineerituna rikkalike 2D joonistuste ja interaktiivsete 3D-järjestustega põimitud animatsioonidega. Tutvu imetega suurepärase kogemuse saamiseks!

    Animated Volume Particles

    See on tõesti kunstiline - animeeritud loom, kes on ehitatud 3D osakeste abil, kasutades float-tekstuuri ja raamipuhvri objekte. Suurem üllatus, kui liigutad hiirt!

    Akvaarium

    Simuleerige veealust keskkonda? See ei ole WebGLi jaoks probleem. Demo sisaldab 3D-mudeleid, millel on kõrge kvaliteediga tekstuurid, stseeni animatsioon, pikselihelisema animatsioon, peegeldused, murdumine ja kaustika, vaid kõik, mis paneb realistliku veealuse stseeni!

    Asatiopriin

    Tõenäoliselt on kõige eepilisem WebGL demo. Mäe ots autorile Jochen Wilhelmy.

    Attractors Trip

    Kui soovid 3D-d kogeda, on see teie jaoks parim demo, mediteerige ka WebGL-i loodud graafika tohutu ilu abil, kasutades Martin's Hopalongi valemit.

    Meduusid

    “Side FX Houdiniga tehtud protseduuriline modelleerimine. Eksporditud Pythoni eksportijaga json-vormingusse. Autodesk Mudboxi abil värvitud tekstuur. Animeeritud tippu varjundiga.”

    Chrysaora

    See ei ole regulaarne animatsiooniteos, kuid see sisaldab dünaamiliselt simuleeritud skelette, osalist serveripoolset simulatsiooni ja sünkroniseerimist WebSocketiga, kaameraga suunatud osakeste süsteemi, mahulise valgusefekti ja Vladimir Vukićevići mjs-maatriksraamatukogu. Lühidalt, hämmastav eksperiment keeruliste töödega.

    HelloRacer

    Tutvustame tipptasemel interaktiivset auto simulatsiooni, mille toovad teile kaasa ainult HelloEnjoy.

    Materjalid: autod

    Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 ja Chevrolet Camaro teie brauseris. Vali oma sõit ja nautida vaadet. Heck, saate isegi valida oma värvid.

    WebGL Autod

    Seeria Need For Speed ​​tulevik on veebibrauseris. Liiga ambitsioonikas? Kindlasti mitte siis, kui olete neid autosid külastanud, mis on tehtud dünaamiliste kuubikukaartide, vari kaartide ja järeltöötlusefektidega.

    Minu roboti rahvas

    Noh, kui näitaja ei ole sinu lemmik, siis proovige ehitada jahedat ja võluvat robotit ja näidata oma sõber! Sa võid isegi kulutada oma taala, et muuta see tõeliseks tehinguks.

    Pacmaze

    Kuidas oleks 3D Pac-Man mäng? Graafika ja gameplay on kena ja kõige tähtsam see on lõbus!

    Red Shooting Hood

    Nüüd on siin armas üks ... või verine. See on midagi muud kui huvitav mäng, mis näitab teile WebGLi võimalusi, kui see kujuneb ülevalt alla tulistamismänguks. Naljakas ja lõbus.

    TankWorld

    Sa arvad seda, nauditav tank shooter mäng relvi kasutada ja kaardid uurida, ja mõnel tasemel saate isegi helikopter uurida maailma! See on tõesti rohkem kui tavaline mäng ja graafika näib mugav!

    Pulpo

    Parim näide sellest, kuidas lihtsad graafika ja animatsioonid võivad inimestele muljet avaldada, kui nad on õigesti tehtud.

    Pind

    Vaadake läbi pind, elegantne ja inspireeriv Paul Lewise eksperiment. Demo ei saa mitte ainult muuta suurust, elastsust, automaatkiirgust, traatvõrku ja vihmapiiskasid, vaid lohistada ka oma pilte sellesse, et tunda efekti erinevalt.

    Fotoosakesed

    Lihtsalt lase oma lemmik pilt sellesse demosse ja naudi vaadates, kuidas see plahvatab tonni osakestesse ja suhtleb mõnda vormi magnetismiga. Eksperiment on nelja tehnoloogia kombinatsioon: HTML5-i lohistamine, faili API, lõuend ja WebGL.

    Rutt-Etra-Izer

    Rutt-Etra-Izer on klassikalise Rutt-Etra video süntesaatori WebGL-emulatsioon. Demo võimaldab teil panna oma pildid sisse ja neid manipuleerida. Selle asjaga võib 2D-kujutis isegi välja nägema 3D-kujulisena!

    Wobble'i tants

    Lihtne, kuid tähelepanuväärne demo, mis näitab, kui vedel WebGL võib olla, koos anisotroopse valguse varjundiga ja närviva tipuga deformatsiooniga.

    Ultranoir

    Teine suur katse, mis näitab WebGLi potentsiaali. Nouvelle Vague pakub poeetilist ja interaktiivset reaalajas 3D-kogemust, mis põhineb Twitteril, ja mida näete, on tweetid, mis viiakse läbi erinevate lendavate objektidega. Kindlasti kunstiline viis nautida tweets.

    Undulating Monkey

    “Seekord tahtsin lihtsalt teha testi, et näha, kui palju tippu ja normaale võiksid JavaScriptis värskendada. Tuleb välja, et 2000 on lihtsalt hea :) Lisasin ka natuke keskkonna kaardistamist. Ja imelik. Lisage alati imelik.”

    Video FX

    Muljetavaldav rakendus, mida teeb Daniel Pettersson, mis võimaldab teil rakendada mitmekordset üheaegset järeltöötluse mõju Happy Feet 2 haagisele. Proovige ja nautige!

    Voxels Liquid

    Klassikalise 2D veefektsiooni algoritmi 3D-esitus näitab ka seda, kuidas interaktiivne WebGL on.

    WebGL Bookcase

    Sirvige üle 10 000 raamatukaane selle WebGL Bookcase'iga, mille on välja töötanud Google Data Arts Team. Samuti saate otsida teemade kaupa, avada igaühe 3D-mudeli, klõpsates seda ja laadida oma telefonist raamatuid QR-koodiga.

    WebGL Globe

    Hämmastav Google'i meeskonna eksperiment, mis paneb sind tundma, et oled tulevikus, ilus, elegantne ja futuristlik andmete visualiseerimine.

    Maailma lennud

    Teine visuaalselt atraktiivne andmete visualiseerimise rakendus, mis visualiseerib suurte lennuettevõtjate lennuliinid, näib paljutõotav!

    WebGL pildifilter

    Graafiline redaktorirakendus koos WebGL-iga? See pole kunagi võimatu. Kõige parem, see on kiire ja sile!

    WebGL Vesi

    “Peegeldumise, murdumise, kaustika ja ümbritseva oklusiooni abil tehtud veekogu. Piljardit simuleeritakse kõrgväljal ja see sisaldab kera, mis võib veepinnaga suhelda.”

    Peegeldus

    Suurim probleem, millega WebGL silmitsi seisis, on ehk selle turvalisus. Wikipedia andmetel andis Ameerika Ühendriikide arvutihädaolukorraks valmisoleku meeskond (US-CERT) hoiatuse, et WebGL sisaldab mitmeid võimalikke turvaprobleeme, mis võivad viia meelevaldse koodide teostamise, teenuse keelamise ja isegi domeeniüleste rünnakute tekkimiseni. See tähendab veebilehe omanikule väga palju.

    Sellegipoolest on Mozilla ja Google'i hõlmav Khronose grupp pakkunud välja võimalikke lahendusi ja edasist arendusmeetodit, et tugevdada julgeolekut võimalike julgeolekuohtude vastu. Loodetavasti saab neid küsimusi vähendada ja isegi tulevikus lahendada, kuna WebGL-il on nii palju võimalusi, mida esitlevad andekad ja professionaalsed arendajad!

    Andke meile teada, milline katse hämmastab sind kõige rohkem ja muidugi näitama meile, kui sul on see!

    Rohkem seotud postitusi:

    • HTML5 veebisait: 48 potentsiaalset Flash Killing Demot
    • HTML5 veebisait: 15 täiendavat katset
    • Inspireeriv CSS3 animatsiooniesitlused