WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh. It creates a ‘fake’ 3D depth map by mapping pixel brightness to mesh vertex Z positions. Perlin noise is used to create the ripple effect by modifying the Z positions based on a 2D noise field. CSS3 filters are used to add contrast and saturation effects.
Running the Demo
Use mouse move to tilt and scroll wheel to zoom. The 3D effect works better if the foreground elements are brighter than the background, so try it in a dark room. Run the demo.
The demo requires a WebGL capable machine and WebCam support. Currently that means Chrome and Opera. On my MacBook Pro I get about 30 FPS with Chrome. If the demo craps out, try resizing your browser down and reloading the page.
[UPDATE] – I added Opera support to the demo. Note that Opera does not support CSS filters so you won’t get the contrast and saturation effects. You may also need to enable WebGL for Opera.
Built With:
To Do:
- Add Audio reactivity to the mesh from MP3 Web audio API
- Add Snap shot button. Problem is there is no way to save out the pixels with the CSS filters applied, so I need to re-do the filters with shaders.
- Add grid resolution slider
Generated Images
Latest Tweets
WebCamMesh Demo: WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh. It creates a ‘fake’… http://t.co/xEgSGxbI
TouchéComm WebCamMesh Demo: WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh. It creat… http://t.co/Vp0hJj1D
#WebCamMesh Demo — Airtight Interactive http://t.co/kYziUps4 via @pryourblog
WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh – http://t.co/JxBjFn6p via @felixturner
Badass. http://t.co/Dr8eBvep (I’ve been a fan of @felixturner’s work for a long time)
[…] brightness. Then applies a perlin noise to the depth and gives you the controls! Embedded Link WebCamMesh Demo — Airtight Interactive WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh. It creates a […]
hi felix, he’s something a rework I did in january to a three.js voxel demo http://eresearch.uws.edu.au/rtc/voxel/voxel.html
cheers, andrew (eResearch / UWS)
Cool!
@EmmaTompkins @AissaDean take some acid and play with this http://t.co/r4tYeXnj or just play with it straight, have a cup of tea i dont care
ほほー。Now Browsing: WebCamMesh Demo — Airtight Interactive – http://t.co/3bi0oraK
[…] what you look like in the matrix with your WebGL enabled webcam and Google Chrome. WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh. It creates a ‘fake’ 3D depth […]
Looks like something out of Max Headroom O_o
Mit profilbillede er forresten lavet med denne her html5 ting: http://t.co/k6o6RkCV
Felix, thanks a lot for your great project!
I have a question: can you “snap” not the 2D image, but 3D “model” at any given point of time? I guess each vertex of the mesh has x,y,z coordinates, normal and probably even color info from the nearest pixels. So is it possible to generate a 3D model (mesh) from the information the engine gets from the video stream?
Of course, I understand how limited the depth information is if based on pixel relative brightness, but sometimes displacement maps are useful.
Yes it would be possible to save/output the 3D mesh data to some other format. I haven’t tried it but you are welcome to try 🙂
Is there any way to save a pic?
Only via screen grab. When using canvas.toDataURL(), the CSS filter effects are not applied so I need to recode those as shaders to allow a ‘snapshot’ button.
明るさを頂点のZ位置に反映。
http://t.co/U0pMYfiZ http://t.co/UxLpSSqF
[WebGL]カメラ画像を元に3Dモデルを作成するデモ「WebCamMesh Demo 」こちらで試せますｗ今のところ Chrome と Opera のみ対応みたいです。http://t.co/7xbj7m0M
明暗で立体化してるみたい。。暗い部屋で試すと良い感ですｗ
WebCamMesh Demo — Airtight Interactive http://t.co/ahszY2R7 via @sharethis
[…] to experiment with the old projection cube from the “Betahero Project“. I used an HTML5 demo made by Felix Turner wich projects webcam video onto a WebGL 3D Mesh. By hanging the webcam above the cube you get a […]
> @fakeup @olli101: Airtight Interactive’s HTML5 Mesh Webcam Demo is fantastic – http://t.co/nVzvXHdN & Background: http://t.co/pNiIql89
I love it. Fun and enjoyable.
Le potentiel du #HTML5, #CSS3 et #WebGL, “WebCamMesh Demo” développé par @felixturner éblouit votre webcam. http://t.co/laqspjkd
lovely chrome experiment http://t.co/lMn5gZ62 http://t.co/8kGgOHqN
[…] : WebCamMesh – A propos de la démonstration TweetA lire aussi […]
[…] “WebCamMesh est une démo HTML5 qui projette la vidéo d’une webcam sur un maillage 3D WebGL. Il crée uen “fausse” carte de profondeur 3D en mappant la luminosité des pixels de mailler vertex positions Z. Bruit de Perlin est utilisé pour créer un effet d’entraînement en modifiant les positions Z basé sur un champ de bruit 2D. Des filtres CSS3 sont utilisés pour ajouter des effets de contraste et de saturation.” traduction approximative de la source. […]
Played around with @felixturner’s webcam mesh demo. Pretty cool. Looking fwd to the snapshot button. #HTML5 #JS #CSS3 http://t.co/EAdwpE3a
Very cool HTML5 demo that projects webcam video onto a WebGL 3D Mesh. The ‘fake’ 3D depth map creates brilliant results http://t.co/9krw4YKG
@SNCKPCK http://t.co/6JNxSYoL internet even lets u b 3D! its like a cool dad-‘no rules,b safe,have fun'(if u wanna try http://t.co/cFBIveMC)
Been too busy to post, but here’s a great HTML5 webcam demo I found – http://t.co/TnsOoGgp
WebCamMesh Demo: http://t.co/N4kbdkYp #HTML5 #WebGL #3D
Ce truc est fou RT @photograve: WebCamMesh Demo: http://t.co/WHrmkE0g #HTML5 #WebGL #3D
[…] image is a screen capture of a webcam video experiment by Felix Turner that connects an HTML5 WebCam input to a WebGL 3D Mesh. It creates a 3D depth map by mapping pixel […]
Absolutely incredible, Felix! It’s amazing that browsers are capable of such sophisticated real-time graphic generation these days via WebGL &c., though it surely cannot hurt to have a developer who knows how to leverage these technologies so dramatically. If I were a VJ, I’d pounce on this immediately!
Superb work, sir.
[…] another ‘Chrome experiment’ on 3D camera WebCamMesh Demo […]
[…] WebCamMesh Demo (via Waxy) […]
[…] WebCamMesh is an HTML5-based browser app that does some mind- and space-bending things to your webcam. Developed by Los Angeles-based Felix Turner, the demo maps webcam video onto a WebGL 3D Mesh, creating a “fake” 3D depth field that you can undulate and modify with onscreen controls. […]
[…] [via AirTightInteractive] […]
[…] WebCamMesh is an HTML5-based browser app that does some mind- and space-bending things to your webcam. Developed by Los Angeles-based Felix Turner, the demo maps webcam video onto a WebGL 3D Mesh, creating a “fake” 3D depth field that you can undulate and modify with onscreen controls. […]
Is there anyway i can hook this up to aftereffects or something so i make visuals like this to camera feeds? and record in HD?
[…] WebCamMesh este o aplicate bazata pe HTML5 care transforma video-urile capturate cu ajutorul webcam-ului in wireframe-uri 3D pe care le poti indoi si modifica cu controalele de pe ecran. Odata permis accesul aplicatie la webcam puteti ajusta diferiti parametri cum ar fi adancimea de saturatie sau contrastul, direct din browser. […]
[…] WebCamMesh je moguće isprobati na linku, a više tehničkih informacija za ovaj Chrome Experiment je moguće pronaći ovdje. […]
[…] WebCamMesh is an HTML5-based browser app that does some mind- and space-bending things to your webcam. Developed by Los Angeles-based Felix Turner, the demo maps webcam video onto a WebGL 3D Mesh, creating a “fake” 3D depth field that you can undulate and modify with onscreen controls. […]
Can you make it so that we can feed a youtube video to it or something similar? I don’t have a webcam 🙁 but there’s a ton of video of people sitting in front of their computer talking to a camera on youtube :p
thanks
incredible!
blogged it http://my.opera.com/chaitanyak/blog/2013/02/13/webcam-mesh
keep up the awesome work
[…] According to @felixturner it creates a 3d depth map by mapping pixel brightness to Z-Depth. read more about it here […]
[…] Το WebCamMesh είναι μια HTML5 εφαρμογή γραμμένη από τον Felix Turner η οποία δημιουργεί ένα ψεύτικο 3D βάθος πεδίου που μπορείτε να τροποποιήσετε με στοιχεία ελέγχου στην οθόνη. […]
[…] Το WebCamMesh είναι μια HTML5 εφαρμογή γραμμένη από τον Felix Turner η οποία δημιουργεί ένα ψεύτικο 3D βάθος πεδίου που μπορείτε να τροποποιήσετε με στοιχεία ελέγχου στην οθόνη. […]
hey,
i made build two similar installation projects a while ago:
http://megatemporary.jakobwierzba.de/black-box/
http://megatemporary.jakobwierzba.de/luma-relief/ (in red-cyan 3D)
thanks for making them somewhat obsolete & look terribly dated 🙂
cheers!
Very cool. I like the camera/ mirror / monitor setup you have. very interesting….
[…] WebCamMesh Demo — Airtight Interactive. […]
[…] WebcamMesh is a really fun and interesting experiment by @FelixTurner. He’s hacked together a great demonstration of how HTML 5 can be used to trigger your webcam to creat a WebGL 3D Mesh within your browser (Chrome or Opera). The result is very matrix-esque providing a realtime graphical representation of your face by mapping pixel brightness to Z-Depth. You can manipulate the image by zooming or rotating with your mouse. […]
[…] some day generating a mesh will be as easy as taking a photo. WebCamMesh is an HTML5 application that uses your webcam to make a WebGL 3D mesh. [I tried to run the demo in […]
[…] via WebCamMesh Demo — Airtight Interactive. […]
[…] via WebCamMesh Demo — Airtight Interactive. […]
[…] According to @felixturner it creates a 3d depth map by mapping pixel brightness to Z-Depth. read more about it here […]
[…] WebCamMesh […]
That’s cool! Thank you for sharing.
I’m tring to making a pixelized version of your demo.
But I found the video showed at screen is horizontally fliped, not like a mirror.
Is there any way to solve this?