pic
Pomimo iż technologia WebGL jest stosunkowo młoda, już dostępna jest bogata baza frameworków. W zasadzie jest ich tak dużo, że na początku trudno któryś wybrać. W ostatnim czasie miałem okazję spróbować kilku z nich i podzielę się z  wami moimi spostrzeżeniami. Ostrzegam, że pewne cechy bibliotek, o których piszę mogą się zmienić w czasie (np. uwagi dot. niepełnych dokumentacji). Dodatkowo oceniałem ich możliwości pod kątem swoich potrzeb, ktoś inny może mieć inne wrażenia. SceneJS Dynamicznie rozwijany Framework z API sceny opartym na formacie JSON. Projekt zapoczątkowany przez Lindsay Key, aktualnie rozwijany przez kilka osób. Framewo...
pic
Artykuł poświęcony jest eksportowaniu modeli (stworzonych w programie blender) do formatu JSON i ładowaniu ich w WebGL. Zrobimy również mały porządek z shaderami, które wrzucimy do osobnych plików, co daje lepszą czytelność i pozwala chociażby na kolorowanie składni, jeśli mamy edytor, który rozpoznaje GLSL. Lekcja ta jest modyfikacją poprzedniej lekcji. Efekt końcowy na rysunku poniżej lub na żywo tutaj. JSON (JavaScript Object Notation) jest czytelnym i intuicyjnym formatem, który ma swoje korzenie w JavaScript (więcej możecie doczytać na wikipedii). JavaScript posiada wbudowany obiekt globalny JSON, który potrafi parsować ten format. Poniżej mamy zaw...
pic
Ukończyliśmy właśnie prace nad grą "Vehicle Soccer". Jest to trójwymiarowa zręcznościówka polegająca na umiejętnym manewrowaniu jednym z pojazdów w celu łapania, uderzania oraz omijania różnych piłek na arenach. Grać można samemu przechodząc i odblokowując kolejne rundy (tryb single) lub w 2 osoby na jednej klawiaturze starając się zdobyć więcej punktów od przeciwnika (tryb multi). Gra została wystawiona do konkursu Mozilla Labs - Game ON więc możecie trzymać kciuki i jeśli wam się spodoba - oddać swój głos :-) Lista wszystkich gier zgłoszonych do konkursu znajduje się w galerii gier konkursu Game On. Aby zagrać wystarczy kliknąć w scr...
pic
źródło: Mozilla Konkurs skierowany jest do niezależnych twórców gier. Aby wziąć w nim udział trzeba stworzyć grę przeglądarkową wykorzystującą wyłącznie otwarte standardy webowe. Mile widziane są nowo powstające technologie takie jak WebGL, czy HTML5. Zasada jest jedna: gra musi być kompatybilna z przegladarką Firefox w najnowszej (testowej jeszcze) wersji 4.0. Gdy gra będzie gotowa, trzeba zarejestrować się na oficjalnej stronie wydarzenia: gaming.mozillalabs.com i podać nazwę, krótki opis oraz link do dzieła umieszczonego w sieci. Podczas oceniania gier brane będą pod uwagę następujące walory: Poprawność techniczna (engine, kod), wykorz...
pic
Dzisiaj dodamy trochę światła do naszej sceny. Lekcja ta bazuje na kodzie jednej z poprzednich: Porządek w kodzie i omówię jedynie różnice. Efekt końcowy dzisiejszej lekcji zobaczyć możecie na rysunku poniżej, lub na żywo tutaj. Możecie również pobrać kod dzisiejszej lekcji. Osoby zaznajomione z OpenGL mogą być trochę zawiedzone faktem, że WebGL (który bazuje na OpenGL ES) nie posiada automatycznego wsparcia dla światła (czytaj funkcji ustawiających pozycję, kolor itp. parametrów światła). Wszelkie obliczenia związane z oświetleniem musimy zrobic sami w shaderach. Przytoczona tu metoda jest tzw. "opartą na wierzchołkach". Znaczy to tyle, że...
sie

06

Technologia WebGL wciąż ewoluuje, na ostateczną wersję musimy jeszcze trochę poczekać, a w między czasie spotkać mogą nas niespodzianki takie jak np. zmiany w API. I tak się właśnie stało – wprowadzone zostały 2 poważne zmiany do specyfikacji WebGL. Na szczęście są one niewielkie, ale zmuszają nas do wprowadzenia poprawek we wszystkich programach.

Walidacja shaderów. Jest to pierwsza poważna zmiana. Shadery będą teraz sprawdzane, czy są zgodne ze specyfikacją WebGL. W przypadku większości aplikacji zmiana ta wymaga określenia precyzji obliczeń dla fragment shadera. W zasadzie wystarczy na początku programu dopisać następujący ciąg:

#ifdef GL_ES
  precision highp float;
#endif

Oznacza to wysoką precyzję obliczeń. Aby shadery były walidowane zgodnie z ostatnimi zmianami w api, musimy pobrać najnowsze wersje przeglądarek i uruchomić je z opcją walidacji. Aby to zrobić powinniśmy zachować się zależnie od używanej przeglądarki.

  • W przypadku przeglądarki chromium należy przy uruchomieniu dodać flagę –enable-glsl-translator
  • W przypadku minefield wpisujemy about:config w pasku adresu i ustawiamy flagę  webgl.shader_validator na true

Jeśli tego nie zrobimy, nie zauważymy zmian w naszych programach, ale będą one napisane niezgodnie z aktualną specyfikacją i mogą nie działać poprawnie, gdy technologia WebGL wejdzie w życie.

Kolejna zmiana dotyczy funkcji gl.texImage2D, która tworzy obiekt tekstury na podstawie danych przekazanych w formacie grafiki oraz odpowiednich parametrów. Funkcja ta zaimplementowana w klasie Model wyglada następująco:

gl.texImage2D(gl.TEXTURE_2D, 0, tempImage);

a po wprowadzeniu zmian wyglądać będzie tak:

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, tempImage);

Jak widać dodane zostały nowe parametry: gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE. Pierwsze dwa określają składowe każdego teksela, natomiast trzeci oznacza format, w jakim owe teksele są zapisane. RGBA mówi oczywiście o tym, że każdy teksel zawiera kanały R – czerwony, G – zielony, B – niebieski oraz A czyli kanał alfa. Jeśli nie używamy przezroczystości możemy ustawić te parametry na gl.RGB, co właściwie wystarczy dla naszych dotychczasowych potrzeb, ale można już przygotować klasę Model na przyszłość dodając obsługę kanału alfa. O przezroczystości powiemy więcej na jednej z przyszłych lekcji.

Wszystkie lekcje zostały uaktualnione do najnowszej specyfikacji. Jeśli znajdziecie jeszcze jakieś nieprawidłowości, proszę o informację zwrotną. Mam nadzieję, że była to ostatnia tak poważna zmiana ;)

Informacje o zmianach, jak i ich rozwiązanie zaczerpnięte zostały ze strony learningwebgl.com. Autorowi strony należą się duże podziękowania za to, że odwala kawał dobrej roboty w tej dziedzinie!

autor: RecRoot

One Comment

Comment

Copyright © 2012 3dgames - Kolejny blog oparty na WordPressie.
Website powered by WordPress and Emescale wordpress theme designed by TopTut.com & TopWPThemes.com.
Visit WebHostingFan.com for the latest news on web hosting and cms review.