Snapchat-szerű szűrő létrehozása Jeeliz FaceFilter API-jával: 1. rész, az első szűrő létrehozása.
A FaceFilter API lehetővé teszi, hogy könnyedén létrehozhasson Snapchat-szerű szűrőket a web-alkalmazásban. Az arcfelismerő neurális hálózat tetejére építve egyesíti a mély tanulás erejét a WebGL / Three.js sokoldalúságával.
Előfeltételek: ehhez az oktatóanyaghoz csak jó ismeretekkel kell rendelkeznie a Javascript-hez és jól megértenie a Three.js alapjait.
Oké, készítsük el az első szűrőt!
Projektmappa létrehozása
Első lépés: klónozzon vagy töltse le a faceFilterAPI repo fájlt (https://github.com/jeeliz/jeelizFaceFilter). A demók a ./demos/threejs címen találhatók. Ehhez az oktatóanyaghoz egy nagyon egyszerű szűrőt építünk, amelyhez hozzáadunk egy One Piece Luffy kalapját!
A „kocka” bemutató nagyon jó hely a projekt indításához: ez a szűrő hozzáad egy 3D-s kocka a felismert archoz, ami közel áll ahhoz, amit meg akarunk tenni.
Másolja meg a „kocka” mappát, és nevezze át „luffys_hat” névre.
Megjegyzés: A FaceFilter API futtatásához eszközöket helyi kiszolgálón keresztül kell kiszolgálni. A projekt mappa gyökeréből származó parancssorban indítsa el a httpServer.py parancsfájlt, és látogasson el a localhost: 8455 webhelyre, hogy ellenőrizze a demokat.
A projekt felépítése
Kezdjük azzal, hogy megnézzük az újonnan létrehozott mappa felépítését:
Elég egyszerű, mi? A szűrőnket hozzáadó kód a demo.js webhelyen található. Ha megnézi, láthatja, hogy a kód két funkcióra oszlik:
- main (): a faceFilter API inicializálását kezeli
- init_threeScene (): ez kezeli a three.js jelenet létrehozását, valamint azt, amit ebbe a helybe helyezzünk. Itt adjuk hozzá kalapunkat.
Jelenleg egy kocka van elhelyezve a felhasználó arca közepén. Cseréljük le hűvös kalapunkra!
Ezt két lépéssel hajtjuk végre:
- A Blender segítségével exportálhat kalap-modellünket a JSON-ba. SPOILER figyelmeztetés: ez lesz a legnagyobb kihívást jelentő rész
- Importálja a JSON fájlt a projektünkbe, és adja hozzá a jelenethez
A JSON 3D modell exportálása a Blenderből
A Blender-et kell használnunk, amely egy nyílt forrású 3D-s számítógépes grafikus szoftver. Ez lehetővé teszi számunkra, hogy 3D modellünket JSON-ba konvertáljuk, amely szuperhatékony és alacsony méretű.
A Blenderben nyissa meg a File fület, kattintson az import fájl elemre, majd kattintson a megfelelő formátumra. Most látnia kell a kalapot a nézetablak közepén.
Most szükségünk lesz a konkrét Three.js exportőrre annak érdekében, hogy a kalapot JSON-ban megkapjuk. E célból le kell töltenünk vagy klónoznunk a Three.js repo-t a Githubon (https://github.com/mrdoob/three.js/), és a könyvtárakat át kell állítani a three.js / utils / exporters / blender / addons könyvtárra. /. Ha odaért, meg kell találnia egy io_three nevű mappát. Ezután tömörítjük ezt a mappát egy ZIP-fájlban, amelyet az exportőr telepítéséhez használunk.
Menjünk vissza a Blenderhez. Először kattintson a Fájl fülre, majd a Beállítások elemre. Kattintson a Kiegészítők fülre, majd az alján található „Kiegészítő telepítése a fájlból…” pontra.
Válassza ki az újonnan csomagolt mappát.
Az utolsó lépés a felhasználói beállítások fül bal felső sarkában található keresősáv használata a „Három” kiegészítő kereséséhez a listán, majd a jelölőnégyzetre történő aktiváláshoz.
Megjegyzés: Annak érdekében, hogy ne kelljen újraismételnie ezt a folyamatot, amikor valamelyik modellt exportálni kívánja a JSON-ban, kattintson a „Felhasználói beállítások mentése” gombra.
Majdnem kész!
Most exportáljuk modellünket a Three.js exportőr használatával (Fájl> Export> Three.js (JSON)). Ne felejtsen el exportálni az összes textúrát és anyagot a megfelelő lapra.
Minden fel van állítva! Válassza ki a projektkönyvtárunkat, hozzon létre egy „modellek” mappát és exportálja Luffy kalapját.
Rendben, térjünk vissza a kódoláshoz!
A szűrő kódolása
Először el kell távolítanunk a kockát a Three.js jelenetből. Kommentáld azt a sort, ahová a kocka hozzá lett adva:
// THREEFACEOBJ3DPIVOTED.add (threeCube);
Ezután létrehozunk egy BufferGeometryLoader eszközt, és meghívjuk annak .load () módszerét, átadva egy forrást és egy visszahívást argumentumként.
// Hozza létre a BufferGeometryLoader kalapot
var loader = új THREE.BufferGeometryLoader ()
// Töltsük be a hűvös kalapunkat
loader.load (
„Modellek / luffys_hat.json”
funkció (geometria, anyagok) {}
)
Ezután készítünk egy anyagot, és a geometriai objektummal együtt továbbítjuk azt egy hálóra:
loader.load (
„Modellek / luffys_hat.json”
funkció (geometria, anyagok) {// elkészítjük a Hat anyagot
var mat = új THREE.MeshBasicMaterial ({// töltse be a textúrát a TextureLoader használatával
térkép: új THREE.TextureLoader (). load (“models / Texture.jpg”)
});
// és végül hozzon létre hálót
const hatMesh = új THREE.Mesh (geometria, mat)
}
)
A sapka méretét, forgását és helyzetét az alábbiak szerint módosíthatja:
loader.load (
„Modellek / luffys_hat.json”
funkció (geometria, anyagok) {// elkészítjük a Hat hálót
var mat = új THREE.MeshBasicMaterial ({térkép: új THREE.TextureLoader (). load (“models / Texture.jpg”)
});
const hatMesh = új THREE.Mesh (geometria, mat)
// A MÓDOSÍTÁSHOZ EZT A MÓDSZERET
// MÉRET, FORGÁS és HELYZET
hatMesh.scale.multiplyScalar (1.2);
hatMesh.rotation.set (0, -40, 0);
hatMesh.pozíciós beállítás (0,0, 0,6, 0,0);
}
)
Végül hozzáadhatjuk kalap-modellünket jelenetünkhöz:
THREEFACEOBJ3DPIVOTED.add (hatMesh)
És tadaa! Most a maga Luffy kalapját viselted! Mennyire hűvös ?? Noha ez a példa alapvető, most már felhasználhatja azt, amit megtanult, más típusú objektumok megjelenítésére.
Feladatok:
- Próbáljon meg egy újabb tárgyat hozzáadni a jelenethez: fülbevalók, szemüvegek (látogasson el a https://www.turbosquid.com/ webhelyre, ahol ingyenes 3D modelleket találhat)
- Játssz körül a pozícióval és a méretarányokkal, és ossza meg magát ostoba stílusban!
Összegezni
Gratulálunk az első szűrő létrehozásához a Jeeliz FaceFilter API-jával!
Ezen oktatóprogram segítségével láthattuk, hogyan lehet 3D modellt feldolgozni a Blender segítségével. Azt is megtanultak, hogyan lehet 3D modellt hozzáadni a Three.js jelenethez. Nagyon jó, mi? Ennek ellenére a szűrőnk nem 100% -ban reális: az árnyékok ki vannak kapcsolva, és amikor a felhasználó felemeli a fejét, a kalap lefedi az arcát. Ne aggódj! Fejleszteni fogjuk Luffy kalapszűrőjét egy közelgő bemutatóban.
A következő részben: létrehozunk egy kissé összetettebb szűrőt, amely magában foglalja a felhasználói interakciót és az animációt! Maradjon velünk!