A WebGL használatának megkezdése

A Web Graphics Library (WebGL) az új szabvány a 3D-s megjelenítéshez az interneten, amely lehetővé teszi a webfejlesztők számára, hogy játék animációkat, adatmegjelenítéseket, termékmegjelenítéseket és még sok másat hozzon létre JavaScript API-k, egy modern webböngésző vagy mobil webböngésző és egy szabványos webes technológia segítségével. Kazal.

A WebGL a Khronos Group konzorciumának része, amely nyílt szabványokat tartalmaz a grafika, a média és a párhuzamos számítás számára. A szervezet egyetlen célja nyílt szabványok létrehozása, amelyek lehetővé teszik a grafikák, multimédiás média készítését és gyorsítását, valamint a párhuzamos számításokat sokféle platformon és eszközön. A WebGL olyan webes technológia, amely hardveres gyorsítású 3D grafikát hoz a böngészőbe anélkül, hogy a legtöbb esetben kiegészítő szoftvert telepítne. A WebGL a konzorcium tizenöt munkacsoportjának egyike, amelynek JavaScript-ként történő összerendelésére tervezték az OpenGL ES böngészőjét bármely olyan platformon, amely támogatja az OpenGL vagy az OpenGL ES 2.0 webes grafikai szabványait. A WebGL-t a HTML5 Canvas elem segítségével, DOM (Document Object Model) felületként fedezik fel.

megvalósítások

A jelenlegi megvalósítások a következő asztali böngészőket tartalmazzák:

• Mozilla Firefox 8.0 és újabb verziók
• Google Chrome 13.0 és újabb verziók
• A Safari 5.1 és az újabb verziók a Mac OS X Lion és a Mac OS X Snow Leopard programokra telepítve megvalósították a WebGL támogatását.
• Opera 11 és 12 alfa (kiadás előtti)
• Internet Explorer - A Microsoft nem jelentette be a WebGL támogatásának terveét; vannak olyan plug-inek, amelyek támogatják a WebGL támogatását az Internet Explorer 6.0 és újabb verziókhoz.

És a következő mobil böngésző megvalósítások tartalmazzák:

• A Nokia N900 - WebGL elérhető a PR1.2 firmware frissítésben.
• BlackBerry PlayBook - A WebGL a WebWorks-on és a böngészőn keresztül érhető el a PlayBook OS 2.0-ban
• Firefox mobilra - A WebGL elérhető az Android készülékekhez
• A Sony Ericsson Xperia Android okostelefonok sorozatában a firmware frissítése után WebGL képességek is voltak.
• Az Opera Mobile 12 végleges támogatja a WebGL-t (csak Androidon)

WebGL tartalom fejlesztése és programozása

Rengeteg erőforrás bőséges a WebGL kódolás megkezdéséhez; Valójában a legtöbb online oktatóprogram vagy könyv és hivatkozás a HTML5 Canvas elem és a JavaScript használatával kezdődik, hogy az alapvető grafikákat a böngészőben lehessen elérni. Vannak segédprogramok, könyvtárak és keretek, amelyek lehetőséget adnak a WebGL fejlesztőnek a grafikák és játékok programozására.

Elérhető WebGL segédprogramok:

• WebGL Playground: Egyszerű módszert kínál az eredmények böngészőben történő szerkesztésére és megtekintésére. Csak írja be a kódot a szerkesztőbe, és tekintse meg az eredményeket a "Futtatás" képernyőn. Nem kell váltani a szerkesztő és a böngésző között, és nem kell beállítani a vázas kódot. Minden szükséges dolgot hozzáadunk a színfalak mögött.

JavaScript segédprogramok:

• webgl-utils.js - Általános WebGL feladatok JavaScript segédprogramja
• J3DI.js - Alapvető WebGL J3DI segítő segédprogram
• J3DIMath.js - J3DI Math Classes segédprogram

WebGL Matrix könyvtárak:

• Sylvester - vektor- és mátrixmatematika a JavaScript könyvtárhoz
• webgl-mjs - JavaScript vektor és mátrix matematikai könyvtár, optimalizálva a WebGL használatához
• gl-mátrix - JavaScript mátrix és Vector könyvtár nagy teljesítményű WebGL alkalmazásokhoz

WebGL keretek:

