Pregătirea pentru vizualizare în 3D
Primul lucru pe care trebuie să-l utilizați pentru a fi vizualizat în 3D este elementul de panza. Fragmentul HTML de mai jos conține elementul canvas și definește modulul handler pentru evenimentul de încărcare. care inițializează contextul WebGL.
Pregătirea contextului WebGL
Primul lucru pe care îl facem este să obțineți un link către elementul de panza, să îl plasați în variabila canvas. Evident, dacă nu trebuie să obțineți în mod repetat o referință la panza, ar trebui să evitați să stocați această valoare la nivel global, dar să o salvați doar într-o variabilă locală sau în câmpul de obiect.
Odată ce primim un link către pânză, numim funcția initWebGL (); Definim imediat aceasta functie, munca sa este de a initializa contextul WebGL.
Toate cele de mai sus trebuie facute numai pentru inițierea inițială. Puțin mai târziu vom vedea lucrarea privind vizualizarea obiectelor tridimensionale.
Crearea unui context WebGL
Funcția initWebGL () arată astfel:
Pentru a obține contextul WebGL pentru panza, vom interoga elementul canvas pentru un context numit "webgl". Dacă această încercare nu reușește, încercăm să obținem un context numit "experimental-webgl". Dacă această încercare nu reușește, afișăm o fereastră de avertizare care permite utilizatorului să înțeleagă că browserul său nu acceptă WebGL. Asta este tot ce trebuie făcut. În această etapă, vom avea o gl variabilă sau nulă valoare (ceea ce înseamnă că WebGL context este disponibil) sau o trimitere la contextul WebGL în care vom produce un desen.
Notă: contextul, denumit "experimental-webgl", este numele temporar al contextului utilizat pentru timpul procesului de dezvoltare a specificațiilor. După ce specificația este complet dezvoltată, se va utiliza numai numele de context "webgl".
În acest moment, acest cod este suficient pentru a inițializa cu succes contextul WebGL și veți vedea un bloc negru gol gata de umplere cu conținut.
Dacă browserul dvs. acceptă WebGL, puteți vedea rezultatul codului de mai sus făcând clic pe acest link.
Modificați mărimea contextului WebGL
Noul context va fi capabil de locuri de muncă WebGL dimensiune zona de afișare la momentul contextului prin stabilirea înălțimii și lățimii elementului de pânză, fără a utiliza CSS. Modificarea stilului elementului de panza își va modifica dimensiunea afișării, fără a modifica dimensiunea zonei de desen. Editarea atributelor de lățime și înălțime a panzei după crearea contextului nu va schimba, de asemenea, numărul de pixeli de desenat. Pentru a modifica dimensiunea desenului, care WebGL nu funcționează, de exemplu, atunci când utilizatorul redimensionează fereastra pe tot ecranul, sau când trebuie să modificați setările grafice din cadrul aplicației, trebuie să apelați contextuală portul de vizualizare funcția WebGL (). pentru a confirma modificările.
Pentru a modifica dimensiunea zonei de desen din contextul WebGL cu variabilele gl și panza. utilizat în exemplul de mai sus:
Elementul panza este redimensionat, dacă el trage celelalte dimensiuni ale randarea regiune decât cele specificate în stilurile sale CSS, potrivit căruia are loc pe ecran. Redimensionarea cu CSS este cea mai utilă pentru salvarea resurselor, randarea la o rezoluție scăzută și permițând browserului să întindă rezultatul; Este posibil să se comprime folosind efectul antialializării super-eșantioanelor (SSAA) (duce la rezultate mai puțin acceptabile și pierderi serioase de performanță). În cele mai multe cazuri, este mai bine să se bazeze pe netezirea probe multiple (MSAA) și algoritmii de filtrare textura de punerea în aplicare care sunt acceptate de browserul utilizatorului, decât să facă același lucru prin forță brută, și sperăm că algoritmul de imagine de scalare utilizat de browser, va da un rezultat frumos.
Vezi de asemenea
Trimiteți-le prietenilor: