Introduction: Reflective Prism

This display system uses a technique that is often referred to as Pepper's Ghost. It was first invented by Giambattista della Porta in 1584 and has been commonly used in theatre. Some of its famous uses include Alexander McQueen's performance with Kate Moss, Tupac's CG concert cameo, and numerous Hatsune Miku concert performances. Although "hologram" is often found in the title of these display systems - they have no holographic qualities. A hologram refers to a specific medium that stores image data through a laser, a holographic substrait and interference pattern. Pepper's Ghost uses a much simpler technique that merely reflects an image off of a surface to create an illusion of a 3D object floating in physical space.

Step 1: Materials

In order to create a Pepper's Ghost effect, there are two types of materials commonly used. The first is a transparent material that has a reflective surface. Glass would work for this, but a cheaper, lighter, and easier to use material is acrylic plexiglass. When using a transparent acrylic sheet, take a look a both sides as one side is always more reflective. The more reflective side should be facing the image source. Another material that can be used is a scrim or semi-transparent piece of cloth (most commonly being black). Although a scrim won't reflect the image off of it, it can indeed catch an image as a movie screen might. A mirror or semi-transparent mirror would also work in order to reflect an image off of it, but you would lose the illusion that the object is floating mid-air.

Step 2: One Sided

Pepper's Ghost was originally designed with one reflective surface in mind. Below you'll find an experiment I made using a transparent piece of acrylic (reflecting an image generating on a iPhone5). Please note, that the acrylic is angled at 45 degrees in relation to the display, the viewer is looking at it straight on (0 degree viewing angle) and that the black pixels from the phone are showing up as transparent.

The reflective surface is often placed at a 45 degrees from the image to allow for the source image to be hidden. Creating a steeper or shorter angle can change the sweet spot for the viewing angle and can linearly distort the image if the viewing angle does not change. If you tilt the reflective surface to be 70 degrees while keeping a straight on viewing angle, you'll achieve a larger display surface, but the image will be distorted from a horizontal viewing angle. To compensate for this, it is possible to reverse distort the image that's projected in order to have a clear image that takes up a larger surface area.

Before jumping to a four sided prism, it's good to test out what the one sided effect looks like and play around with different reflective angles along with different viewing angles.

Step 3: Four Sided

The same principles are taken into account when breaking it out to have four sides. The advantage of having four sides is that you can show an object from four unique angles. By placing four cameras in 45 degree intervals it gives the illusion that you can walk around the display and multiple people can view the same object from different vantage points. It also greatly enhances the illusion that an object is sitting in physical space. Above is a diagram for the placement of the four cameras in your 3D scene.

It's important to note that along with the position of the camera within the circumference of a circle - you'll need to rotate the Z-Axis of your camera to match the base-line of each panel. Your resulting program should look something like this and this (with 3D model).

These 3D scenes are generated using three.js (a webGL library using javascript). You could however create this scene using any software that supports 3D (After Effects, OpenGL, Maya, 3ds Max, ect.). The code used to create the multiple cameras is as follows:

//create views

