Blender anyagok

A Blender-ben a geometriákhoz anyag objektumokat rendelhetünk, ahol sokféle beállítást meg tudunk adni.

Fontos megérteni, hogy a Blender céljai mások, mint a Three.js modellezésé. A Blender esetében fontos a fotorealisztikus megjelenítés, így más, összetettebb megvilágítási modelleket használ. Emiatt az anyagjellemzők közül csak egy szűk részhalmazt tud a Three.js kezelni. Felesleges tehát összetett, a Blender-ben jól megjelenő anyagösszeállítást készíteni, ha a célunk a Three.js-ben is használható anyag megjelenés előállítása. Még egyszerű beállítások esetén is máshogy jelenik meg az objektum Blender-ben és Three.js-ben.

A Blender-ben az árnyalásra műveletsorokat hozhatunk létre. A Blender főmenüben a Shading menüpontot választva a munkaterület alsó részén láthatjuk annak pillanatnyi felépítést, és dobozokkal reprezenetált programrészek hozzáadásával és paramétereik összekötésével testre szabhatjuk. A tapasztalat az, hogy az OBJ exportálás akkor működik, ha a Use Nodes kapcsolót bekapcsolva hagyjuk (ez az alapértelmezés), és a Surface paraméternél az alapértelmezett Principled BSDF árnyalót használjuk. Itt a Base Color paraméter az anyag diffúz jellemzőjét jelenti. A Specular egy skalár számérték lehet, az OBJ fájlba egy ennek megfelelő szürkeárnyalatos szín kerül kiírásra, vagyis a spekuláris színt itt nem tudjuk tetszőlegesen megadni. Alternatív megoldásként átírhatjuk az értékeket a kiexportált OBJ fájlban, vagy felülbírálhatjuk az érték módosításával a Three.js programunkban. Az Emission paraméterrel az objektum saját fényét állíthatjuk be, az Alpha pedig az átlátszóságot jelenti.

Megjegyzés: Hiába érhetők el többek között Diffuse és Specular árnyalók is a Surface paraméternél, azokat kiválasztva a beállított színek nem kerülnek mentésre az OBJ fájlba a Blender 2.80 verzió esetén. A fejlesztők szerint ez tervezési irányelv, nem hiba.

Hivatkozások:

Blender anyag hozzárendelés

Az exportálás eredménye

Az exportálás egy obj és egy mtl kiterjesztésű szöveges fájlt hoz létre. Az első az objektum geometriáját, a második az anyagot írja le. A gömb esetén a sphere_uv_flat.mtl fájl tartalma az alábbi.

# Blender MTL File: 'sphere_uv_material.blend'
# Material Count: 1

newmtl SphereMap
Ns 225.000000
Ka 1.000000 1.000000 1.000000
Kd 0.067000 0.279000 0.800000
Ks 0.401099 0.401099 0.401099
Ke 0.0 0.0 0.0
Ni 1.450000
d 1.000000
illum 2

A Ka, Kd, Ks sorok írják le az anyag ambiens, diffúz és spekuláris anyagjellemzőit. Az Ns érték a Phong anyagjellemző csillogási (shininess) paraméterét jelenti, [0, 1000] tartományaban megadva. A d az átlátszósági paraméter.A többit nem részletezzük. Az MTLLoader.js forrásfájlban megnézhetjük, a Three.js beolvasó milyen adatokat hogyan értelmez.

Anyag és geometria beolvasása

A Blender modellek használatánál megismerkedtünk a Wavefront OBJ fájlok beolvasásának lehetőségével. A Three.js jelenlegi változatában (r132) található OBJLoader osztály a dokumentáció szerint beolvassa az anyag fájl tartalmát is, de a tapasztalat az, hogy valamiért nem kerül beállításra az összes paraméter, például a szín sem.

Ha az anyag beállításokat is szeretnénk érvényesíteni, akkor jelenleg használnunk kell az MTL és az OBJ betöltőket. Egy konkrét példát a 10_01_ThreeJsBlenderGeometryMaterial.html példaprogramban látunk.

import { OBJLoader } from './js-r132/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from './js-r132/examples/jsm/loaders/MTLLoader.js';

function loader_obj_mtl() {
    var OBJFile = 'assets/models/sphere_uv_flat.obj';
    var MTLFile = 'assets/models/sphere_uv_flat.mtl';

    new THREE.MTLLoader()
        .load(MTLFile, function (materials) {
            materials.preload();
            new THREE.OBJLoader()
                .setMaterials(materials)
                .load(OBJFile, function (object) {
                    meshLoaded = object;
                    console.log(object);

                    object.traverse(function (child) {
                        if (child instanceof THREE.Mesh) {
                            child.scale.set(4, 4, 4);
                            //child.material.side = THREE.DoubleSide;
                        }
                    });

                    init();
                });
        });
}

Szükségünk van az MTLLoader és az OBJLoader forráskódok beimportálására. Először egy MTLLoader objektumot hozunk létre és meghívjuk a load függvényét az MTL fájl nevével. Az anyag betöltése után az OBJLoader konstruálása következik, beállítva az előzetesen betöltött anyagot. A program működése ettől a ponttól megegyezik a korábban látottal. A beolvasott THREE.Group objektum Mesh gyerekeinek Geometry és Material objektumait fa bejárással érhetjük el, ha szükséges a beolvasás után módosításuk. Itt a méretet a állítjuk négyszeresre minden tengely mentén.

Eredmény

A beolvasás eredményeképpen a megfelelő anyagi tulajdonsággal ellátott felszínháló jelenik meg. Figyeljük meg, hogy a Blender-ben beállított Flat és Smooth árnyalás hogyan befolyásolja az eredményt!