Silverlight C# 游戏开发:L8 材质和贴图-阿里云开发者社区

开发者社区> IoT> 正文
登录阅读全文

Silverlight C# 游戏开发:L8 材质和贴图

简介:

对于3D来说,主要的组成要素是:模型、灯光、摄像机,模型中的贴图部分不容忽视,贴图为模型带来生命力,在游戏开发当中非常重要,了解贴图的方式可以帮助我们作出,这一篇主要是说有关于贴图方面的内容。下面是今天的实例:

 

记得有一位朋友曾经说过,3D世界总会回归到2D当中,此话很有道理,无论我们怎么构建3D世界仍然还只是在面前的屏幕上显示,而这个就是典型的3D到2D,其实,我们都被欺骗了,所有看到的都不是真正意义上的3D世界,是通过计算出来的结果,伟大的数学在这里发挥到了极致,就如Balder就是典型的通过计算的方式将3D控件渲染到Silverlight的平面上,只要对3D数学有一定的了解,都可以作出一个3D世界,说了这些有什么用呢?和贴图有很大的关系,大部分的开发者可能只是知道“贴”却对其原理一知半解,贴图的英文一般称之是Texture,贴图仅仅是另外一个子集下面的一个部分,而这个更大的集合是材质Material,要知道,世间万物并非仅仅只有纹理,它包含了诸如漫反射(diffuse)和反射(reflection)的属性,所以你仔细看某一个事物的时候,在不同的时空看到的结果不是一样。如果讨论3D世界,我想可能也非一时之事,今天咱们就之说说材质。

下面展示了一个3D世界中的典型材质赋予方式:

 

在Balder当中,Balder.Objects.Geometries对象都带有Material属性,只要对这个属性进行设置即可。


  1. material = new Material();  
  2. Balder.Imaging.Image image = Runtime.Instance.ContentManager.Load<Balder.Imaging.Image>("/Balder_Studio;component/Res/map01.jpg");  
  3. material.DiffuseMap = new ImageMap(image) ;  
  4. material.DiffuseMapOpacity = 1;  
  5. material.Opacity = 1;  
  6. material.DoubleSided = true;  
  7.    
  8.  
上面的代码是创建一个基本的材质,然后从资源中读取一个贴图给Diffuse上,上次有位朋友问我如何在Balder中读取一个图片,其方式就是上面的方式,需要提醒的是,现在这种方法只能读取自身工程的文件,如果是外部的话,就会报错。

好吧,其实今天所有的核心就在上面的几行代码当中,下面仅仅是做了控制,现在我们弄一个UI控制界面,来操作材质和贴图使我们更加直观。

 

