Developing Apps on DirectX* 11 and OpenGL* for Atom™ Processor Based Tablets

One of the new features on the latest Intel® Atom™ Z3000 (codename Bay Trail) series platform is the integration of Intel® HD Graphics. This provides application developers a great opportunity on a mobile platform to build graphically rich and immersive games and powerful media applications. The platform takes advantage of the same graphics engine that is found on desktops and UltraBooks, with a reduced number of execution units suitable for a mobile platform. One key advantage of using Intel® HD Graphics on a mobile platform is architectural consistency. An application designed, prototyped and tested on a desktop system will easily migrate to an Atom™ Z3000 based tablet since the graphic features supported are so similar.

The Atom™ Z3000 platform offers developers an excellent graphics platform that includes 4 execution units with 8 threads each and provides driver support for DirectX* 11.1, OpenGL* 3.2 and OpenGL* ES 3.0.

OpenGL* ES 3.0, OpenGL* 3.2

Developing graphical apps on Android continues to be supported on the Atom™ Z3000 series platform with OpenGL* ES 2.0. With the addition of Intel® HD Graphics the graphics core now supports the Open GL ES 3.0 specification as well. Android developers looking to use the latest Open GL* ES 3.0 features must use Android 4.3 or later.

In addition to continued support of the OpenGL* ES specification, OpenGL* 3.2 for desktop applications is also an option. Developers can now take existing desktop OpenGL* solutions and easily tailor them for the Atom™ platform without having to completely re-architect the app to run in OpenGL* ES. This architectural consistency makes it easy to prototype solutions using OpenGL* on desktop Intel® HD Graphics systems and then bring these apps to market.

For more information on getting started with OpenGL* and OpenGL* ES see the following links:

DirectX* 11.1

DirectX* 11.1 is yet another graphics API that application developers can use to take full advantage of Intel® HD Graphics. Through traditional desktop apps or Windows* Store apps, the full set of DirectX* features are available to create compelling tablet applications. The Windows* Store presents a unique opportunity for developers to reach more consumers and sell more apps. Creating graphics and multimedia rich Windows* Store apps with DirectX* is an interesting topic. The remainder of this blog takes a look at the resources available to build compelling Windows* Store apps on the Atom™ Z3000 platform.

One really powerful aspect of programming DirectX* Windows* Store Apps comes from the flexibility of languages available to developers. The DirectX* engine itself can only be used directly through C++, but there are easy ways to take advantage of DirectX* from managed code. The ability to integrate DirectX* graphics in a managed app allows developers to leverage languages they may be more comfortable with, such as C# and XAML.

XAML allows you to create things like UI layouts, settings screens, menus and more with a declarative XML syntax. The following is an example of how easy it is to use XAML to create a professional looking UI:

<Grid Tapped="Button_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center">
  <Ellipse Height="110" Width="110" StrokeThickness="8" Stroke="LightGreen" >
   <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity="0.55">
     <GradientStop Color="DarkBlue" Offset="0" />
     <GradientStop Color="White" Offset="0.5" />
     <GradientStop Color="DarkBlue" Offset="1" />
   <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="24" FontWeight="Bold" Text="Button" Opacity=".75"></TextBlock>

The resulting button looks something like the following:

With just a dozen lines of XML you have a great looking button that is ready to be placed into a game UI.

To leverage both the power of DirectX* and the flexibility of using XAML and managed code there are primarily two methods. The first method is using the component SurfaceImageSource. In this scenario a XAML component has an ImageSource assigned to it much like a paint brush. It is within a separate C++ Windows* Runtime Component that the DirectX* calls are made and the SurfaceImageSource is what helps to get this done. In this sample image below, the same XAML button element is overlaid onto an XAML defined ellipse that has its contents rendered by DirectX*.

  MyImageSource DrawingSource = new MyImageSource((int)MyEllipse.Width, (int)MyEllipse.Height, true);
  // Use DrawingSource as the source for the Ellipse shape's fill
  MyEllipse.Fill = new ImageBrush() { ImageSource = DrawingSource };

The class MyImageSource in this case is the Windows* Runtime Component that will preform the bulk of the DirectX* drawing routines. The DrawingSource render loop is driven from managed code and a series of calls are made to the class to perform the rendering and animation:

CompositionTarget.Rendering += DrawScene; void DrawScene(object sender, object e) {
  // Begin updating the SurfaceImageSource   DrawingSource.BeginDraw();
  // Clear background   DrawingSource.Clear(Colors.Aqua);
  // Render next animation frame   DrawingSource.RenderNextAnimationFrame();
  // Stop updating the SurfaceImageSource and draw the new frame

Since the ellipse is drawn by XAML and C#, a few more lines of code and it is easy to attach touch events to respond to user interaction, a great example of leveraging C# for some high level user interaction code. The following example will move the ellipse around the screen as the user touches the device:

private void MyEllipse_PointerMoved(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e) {
  if (isPressed) {
    PointerPoint point = e.GetCurrentPoint(LayoutRoot);
    if (prevPoint != null) {
        double deltaX = point.Position.X - prevPoint.Position.X;
        double deltaY = point.Position.Y - prevPoint.Position.Y;
        translate.X += deltaX; translate.Y += deltaY;
        MyEllipse.RenderTransform = translate;

The drawback to using this SurfaceImageSource method is that it does not achieve the best possible performance since the rendering calls are tied to the UI rendering and can't render the DirectX* content faster than the UI updates.

The second option of mixing managed code with DirectX* graphics is to use the SwapChainPanel. In this case more knowledge of how DirectX* renders is needed since you manage the render loop and there are some restrictions to how content is rendered in your XAML layout. The advantage is you have total control of the render pipeline.

In the XAML layout a renderer is defined:

  <renderer:D3DPanel x:Name=“MyDirectXPanel" Height=“200" Width=“200" >

Started from managed code, a render thread is created and started within the Windows* Runtime C++ component. This thread in the then does the native rendering:

  // render content on background thread within SwapChainPanel code protected
  override void OnNavigatedTo(NavigationEventArgs e) {

Here is an example of the 200x200 pixel panel rendered with the same XAML button overlaid on top.


The latest Atom™ Z3000 series platform is a versatile and powerful platform for developers to create applications. With OpenGL* and DirectX* support all on an Atom™ platform, developers have multiple options to create differentiating applications and solutions on Intel® hardware.

*Other names and brands may be claimed as the property of others.
**This sample source code is released under the Intel OBL Sample Source Code License (MS-LPL Compatible) and Microsoft Limited Public License. Copyright© 2013 Intel Corporation. All rights reserved.