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
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...
pic
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ę kontynu...
pic
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...
lut

01

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 zawartość pliku “file_functions.js”

// Zwraca zawartosc pliku tekstowego
var getSourceSynch = function(url) {
    var req = new XMLHttpRequest();
    req.open("GET", url, false);
    req.send(null);
    return (req.status === 200) ? req.responseText : null;
};

// Zwraca obiekt zawarty w pliku .json
var loadJSON = function(url) {
    return JSON.parse(getSourceSynch(url));
};
		

Pierwsza z funkcji, używając obiektu XMLHttpRequest, czyta zawartość pliku synchronicznie (więcej tu XMLHttpRequest), natomiast druga (loadJSON) zamienia zawartość pliku w obiekt JavaScript. Rozdzieliliśmy te dwie funkcje, gdyż pierwszej z użyjemy dodatkowo do ładowania shaderów z osobnego pliku (po prostu skopiowaliśmy shadery z pliku html i zapisaliśmy je osobno do plików “shaders/vertex.shdr” oraz “shaders/fragment.shdr”). Modyfikacja funkcji getShader wygląda teraz tak:

function getShader(gl, type, path){
	var shader = gl.createShader(type);
	gl.shaderSource(shader, getSourceSynch(path));
	gl.compileShader(shader);

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		alert(gl.getShaderInfoLog(shader));
		return null;
	}

	return shader;
}

– przyjmuje ona parametry: kontekst graficzny, typ shadera (gl.VERTEX_SHADERS lub gl.FRAGMENT_SHADER) oraz ścieżka do pliku z shaderem. Jest wywoływana więc dwukrotnie w funkcji initShaders:

