WebCamMesh Demo

See my Experiment on ChromeExperiments.com
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

57 Responses

  1. WebCamMesh Demo: WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh. It creates a ‘fake’… http://t.co/xEgSGxbI

  2. TouchéComm WebCamMesh Demo: WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh. It creat… http://t.co/Vp0hJj1D

  3. @buzzgames says:

    #WebCamMesh Demo — Airtight Interactive http://t.co/kYziUps4 via @pryourblog

  4. WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh – http://t.co/JxBjFn6p via @felixturner

  5. @richziade says:

    Badass. http://t.co/Dr8eBvep (I’ve been a fan of @felixturner’s work for a long time)

  6. […] 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 […]

  7. Andrew Leahy says:

    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)

  8. @adamix says:

    @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

  9. @dism_pd says:

    ほほー。Now Browsing: WebCamMesh Demo — Airtight Interactive – http://t.co/3bi0oraK

  10. […] 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 […]

  11. Micah says:

    Looks like something out of Max Headroom O_o

  12. @jeger24syv says:

    Mit profilbillede er forresten lavet med denne her html5 ting: http://t.co/k6o6RkCV

  13. Paul says:

    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.

  14. john gorski says:

    Is there any way to save a pic?

  15. @riedyna says:

    [WebGL]カメラ画像を元に3Dモデルを作成するデモ「WebCamMesh Demo 」こちらで試せますw今のところ Chrome と Opera のみ対応みたいです。http://t.co/7xbj7m0M
    明暗で立体化してるみたい。。暗い部屋で試すと良い感ですw

  16. @Konradius_I says:

    WebCamMesh Demo — Airtight Interactive http://t.co/ahszY2R7 via @sharethis

  17. […] 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 […]

  18. @jayemsee says:

    > @fakeup @olli101: Airtight Interactive’s HTML5 Mesh Webcam Demo is fantastic – http://t.co/nVzvXHdN & Background: http://t.co/pNiIql89

  19. bonalim says:

    I love it. Fun and enjoyable.

  20. @gguinchard says:

    Le potentiel du #HTML5, #CSS3 et #WebGL, “WebCamMesh Demo” développé par @felixturner éblouit votre webcam. http://t.co/laqspjkd

  21. […] : WebCamMesh – A propos de la démonstration TweetA lire aussi […]

  22. […] “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. […]

  23. @mauriolg says:

    Played around with @felixturner’s webcam mesh demo. Pretty cool. Looking fwd to the snapshot button. #HTML5 #JS #CSS3 http://t.co/EAdwpE3a

  24. 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

  25. @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)

  26. @buddharage says:

    Been too busy to post, but here’s a great HTML5 webcam demo I found – http://t.co/TnsOoGgp

  27. @photograve says:

    WebCamMesh Demo: http://t.co/N4kbdkYp #HTML5 #WebGL #3D

  28. Ce truc est fou RT @photograve: WebCamMesh Demo: http://t.co/WHrmkE0g #HTML5 #WebGL #3D

  29. […] 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 […]

  30. James Keepnews says:

    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.

  31. […] another ‘Chrome experiment’ on 3D camera WebCamMesh Demo […]

  32. […] 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. […]

  33. […] 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. […]

  34. Rick says:

    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?

  35. […] 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. […]

  36. […] WebCamMesh je moguće isprobati na linku, a više tehničkih informacija za ovaj Chrome Experiment je moguće pronaći ovdje. […]

  37. […] 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. […]

  38. pete275 says:

    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

  39. […] According to @felixturner it creates a 3d depth map by mapping pixel brightness to Z-Depth. read more about it here […]

  40. […] Το WebCamMesh είναι μια HTML5 εφαρμογή γραμμένη από τον Felix Turner η οποία δημιουργεί ένα ψεύτικο 3D βάθος πεδίου που μπορείτε να τροποποιήσετε με στοιχεία ελέγχου στην οθόνη. […]

  41. […] Το WebCamMesh είναι μια HTML5 εφαρμογή γραμμένη από τον Felix Turner η οποία δημιουργεί ένα ψεύτικο 3D βάθος πεδίου που μπορείτε να τροποποιήσετε με στοιχεία ελέγχου στην οθόνη. […]

  42. Jakob says:

    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!

  43. […] WebCamMesh Demo — Airtight Interactive. […]

  44. […] 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.   […]

  45. […] 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 […]

  46. […] via WebCamMesh Demo — Airtight Interactive. […]

  47. […] via WebCamMesh Demo — Airtight Interactive. […]

  48. […] According to @felixturner it creates a 3d depth map by mapping pixel brightness to Z-Depth. read more about it here […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>