返回首页

介绍本文介绍了可能的最简单的Silverlight / XNA程序:一个基本的纺纱三角,虽然与全3D灯光效果。这是经典的"Hello World 3D相当于?方案。它包括大约50行代码,每行后面的理由解释。
{S0的} 背景
在Silverlight 5的最大的新功能之一是完整的GPU加速3D图形使用XNA框架。
Silverlight和XNA的结合,将启用全新的3D应用类,直接从运行网页,包括在科学,工程应用,产品营销,业务和地理空间领域。
XNA框架为程序员提供了大量的电能,在一个相当直接的方式控制图形硬件, 一些令人印象深刻的结果是可能的。但同时新华社相当大,特别是简化了3D编程相比DirectX或OpenGL时,它仍然是一个相对低层次的技术和Silverlight程序员与3D编程没有以往的经验,可以面对最初的一个陡峭的学习曲线。更糟的是,因为这是一项新技术,文档是有点片状和几样并不总是显示最简单的方法做的事情。 入门您将需要设置您的Silverlight开发环境,并有大量信息已经对网络上可用,因此没有必要在这里重复。
一旦你设置的工具,这里是建立你的XNA应用程序的步骤: 启动Visual Studio并创建一个新的Silverlight 5应用 落个"DrawingSurface??控制到您的主网页。这是发生在所有的3D立体幻。如果你不能看到"DrawingSurface??控制在工具箱中,您可能需要右键单击"选择项...??添加它。 "画??事件添加到绘图表面在事件处理程序,添加两行代码:

GraphicsDevice g = GraphicsDeviceManager.Current.GraphicsDevice;

g.Clear(new Color(0.8f, 0.8f, 0.8f));

??新增两个using指令: {C}消除不必要的"使用吗??指示,特别是System.Windows.Media否则,你将有两种颜色的冲突定义,该项目将不能编译添加以下的LT; objectgt元素:在你的HTML或ASPX测试页
<param name="EnableGPUAcceleration" value="true" />

按F5,你应该看到一个在浏览器中的灰色矩形光
当然这是不平凡的Silverlight灰色的矩形,它的GPU加速的XNA矩形!
到目前为止容易,现在让我们添加一些3D。添加3D
下面是全部的代码:{体C3}
有太多的代码行,但还有很多,所以让我们打破它。绘图基元
新华社是一个相当低层次的框架,直接与图形硬件,所以唯一的事情它知道如何绘制三角形和直线。在我们的程序,绘图的代码是: {的C4}
这指示GPU使用预先载入缓冲区的顶点画一个三角形。 顶点缓冲区
XNA提供四个内置的顶点选项,你也可以定义自己的品种。所有顶点有一个三维位置使用Vector3结构定义,他们可以有额外的属性这样的颜色,纹理坐标和照明的正常吗??我们希望我们的节目有逼真的三维照明,使我们使用VertexPositionNormalTexture的结构。
我们的节目,所以我们创建一个三角形的三个顶点数组。我们定义的三维位置坐标,使位于XY平面上的三角形,我们定义照明法线??是在正确的角度,即"向前走呢??沿Z轴。我们定义纹理坐标为(0,0),因为我们要使用一个像素平面彩色纹理位图。一旦我们有我们的顶点数组,我们包裹在一个VertexBuffer类和发送到GPU。{C5的}GraphicsDevice类
GraphicsDevice类是中央向新华社,它是用来控制GPU的。它只有一个实例,你通过的GraphicsDeviceManager类的静态属性。
GraphicsDevice类绘图原语,并设立覆盖的顶点缓冲区的方法 以上。它也有不少其他属性和方法控制3D渲染的细节的过程。对于我们的简单的程序,我们离开一切与它的默认设置,除了"RasterizerState??我们改变"CullNone??默认是不绘制三角形的背面,因为他们通常是三维物体内部的视线,但我们的三维模型是一个三角形,我们希望能够看到它的两侧。 {5233}影响
新华社提供了五种不同的效果的选择吗??类,其中总结了很多低级别的细节在GraphicsDevice的交谈。我们将使用BasicEffect类,这实际上是相当强大 - ?它包括一个非常漂亮的3D灯光设置标准。{C7-}
对于最终的低级别的控制,它是有可能的方案新华社而不使用内置的效果类工作直接与GraphicsDevice的对象。你甚至可以自己定制的像素着色器和顶点着色编程。但效果类,特别是BasicEffect建成,使事情容易多了。 纹理
在XNA中,3D场景与纹理重叠的三角形网格。纹理简单的2D位图??新华社类的Texture2D。他们被送到GraphicsDevice的使用效果类和每个三角形的顶点指定在纹理的2D坐标。按照惯例,这些纹理坐标被称为U和V
新华社许多应用,尤其是游戏,纹理创建脱机,然后在运行时加载。我们对于我们的简单的程序编程创建一个像素一个坚实的红色纹理。 {C8的}矩阵和三维转换
这是3D编程的核心。在我们的顶点缓冲顶点定义的位置在我们的3D虚拟世界中的三角形的三个角,但这些三维坐标需要被转换成2D屏幕坐标之前,什么都可以显示。
这个过程有三个阶段,每个阶段采用了使用Matrix类定义的3D转换。Matrix类实际上代表了一个4×4矩阵浮点数,但其主要功能是变换的三维坐标,通过由Vector3类定义的平移,旋转的基本操作,和缩放。
basicEffect.World = Matrix.CreateRotationY((float)e.TotalTime.TotalSeconds * 2);

