Introduction

This sample constructs a 3D cube using Silverlight, applies a texture to it, and wires up standard Silverlight UI elements to control the pitch, yaw, and roll of the cube in real-time.

Building the Sample

If updating the shader (*.hlsl) code, run CompileShaders.bat (with DirectX SDK installed) to recompile the shaders and see the updates in your Silverlight application.

Description

This section shows the mapping of 3D vertices on the cube to 2D coordinates on the texture surface.

You can include code snippets, images, videos.   

 

C#
Edit|Remove
/// <summary> 
/// Creates a vertex buffer containing a single Cube primitive 
/// </summary> 
/// <returns>A vertex buffer containing a single Cube primitive</returns> 
VertexBuffer CreateCube() 
{ 
    // cube vertices 
    var cube = new VertexPositionTexture[36]; 
 
    // face coordinates 
    Vector3 topLeftFront = new Vector3(-1.0f, 1.0f, 1.0f); 
    Vector3 bottomLeftFront = new Vector3(-1.0f, -1.0f, 1.0f); 
    Vector3 topRightFront = new Vector3(1.0f, 1.0f, 1.0f); 
    Vector3 bottomRightFront = new Vector3(1.0f, -1.0f, 1.0f); 
    Vector3 topLeftBack = new Vector3(-1.0f, 1.0f, -1.0f); 
    Vector3 topRightBack = new Vector3(1.0f, 1.0f, -1.0f); 
    Vector3 bottomLeftBack = new Vector3(-1.0f, -1.0f, -1.0f); 
    Vector3 bottomRightBack = new Vector3(1.0f, -1.0f, -1.0f); 
 
    // texture coordinates for XNA sub-image 
    Vector2 topLeftUVXNA = new Vector2(0.0f, 0.0f); 
    Vector2 topRightUVXNA = new Vector2(0.5f, 0.0f); 
    Vector2 bottomLeftUVXNA = new Vector2(0.0f, 1.0f); 
    Vector2 bottomRightUVXNA = new Vector2(0.5f, 1.0f); 
 
    // texture coordinates for Silverlight sub-image 
    Vector2 topLeftUVSL = new Vector2(0.5f, 0.0f); 
    Vector2 topRightUVSL = new Vector2(1.0f, 0.0f); 
    Vector2 bottomLeftUVSL = new Vector2(0.5f, 1.0f); 
    Vector2 bottomRightUVSL = new Vector2(1.0f, 1.0f); 
 
    // front face 
    cube[0] = new VertexPositionTexture(topRightFront, topRightUVXNA); 
    cube[1] = new VertexPositionTexture(bottomLeftFront, bottomLeftUVXNA); 
    cube[2] = new VertexPositionTexture(topLeftFront, topLeftUVXNA); 
    cube[3] = new VertexPositionTexture(topRightFront, topRightUVXNA); 
    cube[4] = new VertexPositionTexture(bottomRightFront, bottomRightUVXNA); 
    cube[5] = new VertexPositionTexture(bottomLeftFront, bottomLeftUVXNA); 
 
    // back face  
    cube[6] = new VertexPositionTexture(bottomLeftBack, bottomRightUVXNA); 
    cube[7] = new VertexPositionTexture(topRightBack, topLeftUVXNA); 
    cube[8] = new VertexPositionTexture(topLeftBack, topRightUVXNA); 
    cube[9] = new VertexPositionTexture(bottomRightBack, bottomLeftUVXNA); 
    cube[10] = new VertexPositionTexture(topRightBack, topLeftUVXNA); 
    cube[11] = new VertexPositionTexture(bottomLeftBack, bottomRightUVXNA); 
 
    // top face 
    cube[12] = new VertexPositionTexture(topLeftBack, topLeftUVSL); 
    cube[13] = new VertexPositionTexture(topRightBack, topRightUVSL); 
    cube[14] = new VertexPositionTexture(topLeftFront, bottomLeftUVSL); 
    cube[15] = new VertexPositionTexture(topRightBack, topRightUVSL); 
    cube[16] = new VertexPositionTexture(topRightFront, bottomRightUVSL); 
    cube[17] = new VertexPositionTexture(topLeftFront, bottomLeftUVSL); 
 
    // bottom face  
    cube[18] = new VertexPositionTexture(bottomRightBack, topLeftUVSL); 
    cube[19] = new VertexPositionTexture(bottomLeftBack, topRightUVSL); 
    cube[20] = new VertexPositionTexture(bottomLeftFront, bottomRightUVSL); 
    cube[21] = new VertexPositionTexture(bottomRightFront, bottomLeftUVSL); 
    cube[22] = new VertexPositionTexture(bottomRightBack, topLeftUVSL); 
    cube[23] = new VertexPositionTexture(bottomLeftFront, bottomRightUVSL); 
 
    // left face 
    cube[24] = new VertexPositionTexture(bottomLeftFront, bottomRightUVSL); 
    cube[25] = new VertexPositionTexture(bottomLeftBack, bottomLeftUVSL); 
    cube[26] = new VertexPositionTexture(topLeftFront, topRightUVSL); 
    cube[27] = new VertexPositionTexture(topLeftFront, topRightUVSL); 
    cube[28] = new VertexPositionTexture(bottomLeftBack, bottomLeftUVSL); 
    cube[29] = new VertexPositionTexture(topLeftBack, topLeftUVSL); 
 
    // right face  
    cube[30] = new VertexPositionTexture(bottomRightBack, bottomRightUVXNA); 
    cube[31] = new VertexPositionTexture(bottomRightFront, bottomLeftUVXNA); 
    cube[32] = new VertexPositionTexture(topRightFront, topLeftUVXNA); 
    cube[33] = new VertexPositionTexture(bottomRightBack, bottomRightUVXNA); 
    cube[34] = new VertexPositionTexture(topRightFront, topLeftUVXNA); 
    cube[35] = new VertexPositionTexture(topRightBack, topRightUVXNA); 
 
    // create buffer on graphics device 
    var vb = new VertexBuffer(resourceDevice, VertexPositionTexture.VertexDeclaration, 
        cube.Length, BufferUsage.WriteOnly); 
 
    // copy vertex data to the graphics device buffer 
    vb.SetData(0, cube, 0, cube.Length, 0); 
 
    return vb; 
} 
 

 

Source Code Files

More Information

For more information on X, see http://blogs.msdn.com/b/silverlight_sdk/archive/2011/04/13/what-s-new-in-silverlight-5-beta-3d-graphics-support.aspx

 Developers familiar with XNA will be able to use their existing knowledge to help get them quickly up to speed with Silverlight 3D graphics programming.

3D graphics are an illusion that creates the perception of depth on a two-dimensional surface. It is possible to use standard 2D graphics already in Silverlight to create the illusion of 3D, but this would quickly become very complex. The core XNA graphics libraries are tailored specifically for 3D graphics and make the problem much easier to solve.

Silverlight introduces a number of new classes to support 3D graphics. The DrawingSurface control is the main Silverlight control used to render 3D graphics. Silverlight also includes the core of the XNA Graphics library from XNA Game Studio 4.0.