3d Lenticular (3d Without Glasses)

After Anaglyph 3DPlayer from last month, the next challenge is to create 3d without glasses using lenticular sheet. A lenticular lens is an array of magnifying lenses, designed so that when viewed from slightly different angles, different images are magnified. The most common example is the lenses used in lenticular printing, where the technology is used to give an illusion of depth, or to make images that appear to change or move as the image is viewed from different angles.

Lenticular imaging is a multi-step process consisting of creating a lenticular image from at least two existing images, and combining it with a lenticular lens. This process can be used to create various frames of animation (for a motion effect), offsetting the various layers at different increments (for a 3d effect).

To create output from two input images here in this article you will find lenticular shadder effect (WPF).With lenticular effect you can transform image or video into lenticular source within WPF or online Silverlight application. The heart of lenticular effect is HLSL (High Level Shader Language) code

int pxW =floor (PixelWidth);
float virtualRow;
if(Direction ==0)
virtualRow =round( (uv.y * ImageHeight)/(floor (PixelWidth)));
else
virtualRow =round( (uv.x * ImageWidth)/(floor (PixelWidth)));

if (virtualRow % 2 >= 1) //Odd Even Rows
return tex2D(RightImage, uv);
else
return tex2D(input, uv);

The HLSL code above calculates the pixel position and determines from which source it has to pick the pixel color information to create final output. To create and test HLSL program I have used Shazzam pixel shader utility which is very nice tool to quickly develop shader logic.

The attached Silverlight project uses lenticular effect to render merged images and to convert it into good looking 3d, you need to precisely align lenticular sheet on top of your laptop.

Lenticular output from Silverlight project and final look, after you put your lenticular sheet

         .

xaml behind project is

<Image Margin="20" Stretch="None" Name="imageSource" Source="/LenticularEffect3D;component/Uta_bar_sm 1.png">
<Image.Effect>
<effects:LenticularEffect ImageWidth="{Binding ElementName=imageSource,Path=ActualWidth}" ImageHeight="{Binding ElementName=imageSource,Path=ActualHeight}" x:Name="lenticularEffect"  Direction="1" PixelWidth="1" >
<effects:LenticularEffect.RightImage>
<ImageBrush Opacity="1"  ImageSource="/LenticularEffect3D;component/Uta_bar_sm 2.png">
</ImageBrush>
</effects:LenticularEffect.RightImage>
</effects:LenticularEffect>
</Image.Effect>
</Image>

The lenticular sheet has specific ppi (pixel per inch) , since we are trying to produce 3d from laptop screen (TFT DPI 120) and you have to somehow match the picture pixels to screen & screen dpi to lenticular sheet to get desired results. I was not able to achieve very good 3d output as you will need matching ppi lenticular sheet and very high resolution screen to fix at least two pixes under single lenticular lense.

Download source code