basicEffect.View = Matrix.CreateLookAt(new Vector3(0, 0, 5.0f), Vector3.Zero, Vector3.Up);

basicEffect.Projection = Matrix.CreatePerspectiveFieldOfView(0.85f, aspectRatio, 0.01f, 1000.0f);


第一步是从模型坐标转换到世界坐标。这被称为世界变换。在我们的计划,我们有一个模型,一个三角形,与世界变换是用来定义在哪里,以及它如何是面向我们的3D虚拟世界中。如果我们的3D场景有几种模式,或同一型号的几个实例,他们每个人都有自己的世界变换。我们只是一个模型,但它在实时旋转。因此,我们使用世界变换代表旋转的基础上所用的时间。
第二步是转换到世界坐标中心的起源吗?我们的虚拟世界,以查看坐标,这是对我们的观点或摄像头的位置为中心。这被称为视图变换。矩阵类有一个方便的方法,创建一个视图变换(CreateLookAt)基于摄像机的位置和它在看什么的中心点。
第三步是从我们的虚拟世界中的三维坐标,2D屏幕坐标转换。为了保持一致性,这一步也做了使用Matrix类,所以输出的三维坐标,但只有X和Y值用于创建2D渲染屏幕上的图像。这一步被称为投影变换和新华社提供两种选择:正交和观点。与正交选项,进一步从相机的对象不会出现小。透视选项是"自然??远处的物体看起来更小。 Matrix类还提供了一个方便的方法,建立投影变换(CreatePerspectiveFieldOfView)根据相机性能,尤其是镜头的角度(即广角或远摄)表示为Y轴的弧度。
一旦我们的三个变换矩阵的设立,BasicEffect类的需要设立的GraphicsDevice的2D画面呈现到我们的三维场景。效果通行证和技术
新华社的内置效果类继承的影响的基类,它封装的概念"技术???和"通行证??
技术提供替代的渲染,可以选择在抽签时的影响,也许取决于正在绘制的对象的类型。
用于多级渲染通行证。
BasicEffect类提供了一个单一的技术,这是默认选择,其中有一个单通。它是必要的"应用??一通,然后再发出任何绘图命令。我们的方案做这行代码: {C10的}
但你会经常看到新华社的这种形式的代码: {C11的}
我们用简单的形式,因为我们知道,BasicEffect只能有一个通行证。如果我们用多个效果通过,或者如果我们想推广我们的代码,使其工作有任何影响类,我们将使用foreach循环。 Resize事件和新的Silverlight 5线程模型当我们创建的投影变换,我们需要提供的DrawingSurface(宽/高)的长宽比。
为了保持我们的"Hello World??方案事情变得简单,我们可以尝试这样做,在我们的抽奖事件处理程序。但是,这将不工作: {C12的}
它抛出一个异常:
System.UnauthorizedAccessException: Invalid cross-thread access


