Danas praktički ne postoje web stranice koje ne sadrže grafičke elemente. Svaki resurs, čak i ako je njegova svrha čisto tekstualna informacija, bit će barem nekako ukrašen grafičkim elementima - ne možete bez gumba, ikona i logotipa.
U ovom članku ćemo malo govoriti o tome kako grafika utiče na izgradnju web stranice i kakvu ulogu igra u ovom globalnom procesu.
Slažem se, ova tema je vrlo višestruka, ali mi ćemo, koliko god možemo, pokušati biti sažeti. Ovaj je članak prvenstveno namijenjen početnicima webmasterima - svake je godine sve više takvih likova. I ovo me čini srećnim.
Dakle, počnimo našu priču.
Čak i ako se neko vrijeme ne hrani, on će i dalje htjeti pogledati slike. Tako funkcionira ljudska psiha i naše oko, poštujući zakone prirode, uvijek nastoji pronaći sliku ili šaru na bijelom platnu. U web dizajnu, ova funkcija ljudskog mozga - želja za pronalaženjem smislene slike - može se koristiti na različite načine.
Na primjer, možete napraviti web stranice koje će generirati dobar prihod, jer će ljudi koji ih posjećuju početi klikati na šarene i primamljive slike - svaki klik je prijelaz i za njega webmaster prima malu svotu novca. Pa, ako ima puno takvih tranzicija, onda će mala količina novca na kraju postati vrlo velika.
No, nemojmo biti ispred sebe i fokusirajmo se samo na činjenicu da bilo koja slika (bilo da je slika ili element dizajna) nije ništa drugo do katalizator pažnje od strane posjetitelja. Pravilno odabrani grafički objekti u cjelini mogu učiniti mnogo pozitivnih stvari.
Pogledajmo osnove korištenja grafike na webu, da tako kažem..
Bez sumnje, grafika je mehanizam koji poboljšava vašu web stranicu.
Međutim, treba imati na umu da grafika nije samo dizajn, već i sadržaj - sajtovi sa grafičkim sadržajem, inače, najpopularniji su na webu (vjerovatno ste pogodili da mislimo na pornografiju i sve što je s njom povezano). Kao što smo već rekli na samom početku našeg članka, ne postoje stranice koje ne uključuju grafiku na ovaj ili onaj način.
Ako govorimo o tekstualne stranice(na primjer, takvi resursi, čija su osnova sadržaja članci), zatim grafika prvenstveno ima infografsku ulogu. Ovo svojstvo grafike se pokazuje kada postane ne samo dio dizajna, već dio objavljenog materijala. Postavši sastavni dio publikacije, grafike ne privlače pažnju čitatelja više kao "slika" - one postaju izvor informacija koji ni na koji način nije inferioran tekstu. U ovom slučaju govorimo o grafičkim dijagramima i dijagramima.
Ima ih još složene vrste informacione grafike.
Na primjer, vremenske linije i drugi dinamički fotografski materijali koji su dizajnirani da pomognu čitatelju da u potpunosti razumije situaciju koja postoji u određenom trenutku.
Sada pogledajmo drugu opciju - grafika kao osnova sadržaja.
U ovom slučaju grafika potpuno prestaje biti dodatak - njihova funkcija počinje igrati odlučujuću ulogu i promet koji dolazi na stranicu u potpunosti podliježe dinamici ažuriranja grafičkog sadržaja. Kao primjer možete navesti jedan od foto blogova - međutim, vjerovatno i sami znate njihove adrese. Alternativno, poznati projekat Flickr.
Pa, sada o još jednoj pozitivnoj stvari koju pravilna upotreba grafičkog sadržaja može dati vašoj web stranici.
Znate li da kada korisnici prvi put posjete web stranicu, oni je čitaju dijagonalno?
Ovo je sasvim prirodna reakcija ljudskog oka na nešto novo - oko pokušava pronaći trag, suštinu, a zatim započeti detaljno proučavanje sadržaja koji mu se prezentira. Na osnovu ove karakteristike ljudskog ponašanja, lukavi trgovci razvili su mnoge tehnike pomoću kojih osoba počinje pokazivati izuzetnu aktivnost u smislu kupovine nečega.
Ali mi skrećemo pažnju.
Jasno je da grafika ima veće šanse da privuče pažnju od teksta. Pogotovo ako je zanimljiv i direktno se odnosi na temu članka. Dakle, zaključak se nameće sam od sebe - korištenjem slika kao ilustrativnog ili dodatnog materijala glavnom bloku vašeg sadržaja (najčešće je to tekst), imate veće šanse da zadržite pažnju čitatelja na duže vrijeme.
Još jedan pozitivan aspekt korištenja grafike je privlačenje posjetitelja iz pretraživača.
Možda imate sasvim prirodno pitanje – kakve veze pretraživači imaju s tim? Uostalom, još nisu izmišljeni roboti za pretraživanje koji bi mogli skenirati sliku i izvući zaključke o tome što je tamo točno prikazano (drvo ili, na primjer, osoba)!
Naravno - tu nema spora. Takve tehnologije još nisu izmišljene (ali naučnici, inače, već rade u tom pravcu). Međutim, ako pravilno okružite svoju sliku relevantnim tekstom, onda će bot za pretragu sigurno pogoditi šta je prikazano na slici. Ne zaboravite koristiti oznaku alt=" "- Pauci vole da čitaju šta piše.
Promet koji dolazi na stranicu sa pretraživača koji pretražuju grafiku je veoma velik – nikada ga ne smijete zanemariti. Na našoj web stranici postoji nekoliko publikacija koje se direktno odnose na optimizacija za pretraživače grafički objekti - preporučujemo da se upoznate s njima! Na primjer, ovdje je članak posvećen tehnologiji optimizacije slika za tražilice.
Pa, sada nekoliko riječi o negativnosti koja može nastati ako se grafika koristi pogrešno.
Naravno, ovo se odnosi na faktor veličine slike. Kao što znate, svaka slika u elektronskom obliku teži određeni broj bajtova, a zadatak webmastera je da se pobrine da taj broj bude manji, a kvaliteta slike što je moguće veća.
Treba imati na umu da, uprkos činjenici da mnogi korisnici mreže trenutno koriste širokopojasni internet, još uvijek postoji značajan postotak ljudi koji nemaju takvu pogodnost. Mnogi ljudi i dalje pristupaju mreži putem dial-up modema! Postoji još jedan razlog koji vas tjera da obratite pažnju na kompresiju grafičkih objekata - ovo je upotreba mobilni internet, koji nije tako brz kao DSL ili optička vlakna.
Hajde da sumiramo.
Na osnovu navedenog, možemo reći sljedeće – grafiku ne treba koristiti samo u web dizajnu (bez grafike!), već i mudro. Zarada na internetu zavisi ne samo od toga koliko dolaznih linkova dobijete na svoju stranicu. Najvažnije je kako ćete tamo zadržati posjetitelja.
Grafika je jedan od alata koji svakako trebate koristiti.
sadržaj sajta- članci o nijansama popunjavanja vaše stranice raznim materijalima
Grafika se široko koristi na webu. Poznato je da jedna mala slika može zamijeniti cijelu stranicu teksta. Web dizajneri se neumorno poboljšavaju, pa čak i takmiče u dizajnu web stranica, te u informativnom sadržaju web stranica grafičke informacije zauzima sve važnije mesto.
Glavna karakteristika grafike u web dizajnu je da je obično u blizini tekstualne informacije i elementi interfejsa (dugmad, prekidači, itd.), a ova blizina se mora uzeti u obzir prilikom kreiranja slika. Osnovna svrha grafike je da skrene pažnju na web stranicu u cjelini ili na njene pojedinačne fragmente, kao i da predstavi informacije koje se ne mogu opisati riječima. Drugim riječima, grafika se koristi i za dizajn stranice i za predstavljanje informacija (ilustracija). To može značajno pomoći posjetitelju da razumije informacije, i obrnuto, zbuni ga i otežava čitanje tekstova. Grafički dizajn web stranice je delikatna stvar koja zahtijeva ukus i osjećaj za mjeru. Loš grafički dizajn web stranice može jednostavno uplašiti posjetitelje. Istovremeno, morate imati na umu da se posjetitelji vraćaju na stranicu iznova i iznova zahvaljujući, prije svega, njegovom informativnom sadržaju, a ne njegovoj ljepoti. Dakle, programer grafički dizajn stranica nije samo besplatni umjetnik. Najbliži je arhitekti.
Još jedna važna karakteristika web grafike su prilično stroga ograničenja nametnuta na veličinu datoteka. I to nije toliko zbog uštede prostora na disku računara, koliko zbog propusnost komunikacionih kanala. Trenutno, velika većina internet posjetitelja koristi modemsku vezu sa serverom. Danas, najmoćniji modemi pružaju brzinu prijenosa podataka od 57.600 bps (oko 6 KB/s). Mnogi ljudi koriste modeme sa performansama od 33.600 bps ili niže. Ako je potrebno duže od 10 sekundi da se web stranica učita u pretraživač. ovo iritira posjetitelje koji mogu otići na drugu adresu bez čekanja da se preuzimanje završi. Iz toga slijedi da moramo nastojati osigurati da web stranica ne prelazi 50-60 KB. Za grafičke slike Ovo je prilično ozbiljno ograničenje koje od dizajnera zahtijeva posebno znanje i vještinu. Konkretno, morate dobro razumjeti formate datoteka i kako sastaviti slike u web stranicu.
Treća karakteristika grafike je da u svijetu postoje računari izgrađeni, kako kažu, na različitim platformama. Dakle, postoje računari na PC platformi i na Macintosh platformi. Monitori ovih računara imaju različitu osvetljenost. Ako se to ne uzme u obzir, onda ista slika, koja izgleda sjajno na jednom monitoru, može izgubiti izražajnost na drugom. Stoga, umjetnik koji se bavi web dizajnom ili jednostavno objavljuje svoje radove na internetu mora uzeti u obzir ovu okolnost i biti u mogućnosti podesiti svoj monitor.
Web stranica je mrtva bez grafike. Za ilustraciju tekstova koriste se grafičke slike. No, korisnici su počeli da se umaraju čekanjem desetina minuta da se neka stranica učita, koju su gledali kako bi saznali trenutni kurs dolara prema njemačkoj marki ili saznali vremensku prognozu za sutra. Stoga je pitanje volumena grafike postalo hitno.
Grafičke komponente web stranica mogu se podijeliti u tri široke kategorije prema njihovoj namjeni:
ilustrativnu grafiku, uključujući fotografije, crteže s objašnjenjima, crteže i dijagrame koji dopunjuju tekst,
funkcionalna grafika, koja predstavlja kontrolne elemente sajta (navigacioni tasteri, brojači i interaktivni elementi obrasca) i, konačno,
dekorativna grafika - elementi dizajna stranice uključeni u njega „za ljepotu“ i ne nose informacijsko opterećenje (pozadinske slike, linije za razdvajanje, zaglavlja napravljena u obliku grafičkih datoteka i još mnogo toga).
GIF grafički format
Davne 1978. godine dva izraelska istraživača Jacob Ziv i Abraham Lempel razvili su fundamentalno novi za to vrijeme algoritam kompresije informacija bez gubitka podataka, koji je, bez daljeg odlaganja, dobio ime izvedeno iz skraćenice njihovih vlastitih prezimena i datuma završetka njihov projekat : LZ78. Informacije o principima konstruisanja ovog algoritma bile su javno dostupne, a nekoliko godina kasnije američki programer Terry Welch ga je poboljšao, dodao prvo slovo svog prezimena u oznaku i patentirao novi algoritam pod nazivom LZW, čime je njegov razvoj bio dostupan i za koriste svi.
Jedan od tih „željnika“ bio je zaposlenik CompuServe Inc. Bob Berry, koji je uzeo LZW kao osnovu za fundamentalno novi grafički format GIF (Graphic Interchange Format) koji je kreirao 1987. godine. Kreirao ga je Terry Welch, Unisys, koji je posjedovao autorska prava na LZW algoritam, naplaćivao je njegovu upotrebu samo od proizvođača kompjuterskog hardvera u kojem je korišten. ovaj standard, na primjer, od proizvođača modema. Developers softver Nije bilo “provizije”.
Međutim, u zimu 1994. godine, Unisys, koji je počeo da ima finansijskih problema, proglasio je LZW komercijalnim standardom, za čiju upotrebu je bilo potrebno plaćanje. Time je GIF automatski postao jedini "plaćeni" grafički format na svijetu, što je izazvalo val nezadovoljstva među korisnicima interneta, jer gotovo sve moderne web stranice koriste GIF elemente na ovaj ili onaj način. Ipak, GIF je i sada izuzetno široko rasprostranjen na internetu, a korisnici nisu dužni nikome da plaćaju za mogućnost postavljanja slike na svoju stranicu u ovaj format, budući da se gore navedene finansijske tvrdnje tiču, prije svega, proizvođača softvera koji radi sa GIF-om. Situacija sa budućom sudbinom ovog standarda i dalje je neriješena.
Zahvaljujući mogućnostima LZW algoritma, GIF standard vam omogućava da značajno smanjite glasnoću konačnog grafički fajl u poređenju sa originalnom slikom. To se postiže miješanjem sličnih nijansi u jednu. Ako, na primjer, slika sadrži dio koji se sastoji od nekoliko sličnih polutonova, na primjer, plave, svijetloplave i tamnoplave, oni će biti kodirani jednom nijansom - plavom. Informacije o slici u standardnoj GIF datoteci se pišu red po red, odnosno niz opisa linija visine jedan piksel. Upravo ovo svojstvo GIF-a, kao i činjenica da ovaj format radi sa fiksnom, tzv. indeksiranom paletom, a broj boja u ovoj paleti ne prelazi 256, bila je osnova za pojavu dvije jednostavna pravila, koji se koristi u modernom web dizajnu. Evo ih.
PAŽNJA GIF standard se koristi u HTML dokumentima samo za prikaz takozvane poslovne grafike: dijagrama, logotipa, dugmadi, linija razdvajanja i drugih elemenata dizajna stranice. Za postavljanje fotografija, reprodukcija slika i slika sa velikim brojem boja i prijelaza boja na web stranici koristi se JPEG standard.
U pojednostavljenom obliku, ovaj zakon “ovladavanja webom” može se formulirati na sljedeći način: ako je slika nacrtana rukom, u svim ostalim slučajevima bolje je koristiti JPEG;
PAŽNJA Prilikom pripreme crteža za spremanje u GIF formatu, potrebno je izbjegavati sljedeće umjetničke tehnike: gradijentne ispune, zamućenja, postepene prijelaze boja s mnogo nijansi, kao i grafičke filtere koji omogućavaju neravnomjerno miješanje nekoliko boja u jednom području sliku, na primjer, efekte promjene intenziteta osvjetljenja, kao što je editorov filter "highlight" Adobe Photoshop.
Ovo pravilo diktira činjenica da algoritam za zamjenu sličnih nijansi s jednom u GIF formatu ne radi uvijek ispravno. Vjerovatno bi bilo ispravnije reći „skoro uvijek radi pogrešno“. Stoga će područja s mnogo različitih nijansi u malom fizičkom prostoru crteža izgledati mutno i "prljavo" nakon spremanja slike u indeksiranu paletu. To možete izbjeći korištenjem čvrstih i kontrastnih boja u svojoj ilustraciji kad god je to moguće. Jedno od izvanrednih svojstava GIF standarda je njegova jedinstvena karakteristika, koju su programeri nazvali "preplitanje", ili, na ruskom, "prepletenost". Omogućava vam da preuzmete sliku sa servera u klijentski pretraživač ne u potpunosti, već u dijelovima, a postupak čitanja datoteke je sljedeći: prvo, prvi, peti i deseti red koji čine sliku prikazuju se na ekran, zatim drugi, šesti i jedanaesti, itd. Tako se korisniku na taj način stvara iluzija postepenog učitavanja grafičkog elementa: slika kao da se polako „pojavljuje“ na stranici, što je ponekad vrlo korisno pri uključivanju velikih slika u dokument - psihološki, gledaocu je lakše čekati da se ilustracija u potpunosti nacrta nego da se dosađuje pred praznim ekranom nekoliko minuta. Osim toga, čak i prije nego što se datoteka u potpunosti učita, korisnik može procijeniti približan sadržaj slike i odlučiti da li treba čekati da se ona u potpunosti prikaže ili ne.
Nekoliko godina nakon stvaranja GIF standarda, 1989. godine, CompuServe je objavio novu verziju ovog grafičkog formata, nazvanu GIF89a. Ova modifikacija uključuje još dvije jedinstvene karakteristike koje se široko koriste na modernom Internetu. Prvi se zove "transparentnost" i uključuje kreiranje prozirne pozadine za sliku tako što se takozvani alfa kanal, koji je maska transparentnosti slike, zajedno sa datotekom čuva. Boje označene kao transparentne u alfa kanalu će postati nevidljive u pretraživačima i većini drugih programa za gledanje slika. Ova funkcija je neophodna, na primjer, pri postavljanju slika nepravilnih geometrijskih oblika na stranicu sa složenim pozadinskim uzorkom, kada nije moguće pravilno "uklopiti" dijelove slika jedni na druge.
SAVJET Uklonite nepotrebnu pozadinu sa GIF fajl Možete koristiti ugrađenu proceduru Adobe Photoshop grafičkog uređivača. Da biste to uradili, potrebno je da izaberete stavku „izvoz“ iz menija „datoteka“, među predloženim opcijama izaberete „GIF89a“ i u prozoru koji se pojavi pomoću alata „kapaljka“ odredite boje koje vam više nisu potrebne .
Još jedna korisna karakteristika standarda GIF89a je da ovaj format omogućava pohranjivanje više različite slike, prikazujući ih na ekranu uzastopno jedan za drugim, uz mogućnost specificiranja redosljeda njihove izmjene i vremenskog intervala između promjena kadrova. Na tom principu je izgrađena GIF animacija, koja je vrlo česta na internetu, o kojoj ćemo detaljnije govoriti u ovoj istoj lekciji.
Ljudska percepcija boja zasniva se na odgovoru vizuelnog sistema na izlaganje svetlosti različitih talasnih dužina. Bijela svjetlost je složena svjetlost, koja se sastoji od zraka različitih boja: crvene, narandžaste, žute, zelene, plave, indigo, ljubičaste - ova dekompozicija se naziva spektra. Ako bijela svjetlost pada na bijeli predmet, tada se sve komponente bijele svjetlosti odbijaju od njega i vidimo bijelu boju objekta. Ako bijela svjetlost pada na zeleni predmet, tada se sve komponente svjetlosti apsorbiraju od površine objekta, a samo zelena komponenta se reflektira, zbog čega vidimo zelenu boju objekta. Ista stvar se dešava i sa drugim bojama: crvenom, plavom, zelenom itd. Ako svjetlost padne na crnu površinu, tada se apsorbiraju sve komponente spektra i vidimo crni predmet. Tako se boja objekata oko nas dobija oduzimanjem pojedinačnih spektralnih komponenti od bijele. Ova metoda dobijanja boje se zove "subtractive (subtractive) synthesis" .
Međutim, ako pogledate ekran monitora kroz lupu, možete vidjeti da se boja bilo koje tačke na ekranu (piksela) formira od tri svjetleće tačke različite boje: crvena ( R), zelena ( G), i Plava ( B). Pošto u ovom slučaju nema posla sa reflektovanom svetlošću, već sa svetlećim ekranom, ne dolazi do oduzimanja komponenti od glavne boje, već sabiranja boja svetlosnih zraka. Ovaj model miješanja boja se zove aditiva. Crna boja se u ovom slučaju dobija ako nije uključena nijedna od tri komponente boje. Bijela boja se dobija miješanjem čistog zračenja tri osnovne boje (crvene, zelene i plave) maksimalnog sjaja.
Koristi se za formiranje slike na monitorima, TV ekranima i projektorima. aditiva shema boja RGB (R ed, G reen, B lue). Bilo koja boja na ekranu se dobija mešanjem komponenti crvene, zelene i plave boje različitog intenziteta.
Rad sa grafički uređivači, susrećemo se i sa drugim modelima boja.
CMYK model u boji dizajniran za rad sa reflektovanom bojom, tj. je subtraktivan. Komponente boja ovog modela su: cijan (Cyan), magenta (Magenta), žuta (Yellow) i crna (BlacK). Cijan, magenta i žuta nastaju oduzimanjem RGB primarnih boja od bijele. Crna boja je navedena posebno, jer je tehnološki nemoguće dobiti crnu boju miješanjem boja. Kartridži savremenih štamparskih uređaja sadrže mastila ove četiri boje. U kompjuterskoj grafici, CMYK model se koristi za pripremu štampanih dokumenata.
HSB model u boji
Sistemi RGB boje i CMYK nastaju zbog ograničenja koja nameće hardver (kompjuterski monitor u slučaju RGB-a i mastilo za štampanje u slučaju CMYK).
Model u boji HSB je najpogodniji za ljude, jer... dobro se uklapa u ljudski model percepcije boja.
Komponente HSB modela su:
- ton ( H ue)
- zasićenje ( S aturacija)
- svjetlina boje ( B ispravnost)
Web tehnologije su ušle u naš svakodnevni život. Provodimo dosta vremena na World Wide Web-u - gledamo vijesti, kupujemo, komuniciramo i radimo. Internet usluga i industrija zabave se ubrzano razvija, vodeći programeri softvera poboljšavaju podršku za 3D grafiku u svojim proizvodima. Tradicionalno, njegova podrška je bila ograničena na vrhunske računare ili namjenske konzole za igre, a programiranje je zahtijevalo korištenje složenih algoritama. Međutim, zahvaljujući rastu produktivnosti personalnih računara i proširenju mogućnosti pretraživača, postao je moguće stvaranje i prikaz trodimenzionalne grafike korištenjem web tehnologija.
Za razliku od drugih 3D grafičkih tehnologija (kao što su OpenGL i Direct3D), WebGL je dizajniran za upotrebu na web stranicama i ne zahtijeva instalaciju specijalizovanih ekstenzija ili biblioteka. Jedna od prednosti WebGL-a je da su aplikacije dizajnirane kao web stranice, što znači da će isti program uspješno raditi na većini različitim uređajima(na primjer, na pametnim telefonima, tablet računari i igraće konzole). To znači da će WebGL imati sve veći uticaj na zajednicu programera i da će postati jedan od glavnih alata za grafičko programiranje.
Prednosti WebGL-a
Sa razvojem HTML-a, programeri su bili u mogućnosti da kreiraju sve složenije web aplikacije. U zoru svog razvoja HTML jezik ponudio samo mogućnost prikaza statičkog sadržaja, ali uz dodatak JavaScript podrške, postalo je moguće implementirati složenije interakcije elemenata i prikazati dinamički sadržaj. Uvođenje HTML5 standarda omogućilo je nove funkcije, uključujući podršku za dvodimenzionalnu grafiku u obliku oznake platna. Kreiranje WebGL tehnologije omogućilo je prikaz i manipulaciju 3D grafikom na web stranicama koristeći JavaScript. Uz WebGL, programeri mogu kreirati potpuno nove korisnička sučelja, 3D igre i koristiti 3D grafiku za vizualizaciju različitih informacija. Uprkos impresivnim mogućnostima, WebGL se od ostalih tehnologija razlikuje po svojoj dostupnosti i jednostavnosti upotrebe, što doprinosi njegovom brzom širenju.
Podrška za pretraživač
IN sadašnji trenutak WebGL podržavaju sljedeći pretraživači:
Desktop pretraživači
- Mozilla Firefox (od verzije 4)
- Google Chrome (od verzije 9)
- Safari (od verzije 6, podrška za WebGL onemogućena prema zadanim postavkama)
- Opera (od verzije 12, podrška za WebGL onemogućena prema zadanim postavkama)
- IE (od verzije 11, za druge verzije možete koristiti dodatke treće strane, na primjer, IEWebGL)
- Android pretraživač (podržava WebGL samo na nekim uređajima)
- Opera Mobile (počevši od verzije 12 i samo za Android OS)
- iOS (puna podrška od verzije 8.1)
- Firefox za mobilni (od verzije 4)
- Google Chrome za Android (od verzije 25)
- Kompatibilan sa više pretraživača i nije vezan za određenu platformu. Windows, MacOS, Linux - ništa od ovoga nije važno, glavna stvar je da vaš pretraživač podržava WebGL.
- Upotreba JavaScript jezik, što je prilično uobičajeno.
- Automatsko upravljanje memorijom. Za razliku od OpenGL-a, WebGL ne zahtijeva nikakve posebne korake za dodjelu i brisanje memorije.
- Zato što WebGL koristi GPU na video kartici (GPU), ovu tehnologiju karakterišu visoke performanse, koje su uporedive sa performansama izvornih aplikacija.
Najčešća tehnologija prikaza kompjuterska grafika on personalni računari su Direct3D i OpenGL.
Direct3D je sastavni dio Microsoft DirectX tehnološkog paketa.
Alternativna tehnologija, OpenGL, je zbog svoje otvorenosti postala mnogo raširenija. OpenGL implementacije su dostupne za različite operativni sistemi i hardverske platforme. OpenGL specifikaciju je razvio Silicon Graphics Inc. i objavljen kao otvoreni standard 1992. Tehnologija je imala ogroman uticaj na razvoj 3D grafike.
WebGL ima svoje korijene u OpenGL-u, ali se ne može nazvati direktnim potomkom. Direktnim prototipom WebGL-a smatra se OpenGL ES (za ugrađene sisteme), kreiran 2003-2004 i ažuriran 2007. (ES 2.0) i 2012. (ES 3.0). Idi na OpenGL verzije 2.0 je obilježila pojava nove važne karakteristike - podrške za softverske shadere. Ova podrška je prenesena u OpenGL ES 2.0 i postala je ključni element WebGL 1.0 specifikacije.
Početkom 2009. Khronos Grupa (konzorcij neprofitne industrije formiran za razvoj, objavljivanje i promociju različitih otvorenih standarda) osnovala je radna grupa WebGL i započeo proces standardizacije WebGL-a zasnovanog na OpenGL ES 2.0. 2011. godine, prva verzija WebGL-a je objavljena pod njegovim pokroviteljstvom. Međutim, u junu iste godine, Microsoft je izrazio zabrinutost za sigurnost WebGL tehnologije, navodeći pretjerana prava pristupa hardveru i nepouzdane sigurnosne mehanizme. Potpredsjednik Mozille Mark Shaver odbacio je Microsoftove kritike, nazvavši zabrinutost pretjeranom. U to vrijeme, Microsoft je imao vlastitu 3D web tehnologiju, Silverlight 5, zasnovanu na istim principima kao i WebGL, koju je, ipak, korporacija smatrala prilično pouzdanom. Kasnije je Microsoft promijenio svoj stav prema WebGL tehnologiji, implementirajući njegovu podršku u svoj pretraživač Internet Explorer 11. Apple je odlučio podržati WebGL u Safari pretraživač na WWDC konferenciji 2014.
Pregled okvira za razvoj WebGL-a
WebGL tehnologija koristi API niskog nivoa, ovaj aspekt olakšava programerima pretraživača da implementiraju tehnologiju u svoje proizvode, ali stvara dosta poteškoća pri kreiranju interfejsa. Velika količina vrijeme i trud je uložen u razvoj biblioteka, okvira i treće strane softver, što je pojednostavilo rad programera web stranica.
Prilično poznata biblioteka za razvoj aplikacija koristeći WebGL. Biblioteka je više fokusirana na dinamičke promjene scene. Međutim, posljednje promjene u repozitoriju datiraju iz 2014. godine, tako da postoje razlozi za sumnju u relevantnost biblioteke danas.
Djelomična lista funkcija:
- Stop motion animacija
- Podržava opšte osvetljenje, usmereno osvetljenje (spot) i tačkasto osvetljenje
- Podrška za normalne karte
- Animirani materijali
- Skeletna animacija
- Podrška za Collada format
- Podrška za mapu pomaka
- Rendering text
- Magla
- Dubina senke
- Karte okoliša
- Refleksija/prelamanje
- Animacija Collada
- 2d filteri
- Culling - uklanjanje skrivenih dijelova scene iz procesa obrade
- LOD podrška - nivoi detalja objekta
- fizika
Najpopularnija biblioteka koja se aktivno razvija danas. Detaljna i pristupačna dokumentacija i veliki broj radnih primjera čine ovu biblioteku jednom od vodećih među sličnim sistemima.
Djelomična lista funkcija:
- Rendereri - Canvas, SVG ili WebGL
- Dodajte i uklonite objekte u realnom vremenu
- Magla
- Perspektive ili ortografske kamere
- žičana animacija, razne vrste kinematika, animacija okvir po kadar
- Nekoliko vrsta izvora svjetlosti - vanjski, usmjereni, spot
- Bačene i primljene sjene
- Shaderi (GLSL)
- Objekti - mreže, čestice, sprite, linije, skeletna animacija i tako dalje
- Mnogo unaprijed postavljenih tipova geometrije - ravan, kocka, sfera, torus, 3D tekst i tako dalje
- Podrška aktivnog modifikatora - tkanina, ekstruzija
- Mogućnost učitavanja više tipova podataka - binarni, slike, JSON i scene
- Izvoz i uvoz Blender, openCTM, FBX, 3D Studio Max i Wavefront objekata .obj fajl
Biblioteka sa otvorenim izvorni kod za kreiranje punopravnih 3D aplikacija i igara koje se pokreću u web pregledniku bez korištenja dodataka i ekstenzija trećih strana. Babylon JS je po svojim mogućnostima blizak ThreeJS-u, ali ima neke ugrađene funkcije koje nisu dostupne u Three JS iz kutije. Ove lepe karakteristike uključuju ugrađeni fizički mehanizam oimo.js - prilično jednostavan način da se kreira realističan pejzaž pomoću visinske karte. Naravno, tri js takođe ima takve mogućnosti, ali se one implementiraju uz pomoć raznih dodatnih aplikacija. Međutim, za funkcionalnost biblioteke morate platiti neskromnih 800 kb.
Lista funkcija:
- Scena - upotreba gotovih mreža, magle, skyboxova
- Mehanizam fizike (oimo.js modul)
- Smoothing
- Motor za animaciju
- Sound engine
- Sistem čestica (čestica)
- Hardversko skaliranje
- LOD podrška
- Automatska optimizacija scene
- Debug panel
- 4 izvora rasvjete - spot, all-round, reflektor i realističan
- Prilagođeni materijali i shaderi
- Širok raspon opcija teksturiranja
- Odsjaj
- 9 vrsta kamere, uključujući kontrolu dodirom
- Izvoznici za 3ds Max, Blender, Unity3D, Cheetah 3d
- Visinska karta
Svaki programer može odabrati biblioteku za svoje specifične potrebe - neki brinu o skeletnoj animaciji, drugi o realističnom osvjetljenju ili fizici, a neki su istinski ortodoksni profesionalci koji ne prepoznaju ništa osim najčistijeg WebGL API-ja i pišu shadere u notepad. Međutim, sve je ujedinjena želja za stvaranjem kvalitetnih, laganih i produktivnih web aplikacija koje aktivno koriste mogućnosti 3D grafike.
Bluetooth