var views = [
		{ 
			left: 0,
			bottom: 0.5,
			width: 0.5,
			height: 0.5,
			background: { r: 0.0, g: 0.0, b: 0.0, a: 1 },
			eye: [ 0, 300, 1800 ],
			up: [ 0, 1, 0 ],
			fov: 30,
			angle : 0,
			rotation: 33.75
		},
		{ 
			left: 0,
			bottom: 0,
			width: 0.5,
			height: 0.5,
			background: { r: 0.0, g: 0.0, b: 0.0, a: 1 },
			eye: [ 0, 300, 1800 ],
			up: [ 0, 1, 0 ],
			fov: 30,
			angle: 90,
			rotation: 101.25
		},
		{ 
			left: 0.5,
			bottom: 0,
			width: 0.5,
			height: 0.5,
			background: { r: 0.0, g: 0.0, b: 0.0, a: 1 },
			eye: [ 0, 300, 1800 ],
			up: [ 0, 1, 0 ],
			fov: 30,
			angle: 180,
			rotation: -101.25
		},
		{ 
			left: 0.5,
			bottom: 0.5,
			width: 0.5,
			height: 0.5,
			background: { r: 0.0, g: 0.0, b: 0.0, a: 1 },
			eye: [ 0, 300, 1800 ],
			up: [ 0, 1, 0 ],
			fov: 30,
			angle: 270,
			rotation: 101.25
		}
	];//add cameras
	for (var i =  0; i < views.length; i++ ) {
		var view = views[i];
		var camera = new THREE.PerspectiveCamera( view.fov, windowWidth / windowHeight, 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 = camera;
	}

To render the cameras, I used the following code:

//for each view
for (var i = 0; i < views.length; i++ ) { //grab each view var view = views[i]//grab each camera var camera = view.camera; //Adjust camera within 3D spherical coordinates 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 rotation of camera on Z-Axis camera.rotation.z= view.rotation - Math.PI; //Grab view ports var left = Math.floor( windowWidth * view.left ); var bottom = Math.floor( windowHeight * view.bottom ); var width = Math.floor( windowWidth * view.width ); var height = Math.floor( windowHeight * view.height );//Render renderer.setViewport( left, bottom, width, height ); renderer.setScissor( left, bottom, width, height ); renderer.enableScissorTest ( true ); renderer.setClearColor( view.background, view.background.a ); renderer.render(scene, camera) }

For this experiment, I used a laser cutter to cut each side of the prism from 12x12" transparent acrylic plexiglass panels. When glued together (using a solvent), it creates a prism where each side is 45 degrees from the horizontal plane. I placed the image source on the bottom in this example, but this design could easily be flipped upside-down. Doing this would make the image source less viewable and allow the user to better focus on the content reflected off of the prism.

Step 4: Leap Motion

In order to allow users to directly manipulate the content that they are viewing, I connected the display system to a Leap Motion. The Leap is a small 3D sensor that specializes in reading hands. If you have a Leap Motion, include leapjs in your <head> and then use your finger or hand position to manipulate the object:

        //Create a mapping function
function map(value, inputMin, inputMax, outputMin, outputMax){ outVal = ((value - inputMin) / (inputMax - inputMin) * (outputMax - outputMin) + outputMin); if(outVal > outputMax){ outVal = outputMax; } if(outVal < outputMin){ outVal = outputMin; } return outVal; } //Set the rotation of your object based on your finger position x yourObject.rotation.x = map(t[1], -300, 300, 0, 10); //Set the rotation of your object based on your finger position y yourObject.rotation.y = map(t[0], -300, 300, 0, 10);

If you have a Leap Motion connected - feel free to view a demo of the program here or download the attached zip.

Step 5: Content Generation

When designing content for this display system it's important to be aware of window violations. A window violation is the appearance of an object cut off due to the window size (or in our case the reflective surface size). When this occurs, the image looks like a slice has been cut off of it and the viewer loses their suspension of disbelief. Due to this, using objects that are self contained work well. Examples of self-contained objects include a tree, car, watch, planet, among many others. Objects that work less well would include something like a hand/arm. To display a hand at decent scale, the arm would likely fall off the displays edges and it would no longer look like a solid object floating in space. Scale is also important to consider. Projecting small objects like a key work very well because they can be seen at real scale and are self-contained in a way that it would be difficult to receive a window violation.

If an object appears beyond the bounds of the prism, it breaks the illusion being created. Due to this, it's best to use self contained objects that fit within the center area of the display panels. It's also important to be aware that any light in the room will both enhance the illusion that the content is appear mid-air, but also wash out the colors presented on the display. I'd advise you to find a balance the meets your particular needs.

Working with your surrounding environment can also enhance the illusion further. When designing content for a display that sits within your environment, it can be beneficial to think about the forces that may affect the content. From wind, gravity, sound, lighting touch, to temperature - adding more input mechanisms helps to support the illusion. Along with this, it's key to consider the lighting in the room. Since we're dealing with projected light, the darker the room is, the crisper the image appears. In the same respect, if the room is too dark, you can lose the background and the "floating" image no longer as a reference point to allow it to be floating in-front of. Due to this, you'll likely want to adjust lighting to find a fit that you're happy with.


Lastly, since the reflection of the image source happens on the outside of the reflection surface - any light that shines on the inside of the reflection surface will not effect the image. It seems unintuitive, but this allows you to add lighting inside the prism if you would like to present your object sitting on a surface that's lit underneath or above it like a spotlight.

Step 6: Can You Have More Than Four Sides?

The most common question I've received is if this display system could have more than four sides. The answer to this is both yes and no. The principles of it remain the same and you can have as few or as many sides as you would like. However, if you have more sides - lets say 8 for this examples purpose - you'll have image issues if your 3D object isn't very very very small. The reason for this is that your camera for each slice will diminish in horizontal width as you add more sides. As its width gets smaller - the object your display will likely get horizontally cut off unless shrunk in size. Due to this, you'll lose the illusion of the 3D object and create window violations. If your creating something more abstract (like a single 3D cylinder vertically positioned with a thin diameter) perhaps you'll be happy with the result. However, it's important to keep in mind that your content will exponentially need to be scaled down as you add more sides.

Comments

author
FarihaI (author)2017-02-08

hello... can you help me please.. i used 3ds max for modelling... how can i attach a code to a leap motion to make 4 sided images..???

author
DannyF9 (author)2015-11-28

Hi, i am wanting to make one using my Samsung Smart T.V. 42". I have done a lot of measuring and i want to do one with a 36"x36". My goal is to have it big enough so that people can see it clearly during my portfolio show which is in 3 weeks. Are my measurements correct? if not, can someone please help me. I only measured a 36"x36" square, then i measured a smaller square in the center using the iphone measurements. i took into consideration of the height of my t.v. and i understand that the width/height will only use a certain amount of space when it comes to the video sequence. i have attatched my ai file of how i have it set up using 1 big sheet of acrylic, which i have purchased.

CLEAR ACRYLIC_pt093inchThickness_36INCHx36INCH_Hologram Model (1).jpg
author
FunnyHappyPeople (author)DannyF92016-05-18

Did you make it and if so how did it work out? I am also wanting to make larger scale on for a stage production...

author
Haseo98 (author)2016-03-27

hello... I have one question, the acrilic plexiglass. .. how thick should it be? Consider please that I am using a galaxy s5 pine for it

author
Aswinm1 (author)Haseo982016-04-18

this guy used the sheet of thickness of 1/8th inch

author
Aswinm1 (author)2016-04-18

what type of monitor did you use

author
Aswinm1 (author)2016-04-17

are u refering to the 4 images as the four cameras

author
PranavF (author)2016-02-29

Whenever i am trying to open the index.html it only shows black screen... rtilton1, hope u can help me in this.

author
PranavF (author)2016-02-29

Whenever i am trying to open the index.html it only shows black screen... rtilton1, hope u can help me in this.

author
PranavF (author)2016-02-29

How do I actually run the four cameras zip file which you have given here??? and what is the difference between that zip and the zip which says collada?? Actually I am not able to understand how it is taking the single sided photo from the media folder and converting to four sided image and if so where it should be getting displayed??? The link that you gave http://robbietilton.com/reflective-prism/examples/fourcameras/ is not working.... Hope you can guide me on this and any tutorial available for 3DS max to convert the same then it would be of great help. Expecting Reply Soon.

author
dwroboheadz (author)2016-02-28

Hi - I've created an app for the iPhone called HoloVid that lets you use your own videos or photos with projectors like these. More info up over at getholovid.com or over on this YouTube Video https://www.youtube.com/watch?v=UntUFjfqOf0

I hope people find this useful!

author
rouzbeh00 (author)2016-02-13

hi and tnx for sharing these... after that do u know how can make a cylinder box?

a round one!!! what is the material , images and ...

author
JoelS52 (author)2016-01-23

The collada doesn't work, the screen appears all black

author
DannyF9 made it! (author)2016-01-04

This instructable gave very good details, i just wished you had a better explanation in creating animations using Maya or even after effects. I did however use the little bits and pieces from your script that set up the cameras. I will be creating my own instructable regarding the measurements for this project i did. Thanks for your Instractable!!

HoloPyramid_1.pngHoloPyramid_2.png
author
JoelS52 (author)DannyF92016-01-22

How i can do my own image?

author
AndrewK38 (author)2016-01-21

I was looking into getting a smoked acrylic to build the pyramid from. Would a smoked surface create a better projection surface? Thanks.

author
neildream (author)2016-01-15

Hey I have created some Zed holographic boxes... Working absolutely perfect except they are giving dual holographic images one above other... How do I make the display clear? I am using 2MM Acrylic plexiglass as the reflecting surface.

author
perfo (author)2015-07-23

Very nice and detailed instructable. I'd already made a projector like this for the Ipad to show 4face youtube videos on and it works well but to do the manipulation with three.js takes it to another level.. Thanks for the ideas...

My kids are bonkers on the dragon training films. I'd really liek to make a night light tyep thing with holgraphic animations images of the various dragons on it. I can find some 3d images made with blender of say a night fury but how to get from that to a three.js image is the stumbling block for me...

Any ideas how I could do it ? Thanks again...

author
omarlawand (author)perfo2015-12-22

what is the software that I can do 4 faced videos

author
DannyF9 (author)omarlawand2015-12-26

I use After Effects CC to adjust 4 videos and put together. I will be making my own Instructable on how to create your own videos using free 3d Software and how to Edit videos together to project onto your pyramid.

author
perfo (author)DannyF92015-12-26

great I'll look forward to seeing it...

author
perfo (author)omarlawand2015-12-23

I haven't found software to make one video in to the four. I used stuff already done from youtube. However using three.js you can create four images and move them about. I didn't really get this bit sorted with my idea of the night light.

author
rtilton1 (author)perfo2015-10-03

See example JavaScript code in instructable. Three.js also has many examples on how to load models

author
RouzbehN (author)2015-12-10

hi

what can i do in a bright place to improve quality of hologram??

author
perfo (author)RouzbehN2015-12-23

Show it against a black back ground.. Maybe a mirror surface would be close enough for you needs. this would make it a lot brighter but degrade the holggrphic effect...

author
taco_lovercr7 (author)2015-10-14

Hi I'm making this hologram for my science project and I was wondering if there is a substitute that I could use instead of acrylic plexiglass. I was also wondering if you any websites that explain how this works more detailed.

author
Coletted (author)taco_lovercr72015-10-17

http://laserclassroom.com/diy-not-hologram/

author
ArunG9 (author)2015-10-08

nice one . can you create any instruction to make 4 faced videos using any open source software like blender

author
shravan.dir (author)2015-03-13

hi , rititon , thanks for this wonderful instructable , i have a question to build a bigger one , can i use four different displays each on one side , instead of one single display with four images on corners of four sides . like images1 2 3 4 projecting image 1 on screen 1 and so. thanks in advance ..

author
rtilton1 (author)shravan.dir2015-10-03

Yes. This will work.

author
AngelicaF3 (author)2015-08-04

I unfortunately do not have a cd case to cut up. :/ Is there any other material i could use to project the images properly the same way as a cd case prism would ?

author
rtilton1 (author)AngelicaF32015-10-03

Plexiglass works best. I link to this material in the instructable.

author
SimonS21 (author)2015-08-11

How do i get such a 3d model of the earth? with each side moving

author
rtilton1 (author)SimonS212015-10-03

There's a link to this in the instructable. You could also find one on turbosquid

author
aavirachan (author)2015-09-25

what should i do if i need the hologram to be about 1metre wide??

author
holov (author)2015-08-18

For hologram videos please visit : https://www.youtube.com/channel/UCV9UThUsXbqJTlElzvmIw2g

author
FrancoL3 (author)2015-08-15

if instead of a N faces prism you use a truncated cone, and of course having a 360 degree image able to build up a decent 3d model adapted for this purpose, probably you can get unbelivable results, but it's also a lot harder to do

author
rubelmbd (author)2015-08-11

nice to get connected with such discussion; i am on it

author
AlexandrescuC made it! (author)2015-08-03

Very nice tutorial!

Screenshot_1.png
author
MidnightSon (author)2014-04-22

Hi!

Awesome Instructable. I can't quite wrap my head around what would happen if you projected the earth in the same kind of contraption, but with a single continuous piece of reflective material (a cone), instead of a 4-sided pyramid. Do you have any idea ?

Thanks !

author
rtilton1 (author)MidnightSon2014-04-22

If you were to take 4 projectors and project onto a black cylinder made of plexiglass (that has reflective properties) - you would have an issue with overlapping images from multiple projectors that make it toward your eye. It's a great idea, but in execution - I haven't found a way to properly do this.

author
DerickK (author)rtilton12015-07-21

its possible https://www.youtube.com/watch?v=cvkKcArWWsU

author
perfo (author)DerickK2015-07-23

In this set up they get around the image overlap by only allowing two views it's not 360 ..

But yes it is of course possible with the right distortion correction and using one image projection. A bit like having a picture on the PC screen and pushing the middle of the screen so that it forms a cone. Distortion would be the battle....

author
DerickK (author)MidnightSon2015-07-21

watch this https://www.youtube.com/watch?v=cvkKcArWWsU

author
DerickK (author)MidnightSon2015-07-21

i think its theoretically possible , but the sorce image should be continous .ie in a circular fashion... problem is that you need a lot of cameras ...oh wait.. you could use panaroma to get 360 degree.

author
madvic (author)MidnightSon2014-04-23

I supose that the image will be distorted, You will need to project a "calculated counter distorted image" , no idea on how to calculate it. I supose that the "distorted" image will have the appearence of a thoroid or something funny.

Anyway very very good project Rtilton1...!

My congrats..!

author
alponso kane (author)2015-06-28

awesome

author
sorinsorinyo (author)2015-02-13

Hi, very nice project. Good job!

I have a little problem. Is over my head that 3d stuff and all of those codes. I trying to do something simpler for me. So i'll simply record an object and playing the video in loop. My question is: with that LeapMotion gadget can i control the video with my hand so when i move it left-right the video would go back and forth so it looks similar to yours effect? I would like to buy one but i don't know if i can use it like this. Also can it be used with a tablet or phone?

author
weldessghaier (author)2014-12-18

thank you for all the information!

just a quick question for the animations I like to know if there is a Mac application or PC to create videos in 4 faces or for a annimation as it COCA-COLA HOLOGRAM BOX (see link) http: / /www.youtube.com/watch?v=sGktah4npLA

Thanks

author
rtilton1 (author)weldessghaier2014-12-29

That looks like a cinema4d or maya render to me