Share
Continuando dalla parte 1 dove siamo riusciti a fare i conti con Papervision3D, la parte 2 porta la nostra scena un po 'oltre. In questa parte conclusiva imparerai come far saltare i cubi rotanti allo spettatore con gli occhiali 3D.
So che dice che questo tutorial riguarda Papervision3D in Flash, ma in realtà si tratta di ingannare il tuo cervello. Faremo in modo che il tuo cervello pensi che stia guardando un vero oggetto 3D, quando in realtà sta solo vedendo un'immagine 2D.
Se hai familiarità con Papervision3D, sarai in grado di seguirlo usando qualsiasi progetto che abbia una scena, una fotocamera e una finestra. Altrimenti, guarda prima la Parte 1 di questo tutorial, perché continuerò da dove avevamo lasciato. Ecco il tipo di cosa a cui lavoreremo:
Punta il dito in aria e sollevalo davanti al tuo naso.
Guardalo con l'occhio destro aperto, quindi con la tua sinistra. Guarda come sembra saltare da sinistra a destra, mentre qualsiasi cosa in fondo sembra quasi muoversi?
Il tuo cervello nota queste differenze tra ciò che ciascuno dei tuoi occhi vede e li usa per generare una simulazione 3D completa del mondo intorno a te. Nella tua testa. Immediatamente. Molto impressionante!
Se stiamo per ingannare il tuo cervello, avremo bisogno di far vedere a ciascuno dei tuoi occhi un'immagine diversa. Quindi, per iniziare, aggiungiamo un altro "occhio" (un'altra fotocamera) alla scena. Questo verrà utilizzato per creare l'immagine per l'occhio destro, mentre l'immagine della telecamera esistente verrà alimentata all'occhio sinistro.
Crea una nuova variabile pubblica chiamata camera2...
public var camera2: Camera3D;
... e inizializzalo nella funzione di costruzione Main ():
camera = new Camera3D ();
Avremo bisogno di un'altra vista per prendere l'output della fotocamera, quindi aggiungi quanto segue:
public var viewport2: Viewport3D;
viewport2 = new Viewport3D (); viewport2.autoScaleToStage = true; // questo renderà il viewport grande quanto lo stage addChild (viewport2);
(Sto correndo da questo, visto che l'abbiamo coperto l'ultima volta.)
Ricorda, viewport2 rimarrà vuoto fino a quando non ci renderemo qualcosa. Non è necessario creare un nuovo renderer per questo; basta usare quello esistente due volte. Quindi, in Main (), prendi questo codice:
renderer = new BasicRenderEngine (); renderer.renderScene (scene, camera, viewport);
... e aggiungi una nuova linea per rendere la seconda videocamera alla seconda vista, in questo modo:
renderer = new BasicRenderEngine (); renderer.renderScene (scene, camera, viewport); renderer.renderScene (scene, camera2, viewport2);
Fai lo stesso anche nella tua funzione onEnterFrame ():
renderer.renderScene (scene, camera, viewport); renderer.renderScene (scene, camera2, viewport2);
Se lo verifichi ora, beh, sembrerà lo stesso di prima:
Ma non c'è da sorprendersi: per prima cosa, le due telecamere sono esattamente nello stesso posto!
Per impostazione predefinita, le telecamere sono posizionate su (x = 0, y = 0, z = -1000) - puoi controllare facendo traccia (camera.x, camera.y, camera.z).
Così visto dall'alto, la scena si presenta così:
Visto di lato, è come questo:
Per imitare correttamente i nostri occhi, dovremmo posizionare la nostra seconda fotocamera un po 'a destra del nostro primo:
Proviamo a spostarlo di 50 pixel a destra e vediamo cosa succede. Metti questo in Main (), da qualche parte dopo aver creato la seconda fotocamera:
camera2.x = camera.x + 50;
Ora provalo e guarda cosa ottieni:
Sembra strano, ma funziona chiaramente! L'area intorno ai cubi è trasparente in ogni finestra, quindi il primo può essere visto dietro il secondo.
Sarà utile essere in grado di guardare a ciò che ogni telecamera sta vedendo individualmente, quindi diamo un'occhiata all'analogia ulteriormente facendoli "occhiolino" quando facciamo clic. Innanzitutto, aggiungi un listener di eventi a ogni viewport per rilevare i clic del mouse:
viewport.addEventListener (MouseEvent.CLICK, onClickViewport); viewport2.addEventListener (MouseEvent.CLICK, onClickViewport2);
Mettilo alla fine della funzione Main (). Non dimenticare di importare MouseEvent:
import flash.events.MouseEvent;
Aggiungi queste nuove funzioni al tuo codice, al di fuori della funzione Main () ma all'interno della classe Main:
funzione pubblica onClickViewport (mouseEvt: MouseEvent): void funzione pubblica onClickViewport2 (mouseEvt: MouseEvent): void
Quando clicchiamo sulla prima vista, abbiamo bisogno che diventi invisibile mentre la seconda diventa visibile (e viceversa per quando clicchiamo sulla seconda). Quindi modifica i gestori di eventi in questo modo:
funzione pubblica onClickViewport (mouseEvt: MouseEvent): void viewport.visible = false; viewport2.visible = true; public function onClickViewport2 (mouseEvt: MouseEvent): void viewport.visible = true; viewport2.visible = false;
Provalo:
Si noti che è necessario fare clic su uno dei cubi; le aree trasparenti non sparano da CLICK MouseEvent.
Avrai bisogno di un paio di occhiali 3D "anaglifi"; il tipo in cui ogni obiettivo è di un colore diverso. La coppia che sto usando ha una lente gialla nell'occhio sinistro e una lente blu nell'occhio destro (chiamato il sistema ColorCode3D), ma anche altre combinazioni di colori sono popolari, come rosso e ciano.
Puoi trovare questi occhiali su eBay per pochi dollari: basta cercare Occhiali 3D
In alternativa, potresti persino crearne uno tuo! André ha pubblicato un commento sulla prima parte di questo tutorial spiegando che usa le scatole Tic-Tac di diversi colori per creare il suo. Genio!
Anche se i miei esempi saranno fatti per occhiali gialli e blu, cercherò di spiegare i principi in modo che tu possa far funzionare i tuoi con qualsiasi colore tu abbia. È un po 'complicato, quindi per favore pubblica un commento qui sotto se questo ti confonde!
Ogni pixel sul tuo computer è come un gruppo di tre lampadine: una rossa, una verde e una blu.
Regolando la luminosità di ciascuna "lampadina" possiamo alterare il colore di quel pixel:
Le lenti con gli occhiali 3D fermano la luce da parte di alcune di queste lampadine. Ad esempio, la lente blu nei miei occhiali blocca la luce rossa e verde che raggiunge i miei occhi.
Quindi se guardo questa immagine attraverso la mia lente blu, non sarò in grado di leggerla:
Nessuna luce raggiunge i miei occhi dall'area nera perché tutte e tre le lampadine sono spente. E nessuna luce raggiunge l'occhio dall'area verde, perché solo la lampadina verde è accesa, e la lente blu la filtra. Quindi tutto quello che vedo è un rettangolo nero.
Ora, OK, se ci provi da solo potresti scoprire che questo non è completamente vero. Probabilmente il tuo obiettivo non è blu al 100%, quindi lascerà passare una piccola luce verde e rossa. O forse i colori del tuo monitor sono calibrati in modo diverso dal mio, quindi il testo verde contiene una piccola quantità di rosso e blu. Ad essere onesti, lo stesso è vero per me - ma non importa, purché il testo sia difficile leggere.
Il nostro obiettivo è quello di rendere difficile l'occhio destro per vedere l'immagine dalla fotocamera sinistra, e allo stesso modo per l'occhio sinistro e la fotocamera giusta.
La lente blu è sopra il mio occhio destro, quindi in teoria se rimuovo tutto il blu dall'immagine della telecamera sinistra, non sarò in grado di vederlo con il mio occhio destro.
In questo passaggio, quindi, facciamo in modo che l'immagine della vista sinistra sia emessa solo in luce rossa e verde; nessuna luce blu. Possiamo farlo usando a ColorTransform. Questi sono facili da configurare; per prima cosa, importa la classe:
import flash.geom.ColorTransform;
Quindi, crea una nuova variabile pubblica per contenere un'istanza della classe:
public var leftViewportColorTransform: ColorTransform;
Ora creiamo questa nuova istanza all'interno di Main ():
leftViewportColorTransform = new ColorTransform ();
Infine, dì a Flash di applicare questo ColorTransform alla vista della telecamera di sinistra:
viewport.transform.colorTransform = leftViewportColorTransform;
(L'ultima riga deve essere dopo aver creato il viewport e la trasformazione del colore. Probabilmente è più semplice metterlo a destra alla fine di Main ()).
Il file SWF non apparirà ancora diverso, poiché ColorTransform non modifica l'immagine per impostazione predefinita.
Possiamo scegliere quale frazione della luce di ogni lampadina vogliamo lasciar passare cambiando il blueMultiplier, greenMultiplier e redMultiplier proprietà del nostro ColorTransform.
Impostare uno di questi a 1 dice a Flash di lasciarlo in pace, mentre lo imposta su 0 dice a Flash di spegnerlo completamente. E, naturalmente, 0.5 farà uscire la metà della quantità normale, 2.0 lo farà raddoppiare, e così via.
Quindi per drenare tutto il blu dal viewport di sinistra, possiamo fare questo:
leftViewportColorTransform.blueMultiplier = 0;
Devi metterlo prima della linea che applica la trasformazione al viewport, in questo modo:
leftViewportColorTransform.blueMultiplier = 0; viewport.transform.colorTransform = leftViewportColorTransform;
Se i tuoi occhiali hanno una lente rossa o verde sopra l'occhio destro, allora dovresti impostare il redMultiplier o greenMultiplier a 0, piuttosto che il blu. Per tutti gli altri colori, dovrai utilizzare una combinazione di rosso, verde e blu - più su questo al punto 15.
Prova il SWF:
È difficile distinguere la "a" del logo attraverso la lente blu, ma non è affatto difficile distinguere la forma dei cubi da quella base bianca!
Se cambi lo sfondo del tuo SWF, vedrai il problema. Poiché l'area "bianca" attorno ai cubi non è effettivamente bianca, ma piuttosto trasparente e lascia trasparire lo sfondo bianco del file SWF, non viene influenzata da ColorTransform.
Per risolvere questo problema, è necessario fornire al viewport uno sfondo bianco uniforme su cui verranno renderizzati i cubi. È abbastanza facile; torna indietro al punto in cui hai creato la vista:
viewport = new Viewport3D (); viewport.autoScaleToStage = true; // questo renderà la vista grande come il palcoscenico
... e aggiungi un paio di linee per disegnare un rettangolo bianco grande quanto il palco:
viewport = new Viewport3D (); viewport.autoScaleToStage = true; // questo renderà il viewport grande quanto lo stage viewport.graphics.beginFill (0xffffff); // 0xffffff è bianco viewport.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Provalo di nuovo:
L'immagine dovrebbe essere veramente fioca, opaca e difficile da vedere attraverso l'obiettivo giusto, ma facile come l'immagine normale da vedere attraverso l'obiettivo sinistro.
Ora dobbiamo fare la stessa cosa per il viewport giusto. Quindi, crea il tuo nuovo ColorTransform:
public var rightViewportColorTransform: ColorTransform;
rightViewportColorTransform = new ColorTransform ();
Ora applica questa nuova trasformazione alla vista giusta:
viewport2.transform.colorTransform = rightViewportColorTransform;
Dal momento che la mia lente sinistra è gialla, ho bisogno di drenare tutto il giallo da questa finestra.
(Se l'obiettivo sinistro è rosso, allora questo passaggio è facile: basta impostare il redMultiplier del tuo nuovo ColorTransform a 0.)
Ma come diventiamo gialli di rosso, verde e blu?
Se stessimo usando le vernici, non potremmo; il giallo è un colore primario in quel caso. Ma quando si tratta di luce, le cose sono diverse. Guarda questo:
Immagine da Wikimedia Commons. Grazie, Mike Horvath e Jacobo!
Come puoi vedere, rosso e verde si mescolano per fare il giallo (il che spiega perché lo sfondo del viewport sinistro diventa giallo quando abbiamo rimosso tutto il blu). Quindi per rimuovere tutto il giallo dalla nostra immagine, dobbiamo rimuovere tutto il rosso e tutto il verde!
Possiamo farlo in questo modo:
rightViewportColorTransform = new ColorTransform (); rightViewportColorTransform.redMultiplier = 0; rightViewportColorTransform.greenMultiplier = 0; viewport2.transform.colorTransform = rightViewportColorTransform;
Oh, giusto, dobbiamo anche riempire lo sfondo di questa finestra.
Fai questo come prima:
viewport2 = new Viewport3D (); viewport2.autoScaleToStage = true; // questo renderà il viewport grande quanto lo stage viewport2.graphics.beginFill (0xffffff); // 0xffffff è bianco viewport2.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Provalo
La lente gialla sui miei occhiali lascia passare una discreta quantità di luce blu, ma è ancora molto più scura se osservata attraverso quell'obiettivo rispetto a quando viene vista attraverso la lente blu, ed è quello che conta.
Quindi abbiamo impostato le nostre due immagini e trasformato il colore. Il problema è che al momento possiamo vederne solo uno alla volta.
Il modo più ovvio per farci vedere contemporaneamente è quello di ridurre l'alfa (la trasparenza) della vista in primo piano, in questo modo:
viewport2.alpha = 0,5;
Prova questo:
Ah. OK, non un successo entusiasmante. L'Alpha non è chiaramente lo strumento giusto per il lavoro; cos'altro abbiamo?
Flash ci offre la possibilità di scegliere tra diversi metodi di fusione, metodi di fusione di due oggetti di visualizzazione insieme. Ce n'è una lista completa qui, ma mi concentrerò su quella chiamata Inserisci.
Il Inserisci la modalità di fusione passa attraverso ciascun pixel delle due immagini e somma la luminosità di ciascuna delle tre lampadine.
Quindi se un particolare pixel nella prima immagine ha la lampadina verde completamente accesa e gli altri due completamente spenti, e lo stesso pixel nella seconda immagine ha la lampadina blu completamente accesa e gli altri due completamente spenti, quindi quando si fondono insieme il verde e le lampadine blu saranno completamente accese e la lampadina rossa sarà completamente spenta.
Se la prima e la seconda immagine hanno entrambe la lampadina rossa a metà strada e le altre due completamente spente, l'immagine miscelata avrà la lampadina rossa completamente accesa, mentre le altre due rimarranno spente..
Prendi l'immagine? Ottimo, usiamolo. Elimina la riga che abbiamo appena scritto che modifica l'alfa e sostituiscila con questo:
viewport2.blendMode = "aggiungi";
(Non è necessario applicare la modalità di fusione a entrambe le finestre, solo quella nella parte superiore dell'elenco di visualizzazione.)
Provalo
Questo è più simile!
Se lo guardi attraverso un occhio alla volta, dovresti notare che ogni occhio vede una vista diversa in modo più promettente. Probabilmente sarai anche in grado di vedere un debole fantasma dell'altra finestra, ma non è un problema; il tuo cervello può ignorarlo.
Tuttavia, l'immagine non sembra ancora 3D. Facciamo questo.
Anche se i tuoi occhi vedono immagini diverse, questo non è abbastanza per ingannare il tuo cervello. Il tuo cervello è abbastanza intelligente, vedi; alcuni direbbero addirittura che è l'organo più intelligente del tuo corpo. Sa che dovrebbe usare altri indizi per capire se un oggetto è o meno 3D. Prospettiva, ad esempio: quanto deve essere piccolo un oggetto in base alla distanza.
Il problema principale qui è che le nostre due fotocamere sono distanziate molto più distanti l'una dall'altra rispetto ai nostri stessi occhi. Questo non è sorprendente, dal momento che ho scelto il numero 50 a caso.
L'effettiva distanza di separazione che dovremmo usare dipenderà da un certo numero di cose, ad esempio quanto sei lontano dal monitor e quanto è grande lo schermo, quindi non posso semplicemente darti un numero magico da usare. Dovremo capirlo manualmente.
Potremmo farlo provando molti numeri diversi uno per uno, ma questo è noioso e richiederà sempre. Ho un'idea migliore.
Aggiungi questa linea alla tua funzione onEnterFrame ():
camera2.x = camera.x + (mouseX * 0,1);
Ora modifica le funzioni onClickViewport e onClickViewport2 come segue:
funzione pubblica onClickViewport (mouseEvt: MouseEvent): void trace (camera2.x - camera.x); public function onClickViewport2 (mouseEvt: MouseEvent): void trace (camera2.x - camera.x);
Esegui il file SWF e sposta il mouse a sinistra e a destra. Sembrerà come questo:
Metti gli occhiali, spegni le luci e continua a muovere il mouse fino a trovare il "punto dolce" in cui l'immagine sembra diventare solida. Clicca il mouse a questo punto, e traccerà un numero. Prendi nota di ciò!
Una volta trovata la separazione ottimale, elimina la riga che abbiamo appena aggiunto alla funzione onEnterFrame ():
camera2.x = camera.x + (mouseX * 0,1);
Ora trova la linea in Main () dove imposta la distanza tra le telecamere:
camera2.x = camera.x + 50;
... e sostituisci il 50 con qualunque numero tu abbia annotato. Ho scoperto che 18 era un buon numero da utilizzare per il mio setup.
Infine, prova il SWF:
Ta-da!
Ben fatto: hai creato una scena 3D in Flash e hai usato un pò di stratagemma mentale per trasferirlo in una scena 3D nella tua testa;)
Se hai capito tutto quello che hai passato, dovresti essere in grado di utilizzare la stessa tecnica per creare immagini 3D dell'anaglifo usando altri motori 3D.
Ho menzionato nella prima parte che potresti voler provare a rendere possibile all'utente di spostare la fotocamera con il mouse. Ora hai aggiunto l'effetto anaglifo, spostando le fotocamere in avanti e all'indietro sembrerà molto impressionante.
Grazie per aver letto questo tutorial, spero che tu l'abbia trovato utile. Come sempre, se hai qualche domanda, per favore chiedi loro nei commenti qui sotto.
Accentsconagua