search

jeeliz / jeelizFaceFilter

Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).
https://jeeliz.com
Apache License 2.0
2.68k stars 533 forks source link

Use GLTF/GLB instead of JSON object scene in format 4 in demos/threejs/glassesVTO/JeelizThreeGlassesCreator #310

Open resun-c opened 1 week ago

resun-c commented 1 week ago

I was wondering if it is possible to use GLTF/GLB with JeelizThreeGlassesCreator instead of using JSON object scene in format 4 as they don't have much support accorse tools like Blender.

Thanks!

hharshas commented 1 week ago

I may find this interesting and wanna try out to do changes cause glb and gltf are easier to load with threejs using the GLTFLoader and hooks like useLoader, making the process seamless.

xavierjs commented 1 week ago

Hi @resun-c @hharshas Sure, it would be a good idea. You are welcome to submit a PR for this.

resun-c commented 1 week ago

I don't have much experience with Three.js. So, I would request your assistance.

Thanks!

xavierjs commented 1 week ago

You can find all the documents, tutorials, and examples online, especially at http://webglacademy.com (I created this interactive tutorial platform for my teaching of 3D programming ).

resun-c commented 1 week ago

It shows "Page Not Found bro".

xavierjs commented 1 week ago

Oops sorry I fixed the link in my previous post (I put HTTPS:// instead of HTTP:// )

resun-c commented 1 week ago

the link is still incorrect; you have only changed the text.

resun-c commented 1 week ago

Can somebody help me with these files:

  1. /demos/threejs/glassesVTO/models3D/face.json
  2. /demos/threejs/glassesVTO/models3D/glassesFrames.json
  3. /demos/threejs/glassesVTO/models3D/glassesFramesBranchesBent.json
  4. /demos/threejs/glassesVTO/models3D/glassesLenses.json

What are they (I am expecting a through explanation)? Specifically, the /demos/threejs/glassesVTO/models3D/face.json file. What purpose does it serve?

resun-c commented 4 days ago

I tried to tweak it a bit and I was able to use a gltf file as the source of the glass. But there's an issue! The glass doesn't properly fit on the face and the glass is moving on the opposite direction when the head move around.

Here's a demo version: https://arfilter-7a618.web.app

All the demo under /demo has multiple JSON files for lense, branch and frame and they are using the JSON data to feed THREE.BufferGeometryLoader() and creating a mesh along with some textures. Then those meshes are put into a Object3D which is then added to the face. Seemingly, those meshes perfectly fit the face. However, the glass I am using is a single mesh. Is it the main issue?

Thanks!