Uploaded December 2024 | Updated September 2026, 2 weeks ago

---

Building on BodyPose in ml5.js, this video explores the 3D capabilities of the BlazePose model, visualizing poses in a 3D space using WEBGL in p5.js. Code: thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/7-bodypose/blazePose

🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-3d-pose-estimation-with-ml5js

p5.js Web Editor Sketches:
🕹️ BlazePose 3D: editor.p5js.org/codingtrain/sketches/ftALPDieT
🕹️ BlazePose Lerp: editor.p5js.org/codingtrain/sketches/JMhDRpcxi_

🎥 Previous: youtu.be/T99fNXTUUaQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
🎥 Next: youtu.be/vfNHdVbE-l4?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
🎥 All: youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y

References:
💻 ml5.js: BodyPose: docs.ml5js.org/#/reference/bodypose
📄 On-device, Real-time Body Pose Tracking with MediaPipe BlazePose: https://research.google/blog/on-device-real-time-body-pose-tracking-with-mediapipe-blazepose/
📄 3D Pose Detection with MediaPipe BlazePose GHUM and TensorFlow.js: blog.tensorflow.org/2021/08/3d-pose-detection-with-mediapipe-blazepose-ghum-tfjs.html
📄 BlazePose GHUM Holistic:: arxiv.org/pdf/2206.11678

Videos:
🚂 youtu.be/T99fNXTUUaQ
🚂 youtu.be/76fiD5DvzeQ
🚂 youtu.be/o9sgjuh-CBM

Timestamps:
0:00 Introduction
2:00 Incorporating BlazePose model
2:37 What are the xyz values?
4:30 Replace live camera with recorded video.
5:49 Render with p5.js WEBGL
7:48 Use scale() to expand range of xyz values
9:00 Creating 3D scene
9:58 Rotating scene.
11:24 Using orbitControl()
12:22 Using 3D shapes
13:42 Goodbye!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: thecodingtrain.com
👾 Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train

🎥 youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org

📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new

#machinelearningml #webcam #posedetection #ml5js #movenet #blazepose #ml5js #javascript