Reflektierende Prism

6 Schritt:Schritt 1: Materialien Schritt 2: Einseitige Schritt 3: Four Sided Schritt 4: Leap Motion Schritt 5: Content-Generierung Schritt 6: Kann man mehr als vier Seiten?


Das Display-System verwendet eine Technik, die oft als Pepper-Geist bezeichnet wird. Es wurde zuerst von Giambattista della Porta im Jahr 1584 erfunden und wurde häufig in Theater verwendet. Einige seiner bekanntesten Anwendungen sind Alexander McQueen Leistung mit Kate Moss , Tupac CG Konzert Cameo und zahlreiche Hatsune Miku Konzertaufführungen . Obwohl "Hologramm" wird oft im Titel dieser Anzeigesysteme gefunden - sie haben keine holographische Qualitäten. Ein Hologramm bezieht sich auf ein bestimmtes Medium, der Bilddaten durch einen Laser, eine holographische substrait und Interferenzmuster speichert. Pfeffer Ghost verwendet eine viel einfachere Technik, spiegelt lediglich ein Bild von einer Oberfläche, um die Illusion eines 3D-Objekts schwimm im physischen Raum zu schaffen.

Schritt 1: Materialien


  1. Um eine Peppers Ghost-Effekt zu erzeugen, gibt es zwei Arten von Materialien, die üblicherweise verwendet wird. Der erste ist ein transparentes Material, das eine reflektierende Oberfläche aufweist. Glass würde für diese Arbeit, aber ein billiger, leichter und einfacher zu bedienen Material ist Acryl Plexiglas . Bei Verwendung eines transparenten Acrylglas, schauen Sie eine beiden Seiten als eine Seite ist immer stärker reflektiert. Je mehr reflektierende Seite sollte nach der Bildquelle. Ein anderes Material, das verwendet werden kann, ist ein Gelege oder halbtransparenten Stück Stoff (am häufigsten als schwarz). Obwohl ein Gelege wird nicht das Bild aus der es zu reflektieren, kann es in der Tat ein Bild als Filmleinwand Macht zu fangen. Ein Spiegel oder halbdurchlässigen Spiegel wäre auch, um ein Bild aus der es zu reflektieren, aber Sie würde die Illusion, dass das Objekt mitten in der Luft schwebenden verlieren.

Schritt 2: Einseitige

  1. Reflektierende Prism

    Peppers Geist war ursprünglich mit einer reflektierenden Oberfläche konzipiert. Nachfolgend finden Sie ein Experiment I unter Verwendung eines transparenten Stück aus Acryl zu finden (was einer Bilderzeugung auf einem iPhone5). Bitte beachten Sie, dass die Acryl wird bei 45 Grad in Bezug auf die Anzeige Winkel, wird der Betrachter auf sie geradeaus (0 Grad-Betrachtungswinkel) auf der Suche, und dass die schwarzen Bildpunkte vom Telefon zeigen sich als transparent.
    Die reflektierende Oberfläche ist oft zu einem 45 Grad aus dem Bild platziert, damit für das Quellbild ausgeblendet werden. Erstellen einer steileren oder kürzer Winkel kann den Sweet Spot für den Betrachtungswinkel zu ändern und kann linear verzerren das Bild, wenn der Blickwinkel ändert sich nicht. Wenn Sie die reflektierende Oberfläche neigen, um 70 Grad werden, während eine gerade nach Blickwinkel, erhalten Sie eine größere Anzeigefläche zu erreichen, aber das Bild wird von einem horizontalen Betrachtungswinkel verzerrt. Um dies auszugleichen, ist es möglich, rückgängig zu verzerren das Bild, um ein klares Bild, das dauert eine größere Oberfläche haben projiziert ist.
    Vor dem Sprung zu einem vierseitigen Prisma, es ist gut, um zu testen, was die einseitige Wirkung aussieht und spielen, um mit unterschiedlichen Reflexionswinkeln mit unterschiedlichen Blickwinkeln.

