3d Player

Silverlight 3d Player: Anaglyph 3DPlayer.

Why objects looks 3d in real world and why they look flat when you view them on your TV or laptop. When you focus on an object, your brain takes into account the effort it required to adjust your eyes to focus on it as well as how much your eyes had to converge. Together, this information allows you to estimate how far away the object is.Since there is gap between your two eyes i.e bath eyes have two slightly different pictures of same object and you mind then interprets objects depths and object looks 3d.Where as in flat panel display you two eye see exactly same picture.

The secret to 3-D television and movies is that by showing each eye the same image in two different locations, you can trick you brain into thinking the flat image you’re viewing has depth. But this also means that the convergence and focal points don’t match up the way they do for real objects. While your eyes may converge upon two images that seem to be one object right in front of you, they’re actually focusing on a screen that’s further away. This is why you get eye strain if you try to watch too many 3-D movies in one sitting.

Passive Glasses

To view pictures as 3d there are two main categories of lenses used to filter image from single picture for your left and right eye and these are passive/active lenses. The classic 3-D glasses have anaglyph lenses which uses two different color lenses to filter the images you look at on the television screen. The two most common colors used are red and blue. The software to render picture on screen produces two sets of images slightly offset from one another. One will have a blue tint to it and the other will have a reddish hue. If you put on your glasses, you should see a single image that appears to have depth to it. The red lens absorbs all the red light coming from your television, canceling out the red-hued images. The blue lens does the same for the blue images. The eye behind the red lens will only see the blue images while the eye behind the blue lens sees the red ones. Because each eye can only see one set of images, your brain interprets this to mean that both eyes are looking at the same object. But your eyes are converging on a point that’s different from the focal point — the focus will always be your television screen. That’s what creates the illusion of depth.

Test this you tube link  with your anaglyph glasses.

Active Glasses

You still wear 3-D glasses with this method, but they don’t use colored lenses. The method doesn’t compromise the color quality of the image as much as anaglyph glasses do. It also doesn’t require you to put a polarization film on your television screen. The glasses use liquid crystal display (LCD) technology to become an active part of the viewing experience. They have infrared (IR) sensors that allow them to connect wirelessly to your television or display. As the 3-D content appears on the screen, the picture alternates between two sets of the same image. The two sets are offset from one another similar to the way they are in passive glasses systems. But the two sets aren’t shown at the same time — they turn on and off at an incredible rate of speed. In fact, if you were to look at the screen without wearing the glasses, it would appear as if there were two sets of images at the same time. The LCD lenses in the glasses alternate between being transparent and opaque as the images alternate on the screen. The left eye blacks out when the right eye’s image appears on television and vice versa. This happens so fast that your mind cannot detect the flickering lenses. But because it’s timed exactly with what’s on the screen, each eye sees only one set of the dual images you’d see if you weren’t wearing the glasses. You can’t use a standard television and expect active glasses to work. You must have some way to synchronize the alternating images on the screen with the LCD lenses in the glasses.

Lenticular Displays (3D Posters)

There’s another way to create three-dimensional images that you may see in 3d posters commonly available in market. This method relies on a display coated with a lenticular film. Lenticules are tiny lenses on the base side of a special film. The screen displays two sets of the same image. The lenses direct the light from the images to your eyes — each eye sees only one image. Your brain puts the images together and you interpret it as a three-dimensional image. This technology requires content providers to create special images for the effect to work. They must interlace the two sets of images together. If you were to try and view the video feed on a normal screen, you would see a blurry double image.
Another problem with lenticular displays is that it depends upon the audience being in a sweet spot to get the 3-D effect. If you were to move to the left or right from one of these sweet spots, the image on the screen would begin to blur. Once you moved from one sweet spot to another, the image would return to a cohesive picture.

Experimenting 3D

