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

29

efekt_końcowy_kolo
całe_auto

Witam. Rozpoczniemy dzisiaj duży tutorial, w trakcie którego pokażę Wam jak wymodelować i oteksturować niskopoligonowy model samochodu. Przy okazji nauczymy się wielu przydatnych funkcji dostępnych w programie Blender.  Cały tutorial będzie się składał  z trzech części: modelowanie koła, modelowanie karoserii oraz  teksturowanie już ukończonego całego obiektu. Zapraszam na pierwszą część.

Modelowanie koła

Najpierw omówię wstęp do wideotutorialu, w którym pokażę, w jaki sposób wymodelować koło oraz omówię kilka podstawowych funkcji, niezbędnych do rozpoczęcia pracy z programem Blender. Następnie napiszę, na jakie rzeczy warto zwracać uwagę w trakcie oraz po skończeniu modelowania.

Po uruchomieniu Blendera ukazuje się nam domyślny widok sceny, na którym automatycznie umieszczone są trzy obiekty: sześcian, kamera oraz źródło światła. Taki układ będzie towarzyszył nam zawsze po uruchomieniu programu.

całe_auto

Prawym przyciskiem myszy (PPM) zaznaczamy sześcian (Cube). Kolor krawędzi aktywnych obiektów przyjmują kolor różowy. Następnie usuwamy go wciskając klawisz Delete lub X i zatwierdzamy Enter’rem lub PPM. Wstawiamy w scene okrąg (Circle) z meni Toolbox poleceniem Spacja\Add\Mesh\Circle (kursor myszki musi znajdywać się w polu widokowym sceny (View)).

W okienku określającym wstępne parametry naszego okręgu zmieniamy domyślną liczbę wierzchołków (Vertices) z 32 na 12 (ręcznie przy użyciu kombinacji klawiszy Shift+Enter lub przy pomocy strzałek umieszczonych po obu stronach liczby). Teraz przełączamy się z trybu Obiect mode (w którym jesteśmy obecnie) do trybu Edit mode klawiszem Tab a następnie F9. Widok ustawiamy z kamery wciskając klawisz zero (0) na klawiaturze numerycznej (te zaś umieszczone pod klawiszami funkcyjnymi służą do przełączania warstw, np. przeniesienia lub ukrycia danego obiektu na scenie w celu jej uporządkowania oraz nadaniu przejrzystości, kiedy nasza scena jest naprawdę rozbudowana). Chcemy teraz aby zaznaczone były krawędzie, w tym celu skorzystamy z skrótu klawiaturowego Ctrl+Tab i z meni podręcznego wybieramy środkową pozycję Edges (aktywne krawędzie powinny mieć kolor żółty). Następnie wytłaczamy nasz okrąg wciskając klawisz E i ograniczamy kierunek operacji do osi Z wciskając klawisz Z tuż po wciśnięciu E (można również sobie pomóc przytrzymując podczas tej operacji klawisz Ctrl, pozwala on np. na „skokowe” przemieszczenie elementu edytowanego obiektu bądź całości o jedną jednostkę Blendera).

Mam nadzieję, że przejście przez wideotutorial umieszczony poniżej nie sprawi Wam większych trudności. Podam jeszcze kilka przydatnych skrótów, służących do wykonywania podstawowych operacji na obiektach:

  • G (Grab) – przemieszczanie obiektu
  • R (Rotate) – obracanie obiektem
  • S (Scale) – skalowanie obiektu
  • A – zaznaczanie lub usunięcie całego zaznaczenia wszystkich obiektów znajdujących się na scenie
  • B – zaznaczenie całego lub fragmentu obiektu za pomocą ramki lub okręgu (podwójne wciśnięcie klawisza B w trybie Edit mode)
  • E (Extrude) – Wytloczenie krawędzi obiektu
  • X (Erase) – usunięcie całego obiektu lub wybranych elementów siatki w trybie Edit mode

Po skończonej edycji obiektu (bądź nawet w czasie modelowania) watro sprawdzić czy nasz model nie posiada nakładających się (o takich samych współrzędnych) wierzchołków (Vertices). W tym celu zaznaczamy cały obiekt za pomocą klawisza A lub tylko nas interesujący pewien obszar modelu przy pomocy ramki, klawiszem B (lub podwójnym jego wciśnięciem) a następnie z okienka Mesh Tools wybieramy funkcje Rem Doubles. Tuż po prawej stronie znajduje się parametr Limit określający zasięg działania tej funkcji. Im większy tym zaznaczone wierzchołki znajdujące się w większej odległości od siebie będą brane pod uwagę przez funkcję Rem Doubles.

rem_doubles

Do określenia dokładnej geometrii obiektów znajdujących się na scenie jak i położenia oraz rotacji, służy nam okno Transform Properties, do którego dostęp uzyskamy po naciśnięciu klawisza N w widoku sceny.

transform

Ważne jest również, aby zwrócić uwagę na kierunek Normalnych względem płaszczyzny siatki naszych modeli, gdyż podczas edycji (wytłaczanie, duplikowanie oraz edycja elementów siatki) ich kierunki często ulegają chaotycznej zmianie np. kierując się do wnętrza naszego modelu. Elementy siatki takiego obiektu w silniku gry mogą być później nie widoczne, lub niepoprawnie oświetlone.

Podgląd kierunku normalnych (jak i inne pomocnicze funkcje umożliwiające podgląd parametrów obiektu podczas ich edycji) uzyskamy w trybie Edit mode (Tab i F9) w okienku znajdującym się po prawej stronie Mesh Tools More. Wybieramy przycisk Draw Normals.

draw_normals

Rekalkulacje położenia normalnych dokonujemy poprzez kombinacje klawiszy Ctrl+N w trybie Edit mode. Jeżeli chcemy zadecydować o tym czy normalne mają być skierowane do wewnątrz lub zewnątrz obiektu skorzystamy z przycisku Flip Normals w okienku Mesh Tools, zaznaczając cały bądź interesujący nas obszar siatki obiektu.

flip_normals

To by było na tyle w tej lekcji:). W kolejnej, zajmiemy się modelowaniem karoserii naszego autka. Oczywiście będzie opisany również szereg kolejnych przydatnych funkcji dostępnych w programie Blender. Na pewno nie opanujemy wszystkich jego możliwości, ale nauczymy się jak praktycznie wykorzystać go w konkretnym projekcie :)

autor: Kuba

2 Comments

  1. Przemek pisze:

    opiszcie jak eksportować obiekty w Blenderze do WebGL .

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.