Its really great feature Silverlight realtime augment toolkit

Dear Friends,
Today is Sunday. I am sure you have many plans for the day even I have also. My plan is to share one awesome feature of Silverlight which is Augment Reality. I am very excited for this.
A new toolkit is introduced which is SLAR toolkit. The Silverlight Augment reality by the name it is clear that it’s more about reality work.
The current sample project we match pattern of an image. We just move the corresponding images in front of our web cam and if the pattern matches we put some kind of marker like text box, images.
Is it interesting? , Really it is when you tried it you will enjoy the functionality more.
I tried this toolkit and I am very much impressed with this new utility. With this utility you can try various feature programs, games and make the things more interesting more live.

You can download this new feature toolkit from
I am going to show you an existing sample to you which is mainly for recognizing the pattern images.
Although I am not going to do something extra it’s exactly same which is provided by SLAR Toolkit.
So here are the steps
1) Create a new Silverlight project in VS 2010 (don’t include  host Silverlight option)
2) Copy Matrix3DEx.dll, SLARToolkit.dll in bin folder of the project and add reference of the DLL in the project.
3) Now add pat files in projects (the pat files are basically pattern file which you can create for an image. The pattern file can be create from photo shop or other image editing tool)
4) The structure of the project now looks like as below.

5) On main page XAML put following coding

<UserControl x:Class=”SLARTest.MainPage”
d:DesignHeight=”300″ d:DesignWidth=”400″ Loaded=”UserControl_Loaded”>
<Grid x:Name=”LayoutRoot” Background=”White”>
<TextBlock Text=” ” HorizontalAlignment=”Center” />
<Grid Width=”640″ Height=”480″>
<Rectangle Name=”Viewport” Stroke=”Black” StrokeThickness=”2″ />
<TextBox Name=”Txt” Text=”SLAR toolkit test with Indiandotnet” Width=”300″ Height=”300″ TextWrapping=”Wrap” AcceptsReturn=”True” FontSize=”16″ />
<Button Content=”Start Fun” HorizontalAlignment=”Center” Click=”Button_Click” />

On Main page ‘s code behind we  need to write below code
private void UserControl_Loaded(object sender, RoutedEventArgs e)
// Initialize the webcam
captureSource = new CaptureSource();
captureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

// Fill the Viewport Rectangle with the VideoBrush
var vidBrush = new VideoBrush();
Viewport.Fill = vidBrush;

//  Initialize the Detector
arDetector = new CaptureSourceMarkerDetector();
// Load the marker pattern. It has 16×16 segments and a width of 80 millimeters
var marker = Marker.LoadFromResource(“Marker_Hiro_16x16segments_80width.pat”, 16, 16, 80);
// The perspective projection has the near plane at 1 and the far plane at 4000
arDetector.Initialize(captureSource, 1, 4000, marker);

// Attach the AR detection event handler
// The event is fired if at least one marker was detected
arDetector.MarkersDetected += (s, me) =>
// Change to UI thread in order to manipulate the text control’s projection
Dispatcher.BeginInvoke(() =>
// Calculate the projection matrix
var dr = me.DetectionResults;
if (dr.HasResults)
// Center at origin of the TextBlock
var centerAtOrigin = Matrix3DFactory.CreateTranslation(-Txt.ActualWidth * 0.5, -Txt.ActualHeight * 0.5, 0);
// Swap the y-axis and scale down by half
var scale = Matrix3DFactory.CreateScale(0.5, -0.5, 0.5);
// Calculate the complete transformation matrix based on the first detection result
var world = centerAtOrigin * scale * dr[0].Transformation;

// Calculate the final transformation matrix by using the camera projection matrix from SLARToolkit
var vp = Matrix3DFactory.CreateViewportTransformation(Viewport.ActualWidth, Viewport.ActualHeight);
var m = Matrix3DFactory.CreateViewportProjection(world, Matrix3D.Identity, arDetector.Projection, vp);

// Apply the final transformation matrix to the TextBox
Txt.Projection = new Matrix3DProjection { ProjectionMatrix = m };

private void Button_Click(object sender, RoutedEventArgs e)
// Request webcam access and start the capturing
if (CaptureDeviceConfiguration.RequestDeviceAccess())

Now when you will run the code you are surprised by the working functionality of the page.
In our example we have taken “Hiro.pat” file
So when we run this if we put hiro image pattern print out the image is captured and the textbox comes in front of the image.

Thanks & Regards
Rajat Jaiswal

2 thoughts on “Its really great feature Silverlight realtime augment toolkit

  1. Wow! This really is something!

    I’m not into Silverlight so I don’t understand much of the code here though. Any idea how it works internally? Does it implement artificial neural networks or something?

    1. Hi Raunak,
      Now Silverlight providing lot of new real world techniques like
      1) Face detection
      2) Motion detection
      so you can understand now your app can be more relaistic.


Leave a Reply

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

You are commenting using your 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

This site uses Akismet to reduce spam. Learn how your comment data is processed.