Hi everyone,
After months of heavy R&D and development, I’m incredibly excited to share my new studio portfolio: Vertex3D.
I wanted to push the boundaries of spatial web design without requiring a VR headset. The entire 3D environment is powered by PlayCanvas, but the UI and DOM elements are fully integrated with Webflow.
The Tech Stack & Features:
-
PlayCanvas: Core WebGL engine, baked lighting, and custom shaders optimized performance across devices (Mac included).
-
MediaPipe AI: Live head and hand tracking through the webcam. You can literally navigate the 3D space and interact using hand gestures (no mouse required).
-
GSAP: Handling all the complex HTML/UI animations and scroll-trigger syncing with the 3D canvas.
-
Webflow: Acting as the frontend UI layer and CMS.
The Big News:
I just got notified that this build has been selected for the official GSAP Showcase in 2 weeks! A huge testament to how well PlayCanvas and GSAP play together.
You can try the experience here:
https://www.vertex3d.asia/
(Make sure to try it on desktop to activate the webcam tracking!)
Would love to hear your technical feedback, and I’m happy to answer any questions about how I bridged PlayCanvas with Webflow and MediaPipe!
Cheers,
Yann
7 Likes
This is a beautiful website. I really like the shaders used and the GSAP animations. I tried the Webcam too and it works really good!
Should submit it at Awwwards for recognition, this can easily win the Site of the day award.
Congrats!
2 Likes
Very nice work!
I just tried it out on a laptop. I knew this was possible already as an aspiring 3D designer, but I just had my mind blewn by the demo, especially the feature for navigating and moving in the 3D envoronment with the head and hand gesture tracking using the camera.
Good look going forward!
1 Like
Thank you Saad, Im working on my submission to Awwwards but the competition is very impressive, lets see!
1 Like
Thank you for your great feedback! yes the Mediapipe AI tracking is cool, feels like magic a bit, but very hard to set up with the rest as everything is trying to affect the frame movement (mouse parallax, head + fingers) I have to prioritize frames for each.
1 Like
Hey Saad!
Thanks for motivating me to submit my website to Awwwards, they just made it an official Nominee today!
Huge thank you to this community for the support. If anyone has an Awwwards account and wants to drop a vote to show the design world what PlayCanvas can do, here is the link: Vertex3D - Awwwards Nominee
1 Like
Congrats!
I have voted for you, it wouldn’t let me vote 10/10 for some reason 
but I have submitted the vote!
Good luck!
1 Like