原因是Silverlight 5的新的线程模型。此前,单UI线程上的Silverlight做的一切,虽然你有选择手动创建额外的线程。
现在的Silverlight 5不其低级别的显卡工作在不同的线程被称为"组成??线程。基于Silverlight的XAML的,你并不需要担心这种变化,因为你的代码在运行XAML对象树和不参与这种低层次的渲染。
然而,新华社与Silverlight,你工作在一个较低的水平和抽奖活动的DrawingSurface控制执行对成分线程。如果您尝试访问的组成线程的XAML控制,你会得到一个异常。
在我们的程序中,我们避免与当地的aspectRatio??变量,这是我们在Resize事件处理程序更新,然后使用在Draw事件处理程序。我们没有做任何锁定该变量,假设一个32位浮点原子。
对于生产代码共享组成线程和UI线程之间更复杂的数据结构,你将需要必须非常小心,锁定正确的事情。 废止
在程序代码中的最后一行是调用:
e.InvalidateSurface();


抽奖事件处理程序结束时把该调用导致抽奖活动,立即被再次提出。为这是一个3D场景不断变化 - 像我们的旋转三角形 - 这使流畅的操作。
如果你的场景是静态的,那么你并不需要不断重绘,你可以调用InvalidateSurface()当一些变化。优化绘图方法
我们的计划被设计成尽可能短,尽可能简单说明新华社Silverlight的要领。
在实际的程序中,你会想优化关键抽奖处理,分离出的一次性设置代码。抽奖处理程序执行每一帧,例如60年代第二次,所以你需要保持尽可能轻。特别是,你应该避免有任何实例对象。 结论
我们通过一个非常简单的Silverlight新华社方案完成运行。
虽然它涵盖了什么是可用在XNA的一小部分,大量的关键概念是在那里和你实际上可以建立一个相当复杂的3D程序,只是使用的类和方法在这里说明。补遗
写这篇文章以来,微软已经发布的Silverlight 5。
发布的版本有更严格的安全限制,比测试版本的用户现在必须明确地授予权限的一个网站,使用3D图形加速。你需要添加下面的代码主要页面的构造,以提示用户做到这一点:

public MainPage()

{

  InitializeComponent();

  if (GraphicsDeviceManager.Current.RenderMode != RenderMode.Hardware)

  {

    string message;

    switch (GraphicsDeviceManager.Current.RenderModeReason)

    {

      case RenderModeReason.Not3DCapable:

        message = "You graphics hardware is not capable of displaying this page ";

        break;

      case RenderModeReason.GPUAccelerationDisabled:

        message = "Hardware graphics acceleration has not been enabled on this web page.\n\n" +

          "Please notify the web site owner.";

        break;

      case RenderModeReason.TemporarilyUnavailable:

        message = "Your graphics hardware is temporarily unavailable.\n\n"+

          "Try reloading the web page or restarting your browser.";

        break;

      case RenderModeReason.SecurityBlocked:

        message =

          "You need to configure your system to allow this web site to display 3D graphics:\n\n" +

          "  1. Right-Click the page\n" +

          "  2. Select 'Silverlight'\n" +

          "     (The 'Microsoft Silverlight Configuration' dialog will be displayed)\n" +

          "  3. Select the 'Permissions' tab\n" +

          "  4. Find this site in the list and change its 3D Graphics permission from 'Deny' to 'Allow'\n" +

          "  5. Click 'OK'\n" +

          "  6. Reload the page";

        break;

      default:

        message = "Unknown error";

        break;

    }

    MessageBox.Show(message,"3D Content Blocked", MessageBoxButton.OK);

  }

}


不幸的是,微软并没有提供良好的支持,使这是一个简单的用户体验。(安迪・鲍威尔)

回答

评论会员:萨沙・巴伯 时间:2012/02/07
好文章,我只会说这是比只是一个"Hello World"示例
评论会员:戴夫克尔 时间:2012/02/07
的尼斯文章

感谢分享。