Miten WebGL uudistaa Flashin perintöä?
Muistatko kaikki hankkeet, joissa on erinomaiset vuorovaikutukset, mielenrauhava animaatiot ja jännittävät äänitehosteet, jotka johtivat intensiivisesti käyttäjäkokemukseen? Kyllä, mahdollisuudet luodaan Flashin avulla.
Kuitenkin inhoan myöntää sen, tämän monipuolisen multimediafoorumin aikakausi on päättynyt. Flash on vihdoin kuollut. Mutta älä pelkää! Kuten usein tapahtuu, kun yksi ovi sulkeutuu, toinen avautuu, ja Flasha hitaasti korvataan tuoreemmalla ja voimakkaammalla seuraajalla. Tekniikat kuten WebGL , ja mukana JavaScript-kirjastoja, kuten three.js ovat nopeasti kasvavia - antavat kehittäjille mahdollisuuden rakentaa Flash-tyyppisiä projekteja ilman niihin liittyviä turvallisuuskysymyksiä.
Tänään keskitymme WebGL ja Three.js. Tämä pariliitos on voimakas vaihtoehto upotettavaa UX: ää varten.
WebGL ja Three.js
WebGL toimii perustana, joka tarjoaa välineitä manipuloida interaktiivisia 3D- ja 2D-tietokoneiden grafiikoita. Se antaa sinulle mahdollisuuden sekoittaa elementtejä HTML-elementteihin ja yhdistää ne muiden sivun tai taustan osatekijöihin.
Three.js on Javascript-kirjasto, jossa on luettelo huipputason ominaisuuksista, joiden avulla voit käyttää kohtauksia, kameroita, valoja, geometriaa ja paljon muuta. Sen tarkoituksena on avata WebGL: n potentiaali lisäämällä lisätoimintoja alustalle. Sen avulla on helppo luoda GPU-kiihdytettyjä 3D-animaatioita käyttämättä selainlaajennuksia.
Yhteensopivuusongelmat
Nykyaikaisilla tekniikoilla olet aina kiinni ongelmasta: joko luo "yhden kokoinen sopii kaikkiin" -projektiin, joka toimii useilla laitteilla ja tarjoaa yhdenmukainen käyttäjäkokemuksen tai laittaa kaiken linjaan ja välittömästi vaikutuksen yleisöön, johon voit tavoittaa .
WebGL: n ja Three.js: n kanssa on sama tarina. Safari, Opera ja suurin osa mobiiliselaimista (eikä sano Internet Explorerista) ovat kuin Chardonnayn lentävä. Valitettavasti paljon käyttäjiä on juuttunut vanhoihin selaimiin, joten yhteensopivuus on varsin este - mutta tuki kasvaa (mikä on enemmän kuin mitä Flashille voidaan mainita) ja edellyttäen, että et käytä sitä missään kriittisessä tehtävässä, WebGL: ssä ja Kolme. Js ovat erinomaisia vaihtoehtoja.
esimerkit
mitätön
mitätön on kokeilu Hi-ReS !, Lontoossa toimiva luova studio. Kehittäjät halusivat abstrahoitua nykyaikaisten alustojen ja selainten sisäisistä rajoituksista ja testata nykyisen teknologian rajoja. Näyttää siltä, että ne naulittiin.
Se on puhtaasti työpöytäohjelma, joka toimii WebGL- ja Web Audio -ominaisuuksilla. Howler.js: n, GSAP: n ja Coffee Collider: n lisäksi Three.js osallistui tämän loistavan leikkikentän tuottamiseen, joka väistämättä vetää online-kävijöitä matkalle, joka muistuttaa paljon digitaalista kirjaa.
Uudelleen huippuosaaminen
Tämä vuorovaikutteinen kampanja joka on omistettu Sennheiserin vuosipäivälle, on eeppinen Odysseus, jossa yhdistyvät paitsi dramaattiset sci-fi-maisemat myös lukuisat huipputekijät ja yksityiskohdat. Se on puhdas Chrome-kokeilu, jonka avulla vierailijat voivat osallistua äänenmuistomerkin muodostamiseen ja muokkaamiseen. Vaikka muodostumisvaihe on päättynyt, miljoona ihmistä ympäri maailmaa osallistui tapahtumaan - se kallioita. Olet tervetullut tekemään oman panoksensa, tarkastelemaan tätä massiivista äänimaisemaa ja nauttimaan intro-videoista ja huipputason toteutuksesta.
Bruno Quintela
Henkilökohtainen portfolio Bruno Quintela on reaaliaikainen renderoidut WebGL-kokeilut, jotka osoittavat taiteilijan potentiaalin ja nykyisen web-teknologian mahdollisuudet. Käytä hiirtä tarkistamaan kohtaus perusteellisesti. Vedä se eri suuntiin nähdäksesi, mikä on piilotettu tässä suuressa osassa tarkasti sijoitettuja kolmiulotteisia polygoneja, joilla on kiiltävät pinnat. Ajatus toimii erinomaisena avauksena sivustolle, joka jättää vahvan, kestävän ensimmäisen vaikutelman.
Hiukkaskoe
Tämä projekti esittelee pyörremyrskyn vähemmän järjestäytyneitä ja organisoituja hiukkasia sisältäviä putkia, jotka säteilevät huipputekniikan tunnelmasta. On ohjauskeskus, joka kannustaa sinua pelaamaan sellaisilla ominaisuuksilla kuin sylinterimäisen pilven säde, putkien tiheys, korkeus, asteikko ja paljon muuta. Käsite on lumoava.
Water Shader
Tämä taiteilija on onnistunut jäljitellä veden pintaa jäljittelemällä nesteiden luonnollista käyttäytymistä. Kuperan muodon ja aaltoilevan pinnan auringon heijastukset viimeistelevästi luovat todella realistisen kohtauksen, joka nappaa silmän ensimmäisestä sekunnista.
WebGL-hiukkasen pää
Kun ne olivat, kun Flash onnistui, hiukkaset ovat kaikki raivoja nykyään. Eri koon ja tyypin animaatioita voidaan nähdä lukuisissa projekteissa, ja Tämä työ on yksi tällainen. Isaac Asimovin romaanien älykkäästä ihmisen kaltaisesta robotista epämääräisesti muistuttavan pään hienovarainen versio on todellinen mestariteos. Ei vain ymmärrystä vaan myös sen käyttäytymistä. Se reagoi hiiren liikkeisiin, luonnollisesti kallistuen pään oikealle, vasemmalle, ylös ja alas.
Dynaaminen 3D Confetti -teksti
Tekstiefekti on yksi tavoista herättää tylsiä rajapintoja leikkiytymis-ja viileyden merkillä sekä korostaa vaadittavia tekstejä. Rachel Smithin konfetti-innoitettu ratkaisu varmasti auttaa rikastuttamaan muotoilua kirkkailla tunteilla ja asettamaan otsikon keskelle. Kirjoita sana alla olevaan syötekenttään nähdäksesi koko taikaa. Vilkkaat ja elävät 3D geometriset palaset muokkaavat pyyntöä ja tekevät tuloksesta kauniisti vuorovaikutteisen.
3D Panorama Viewer
Kolme. Js tulee kätevästi yhteisiin hankkeisiin, kuten Max Chuhryaev todistaa. Hänen ratkaisunsa helposti muuttaa panoraamakuvat olennaiseksi käyttäjäkokemuksen yksityiskohdaksi. Se on miellyttävä perspektiivi ja hitaasti liikkuva kamera: yhdessä he tekevät sinusta tuntuu osaksi koostumusta. Se sopii hyvin maisemille, kaupunkinäkymille ja sisätiloille, jolloin käyttäjät voivat nauttia staattisen multimedian kauneudesta.
Kolmiomallin mallinnus
Tämä koe antaa sinulle fantastisen monikulmainen tausta, jossa on kaunis 3D-tunnelma. Se toimii myös leikkipaikkana, jossa voit tehdä tietyistä alueista kirkkaampia ja muita himmennä. Käytä hiirtä. Lisävarustepaneeli mahdollistaa suurimman osan kankaasta, kuten kevyt, verkko-, renderointi- ja jopa viennin asetuksista.