为了方便起见,这次用上了属性绑定,界面的XAML如下:


  1. <UserControl 
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  6.     xmlns:local="clr-namespace:Balder_Studio" x:Class="Balder_Studio.Lesson08" 
  7.     mc:Ignorable="d" 
  8.     d:DesignHeight="441" d:DesignWidth="550">      
  9.     <Grid>          
  10.         <Grid x:Name="LayoutRoot" Background="White" d:IsLocked="True"/> 
  11.         <StackPanel Margin="12,8,0,0" HorizontalAlignment="Left" Height="218" VerticalAlignment="Top"> 
  12.             <StackPanel Margin="0" Orientation="Horizontal" Visibility="Collapsed"> 
  13.                 <TextBlock Margin="0,9,0,0" FontSize="12" Width="118"><Run Text="贴图透明度"/></TextBlock> 
  14.                 <Slider x:Name="SliderOpacity" Value="1" Width="140" Maximum="1" LargeChange="0.2"/> 
  15.                 <TextBlock x:Name="TextValue" Text="{Binding Value, ElementName=SliderOpacity}" Margin="0,9,0,0" FontSize="12" Width="71"/> 
  16.             </StackPanel> 
  17.             <StackPanel Height="28" Orientation="Horizontal" VerticalAlignment="Bottom"> 
  18.                 <TextBlock Margin="0,8,0,0" FontSize="12" Width="118" Text="贴图"/> 
  19.                 <ComboBox x:Name="DiffuseMapSel" Width="140"> 
  20.                 </ComboBox> 
  21.                 <Button Content="清理贴图" Width="60" Click="Button_Click_ClearDiffuseMap"></Button> 
  22.             </StackPanel> 
  23.             <StackPanel Margin="0" Orientation="Horizontal"> 
  24.                 <TextBlock Margin="0,9,0,0" FontSize="12" Width="118"><Run Text="贴图"/><Run Text="透明度"/></TextBlock> 
  25.                 <Slider x:Name="SliderDOpacity" Width="140" Maximum="1" Value="1" LargeChange="0.2"/> 
  26.                 <TextBlock Text="{Binding Value, ElementName=SliderDOpacity}" Margin="0,9,0,0" FontSize="12" Width="71"/> 
  27.             </StackPanel> 
  28.             <StackPanel Height="28" Orientation="Horizontal" VerticalAlignment="Bottom"> 
  29.                 <TextBlock Margin="0,8,0,0" FontSize="12" Width="118" Text="反射贴图"/> 
  30.                 <ComboBox x:Name="ReflectionMapSel" Width="140"/> 
  31.                 <Button Content="清理贴图" Width="60" Click="Button_Click_ClearReflectionMap"></Button> 
  32.             </StackPanel> 
  33.             <StackPanel Margin="0" Orientation="Horizontal"> 
  34.                 <TextBlock Margin="0,9,0,0" FontSize="12" Width="118"><Run Text="反射"/><Run Text="贴图"/><Run Text="透明度"/></TextBlock> 
  35.                 <Slider x:Name="SliderROpacity" Width="140" Maximum="1" Value="1" LargeChange="0.2"/> 
  36.                 <TextBlock Text="{Binding Value, ElementName=SliderROpacity}" Margin="0,9,0,0" FontSize="12" Width="71"/> 
  37.             </StackPanel> 
  38.         </StackPanel>          
  39.     </Grid> 
  40. </UserControl> 

然后后台代码如下,做了简单的注释,相信各位高手会明白的。