• Canvas 3d JS Library - A Canvas 3D JS Library (C3DL) egy JavaScript könyvtár, amely megkönnyíti a 3D-alkalmazások írását a WebGL segítségével.
• GLGE - A GLGE egy JavaScript könyvtár, amelynek célja a WebGL használatának megkönnyítése; amely alapvetően egy natív böngésző JavaScript API, amely közvetlen hozzáférést biztosít az openGL ES2-hez.
• Jax - A Jax egy komplett WebGL fejlesztési környezet, amely a termelékenységre helyezi a hangsúlyt, és kevés időt és erőfeszítést igényel.
• X3DOM - Kiejtett X-Freedom, ez egy kísérleti nyílt forráskódú keret és futási idő, amely támogatja a Web3D és W3C közösségekben folyamatban lévő vitát, hogy hogyan nézhet ki a HTML5 és a deklaratív 3D tartalom integrálása.

Példák a működő WebGL-re

WebGL Water - Interaktív vízmedence gömbvel, amely körül mozgatható, hullámokat és hullámokat hozhat létre. A kurzor mozgatása gyűrűző hatást eredményez. Jellemzői a sugárnyomással visszavert reflexiók és refrakciók, az analitikus környezeti elzáródás, a vízmagasság-szimuláció, a puha árnyékok és a kaustika. A WebGL Water képernyőképe, ahogy a Chrome 18.0.1-ben látható, az alábbi A ábrán látható.

A ábra

Google Könyvek könyvespolc - A forgó többszintű könyv körhinta lehetővé teszi, hogy több ezer címet böngészjen a Google Könyvek között, témák szerinti keresési lehetőségekkel, és az alapértelmezés szerint megnyílik a bestsellerek. Kattintson az aktuális tárgyfejlécre, majd válasszon huszonnyolc tárgy közül: életrajzok és emlékiratok, számítógépek és internet, fantasy, fantasztika, történelem, referencia és mások. Kattintson a könyvborítóra, és a kötet nagyobb nézetre bővül; Ezután kattintson a borítóra, és kinyílik a szinopszis és egy link a könyv megrendeléséhez. A Google Könyvek könyvespolc-előzmények szakaszának képernyőképe, ahogy a Chrome 18.0.1-ben látható, az alábbi B. ábrán látható.

B. ábra

RÓMA "3 Dreams of Black" - Chris Milk és néhány Google barátjának interaktív filmje, amely bemutatja a WebGL kreatív potenciálját; mozgassa az egeret körül, hogy a film változó szögeit megtekinthesse a film előrehaladtával. A filmszakasz képernyőképe a Chrome 18.0.1-ben látható módon az alábbi C. ábrán látható.

C. ábra

Lebegő, fényes csomó - Jaume Sanchez készítette egy árnyékoló bemutatóját, hogy egyenes szögletes panorámaképeket használjon egyenesen a Google utcai nézetéből a textúrák környezeti leképezéseként. Az alkalmazott technológia magában foglalja a WebGL, a HTML5 vászon és a JavaScriptet. A WebGL alkalmazás több millió környezeti térkép textúrát használ a Google Street View panorámaképekkel, és rendelkezik egy kattintással és húzással a panoráma nézővel. Az egérgombbal nagyíthat vagy kicsinyíthet, a keresőmezővel kereshet címeket, vagy kattintással a térképre új hely kiválasztásához. Paul Lewis oktatóanyagának követése után elkészítheti saját környezeti térképeit. Minden helynek van egy egyedi URL-je, amelyet megoszthat. Például a D. ábrán a Taos, NM nézet látható, ahogy a Chrome 18.0.1.

D. ábra

WebGL Aquarium - A Greggman és az emberi motorok lehetővé teszik a halak számának kiválasztását. Az egérrel változtassa meg a különböző beállításokat, kattintson a * gombra, hogy további beállításokat jelenítsen meg, nyomja meg a SPACE gombot a nézet megváltoztatásához, és nyomja meg az L gombot, ha lézeres cápákat keres. Ez az oldal a tényleges képkockákat is mutatja másodpercenként. A Chrome 18.0.1-ben megjelenített minta nézet az alábbi E ábrán látható.

E ábra

Rengeteg más WebGL-példa és kísérleti alkalmazás érhető el az interneten, és még sok más láthatja a Google WebGL Experiments-t, amely bemutatja a kreatív webes kísérleteket, amelyek olyan technológiákkal készültek, mint a HTML5, a Canvas, az SVG és a WebGL.