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:

• jslibs
• kompleksowy eksporter (eksportuje do glge, scenejs lub natywnego JavaScriptu (z tego ostatniej opcji można trywialnie stworzyć JSONa)) – jednak nieekonomicznie eksportuje indeksy

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:

• jslibs
• complex exporter (it can export to GLGE, SceneJs or to nativ JavaScript object – but indices are exported in wasteful way

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