后台代码 

  1. //////////////////////////////////////////////////  
  2. // Silvery Night  
  3. // Nowpaper原创Silverlight Balder3D文章,共同研究和探讨:)  
  4. //   
  5. // http://www.nowpaper.net  
  6. // http://www.cnblogs.com/nowpaper  
  7. //////////////////////////////////////////////////  
  8. using System;  
  9. using System.Windows.Threading;  
  10. using System.Windows.Controls;  
  11. using System.Windows.Media;  
  12. using System.Windows.Media.Imaging;  
  13. using Balder.Math;  
  14. using Balder.Objects.Geometries;  
  15. using Balder.View;  
  16. using Balder.Lighting;  
  17. using Balder.Execution;  
  18. using System.Windows;  
  19. using System.Windows.Resources;  
  20. using Balder.Materials;  
  21. using Balder.Assets;  
  22. using System.Windows.Data;  
  23. using System.Collections.Generic;  
  24.  
  25. namespace Balder_Studio  
  26. {  
  27.     public partial class Lesson08 : UserControl  
  28.     {  
  29.         //Heightmap  
  30.         Heightmap heightmap = new Heightmap();  
  31.         Camera camera = new Camera();  
  32.         //材质  
  33.         Material material = new Material();  
  34.         //贴图文件列表  
  35.         public List<string> ImageList = new List<string>()  
  36.         {  
  37.             "/Balder_Studio;component/Res/map01.jpg",  
  38.             "/Balder_Studio;component/Res/map02.jpg",  
  39.             "/Balder_Studio;component/Res/map03.jpg",  
  40.             "/Balder_Studio;component/Res/map04.jpg"  
  41.         };  
  42.         public Lesson08()  
  43.         {  
  44.             InitializeComponent();  
  45.  
  46.             InitializeUILogic();  
  47.  
  48.             //L1  
  49.             Game game = new Game() { Width = 600Height = 400 };  
  50.             game.Camera = camera;  
  51.             game.Camera.Position = new Coordinate(100, 120, 150);  
  52.             game.Camera.Target = new Coordinate(0, 0, 0);  
  53.             game.Children.Add(new OmniLight()  
  54.             {  
  55.                 Position = new Coordinate(0, 100, 0),  
  56.                 Ambient = Colors.Transparent,  
  57.                 Specular = Colors.Transparent,  
  58.                 Diffuse = Colors.Transparent,  
  59.                 Strength = 0.55,  
  60.             });  
  61.             //L3  
  62.             Game_Axis axis_x = new Game_Axis(new Vertex(-300, 0, 0), new Vertex(300, 0, 0), Colors.Red);  
  63.             Game_Axis axis_y = new Game_Axis(new Vertex(0, -300, 0), new Vertex(0, 300, 0), Colors.Blue);  
  64.             Game_Axis axis_z = new Game_Axis(new Vertex(0, 0, -300), new Vertex(0, 0, 300), Colors.Green);  
  65.             game.Children.Add(axis_x);  
  66.             game.Children.Add(axis_y);  
  67.             game.Children.Add(axis_z);  
  68.  
  69.               
  70.             heightmap.Dimension = new Dimension() { Width = 128Height = 128 };  
  71.             heightmap.LengthSegments = 2;  
  72.             heightmap.HeightSegments = 2;  
  73.             heightmap.InteractionEnabled = true;  
  74.  
  75.             //L8  
  76.             //从位图中创建高度图  
  77.             CreateHeightMapFormBitmap(new Uri("/Balder_Studio;component/Res/heightmap.jpg", UriKind.Relative));  
  78.             //通过ContentManager读取指定贴图  
  79.             Balder.Imaging.Image image = Runtime.Instance.ContentManager.Load<Balder.Imaging.Image>("/Balder_Studio;component/Res/map01.jpg");  
  80.             //漫反射贴图  
  81.             material.DiffuseMap = new ImageMap(image) ;  
  82.             //漫射贴图透明度  
  83.             material.DiffuseMapOpacity = 1;  
  84.             //材质透明度  
  85.             material.Opacity = 1;  
  86.             //双面材质  
  87.             material.DoubleSided = true;  
  88.             //将材质附上  
  89.             heightmap.Material = material;  
  90.  
  91.             game.Children.Add(heightmap);  
  92.  
  93.             LayoutRoot.Children.Add(game);  
  94.  
  95.             this.KeyDown += new System.Windows.Input.KeyEventHandler(Lesson08_KeyDown);              
  96.         }  
  97.         //初始化UI  
  98.         private void InitializeUILogic()  
  99.         {              
  100.             foreach (var item in ImageList)  
  101.             {  
  102.                 Image image = new Image() { Width = 128Height = 128 };  
  103.                 Image image1 = new Image() { Width = 128Height = 128 };  
  104.                 imageimage1.Source = image.Source = new BitmapImage(new Uri(item, UriKind.Relative));  
  105.                 DiffuseMapSel.Items.Add(image);  
  106.                 ReflectionMapSel.Items.Add(image1);  
  107.             }  
  108.             DiffuseMapSel.SelectionChanged += new SelectionChangedEventHandler(MapSel_SelectionChanged);  
  109.             ReflectionMapSel.SelectionChanged += new SelectionChangedEventHandler(MapSel_SelectionChanged);  
  110.             SliderOpacity.ValueChanged += new RoutedPropertyChangedEventHandler<double>(SliderOpacity_ValueChanged);  
  111.             SliderDOpacity.ValueChanged += new RoutedPropertyChangedEventHandler<double>(SliderOpacity_ValueChanged);  
  112.             SliderROpacity.ValueChanged += new RoutedPropertyChangedEventHandler<double>(SliderOpacity_ValueChanged);  
  113.         }          
  114.  
  115.         void MapSel_SelectionChanged(object sender, SelectionChangedEventArgs e)  
  116.         {  
  117.             var comboBox = sender as ComboBox;  
  118.             if(comboBox.SelectedIndex == -1)  
  119.                 return;  
  120.             var filename = ImageList[comboBox.SelectedIndex];  
  121.             Balder.Imaging.Image image;  
  122.             image = Runtime.Instance.ContentManager.Load<Balder.Imaging.Image>(filename);  
  123.             if (sender == DiffuseMapSel)  
  124.             {  
  125.                 material.DiffuseMap = new ImageMap(image);  
  126.             }  
  127.             else  
  128.             {  
  129.                 if (ReflectionMapSel == sender)   
  130.                 {  
  131.                     material.ReflectionMap = new ImageMap(image);  
  132.                 }  
  133.             }  
  134.         }         
  135.  
  136.         void SliderOpacity_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)  
  137.         {  
  138.             if (sender == SliderOpacity)  
  139.             {  
  140.                 material.Opacity = e.NewValue;  
  141.             }  
  142.             else  
  143.             {  
  144.                 if (sender == SliderDOpacity)  
  145.                 {  
  146.                     material.DiffuseMapOpacity = e.NewValue;  
  147.                 }  
  148.                 else  
  149.                 {  
  150.                     if (sender == SliderROpacity)  
  151.                     {  
  152.                         material.ReflectionMapOpacity = e.NewValue;  
  153.                     }  
  154.                 }  
  155.             }  
  156.         }  
  157.           
  158.         void Lesson08_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)  
  159.         {  
  160.             switch (e.Key)  
  161.             {  
  162.                 case System.Windows.Input.Key.W:  
  163.                     {  
  164.                         var c = camera.Target - camera.Position;  
  165.                         camera.Position += c / 10;  
  166.                         camera.Target += c / 10;  
  167.                     }  
  168.                     break;  
  169.                 case System.Windows.Input.Key.S:  
  170.                     {  
  171.                         var c = camera.Target - camera.Position;  
  172.                         camera.Position -c / 10;  
  173.                         camera.Target -c / 10;  
  174.                     }  
  175.                     break;  
  176.             }  
  177.         }  
  178.  
  179.           
  180.  
  181.         //从位图中创建高度图  
  182.         void CreateHeightMapFormBitmap(Uri uri)  
  183.         {  
  184.             BitmapImage bitmap = new BitmapImage();  
  185.             //从资源中取得BitmapStream  
  186.             StreamResourceInfo sri = Application.GetResourceStream(uri);  
  187.             bitmap.SetSource(sri.Stream);  
  188.             //生成WriteableBitmap  
  189.             WriteableBitmap writeablebitmap = new WriteableBitmap(bitmap);  
  190.             //创建高度图数组  
  191.             float[,] HeightmapArray = new float[bitmap.PixelHeight, bitmap.PixelWidth];  
  192.             //将数组拷贝到高度图数组  
  193.             for (int i = 0; i < bitmap.PixelHeight; i++)  
  194.             {  
  195.                 for (int j = 0; j < bitmap.PixelWidth; j++)  
  196.                 {  
  197.                     int index = bitmap.PixelWidth * i + j;  
  198.                     int pixel = writeablebitmap.Pixels[index];  
  199.                     byte[] bytes = BitConverter.GetBytes(pixel);  
  200.                     //计算:颜色越深则越低,颜色月浅则越高,50是最高的高度值  
  201.                     HeightmapArray[i, j] = ((float)(bytes[0] + bytes[1] + bytes[2]) / 3) / 255 * 50;  
  202.                 }  
  203.             }  
  204.             //赋值  
  205.             heightmap.HeightmapArray = HeightmapArray;  
  206.         }  
  207.  
  208.         private void Button_Click_ClearDiffuseMap(object sender, RoutedEventArgs e)  
  209.         {  
  210.             heightmap.Material.DiffuseMap = null;  
  211.         }  
  212.  
  213.         private void Button_Click_ClearReflectionMap(object sender, RoutedEventArgs e)  
  214.         {  
  215.             heightmap.Material.ReflectionMap = null;  
  216.         }  
  217.     }  
  218. }  
好了,我们下面看看效果,使用上述代码实现即可,可以点击直接下载工程浏览和测试,那么运行的预览效果如下:

工程中如果缺少Balder.dll请在这里快速下载:SL4_Balder.rar

下一篇我们介绍材质的应用,如何对模型进行贴图和更换贴图,以及贴图的属性,同时可能还结合HeightMap依据地理信息制作真实地图,那么下次再见。


本文转自nowpaper 51CTO博客,原文链接:http://blog.51cto.com/nowpaper/710920

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
IoT
使用钉钉扫一扫加入圈子
+ 订阅

物联网软硬件开发者一站式基地

其他文章
最新文章
相关文章