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.

więcej…

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.

więcej…

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 światło obliczane jest tylko dla wierzchołków, a kolor każdego innego punktu w polygonie jest automatycznie uśredniany. Dlatego np. oświetlenie na kuli posiadającej mało wierzchołków będzie wyglądać dosyć sztucznie. Oświetlenie oparte na fragmentach przybliżymy w jednej z następnych lekcji.

więcej…

Witam. Dzisiaj poruszymy najbardziej newralgiczny punk wszystkich gier komputerowych – kolizje.

Bez zapoznania się z  tym tematem praktycznie nie da się stworzyć żadnej gry.  Szeroko rozumiane kolizje są jedynym sposobem na wykrycie interakcji gracza z systemem aplikacji. Wszystkie zdarzenia w grach zależne są od dotknięć, odbić, uderzeń lub zbliżeń pewnych obiektów do siebie. Błędy w mechanizmie obsługi kolizji są jednocześnie powodem większości bugów zdarzających się w grach. Dlatego warto poświęcić jak najwięcej czasu, aby dokładnie zgłębić ten temat. Dzisiaj omówimy tylko jego niewielką część, jednak wkrótce można spodziewać się kontynuacji na naszym wortalu.

Stworzymy dzisiaj program, który zobaczyć możecie na filmiku poniżej lub na żywo tutaj.

więcej…

Po ostatnich ciężkich lekcjach WebGL’a czas na coś prostszego. Dzisiaj zaprowadzimy porządek w kodzie oraz we wszystkich plikach aplikacji. Teoretycznie utrzymywanie porządku nie jest konieczne, ale podczas tworzenia większych programów zaoszczędzimy dzięki temu mnóstwo czasu.

Dla przykładu stworzymy prostą aplikację, której efekt możecie zobaczyć na żywo tutaj, lub na filmiku poniżej.

więcej…

Do tej pory aby wyświetlić obiekt musieliśmy stworzyć odpowiednie bufory, wypełnić je danymi o wierzchołkach, za pomocą szeregu funkcji wczytać teksturę z pliku i dopiero mogliśmy przejść do skomplikowanego rysowania w funkcji drawScene. Generalnie cały kod zajmował dużo miejsca i był niepraktyczny. Dzisiaj napiszemy klasę Model, dzięki której aby zainicjować oraz narysować dowolny obiekt na scenie wystarczą nam zaledwie dwie linijki kodu. Zapraszam do lektury!

Poza klasą Model stworzymy również prostą scenę z wieloma obiektami aby pokazać praktyczne użycie nowych narzędzi. Efekt całej aplikacji zobaczyć można na rysunku poniżej, na żywo można go obejrzeć na tej stronie.

więcej…

Witam na kolejnej lekcji. Ostatnio nauczyliśmy się jak wyświetlić kwadrat z nałożoną teksturą, dzisiaj pójdziemy dalej. Tym razem stworzymy dwa w pełni trójwymiarowe obiekty – sześcian i piramidę, oraz wprowadzimy ruch na scenie.

Efekt końcowy będzie taki jak na rysunku poniżej, na żywo można go obejrzeć na tej stronie, jednak aby go zobaczyć trzeba mieć kompatybilną przeglądarkę. Jeśli takowej nie posiadacie, instrukcję instalacji znajdziecie w ustawieniach przeglądarki.

więcej…

Witam w pierwszej lekcji dotyczącej nowej technologii, jaką jest WebGL. Dzisiaj nauczymy się, jak zainicjować okno renderingu na naszej stronie oraz wyświetlimy prosty oteksturowany obiekt.

Efekt końcowy widać na rysunku poniżej, na żywo można go obejrzeć na tej stronie, jednak aby go zobaczyć trzeba mieć kompatybilną przeglądarkę. Jeśli takowej nie posiadacie, instrukcję instalacji znajdziecie w artykule ustawienia przeglądarki.

więcej…

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.

więcej…