function initShaders(){
	var fragmentShader = getShader(gl, gl.FRAGMENT_SHADER, "shaders/fragment.shdr");
	var vertexShader = getShader(gl, gl.VERTEX_SHADER, "shaders/vertex.shdr");

	shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	...

Mając plik json (eksportowanie z blendera omówione jest niżej) z danymi modelu (koordynatami wierzchołków, wektorami normalnymi, koordynatami tekstur oraz indeksami wierzchołków) ładujemy go teraz w następujący sposób:

function g_Init()
{
    var monkeyData = loadJSON("objects/monkey.json");
    Sphere.init("textures/monkey.png", 0, 0,
            monkeyData.vertices, monkeyData.texCoords, monkeyData.indices, monkeyData.normals);
}

Z racji, że WebGL czyta odwrotnie obrazki (do góry nogami), w funkcji ładującej teksturę włączymy specjalną opcję przywracającą “normalność”:

tempImage.onload = function()
{
	gl.bindTexture(gl.TEXTURE_2D, that.Texture);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
	...

Uwaga! Przeglądarka chrome / chromium, z powodów bezpieczeństwa, ma domyślnie wyłączoną możliwość ładowania plików z lokalnego dysku. Oznacza to, że w czasie testów na lokalnym komputerze będzie zgłaszał błąd (gdy umieścimy naszą aplikację na serwerze wliczając w to lokalny serwer http, wszystko będzie działać). Aby wyłączyć tą funkcję na czas testowania, należy dodać jako parametr uruchamiania przeglądarki(we właściwościach skrótu) –allow-file-access-from-files

Eksportowanie z blendera

Oprócz opisanego tutaj eksportera, znalazłem w sieci jeszcze dwa inne:

Aby użyć skrypu:

  1. ściągnij go stąd i zapisz w folderze skryptów blendera (w windowsXP domyślnie: C:\Documents and Settings\USERNAME\Dane aplikacji\Blender Foundation\Blender\.blender\)
  2. przeładuj skrypty w blenderze (Script Window -> Scripts/Update Menus) lub prościej zrestartuj blendera
  3. zaznacz wierzchołki obiektu, który chcesz wyeksportować (jeśli masz tylko 1 obiekt wciśnij A)
  4. (opcjonalnie) usuń zduplikowane trójkąty – mesh/vertices/remove doubles
  5. unwrap (U) – wcześniej trzeba porozcinać szwami obiekt i oczywiście otworzyć okno UV (więcej tu: UV unwrapping) – powinno wyglądać mniej więcej tak:
  6. wymuś trójkąty (WebGL nie potrafi rysować czworokątów GL_QUADS) CTRL-T
  7. export UV z menu UV/Scripts/Save UV face layout (blender zapisze siatkę w formacie .tga, którą można otworzyć np w gimpie)
  8. wyeksportuj do JSONa z menu file/export/JSON by gliniak (w obecnej wersji niech nie zmyli was domyślne rozszerzenie .blend – po prostu zastąpcie je przez .json)

W razie pytań lub zgłoszeń błedów, czy propozycji poprawek, piszcie na naszym forum w tym temacie

Exporting from blender (english translation)

Additionaly to the one described here, I found 2 others:

To use our exporter script:

  1. download it from here and save it in blender’s scripts folder (in windowsXP default path is: C:\Documents and Settings\USERNAME\Application Data\Blender Foundation\Blender\.blender\)
  2. reload scripts in blender (Script Window -> Scripts/Update Menus) or just restart blender
  3. select all vertices of object you want to export (if you have only one object on the scene just press A)
  4. (optional) delete deplicated vertices (blender likes to create them f.e. when using extrude function) via Mesh/vertices/remove doubles
  5. unwrap UV texture – press U – you have to have opened UV window and mark certain edges (just read: UV unwrapping) – it should look more or less like that:
  6. force triangles (WebGL can not draw GL_QUADS) CTRL-T
  7. export UV net via UV/Scripts/Save UV face layout (blender will save it as .tga that you can open and edit with f.e. Gimp)
  8. export to JSONa via File/export/JSON by gliniak (in the current version you have to / should change extension from (default) .blend to .json)

If you found some bugs, have questions or improvement advice just drop me e-mail biegunka(at)op(dot)pl or post in this thread

autor: Gliniak

13 Comments

  1. Kris pisze:

    Jak ktoś ma Win7 to skrypty wrzucamy do:
    C:\Users\USER_NAME\AppData\Roaming\Blender Foundation\Blender\.blender\scripts

  2. [...] not tried this Blender WebGL export module, but it looks promising (the article is in Polish first, English translation [...]

  3. Evgeny pisze:

    I have several exported by Blender models and a note at
    http://www.ibiblio.org/e-notes/webgl/webgl.htm
    What is the most compact file format for Web (e.g. are binary data compressed efficiently)?

  4. Gliniak pisze:

    I haven’t heard about real compact files which can be easily (and fast) used by JavaScript. I’m not web expert but AFAIK JSON format is the most efficient format for external files in web world (JavaScript engine (using its JSON global object) parses .json file much faster than C++)

  5. [...] This post was mentioned on Twitter by nakamura001 and nyamadan, Brendon Smith. Brendon Smith said: Blender -> JSON Exporter #webGL: http://bit.ly/g8EwOi [...]

  6. tmasda pisze:

    Hello.
    I am making blender exporter for WebGL,too.

    https://sites.google.com/site/hackthewebgl/blender-exporter

    To my regret,this site which explains how to use was written only in Japanese.
    The demonstration that uses the exported model has been opened to the public.
    https://sites.google.com/site/hackthewebgl/how-to/blender-modelhyouji
    (I checked only chrome.)

    Let’s hold out mutually.
    vest regards.
    (sorry,poor english)

  7. Mike pisze:

    Thanks for the script and the tutorial, works well!

  8. Nobita pisze:

    Thank for that tutorial.
    It is really good to see.

    But I get some trouble that when I try to convert a big model. The Blender work well with smaller model but it stop working with the bigger.

    So, Help me please.

  9. Gliniak pisze:

    What error do you get in the console?

  10. milito pisze:

    check if the mesh has more than 65000 vertices,this might be your problem

  11. Pawel pisze:

    Wrzucam skrypt do podanego folderu, ale nie pojawia mi sie dodatkowa opcja. W jakiej wersji Blendera skrypt byl testowany? Czy mozliwe jest uzyskanie kodu tej lekcji?

  12. gliniak pisze:

    Skrypt działa ze “starym” blenderem t.j. do 2.49 chyba.
    Jak dobrze pamiętam w nowym wyrzuca jakiś błąd i nie próbowałem nic z tym robić (jeszcze).
    A co do kodu lekcji, to po prostu otwórz stronę dema: http://3dgames.pl/blog/data/notes/20/program/index.html i zobacz źródło strony (opcja w przeglądarce – Ctrl-U w Firefoxie/Chrome)

  13. Blend4Web pisze:

    Hi!

    You may wish to consider the “mainstream” Blender-to-WebGL solution called Blend4Web.

    http://www.blend4web.com/

Comment

Facebook

Copyright © 2014 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.