Schritt 3: Four Sided


  1. Reflektierende Prism

    Alle 4 Artikel anzeigen

    Die gleichen Prinzipien werden bei der bricht es aus, um vier Seiten haben gemacht. Der Vorteil der mit vier Seiten ist, dass man ein Objekt aus vier einzigartigen Blickwinkeln zu zeigen. Durch die Platzierung vier Kameras in 45-Grad-Abständen gibt es die Illusion, dass man um das Display zu gehen und mehrere Personen können die gleiche Objekt aus verschiedenen Blickwinkeln betrachten. Außerdem verbessert die Illusion, dass sich ein Objekt im physischen Raum sitzt. Oben ist ein Diagramm für die Anordnung der vier Kameras in Ihre 3D-Szene.
    Es ist wichtig zu beachten, dass zusammen mit der Position der Kamera innerhalb des Umfangs eines Kreises - Sie brauchen, um die Z-Achse der Kamera drehen, um die Grundlinie jeder Platte entsprechen. Ihre daraus resultierende Programm sollte etwa so aussehen dies und dies (mit 3D-Modell).
    Diese 3D-Szenen werden mit Three.js (a WebGL-Bibliothek mit Hilfe von JavaScript) erzeugt. Sie können diese Szene mit jeder Software, die 3D unterstützt jedoch erstellen (After Effects, OpenGL, Maya, 3ds Max, ect.). Das zur Herstellung der mehreren Kameras erstellen Code ist wie folgt:
      // Ansichten erstellen
    
     var Ansichten = [
    		 { 
    			 left: 0,
    			 unten: 0,5,
    			 Breite: 0,5,
    			 Höhe: 0.5,
    			 Hintergrund: {r: 0,0, g: 0,0, b: 0,0, ein: 1}
    			 Auge: [0, 300, 1800],
    			 up: [0, 1, 0],
    			 FOV: 30,
    			 Winkel: 0,
    			 Rotation: 33.75
    		 }
    		 { 
    			 left: 0,
    			 bottom: 0,
    			 Breite: 0,5,
    			 Höhe: 0.5,
    			 Hintergrund: {r: 0,0, g: 0,0, b: 0,0, ein: 1}
    			 Auge: [0, 300, 1800],
    			 up: [0, 1, 0],
    			 FOV: 30,
    			 Winkel: 90,
    			 Rotation: 101.25
    		 }
    		 { 
    			 links: 0,5,
    			 bottom: 0,
    			 Breite: 0,5,
    			 Höhe: 0.5,
    			 Hintergrund: {r: 0,0, g: 0,0, b: 0,0, ein: 1}
    			 Auge: [0, 300, 1800],
    			 up: [0, 1, 0],
    			 FOV: 30,
    			 Winkel: 180,
    			 Rotation: -101,25
    		 }
    		 { 
    			 links: 0,5,
    			 unten: 0,5,
    			 Breite: 0,5,
    			 Höhe: 0.5,
    			 Hintergrund: {r: 0,0, g: 0,0, b: 0,0, ein: 1}
    			 Auge: [0, 300, 1800],
    			 up: [0, 1, 0],
    			 FOV: 30,
    			 Winkel: 270,
    			 Rotation: 101.25
    		 }
    	 ]; // Kameras hinzufügen
    	 for (var i = 0; i <views.length; i ++) {
    		 var view = Blick [i];
    		 var Kamera = new THREE.PerspectiveCamera (view.fov, Window / window, 1, 10000);
    		 camera.position.x = view.eye [0];
    		 camera.position.y = view.eye [1];
    		 camera.position.z = view.eye [2];
    		 camera.up.x = view.up [0];
    		 camera.up.y = view.up [1];
    		 camera.up.z = view.up [2];
    		 view.camera = Kamera;
    	 } 

    Um die Kameras zu machen, habe ich den folgenden Code:
      // Für jede Ansicht 
    for (var i = 0; i <views.length; i ++) { // Jede Ansicht greifen var view = Blick [i] // schnappen Sie jede Kamera var Kamera = view.camera; // Kamera in 3D Kugelkoordinaten einstellen camera.position.x = earth.position.x + cameraRadius * Math.sin (rotateY * Math.PI / 180) * Math.cos (view.angle * Math.PI / 180); camera.position.z = earth.position.y + cameraRadius * Math.sin (rotateY * Math.PI / 180) * Math.sin (view.angle * Math.PI / 180); camera.position.y = earth.position.z + cameraRadius * Math.cos (rotateY * Math.PI / 180); camera.lookAt (scene.position); // Set Drehung der Kamera auf der Z-Achse camera.rotation.z = view.rotation - Math.PI; // Schnappen Blick Häfen var links = Math.floor (Window * view.left); var unten = Math.floor (window * view.bottom); var width = Math.floor (Window * view.width); var height = Math.floor (window * view.height); // Render renderer.setViewport (links, unten, Breite, Höhe); renderer.setScissor (links, unten, Breite, Höhe); renderer.enableScissorTest (true); renderer.setClearColor (view.background, view.background.a); renderer.render (Szene, Kamera) }

    Für dieses Experiment verwendete ich ein Laserschneider, um jede Seite des Prismas von 12x12 "transparent Acrylplexiglasscheiben. Zu schneiden, wenn (unter Verwendung eines Lösungsmittels) zusammengeklebt, ein Prisma, wo jede Seite um 45 Grad von der horizontalen Ebene erzeugt es. I platziert die Bildquelle auf dem Boden in diesem Beispiel, aber dieser Entwurf könnte leicht auf den Kopf umgedreht werden. Auf diese Weise würde die Bildquelle weniger sichtbar zu machen und ermöglichen es dem Benutzer, eine bessere Konzentration auf den Inhalt reflektierte des Prismas.

Schritt 4: Leap Motion


  1. Damit die Benutzer die Inhalte, die sie sehen direkt zu manipulieren, angeschlossen ich die Display-System zu einem Leap Motion. Der Sprung ist ein kleines 3D-Sensor, der in Lese Hände spezialisiert. Wenn Sie ein Leap Motion haben, gehören leapjs im <head> und dann mit dem Finger oder Handposition, um das Objekt zu manipulieren:
      // Erstellen Sie eine Mapping-Funktion 
    Funktionskarte (Wert, Eing.Min, inputMax, outputMin, outputMax) { outVal = ((Wert - Eing.Min) / (inputMax - Eing.Min) * (outputMax - outputMin) + outputMin); if (outVal> outputMax) { outVal = outputMax; } if (outVal <outputMin) { outVal = outputMin; } zurück outVal; } // Die Drehung des Objekts auf der Grundlage Ihrer Fingerposition x Set yourObject.rotation.x = map (t [1], -300, 300, 0, 10); // Die Drehung des Objekts auf der Grundlage Ihrer Fingerposition y Set yourObject.rotation.y = map (t [0], -300, 300, 0, 10);

    Wenn Sie einen Leap Motion angeschlossen - fühlen Sie sich frei, um eine Ansicht Demo des Programms hier oder laden Sie die angehängte zip.

Schritt 5: Content-Generierung

  1. Reflektierende Prism

    Bei der Gestaltung von Inhalt für diese Display-System ist es wichtig zu wissen, Fenster Verletzungen. Ein Fenster Verletzung ist das Aussehen eines Objekts abgeschnitten aufgrund der Fenstergröße (oder in unserem Fall die reflektierende Oberfläche Größe). Wenn dies geschieht, sieht das Bild wie eine Scheibe wurde aus der es geschnitten worden und der Betrachter verliert ihre Aussetzung der Ungläubigkeit. Aus diesem Grund die Verwendung von Objekten, die sich selbst enthalten sind gut zu funktionieren. Beispiele für in sich geschlossene Objekte umfassen einen Baum, Auto, Uhr, planet, unter vielen anderen. Objekte, die weniger gut funktionieren würde, so etwas wie eine Hand / Arm umfassen. Um eine Hand zu vernünftigen Maßstab anzuzeigen, würde der Arm wahrscheinlich fallen die Displays Kanten, und es wäre nicht mehr wie ein festes Objekt im Raum schwebend zu suchen. Maßstab ist es wichtig, zu berücksichtigen. Projizieren kleine Objekte wie ein Schlüssel Arbeit sehr gut, da sie auf realen Maßstab gesehen werden und sind in sich abgeschlossen in einer Weise, dass es schwierig sein würde, um ein Fenster Verletzung an.
    Wenn ein Objekt über die Grenzen des Prismas wird, bricht es die Illusion geschaffen. Aus diesem Grund ist es am besten zu bedienen Selbst Objekte, die im mittleren Bereich der Anzeigefelder passen enthalten. Es ist auch wichtig zu wissen, dass jedes Licht in den Raum wird sowohl verstärken die Illusion, dass die Inhalte angezeigt werden mitten in der Luft, sondern auch waschen Sie sich die auf dem Display dargestellt Farben sein. Ich würde Ihnen raten, ein Gleichgewicht der erfüllt Ihre Bedürfnisse zu finden.
    Arbeiten mit Ihrer Umgebung um auch die Illusion weiter zu verbessern. Bei der Gestaltung von Inhalten für eine Anzeige, die in Ihrer Umgebung befindet, ist es von Vorteil, über die Kräfte, die den Inhalt auswirken können denken kann. Von Wind, Schwerkraft, Ton, Licht touch, um Temperatur - Hinzufügen weiterer Eingabemechanismen hilft, um die Illusion zu unterstützen. Zusammen mit diesem, ist es von entscheidender Bedeutung, um die Beleuchtung im Raum zu berücksichtigen. Da wir mit projizierte Licht zu tun haben, desto dunkler der Raum ist, desto schärfer wird das Bild angezeigt wird. In dem gleichen Respekt, wenn der Raum zu dunkel ist, können Sie den Hintergrund und die "schwebende" Bild nicht mehr als Bezugspunkt verlieren, damit sie-vor zu schweben. Aus diesem Grund werden Sie wahrscheinlich wollen Beleuchtung einstellen, um eine Passform, die Sie mit zufrieden sind zu finden.

    Schließlich, da die Reflexion von der Bildquelle passiert, auf der Außenseite der Reflexionsfläche - jedes Licht, das auf der Innenseite der Reflexionsfläche strahlt, wird das Bild nicht beeinflussen. Es scheint nicht intuitiv, aber dies ermöglicht es Ihnen, Beleuchtung im Inneren des Prismas hinzufügen, wenn Sie möchten, dass Ihr Objekt auf einer Oberfläche, die unter oder über ihm wie ein Scheinwerfer beleuchtet ist sitzen zu präsentieren.

Schritt 6: Kann man mehr als vier Seiten?


  1. Die häufigste Frage, die ich bekommen habe, ist, wenn dieses Anzeigesystem könnte mehr als vier Seiten haben. Die Antwort darauf ist ja und nein. Die Grundsätze der es gleich bleiben und Sie können so viele oder so wenige Seiten haben, wie Sie möchten. Allerdings, wenn Sie weitere Seiten haben - sagen wir 8 Beispiele für diese Zwecke - Sie werden Bild Fragen haben, wenn Ihr 3D-Objekt ist nicht sehr sehr sehr klein. Der Grund dafür ist, dass Sie Ihre Kamera für jede Scheibe wird in horizontale Breite zu verringern, wie Sie mehr Seiten hinzuzufügen. Als seine Breite kleiner wird - das Objekt Ihrer Anzeige wird wahrscheinlich horizontal geschnitten steigen, es sei denn in der Größe geschrumpft. Aus diesem Grund werden Sie die Illusion des 3D-Objekts zu verlieren und zu erstellen Fenster Verletzungen. Wenn Ihre Hand so etwas abstrakteren (wie ein einziges 3D-Zylinder vertikal mit einem dünnen Durchmesser positioniert ist) vielleicht werden Sie mit dem Ergebnis zufrieden sein. Allerdings ist es wichtig zu beachten, dass Ihre Inhalte exponentiell müssen verkleinert werden, wie Sie weitere Seiten hinzufügen, zu halten.