Descrição
In this video, I explore the FaceMesh model using ml5.js. I demonstrate how to track all 468 face landmark positions as well as texture map an image onto the triangular mesh with uv coordinates. Code: https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/facemesh
🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-facemesh-with-ml5js
p5.js Web Editor Sketches:
🕹️ FaceMesh - Keypoints: https://editor.p5js.org/codingtrain/sketches/KHm9CI2RJ
🕹️ FaceMesh - Part: https://editor.p5js.org/codingtrain/sketches/HaGkT63qG
🕹️ FaceMesh - Custom List (Lips): https://editor.p5js.org/codingtrain/sketches/CYL9bQtvc
🕹️ FaceMesh - Centered Face: https://editor.p5js.org/codingtrain/sketches/DGEuFKf87
🕹️ FaceMesh - Triangles: https://editor.p5js.org/codingtrain/sketches/EjIrb89WY
🕹️ FaceMesh - Texture Map: https://editor.p5js.org/codingtrain/sketches/zUKp9n4MW
🕹️ FaceMesh - 3D: https://editor.p5js.org/codingtrain/sketches/zUKp9n4MW
🕹️ FaceMesh - Blow Bubbles: https://editor.p5js.org/codingtrain/sketches/Mf74RjP92
🕹️ FaceMesh - Stretch and Skew: https://editor.p5js.org/codingtrain/sketches/tS6bxPzmE
🎥 Previous: https://youtu.be/vfNHdVbE-l4?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
🎥 Next: https://youtu.be/2h8VArJ3gnQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
References:
💻 ml5.js: https://ml5js.org/
🎹 Mouth Controlled Synteszier: https://jackbdu.com/blog/mouth-controlled-synthesizer/
📄 Face and hand tracking in the browser with MediaPipe and TensorFlow.js: https://blog.tensorflow.org/2020/03/face-and-hand-tracking-in-browser-with-mediapipe-and-tensorflowjs.html
📄 Real-time Facial Surface Geometry from Monocular Video on Mobile GPUs: https://arxiv.org/pdf/1907.06724
📄 Face Mesh Model Card: https://drive.google.com/file/d/1VFC_wIpw4O7xBOiTgUldl79d9LA-LsnA/view
▵ Face Mesh UV Keypoints Map: https://developers.google.com/static/ml-kit/vision/face-mesh-detection/images/uv_unwrap_full.png
📄 Destructuring Assignment: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
☁️ Clouds From Plane Window: https://en.wikipedia.org/wiki/File:Cloud_From_Plane_Window.jpg
Videos:
🎥 https://youtu.be/FlBRSIz5AcQ
🚂 https://youtu.be/nMUMZ5YRxHI
Related Coding Challenges:
🚂 https://youtu.be/Bxdt6T_1qgc
🚂 https://youtu.be/JunJzIe0hEo
Timestamps:
0:00 Introduction
1:15 Technical background for the model
2:30 Related projects and inspiration.
3:01 Adapting handpose example to facemesh.
5:29 Keypoints and parts of the facemesh.
11:28 Face bounding box.
13:36 What is a mesh? Rendering the triangles
21:19 Texturing mapping with UV coordinates
30:48 FaceMesh in 3D
31:10 Goodbye!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: https://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/
🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org
📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new
#machinelearningml #facemesh #ml5js #texture #uvcoordinates #ml5js #javascript
