GithubHelp home page GithubHelp logo

facemeshfacegeometry's Issues

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.

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.

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

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.

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 photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.