Tag Archives: three.js

a webcam toy

webcamExtruder
dd01
dd03
extruded PlaneGeometry. made with Three.js

color_imageLo ammetto, Three.js mi ha catturato.  In passato ho investigato nel ‘campo’ dell’estrusione con Processing ed è stato abbastanza semplice visto che tra le API figura un comodo metodo brightness(x,y); in  Three invece non c’è un metodo del genere, anche perchè leggere le componenti RGBA di un’immagine  non è il mestiere di un framework nato per fare 3D nel browser. Si tratta invece di usare un tag <canvas/>  – una regione 2D  disegnabile parametricamente … ma Three è scritto in JavaScript, quindi si possono usare insieme? Si possono, anzi di devono! Non è così immediato come con Processing e bisogna fare un pò di ricerca ma il risultato – in termini di performances – vale lo sbattimento, ed è solo l’inizio. Si prende una qualsiasi immagine, la si copia in un canvas, del canvas si ciclano le coordinate (x,y) per leggere (e memorizzare) il colore (RGBA) del singolo pixel, si converte il valore esadecimale in luminosità (range 0-255) e si usa questo valore per dare profondità ad un grid mesh modificando la componente z dei singoli vettori.

WebGL demo: pixel brightness extrusion

Fatto qualche test mi son detto: ma anche dalla webcam posso catturare un frame, copiarlo in un canvas, esaminarne la luminosità, eccetera-eccetera-eccetera…

WebGL demo: webcam extruder

Three.js

095707
G_dof_foggyScene

FilmFX | Nebbia + profondità di Campo ( DOF)
Mouse wheel per lo zoom, mouse click + drag per orbitare.

Seguiranno dettagli, intanto fatemi dire che anche se sto soltando grattandone la superficie, sono estremamente soddisfatto dei primi passi con Three.js e sono altrettanto entusiasta per la semplicità con la quale si possono ottenere effetti con risoluzione e framerates altissimi (il grosso della lavoro lo fa la GPU). Ora si tratta di aggiungere un pò di uteriore realismo con physijs o con cannon.

One of the great things about WebGL is that you don’t need to learn a whole new application platform to create 3D; the platform is the web browser.
— Tony Parisi

3dpathExtrusionSpline (the black thin line) extrusion.