| I N I Z I O T O P I C |
| mrc |
Posted - 19/05/2013 : 11:56:18
Un saluto a tutti,
approfittando di una mezza giornata libera, ho fatto qualche esperimento con la libreria
http://threejs.org/
Si tratta di una libreria javascript che consente di semplificare la gestione della programmazione WebGL all'interno dei browser di ultima generazione (quelli compatibili con HTML5 e OpenGL). Ho fatto qualche prova con Firefox e Chrome e il tutto mi pare girare abbastanza liscio.
Ho scritto, abbastanza un fretta e furia, un mini-viewer per immersive panoramiche: al momento è soltanto una bozza grossolana, ma ve la sottopongo nel caso qualcuno sia interessato e voglia darmi un parere: se ritenete che perlomeno i presupposti ci siano, potrei continuare aggiungendo le (molte) features che ancora mancano... l'idea sarebbe quella di rilasciare il tutto con una licenza opensource.
A questo link trovate un demino improvvisato del viewer:
EDIT: vedi post più sotto
le texture del cubo sono a bassa risoluzione (1000 pixel di lato) per testare l'eventuale compatibilità della cosa con i dispositivi mobili HTML5, gli iCosi, gli Android, ecc. ... temo che da questo punto di vista il tutto sia ancora indietro, ma inizio perlomeno un collaudo sommario 
N.B. le facce del cubo sono state generate con un programmino in Java (compatibile multipiattaforma) che avrei intenziono di rilasciare anch'esso come opensource, datemi solo qualche giorno per rivedere meglio il codice...
Un saluto a tutti e grazie a chi vorrà rispondere
Marco |
| 30 U L T I M E R I S P O S T E (Le più recenti in alto) |
| mrc |
Posted - 31/10/2013 : 18:25:23
Citazione:
Postato da tonesh
Marco, ma la rotella del mouse arriva ad invertire (sottosopra) la pano. Bell'effetto...ma strano
Toni
Capperi! Questa è buona davvero! 
Domani ci guardo e vedo di sistemare
Ciao e grazie mille
Marco
|
| tonesh |
Posted - 31/10/2013 : 16:08:08
Marco, ma la rotella del mouse arriva ad invertire (sottosopra) la pano. Bell'effetto...ma strano
Toni
|
| mrc |
Posted - 29/10/2013 : 07:32:10
Come sempre, un sincero grazie ai tester per la disponibilità e la pazienza
Ho constatato che il bug era riproducibile anche con Firefox e Safari per Windows, ma non ci avevo fatto caso perché ho condotto dei test un po' sbrigativi sotto Chrome.
Ho apportato qualche correzione, e ora mi pare che il problema sia risolto: ho testato con
Chrome 30.0
Firefox 24.0
Internet Explorer 11.0
Safari 5.1.7
sotto Windows 8.1 64 bit.
Se avete qualche minuto, è ovviamente molto gradito il vostro riscontro
http://www.marcocarlotto.net/temp/pano3/index.html
Ciao e grazie
Marco |
| tonesh |
Posted - 28/10/2013 : 12:26:11
Confermo quanto detto da Daniele, anche nella versione 7 di Safari (con OS 10.9-maverick) e Firefox 24.0.
Ok su Chrome 30.0.1599.101
Toni
|
| danipen |
Posted - 28/10/2013 : 08:21:51
ciao
su chrome 30.0.1599.101 tutto perfetto
su firefox 24 e safari 6.0.5 invece non è possibile far girare la pano ne con il mouse che con le frecce
questo su OS X 10.7.5
ciao
daniele
www.fineartclub.it
www.danielepennati.com
www.miciap.com |
| mrc |
Posted - 28/10/2013 : 06:53:24
Un saluto,
approfittando del recente rilascio della versione r62 di three.js, ho rimesso mano al mio personale progettino "pano3"...
https://sourceforge.net/projects/pano3/
Ho aggiornato l'utility "pano3 cubic converter" alla versione 0.7 (SVN, sui binari eseguibili c'è ancora un bug), ora richiede per girare Java 7.
Ho riscritto quasi integralmente il codice del player delle immersive basandomi sugli esempi di three.js: dal momento che i browser dei dispositivi mobili hanno un comportamento abbastanza diverso da quello dei browser desktop (lo stesso codice javascript si comporta in modo differente), credo che per gli iCosi tenterò di inserire del codice apposito, più semplice e snello.
Per il momento ho riscritto il codice desktop, nei prossimi giorni, tempo permettendo, vedrò di provare ad aggiungere qualcosa per tablet e telefoni.
Chi di voi avesse 5 minuti, è cortesemente invitato a un piccolo test al link
http://www.marcocarlotto.net/temp/pano3/index.html
Ciao e grazie
Marco
|
| mrc |
Posted - 22/10/2013 : 18:31:10
Ultimamente non ho avuto molto tempo per seguire lo sviluppo di three.js, segnalo però che di recente è stata rilasciata la versione r62.
Chi fosse interessato può scaricarla dal sito:
http://threejs.org/
Un saluto
Marco |
| danipen |
Posted - 04/09/2013 : 09:49:16
piccolo report da mac 10.7.5:
chrome 29 e safari 6.05: webGl tutto ok - css3d ok ma si vede la giunzione tra le facce del cubo
firefox 22: webGl tutto ok - css3d sbarella completamente: non occupa tutto il viewframe ma solo il centro e le facce del cubo vengono caricate ruotate e ruotano su loro stesse mentre ti cerchi di far girare la pano
ciao
daniele
www.fineartclub.it
www.danielepennati.com
www.miciap.com |
| danipen |
Posted - 04/09/2013 : 08:19:43
ciao marco
ho testato co ipad e va tutto perfettamente sia con safari che con chrome!
ho solo alcune perlessità su come hai implementato lo spostamento in base al tocco.
adesso basta che tocchi e tisposti più o meno velocemente a second di quanto lontano dal centro hai toccato. poi una volta partita la rotazione questa procede a velocità costante.
è impossiile fermarsi xchè si movrebbe toccare il display esattamente nel centro.
sarebbe più comodo x l'utent s il tutto funzionase come il click trascina. dovresti controllare l'inizio del tap e la fine confrontando le coordinate per valutare enità e direzione del trascinamento. poi finito il tap sul display fermerei il movimento.
questi i miei due cents mentre aspetto di essere ricevuto dal dottore... scusate eventuali errori ma col cellulare questo forum è quasi inutilizzabile :-)
ciao
www.fineartclub.it
www.danielepennati.com
www.miciap.com |
| mrc |
Posted - 03/09/2013 : 08:32:28
Post veloce per segnalare che al link
http://www.marcocarlotto.net/temp/pano3/pano3-06/index.html
è disponibile la demo della nuova versione 0.6 di "pano3"
Secondo me le novità di questa release sono abbastanza sostanziali:
1) disponibile la modalità "debug" (attiva di default nella demo) che permette di selezionare il renderer WebGL o quello CSS3d, come consigliato anche da Daniele (grazie!)
Al momento la modalità debug è ancora sperimentale e dà qualche problema per esempio con Firefox
2) nell'url da caricare potete inserire come parametro il renderer da utilizzare per evitare il riconoscimento automatico
i parametri sono
rendermode=webgl
o
rendermode=css3d
ad es.
http://www.marcocarlotto.net/temp/pano3/pano3-06/index.html?rendermode=webgl
3) l'utility "pano3 Cubic Converter" è stata aggiornata anch'essa alla release 0.6 e ora genera le facce del cubo alle risoluzioni
- full (normale)
- half (metà della lato della full)
- quarter (1/4 del lato della full)
le varie dimensioni vengono caricate in base alla dimensione del viewport del dispositivo
4) si inizia a vedere qualcosa con i dispositivi mobili!
Fatto una prova veloce con Samsung Tab 2: con il browser di default ancora qualche problema, ma con Chrome per Android si vede piuttosto bene. Ancora da migliorare il codice dei controlli touch. Credo che i problemi derivino in parte anche dalla novità della tecnologia e dalla gioventù del supporto, con il tempo le cose dovrebbero sistemarsi...
5) Sul sito del progetto
http://sourceforge.net/projects/pano3/
disponibile l'utility "pano3 Cubic Converter" aggiornata alla release 0.6 sia come binari precompilati sia come sorgente sul /trunk SVN
Sarò via un settimana in ferie, nel frattempo chi avesse tempo è cortesemente invitato a testare! Grazie!
Ci sentiamo al mio ritorno
Ciao a tutti e grazie
Marco |
| mrc |
Posted - 25/08/2013 : 20:59:06
Citazione:
anche su mac safari non fa il fadeout
non mi è chiaro come lo stai gestendo... io avrei semplicemente fatto un controllo sul loading della pagina completa
$(window).load(function() {
//allora faccio il fadeOut del #loading_logo
});
ma probabilmente per come funziona tree.js il controllo sul .load() non funziona bene?
Ok, grazie come al solito.. in realtà mi sa che mi sono complicato la vita: ho fatto un check per verificare che gli .onload di tutte e 6 le texture vadano a buon fine, dopodiché faccio semplicemente
$('#loading_logo').fadeTo(3500, 0);
però a pensarci bene hai ragione, basta inserirlo in coda a .load()
La cosa strana è che con il <div> del WebGL renderer, il fadeout in Safari funzionava... secondo me potrebbe essere anche un baco di gioventù, il supporto ai CSS 3D è recente.
Ah, tra l'altro oggi ho fatto un update al volo per aggiungere il logo e ho cambiato i <div>: beh con Safari per Windows vedevo il fadeout... Boh! 
Citazione:
sarebbe comodo in questa fase di sviluppo se ci fosse un pulsante per passare da webgl a css3d in modo da vedere le differenze.
Sì, buona idea, vedo se riesco a inserire nella prossima release.
Ciao e grazie come sempre
Marco |
| danipen |
Posted - 25/08/2013 : 17:52:54
ciao marco
anche su mac safari non fa il fadeout
non mi è chiaro come lo stai gestendo... io avrei semplicemente fatto un controllo sul loading della pagina completa
$(window).load(function() {
//allora faccio il fadeOut del #loading_logo
});
ma probabilmente per come funziona tree.js il controllo sul .load() non funziona bene?
sarebbe comodo in questa fase di sviluppo se ci fosse un pulsante per passare da webgl a css3d in modo da vedere le differenze.
ciao
daniele
www.fineartclub.it
www.danielepennati.com
www.miciap.com |
| mrc |
Posted - 25/08/2013 : 11:11:17
Ciao,
al link
http://www.marcocarlotto.net/temp/pano3/pano3-05/index.html
trovate una nuova demo del viewer "pano3" con il supporto sia allo standard WebGL sia ai nuovi CSS 3D, tramite il CSS3DRenderer.js di three.js.
In due parole:
- con Firefox, Chrome funziona in entrambe le modalità senza grossi problemi (ancora qualche lievi difetto nel rendering dei CSS 3D)
- con IE 11 Developer Preview funziona bene perlomeno in modalità WebGL, con i CSS3D devo investigarci meglio...
- con Safari per Windows in modalità CSS 3D mi pare andare bene, salvo il fatto che il fade out della schermata di benvenuto non funziona... bah, problemi di compabilità del browser. 
Chiedo la cortesia solita: chi ha Safari per Mac può testare e farmi sapere cosa vede? Grazie!
Resta aperto il discorso dei dispostivi mobili: ha fatto una prova di un minuto con un Samsung Tab 2 e non si vede un tubo.
Può darsi che dipenda dal viewport, per ora il codice non è ottimizzato...
Come sempre, consigli, segnalazioni e critiche costruttive sono i benvenuti!
Ciao
Marco |
| mrc |
Posted - 24/08/2013 : 05:11:18
Scusate lo spam, ma con il supporto di un amico che si occupa di grafica vettoriale e che ho coinvolto suo malgrado, ora il progetto pano3 dispone di un suo loghino ufficioso: ringrazio perciò l'autore per l'idea e per il lavoro!
Nel frattempo ho aggiornato alla release 0.5 l'utility per la conversione delle sferiche in cubiche: ora su chiama "pano3 cubic converter" e adotta anch'essa il loghino come icona
Disponibili il file zip dei binari aggiornati nella sezione "download" e i commit della revisione più recente sul trunk SVN.
trovate tutto al link http://sourceforge.net/projects/pano3/
'notte a tutti
Marco |
| mrc |
Posted - 22/08/2013 : 10:24:25
Ok Daniele, danke!
Inizio a guardarmi per bene i riferimenti che mi hai dato, ci risentiamo quando ho le idee un po' più chiare
Ciao!
Marco |
| danipen |
Posted - 21/08/2013 : 19:47:51
Se nn ricordo male in questo screencast su html5 boilerplate (che include modernizr) c'è anche una spiegazione dei caricamenti condizionali etc.ora però nn posso controllare perché sono su un iCoso che nn supporta il video in flash.
http://hub.tutsplus.com/tutorials/the-official-guide-to-html5-boilerplate--net-13998
Ciao
www.fineartclub.it
www.danielepennati.com
www.miciap.com |
| danipen |
Posted - 21/08/2013 : 16:11:28
Citazione:
Postato da mrc
Questa � una genialata... riesci a darmi qualche ragguaglio in pi� su come si fa a gestire decentemente il riconoscimento del viewport dei dispositivi mobili? Di iPhone e simili ne so un ciufolo
Marco
i caricamenti condizionali nn li ho ancora mai usati. da lunedì inizio un restyling di un sito x il quale mi serviranno quindi potrò esserti più di aiuto.
cmq sul sito di modernizr ci sono i link ad un po' di tutoria tra cui uno screencast per tutsplus.com in cui spiega tutto.
se nn ricordo male devi usare la libreria yepnop.js e fare il test sulla funzione che ti intetessa.
x le dimensioni del viewport si fa nello stesso modo e puoi trsta qualunque dimensione nn solo quella dei devices modile. solitamente si usa se < di 321px per il cell verticale. tra 321 e 480 per l'orizzontare. 481-760 tablet verticale. 761-1024 tablet orizzontale e così via fino ai monitor hd e oltr. poi ci sono imonitor retina che complicano le cose x i quali devi testare anche la densità di px...
ora mi fermo. nel caso poi chiedimi cose specifiche e vediamo di venirne a capo insieme.
ciao
www.fineartclub.it
www.danielepennati.com
www.miciap.com |
| mrc |
Posted - 21/08/2013 : 14:25:20
Citazione:
Inoltre puoi fare anche caricamenti condizionali in base alla dimensione del viewport e quindi passare le immagini a diverse risoluzioni in base al device che si conette ed ottimizare così i tempi di caricamento e quindi l'esperienza utente.
Questa è una genialata... riesci a darmi qualche ragguaglio in più su come si fa a gestire decentemente il riconoscimento del viewport dei dispositivi mobili? Di iPhone e simili ne so un ciufolo
Marco |
| danipen |
Posted - 21/08/2013 : 11:48:46
Ciao marco
Di nulla. Modernizer è davero una bomba perchè oltre a controlare le funzioni del browser ti permette anche i caricamenti condizionali via js. Inoltre puoi fare anche caricamenti condizionali in base alla dimensione del viewport e quindi passare le immagini a diverse risoluzioni in base al device che si conette ed ottimizare così i tempi di caricamento e quindi l'esperienza utente.
Ciao dani
www.fineartclub.it
www.danielepennati.com
www.miciap.com |
| mrc |
Posted - 21/08/2013 : 11:31:24
Citazione:
Il controllo sul supporto webgl potresti farlo usando modernizer e poi caricare il renderer giusto in base alla classe che modernizer metterà nel tag html.
ciao Daniele,
mi stavo chiedendo quale arnese usare per riconoscere il supporto ai CSS 3D... ho dato un'occhiata alla documentazione di modernizer e mi pare sia una bomba; in effetti googlando un po' ho visto che molti siti che usano CSS 3D utilizzano proprio modernizer per il check delle funzionalità. Credo che mi indirizzerò direttamente su questo tool, grazie!
Marco |
| danipen |
Posted - 20/08/2013 : 20:07:14
Ciao marco mi sembra una grande news!
Il controllo sul supporto webgl potresti farlo usando modernizer e poi caricare il renderer giusto in base alla classe che modernizer metterà nel tag html.
Ciao
Daniele
www.fineartclub.it
www.danielepennati.com
www.miciap.com |
| tonesh |
Posted - 20/08/2013 : 11:00:17
Grazie Marco, molto interessante 
spero che possa facilitare anche il multi-res, (o non ancora)
toni |
| mrc |
Posted - 20/08/2013 : 09:13:18
Un saluto,
so bene che è agosto e che probabilmente siete in spiaggia, ma un piccolo post di segnalazione credo sia dovuto: three.js (https://github.com/mrdoob/three.js/), la libreria javascript a cui mi appoggio per lo sviluppo del viewer pano3, ha rilasciato la versione r60 che finalmente supporta, insieme al WebGL renderer, anche il CSS 3D renderer!
Questo nuovo renderer, basato sull'API HTML5 nativa delle trasformazioni 3D, permette di visualizzare canvas 3d con la correzione prospettica attesa anche su dispositivi privi di supporto OpenGL, come Internet Explorer 10 o i dispositivi mobili .
Si tratta soltanto di aggiornare la libreria alla release r60, aggiungere qualche riga di codice che effettui il check sul supporto offerto dal browser (WebGL, CSS 3D o entrambi) e caricare il renderer opportuno.
Per una demo veloce delle potenzialità di questo gingillo, potete visitare il link:
http://threejs.org/examples/#css3d_panorama
Credo che siamo davvero sulla buona strada per la diffusione di una tecnologia opensource standard nell'ambito della panografia...
Vi terrò aggiornati man mano che three.js si evolverà in questo senso.
Ciao a tutti
Marco
|
| andre_ |
Posted - 01/07/2013 : 21:49:10
Citazione:
Postato da mrc
@andre:
credo che il problema che rilevi con la pano sia stato discusso nei post sopra: è necessario abilitare in Safari il supporto WebGL...
Sorry, non mi ricordavo che avevo disattivato i WebGL per incompatibilitá con altri siti, e pensavo fossero ancora attivati.
Ricontrollato, e confermo che si vede senza problemi sia in Safari 5.1.9 su OSX 10.6.8, sia su Safari 6.0.5 ed OSX 10.8.4 (l'altro computer).
a_
www.justnuances.com |
| mrc |
Posted - 01/07/2013 : 19:30:50
Grazie a tutti per i feedback
@andre:
credo che il problema che rilevi con la pano sia stato discusso nei post sopra: è necessario abilitare in Safari il supporto WebGL... in particolare più sopra trovi un link in cui è descritto come fare.
Nel caso tu abbia già abilitato il supporto WebGL in Safari, puoi farmelo sapere, che ricontrollo? Grazie |
| andre_ |
Posted - 01/07/2013 : 18:08:45
Safari 5.1.9 su OSX 10.6.8, dissolvenza é ok.
Altrettanto non si puó dire della pano, che fa un angolo circa a metá sulle righe verticali (angolo che cambia muovendosi sinistra/destra).
Lo stesso difetto non c'é con Chrome 27 sullo stesso O.S.
a_
www.justnuances.com |
| danipen |
Posted - 01/07/2013 : 13:47:34
osx 10.7.5 e safari 6.0.5 si vede perfettamente!
grande!
www.fineartclub.it
www.danielepennati.com
www.miciap.com |
| tonesh |
Posted - 30/06/2013 : 19:27:44
su osx 10.8 e safari 6.0.5 si vede perfettamente.
Toni
|
| mrc |
Posted - 30/06/2013 : 17:13:38
Ciao ragazzi,
scusate se torno nuovamente alla carica, ma mi servirebbe un piccolo collaudo da parte degli utenti Safari su Mac: chi utilizza questo browser sotto Mac OS X può cortesemente dirmi se la dissolvenza in ingresso (per intendersi, quella della scritta "loading..."), ora che l'ho fixata, si vede correttamente?
http://www.marcocarlotto.net/viewer/pano3-04/index.html
Sotto Windows ho già effettuato i dovuti test con Firefox, Chrome e Safari per Windows e mi pare che jQuery (l'engine che gestisce la dissolvenza) ora si comporti come deve. Sto aspettando al varco l'imminente Internet Explorer 10 con supporto WebGL, inizierò a testarlo non appena Microsoft renderà disponibile questo browser anche per Windows 7.
Vi chiedo cortesemente un cenno di conferma, perché se ora la dissolvenza si comporta coerentemente, posso passare oltre e proseguire con il resto: da fare c'è ancora molto, pertanto vorrei evitare di soffermarmi troppo su questo aspetto in realtà tutto sommato marginale...
Nel frattempo, ho iniziato a ragionare su un eventuale viewer WebGL per panografie flat (le cosiddette "multi-tiles"), e credo che l'unico aspetto ostico sia, al momento, riuscire a tarare il loading delle immagini in modo da non caricare troppo la banda passante. A parte questo, WebGL dovrebbe avere già tutte le funzionalità necessarie, a cominciare da trilinear filtering e mipmapping.
Resto naturalmente a disposizione per ogni richiesta di chiarimento, proposta o critica
Un saluto a tutti e grazie a chi vorrà rispondere
Marco |
| mrc |
Posted - 16/06/2013 : 11:14:36
Ciao a tutti di nuovo,
scusate i post a raffica degli ultimi giorni, ma approfittando di un paio di giorni di ferie sto smanettando da vero nerd
Ci sono un paio di novità:
1) L'utility SphericalToCubicConverter è aggiornata alla release 0.4
- fixato un bug che causava una anomalia singolare nel rendering delle facce top/bottom
https://sourceforge.net/projects/pano3
Come sempre ho aggiornato anche i sorgenti su SVN.
2) Forse sono riuscito a fixare il fading in Safari... forse è sufficiente aggiungere type="text/javascript" all'interno della tag script: in Safari per Windows ora vedo il fading correttamente, purtroppo non posso testare le geometrie perchè Safari per Windows non supporta ancora WebGL
Cortesemente, chi ha Safari su Mac, quando ha tempo, può fare un piccolo test? Grazie mille!
Nel frattempo ho aggiunto al viewer un paio di funzionalità:
- in alto a sinistra, ora per collaudo compare la finestrella dei frame al secondo
- ho riscritto il codice dei controlli di camera in modo che ora i limiti min/max della rotazione verticale e dello zoom si possano settare via javascript con una semplice assegnazione di property (i valori di default sono preimpostati): nel demo che vi linko sotto, ora finalmente il buco nero nel pavimento non dovrebbe essere più visibile
http://www.marcocarlotto.net/viewer/pano3-04/index.html
@danipen: Daniele grazie della disponibilità!! Ne approfitto molto volentieri!! Puoi dare un'occhiata all'ultima versione che ho uploadato e farmi sapere se così, secondo te, può andare? In caso contrario... ti passo i sorgenti ovviamente non voglio rubare tempo al tuo lavoro vero, ma, quando avessi un attimo libero, se ti sembra che il codice non vada, possiamo sentirci? Grazie!
Un saluto al forum
Marco |
