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...
mar

03

hello_world

Artykuł jest archiwalny i treści nie są aktualne z obecnym stanem technologii. Aktualne informacje dotyczące przeglądarki dla WebGL można znaleźć na stronie get.webgl.org

Technologia WebGL jest wciąż na etapie rozwoju więc na początek musimy zainstalować przeglądarkę, która ją obsługuje.

Uwaga sama instalacja i konfiguracja przeglądarki może nie wystarczyć, dlatego proponuję również zainstalować najnowsze sterowniki do karty graficznej. Jednak nawet jeśli to zrobimy, starsze komputery mogą tej technologii nie obsługiwać w ogóle, lub mogą nie działać niektóre funkcje np. światło lub mipmaping. Najważniejsze jest, aby karta graficzna obsługiwała OpenGL 2.1. Dodatkowo jeśli pracujemy na Windowsie – przydatna może okazać się instalacja pakietu Microsoft DirectX runtime.

W tej chwili najpewniejszym wyborem są przeglądarki:

  • Firefox 4 lub 5 – możemy ją pobrać tutaj www.mozilla.com/firefox. Jest to obecnie najlepszy wybór jeśli chodzi o stabilność działania WebGL.
  • Chrome, którego pobrać można tutaj www.google.com/chrome. Dodatkową zaletą przeglądarki Chrome jest natywnie wbudowana konsola JS. Uruchamiamy ją skrótem ctrl+shift+j.

Poza tym nadal możemy korzystać z wersji deweloperskich przeglądarek:

  • Firefox. Wersja testowa tej przeglądarki obsługuje technologię WebGL pod systemami Windows, Mac OS X, oraz Linux. Sugerujemy wybrać właśnie tę przeglądarkę. Instrukcja instalacji Firefoxa.
  • Safari. Ta przeglądarka obsługuje poprawnie WebGL pod systemami Mac OS X 10.5 oraz MacOS X 10.6. Jeśli macie komputer z systemem kompatybilnym z tymi wersjami, sugeruję wybrać tę przeglądarkę. Instrukcja instalacji Safari.
  • Chrome. Istnieją dwie wersje przeglądarki Chrome, które obsługują WebGL. Pierwsza to Chrome tworzony przez Google. Instrukcja instalacji Chrome. Natomiast druga to tworzona poza Google przeglądarka Chromium. Instrukcja instalacji Chromium.

Nie istnieje żadna wersja przeglądarki Internet Explorer obsługująca WebGL.

Firefox

Niestabilna wersja przeglądarki Firefox, która obsługuje technologię WebGL nazywa się Minefield. Instalacja Minefield’a:

  • Ściągamy odpowiednią dla naszego systemu wersję ze strony the nightly builds page.
  • Instalujemy ją i uruchamiamy.
  • Testujemy działanie przeglądarki tutaj.

Safari

Pamiętajmy, że przeglądarka Safari obsługuje technologię WebGL tylko pod systemami Mac OS X 10.5 oraz Mac OS 10.6 („Leopard” oraz „Snow Leopard”). Nie znamy jeszcze kompatybilnej przeglądarki dla starszych systemów OS/X. Aby uruchomić przeglądarkę z obsługą WebGL na systemie Mac OS:

  • Upewniamy się że mamy zainstalowaną wersję 4 przeglądarki lub nowszą. Jeśli nie instalujemy taką.
  • Ściągamy i instalujemy the WebKit nightly build.
  • Uruchamiamy terminal i wpisujemy komendę:

defaults write com.apple.Safari WebKitWebGLEnabled -bool YES

  • Uruchamiamy przeglądarkę i testujemy tutaj.

Chromium

Tę przeglądarkę uruchamia się nieco inaczej na każdym systemie. Podajemy instrukcję dla każdego z nich.

Windows

Macintosh

  • Ściągamy ze strony  the continuous integration page plik chrome-mac.zip.
  • Rozpakowujemy go w wygodnym miejscu.
  • Uruchamiamy Terminal i przechodzimy do folderu, do którego rozpakowaliśmy przeglądarkę.
  • Upewniamy się, że przeglądarka nie jest uruchomiona.
  • Uruchamiamy przeglądarkę i testujemy tutaj.
  • Uruchamiamy przeglądarkę poprzez wiersz poleceń wpisując komendę:
  • ./Chromium.app/Contents/MacOS/Chromium

  • Uruchamiamy przeglądarkę i testujemy tutaj.

Linux

  • Jeśli posiadamy 32 – bitową wersję systemu ściągamy ze strony the 32-bit continuous integration page plik chrome-linux.zip najlepiej z samego dołu listy. Jeśli natomiast posiadamy wersję 64 – bitową,  ściągamy ze strony the 64-bit continuous integration page plik chrome-linux.zip również z dołu listy, ponieważ na dole są najnowsze wersje.
  • Rozpakowujemy w wygodnym miejscu.
  • Uruchamiamy przeglądarkę i testujemy tutaj.

Chrome

Tę przeglądarkę udało nam się uruchomić tylko na systemie Windows, więc podajemy instrukcję, jak uruchomić ją pod tym systemem.

  • Ściągamy odpowiednią dla nas wersję przeglądarki ze strony the Dev Channel’s home page.
  • Instalujemy zgodnie z instrukcją.
  • Jeśli wszystko zrobiliśmy dobrze, WebGL będzie aktywny przy każdym uruchomieniu.
  • Uruchamiamy przeglądarkę i testujemy tutaj.

Są to wszystkie możliwe przeglądarki, których możemy użyć. Myślę, że każdy znajdzie cos dla siebie. Jednak polecanym przez nas wyborem jest Minefield czyli wczesna wersja Firefoxa. Jeśli wszystko poszło nam zgodnie z planem, możemy rozpocząć naukę WebGl’a. Zapraszam na pierwszą lekcję.

Artykuł powstał na podstawie artykułu http://learningwebgl.com/blog/?p=11.

Ostatnia aktualizacja artykułu: 2011-07-03.
autor: RecRoot

3 Comments

  1. Patman pisze:

    Chromium pod linuxem również trzeba odpalić z dopiskiem „–enable-webgl –no-sandbox”
    Dla wygody wystarczy utworzyć skrót i dopisać do ścieżki :P

  2. Kris pisze:

    Racja. Dzięki za uwagę, już poprawiam :-)

  3. [...] Chciałbym jeszcze zaznaczyć, że aby nasze aplikacje napisane zgodnie z aktualną specyfikacją działały poprawnie, powinniśmy również zaktualizować przeglądarki. Instrukcję instalacji wraz z linkami do najnowszych wersji deweloperskich znajdziemy na naszym wortalu na stronie ustawienia przeglądarki. [...]

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.