spite / facemeshfacegeometry Goto Github PK
View Code? Open in Web Editor NEWFaceMeshFaceGeometry for FaceMesh
License: MIT License
facemeshfacegeometry's Issues
Scale 3D object according to the Z transpose
- Currently the only issue I'm facing is the static size of the model due to Orthographic camera which leads to undesired behavior
- When I move away or close to the camera the object size doesn't change which doesn't look nice
- Along with position, normal and rotation data I have calculated scale data also which it exposes through track return object
Update to mediapipe facemesh
As it looks the tfjs facemesh model is deprecated, do you know of any idea of how to use this with MediaPipe's facemesh instead?
https://google.github.io/mediapipe/solutions/face_mesh.html
Any guidance would be appreciated, thanks so much
Is there a way to safely pause/stop the video stream?
Great work on this repo btw. I wanted to know if there is any way to pause or stop the video input stream in the "mask" example? Do let me know if I can help to make it possible.
Geometry normals are flipped
Currently, to have materials display correctly, you need to set side as BackSide or DoubleSide. I don't think this is particularly intuitive. I reversed the array in geometry.js and it works fine now. Not sure if this is something you want fixed but I thought it was worth mentioning! Haven't tested with UVs yet.
Mobile phone compatibility
Does this works on mobile?
normalizeCoords: true doesn't seem to do anything
I'm trying to use just the mesh, but have it static, just moving the face expressions, ignoring the position and rotation, and I'm having no luck. This setting should at least prevent the mesh from growing and shrinking. Or am I going in the wrong direction. Do you have any tips on achieving the above? Many thanks for the THREE helper by the way.
License
Loving what you've done here! Just wondering what the license is for this project? I'd love to use some parts of the code in another non-commercial open source project I'm working on.
Demos not loading
Demos links like https://spite.github.io/FaceMeshFaceGeometry/examples/mask/index.html seem no longer work because the tfhub site hosting the model json seems to no longer be around https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1/model.json?tfjs-format=file seems
Unhandled Promise Rejection: TypeError: av.ready is not a function. (In 'av.ready()', 'av.ready' is undefined)
gum av not being recognized. Any idea how to fix this? this is how I've implemented:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - GLTF / FACE TEST </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-core.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-converter.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-backend-cpu.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-backend-wasm.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-backend-webgl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>
<style>
gum-av,
canvas {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
canvas {
margin: auto;
}
#container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
}
#status {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
color: white;
padding: 1em;
font-family: roboto, sans-serif;
z-index: 1;
}
gum-av {
font-family: roboto, sans-serif;
color: white;
opacity: 0;
transition: opacity 1s ease-out;
}
a {
color: blue;
}
.control-inactive button {
color: #888;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> GLTF / FACE TEST
(model from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">mixamo.com</a>)<br/>
</div>
<p id="status">Loading...</p>
<div id="container">
<gum-av></gum-av>
<canvas id="canvas"></canvas>
</div>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/",
"gum": "/third_party/gum-av.js"
}
}
</script>
</body>
</html>
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.