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:

  1. 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
  2. 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:

  1. 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)
  2. 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!