Within this article I am going to experiment several techniques and will use Microsoft WPF or silverlight to generate images on laptop screen. The simplest method is to start with anaglyph glasses technique. I have already tried Lenticular technique and its very difficult to achieve the desired results on laptop screen as precise alignment and eyes angle is required between laptop screen, Lenticular sheet and your eyes.Lenticular methods is however may suits for laptops and there is generally single user with fixed angle. I will try this method after anaglyph lenses technique.

Generating pictures for anaglyph lenses
Anaglyph images provide a 3D stereoscopic effect when viewed with red/cyan glasses. This article shows how to use a WPF shader effect to blend a image to produce the anaglyph illusion. This shader can be used for any kind of WPF UIElement.

The anaglyph effect combines two image sources, the result is the red channel from the left image source and the green and blue channels from the right image source. The alpha is taken as the max of the two image sources. It is implemented with the following HLSL code:

sampler2D input1 : register(S0); // right image input
sampler2D input2 : register(S1); // left image input

float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 Color1;
Color1 = tex2D( input1 , uv.xy);

float4 Color2;
Color2 = tex2D( input2 , uv.xy);

Color1.r = Color2.r;
Color1.g = Color1.g;
Color1.b = Color1.b;
Color1.a = max(Color1.a,Color2.a);

return Color1;
}

Install Microsoft DirectX SDK, and add the fxc compiler to the path C:/Program Files/Microsoft DirectX SDK/Utilities/bin/x86 or similar.

The shader effect can be compiled with the command:

fxc /T ps_2_0 /E main /Fo AnaglyphEffect.ps AnaglyphEffect.fxThen, add the compiled pixel shader (.ps) to the project as a Resource.
The AnaglyphEffect class contains dependency properties for LeftInput and RightInput. These Brush inputs are used to define the input sources for the anaglyph blending shader.

I have not been using the RightInput property, since the effect is applied to the right image source element in all these demos.

The source code can be found in Home.xaml

<Grid x:Name=”GrdMain” Background=”Black” >
    <Border BorderBrush=”White” BorderThickness=”1″ Padding=”2″ HorizontalAlignment=”Center” Background=”Transparent” VerticalAlignment=”Center”>
            <Grid>
                <Image Opacity=”1″ Margin=”20″  Stretch=”Uniform” Name=”imageSource” Source=”/Anaglyph3DPlayer;component/images/l.JPG” >
                <Image.Effect>
                    <effects:AnaglyphEffect x:Name=”Effect1″ >
                        <effects:AnaglyphEffect.RightInput >
                                <ImageBrush Opacity=”1″ Stretch=”Uniform”  ImageSource=”{Binding ElementName=imageSource,Path=Source}”>
                                <ImageBrush.Transform>
                                        <CompositeTransform  Rotation=”0.2″ SkewX=”0.2″ SkewY=”0.2″ TranslateX=”3″ TranslateY=”3″/>
                                </ImageBrush.Transform>
                            </ImageBrush>
                        </effects:AnaglyphEffect.RightInput>
                    </effects:AnaglyphEffect>
                </Image.Effect>

            </Image>
                <TextBlock HorizontalAlignment=”Right” VerticalAlignment=”Bottom” Text=”3D Picture – by Rajneesh” Margin=”2″>
                    <TextBlock.Effect>
                        <DropShadowEffect BlurRadius=”8″ ShadowDepth=”0″ Color=”White”/>
                    </TextBlock.Effect>
                </TextBlock>
            </Grid>
        </Border>
        <Button Click=”Change_Picture” Content=”Change” Padding=”5″ Margin=”5″ HorizontalAlignment=”Right” VerticalAlignment=”Bottom” />
    </Grid>

For real 3d effect two images are required one for left eye and another for right eye however in this sample i have used only single image to produce 3d effect.

Put you Anaglyph glasses shown in the picture below

 and launch this silverlight application Anaglyph 3DPlayer.
The source code for this project can be downloaded here

One thought on “3d Player

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s