Mohammad Shaker
mohammadshaker.com
@ZGTRShaker
2011, 2012, 2013, 2014
XNA Game Development
L07 – Skybox and Terrian
SkyBox
• Advanced SkyBoxes
– With Terrain
• Riemers web site
– http://www.riemers.net/eng/Tutorials/XNA/Csharp/series4.php...
SkyBox
• How to make a sky?!
Skydome
• Skydome
Skydome
• Skydome
– You’ll use is a conventional 3D model, previously
made in a modeling tool and processed by the
Content...
Skydome
• Skydome
– You’ll use is a conventional 3D model, previously
made in a modeling tool and processed by the
Content...
Skydome
• Whenever the camera moves, the skybox or skydome should move with the
camera, so the camera always remains in th...
Skydome
• Skydome
– the sky is created as a hemisphere using only one texture, and is positioned above the scene
– is easy...
Skydome
• Skydome
– the sky is created as a hemisphere using only one texture, and is positioned above the scene
– is easy...
Skydome
• Skydome
– the sky is created as a hemisphere using only one texture, and is positioned above the scene
– is easy...
Skydome
• Skydome
– the sky is created as a hemisphere using only one texture, and is positioned above the scene
– is easy...
Creating skydome
Apress, Chapter 13, Skydome approach
Creating skydome
• Loading the skydome “Hemisphere”
public void Load(string modelFileName)
{
model = Content.Load<Model>(G...
Creating skydome
• Updating the Sky
public override void Update(GameTime time)
{
BaseCamera camera = cameraManager.ActiveC...
Creating skydome
• Drawing the Sky
public override void Draw(GameTime time)
{
GraphicsDevice.DepthStencilState = DepthSten...
Creating skydome
• Drawing the Sky
public override void Draw(GameTime time)
{
GraphicsDevice.DepthStencilState = DepthSten...
Creating skydome
• Drawing the Sky
public override void Draw(GameTime time)
{
GraphicsDevice.DepthStencilState = DepthSten...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.DepthStencilState = DepthStencilState.None;
for...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Creating skydome
public override void Draw(GameTime time)
{
GraphicsDevice.RenderState.DepthBufferEnable = false;
foreach ...
Another way?
SkyBox!
SkyBox
• The camera is always positioned in the center of the sky
• Innovative approach!
– Illusion of Endless Boundaries!
SkyBox
• How to create it?
SkyBox
• Creating the Box
– six faces, each face has a different texture
SkyBox
• Creating the Box
– six faces, each face has a different texture
SkyBox
• Creating the Box
– six faces, each face has a different texture
– only 12 triangles!
SkyBox
• Microsoft Book, Chapter 10
– “Adding Skies and Horizons to Your Levels”
SkyBox
• Loading Textures, Global Scope
Texture2D frontTexture, backTexture, groundTexture,
leftTexture, rightTexture, sky...
SkyBox
• Loading Textures, Global Scope
• LoadContent()
Texture2D frontTexture, backTexture, groundTexture,
leftTexture, r...
SkyBox
• Then drawing 4 textures with? each time we (translate, rotate,... etc)
SkyBox
• Then drawing 4 textures with Transformation each time we (translate, rotate,... etc)
SkyBox
• Then drawing 4 textures with Transformation each time we (translate, rotate,... etc)
SkyBox
SkyBox
SkyBox
SkyBox
SkyBox
SkyBox at rbwhitaker web site
SkyBox at rbwhitaker web site
Where to look for skybox and textures?
• Acquiring SkyBox Textures
– A Google image search for "skybox" will usually give ...
Terrain
Terrain
• Advanced Terrains
– Rbwhitaker web site
• http://rbwhitaker.wikidot.com/skyboxes-1
– Riemers web site
• http://w...
Terrain
– Innovative games Web Site
Terrain
– Innovative games Web Site
Terrain
• Innovative games
• Web Site Terrain with fog!
Terrain
http://www.packtpub.com/article/environmental-effects
Terrain
• http://www.packtpub.com/article/environmental-effects
Terrain - packtpub
Terrain
– Many ways to create a terrain
• From
– From File “image”
– From File “raw”
• With  Without
– With Shaders
– With...
Terrain
• Using Planetside’s Terragen!
– Create your own customized terrain!
– www.planetside.co.uk/terragen/
• Using Eart...
Height map
Planetside’s
Terragen
Planetside’s
Terragen
Planetside’s Terragen
Planetside’s
Terragen
Earth
Sculptor
Earth
Sculptor
Terrain – Rimer’s,
Creating from file “image”
http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series1/Terrain_from_file.php
Terrain – Rimer’s,
Creating from file “image”
Terrain - packtpub
• How to do it perfectly?!
Terrain
Chapter 11, Generating a Terrain
Page: 227
TerrainTerrain
Terrain
• Height Maps
Terrain
• Height Maps
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Creating Terrain Class
Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName);
int heightMapSiz...
Terrain
• Manipulate through VertexBuffer
Terrain
• Manipulate through VertexBuffer
Terrain
• Manipulate through VertexBuffer
Terrain
private int[] GenerateTerrainIndices()
{
int numIndices = numTriangles * 3;
int[] indices = new int[numIndices];
i...
Terrain
private int[] GenerateTerrainIndices()
{
int numIndices = numTriangles * 3;
int[] indices = new int[numIndices];
i...
Terrain
• Generating the Position and Texture Coordinate of the Vertices
for (float i = -halfTerrainDepth; i <= halfTerrai...
for (float i = -halfTerrainDepth; i <= halfTerrainDepth; i += blockScale)
for (float j = -halfTerrainWidth; j <= halfTerra...
Terrain
• Generating the Position and Texture Coordinate of the Vertices
for (float i = -halfTerrainDepth; i <= halfTerrai...
Terrain
• Generating the Position and Texture Coordinate of the Vertices
for (float i = -halfTerrainDepth; i <= halfTerrai...
Terrain
• Generating the Position and Texture Coordinate of the Vertices
for (float i = -halfTerrainDepth; i <= halfTerrai...
Terrain
• Generating the Position and Texture Coordinate of the Vertices
for (float i = -halfTerrainDepth; i <= halfTerrai...
Terrain
• Texturing
float tu = 0; float tv = 0;
float tuDerivative = 1.0f / (vertexCountX - 1);
float tvDerivative = 1.0f ...
Terrain
• Texturing
float tu = 0; float tv = 0;
float tuDerivative = 1.0f / (vertexCountX - 1);
float tvDerivative = 1.0f ...
Terrain
• Creating Normals
Multitexturing Techniques
Multitexturing
Advanced Terrain
• Multitexturing
“App1-MultitexturedTerrain”
Advanced
Terrain
Advanced
Terrain
“App1-MultitexturedTerrain”
Advanced Terrain
Normal Mapping Technique
Advanced Terrain – Normal Mapping Technique
Advanced Terrain – Normal Mapping Technique
Advanced Terrain – Normal Mapping Technique
Advanced Terrain – Normal Mapping Technique
Using the normal mapping technique, you can add the illusion of small-scale de...
• Creating the Terrain Effects (Apress, Page 277)
Find this at
“App2-MultitexturedNormalMappedTerrain”
Terrain - Querying the Terrain’s Height
Terrain - Querying the Terrain’s Height?
Terrain
• Querying the Terrain’s Height?
Terrain
• Querying the Terrain’s Height?
– you first need to calculate this position relative to the terrain’s vertex grid...
Terrain
• Querying the Terrain’s Height?
– you first need to calculate this position relative to the terrain’s vertex grid...
Terrain
• Quad Tree
Terrain
• Quad Tree – The concept
Terrain
• Check out the videos in the appendix
Terrain
• Querying the Terrain’s Height?
– you first need to calculate this position relative to the terrain’s vertex grid...
Terrain
• Querying the Terrain’s Height?
No Built-in Methods
Terrain
• Querying the Terrain’s Height?
Creating our own Transformation class
You can store the transformations that are ...
Terrain
• Querying the Terrain’s Height
Terrain
• Querying the Terrain’s Height
// Get the position relative to the terrain grid
Vector2 positionInGrid = new Vect...
Terrain
• Querying the Terrain’s Height
// Get the position relative to the terrain grid
Vector2 positionInGrid = new Vect...
Terrain
• Querying the Terrain’s Height
// Get the position relative to the terrain grid
Vector2 positionInGrid = new Vect...
Terrain
• Querying the Terrain’s Height
// Get the position relative to the terrain grid
Vector2 positionInGrid = new Vect...
Terrain
• Querying the Terrain’s Height
// Get the position relative to the terrain grid
Vector2 positionInGrid = new Vect...
Terrain
• Querying the Terrain’s Height
// Get the position relative to the terrain grid
Vector2 positionInGrid = new Vect...
Terrain
• Querying the Terrain’s Height
// Get the position relative to the terrain grid
Vector2 positionInGrid = new Vect...
Terrain
• A block in the terrain grid. If the x position inside the block is bigger than the z
position, the object is in ...
Terrain
• After finding in which triangle the object is positioned, you can obtain the height
of a position inside this tr...
Advanced Terrain
Ray and Terrain Collision
Advanced Terrain - Ray and Terrain Collision
Advanced Terrain - Ray and Terrain Collision
Advanced Terrain - Ray and Terrain Collision
• Quite Straight forward
// A good ray step is half of the blockScale
Vector3...
Terrain
• Chapter 25: Terrain with Height Detection
• From “.raw” file
Terrain - packtpub
• How to do it perfectly?!
Terrain - packtpub
• Read the Height map and convert it to a proper array
Terrain - packtpub
• How to get the Heights?!
Color[] heightMapData = new Color[width * length];
heightMap.GetData<Color>(...
Terrain - packtpub
• How to get the Heights?!
Color[] heightMapData = new Color[width * length];
heightMap.GetData<Color>(...
Terrain - packtpub
heights[,]
Terrain - packtpub
• Read the Height map and convert it to a proper array?!
Terrain - packtpub
• Read the Height map and convert it to a proper array?!
Terrain - packtpub
• Read the Height map and convert it to a proper array?!
Terrain
• The demonstration used in this chapter shows how to create and implement a
height map using an 8-bit “.raw” gray...
Terrain
• Proper texture covers your terrain,
• Original terrain created is 257 pixels wide by 257 pixels high
floorTextur...
Terrain
• The vertex buffer used for storing the terrain vertices must now use the height
information from the height map....
Terrain
• Controlling Height!
void UpdateCameraHeight()
{
const float HOVER_AMOUNT = 0.25f;
float height = CellHeight(cam....
Terrain
• Controlling Height!
void UpdateCameraHeight()
{
const float HOVER_AMOUNT = 0.25f;
float height = CellHeight(cam....
Terrain
• How to know the current HoverAmount?!
Terrain
• How to know the current HoverAmount?!
Terrain
• How to know the current HoverAmount?!
Terrain – Back to our awesome terrain
• http://www.packtpub.com/article/environmental-effects
Advanced Terrain - Multitexturing
Advanced Terrain – Multitexturing / packtpub
• Just another custom shader!
Advanced Terrain – Spice it Up!
Advanced Terrain – Spice it Up!
Adding a detail texture
to the terrain
Advanced Terrain –Detailing / packtpub
• Snow Texture!
Advanced Terrain –Detailing / packtpub
Advanced Terrain –Detailing / packtpub
• Details appear when camera is close to the terrain to fake a higher resolution
te...
Advanced Terrain –Detailing / packtpub
Advanced Terrain –Detailing / packtpub
Advanced Terrain –Detailing / packtpub
• How to add all these tress and bushes!
– Code?!!!!! :@
– XML
Advanced Terrain –Detailing / packtpub
Advanced Terrain –Detailing / packtpub
• Clouds!  Billboarding!
Advanced Terrain –Detailing / packtpub
Advanced Terrain
Advanced Terrain
Advanced Terrain
XNA L07–Skybox and Terrain
XNA L07–Skybox and Terrain
XNA L07–Skybox and Terrain
XNA L07–Skybox and Terrain
XNA L07–Skybox and Terrain
Upcoming SlideShare
Loading in …5
×

XNA L07–Skybox and Terrain

849 views
715 views

Published on

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
849
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
44
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

XNA L07–Skybox and Terrain

  1. 1. Mohammad Shaker mohammadshaker.com @ZGTRShaker 2011, 2012, 2013, 2014 XNA Game Development L07 – Skybox and Terrian
  2. 2. SkyBox • Advanced SkyBoxes – With Terrain • Riemers web site – http://www.riemers.net/eng/Tutorials/XNA/Csharp/series4.php – Rbwhitaker web site • http://rbwhitaker.wikidot.com/skyboxes-1
  3. 3. SkyBox • How to make a sky?!
  4. 4. Skydome • Skydome
  5. 5. Skydome • Skydome – You’ll use is a conventional 3D model, previously made in a modeling tool and processed by the Content Pipeline. – Handled through XNA’s Model class!
  6. 6. Skydome • Skydome – You’ll use is a conventional 3D model, previously made in a modeling tool and processed by the Content Pipeline. – Handled through XNA’s Model class!
  7. 7. Skydome • Whenever the camera moves, the skybox or skydome should move with the camera, so the camera always remains in the center of the volume
  8. 8. Skydome • Skydome – the sky is created as a hemisphere using only one texture, and is positioned above the scene – is easy to animate its textures!
  9. 9. Skydome • Skydome – the sky is created as a hemisphere using only one texture, and is positioned above the scene – is easy to animate its textures!
  10. 10. Skydome • Skydome – the sky is created as a hemisphere using only one texture, and is positioned above the scene – is easy to animate its textures!
  11. 11. Skydome • Skydome – the sky is created as a hemisphere using only one texture, and is positioned above the scene – is easy to animate its textures!
  12. 12. Creating skydome Apress, Chapter 13, Skydome approach
  13. 13. Creating skydome • Loading the skydome “Hemisphere” public void Load(string modelFileName) { model = Content.Load<Model>(GameAssetsPath.MODELS PATH + modelFileName); }
  14. 14. Creating skydome • Updating the Sky public override void Update(GameTime time) { BaseCamera camera = cameraManager.ActiveCamera; // Center the camera in the SkyDome transformation.Translate = new Vector3(camera.Position.X, 0.0f, camera.Position.Z); // Rotate the SkyDome slightly transformation.Rotate += new Vector3(0, (float)time.ElapsedGameTime.TotalSeconds * 0.5f, 0); base.Update(time); }
  15. 15. Creating skydome • Drawing the Sky public override void Draw(GameTime time) { GraphicsDevice.DepthStencilState = DepthStencilState.None; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.DepthStencilState = DepthStencilState.Default; base.Draw(time); }
  16. 16. Creating skydome • Drawing the Sky public override void Draw(GameTime time) { GraphicsDevice.DepthStencilState = DepthStencilState.None; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.DepthStencilState = DepthStencilState.Default; base.Draw(time); }
  17. 17. Creating skydome • Drawing the Sky public override void Draw(GameTime time) { GraphicsDevice.DepthStencilState = DepthStencilState.None; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.DepthStencilState = DepthStencilState.Default; base.Draw(time); }
  18. 18. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  19. 19. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  20. 20. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.DepthStencilState = DepthStencilState.None; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.DepthStencilState = DepthStencilState.Default; base.Draw(time); }
  21. 21. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  22. 22. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  23. 23. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  24. 24. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  25. 25. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  26. 26. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  27. 27. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  28. 28. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  29. 29. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  30. 30. Creating skydome public override void Draw(GameTime time) { GraphicsDevice.RenderState.DepthBufferEnable = false; foreach (ModelMesh modelMesh in model.Meshes) { // We are only rendering models with BasicEffect foreach (BasicEffect basicEffect in modelMesh.Effects) SetEffectMaterial(basicEffect); modelMesh.Draw(); } GraphicsDevice.RenderState.DepthBufferEnable = true; base.Draw(time); }
  31. 31. Another way?
  32. 32. SkyBox!
  33. 33. SkyBox • The camera is always positioned in the center of the sky • Innovative approach! – Illusion of Endless Boundaries!
  34. 34. SkyBox • How to create it?
  35. 35. SkyBox • Creating the Box – six faces, each face has a different texture
  36. 36. SkyBox • Creating the Box – six faces, each face has a different texture
  37. 37. SkyBox • Creating the Box – six faces, each face has a different texture – only 12 triangles!
  38. 38. SkyBox • Microsoft Book, Chapter 10 – “Adding Skies and Horizons to Your Levels”
  39. 39. SkyBox • Loading Textures, Global Scope Texture2D frontTexture, backTexture, groundTexture, leftTexture, rightTexture, skyTexture;
  40. 40. SkyBox • Loading Textures, Global Scope • LoadContent() Texture2D frontTexture, backTexture, groundTexture, leftTexture, rightTexture, skyTexture; frontTexture = Content.Load<Texture2D>("Imagesfront"); backTexture = Content.Load<Texture2D>("Imagesback"); leftTexture = Content.Load<Texture2D>("Imagesleft"); rightTexture = Content.Load<Texture2D>("Imagesright"); groundTexture = Content.Load<Texture2D>("Imagesground2"); skyTexture = Content.Load<Texture2D>("Imagessky");
  41. 41. SkyBox • Then drawing 4 textures with? each time we (translate, rotate,... etc)
  42. 42. SkyBox • Then drawing 4 textures with Transformation each time we (translate, rotate,... etc)
  43. 43. SkyBox • Then drawing 4 textures with Transformation each time we (translate, rotate,... etc)
  44. 44. SkyBox
  45. 45. SkyBox
  46. 46. SkyBox
  47. 47. SkyBox
  48. 48. SkyBox
  49. 49. SkyBox at rbwhitaker web site
  50. 50. SkyBox at rbwhitaker web site
  51. 51. Where to look for skybox and textures? • Acquiring SkyBox Textures – A Google image search for "skybox" will usually give you all sorts of good skyboxes – .dds file format – terathon.com – http://developer.amd.com/archive/gpu/cubemapgen/pages/default.aspx
  52. 52. Terrain
  53. 53. Terrain • Advanced Terrains – Rbwhitaker web site • http://rbwhitaker.wikidot.com/skyboxes-1 – Riemers web site • http://www.riemers.net/eng/Tutorials/XNA/Csharp/series4.php • http://www.riemers.net/eng/Tutorials/XNA/Csharp/series1.php – Innovative games web site • http://www.innovativegames.net/blog/blog/2009/05/29/xna-game-engine-tutorial-12-introduction- to-hlsl-and-improved-terrain/
  54. 54. Terrain – Innovative games Web Site
  55. 55. Terrain – Innovative games Web Site
  56. 56. Terrain • Innovative games • Web Site Terrain with fog!
  57. 57. Terrain http://www.packtpub.com/article/environmental-effects
  58. 58. Terrain • http://www.packtpub.com/article/environmental-effects
  59. 59. Terrain - packtpub
  60. 60. Terrain – Many ways to create a terrain • From – From File “image” – From File “raw” • With Without – With Shaders – Without Shaders
  61. 61. Terrain • Using Planetside’s Terragen! – Create your own customized terrain! – www.planetside.co.uk/terragen/ • Using EarthSculptor – http://www.earthsculptor.com/
  62. 62. Height map
  63. 63. Planetside’s Terragen
  64. 64. Planetside’s Terragen
  65. 65. Planetside’s Terragen
  66. 66. Planetside’s Terragen
  67. 67. Earth Sculptor
  68. 68. Earth Sculptor
  69. 69. Terrain – Rimer’s, Creating from file “image”
  70. 70. http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series1/Terrain_from_file.php Terrain – Rimer’s, Creating from file “image”
  71. 71. Terrain - packtpub • How to do it perfectly?!
  72. 72. Terrain Chapter 11, Generating a Terrain Page: 227
  73. 73. TerrainTerrain
  74. 74. Terrain • Height Maps
  75. 75. Terrain • Height Maps
  76. 76. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  77. 77. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  78. 78. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  79. 79. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  80. 80. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  81. 81. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  82. 82. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  83. 83. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  84. 84. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  85. 85. Terrain • Creating Terrain Class Texture2D heightMapTexture = Content.Load<Texture2D>(heightMapFileName); int heightMapSize = heightMapTexture.Width*heightMapTexture.Height; heightMap = new Color[heightMapSize]; heightMapTexture.GetData<Color>(heightMap); this.vertexCountX = heightMapTexture.Width; this.vertexCountZ = heightMapTexture.Height;
  86. 86. Terrain • Manipulate through VertexBuffer
  87. 87. Terrain • Manipulate through VertexBuffer
  88. 88. Terrain • Manipulate through VertexBuffer
  89. 89. Terrain private int[] GenerateTerrainIndices() { int numIndices = numTriangles * 3; int[] indices = new int[numIndices]; int indicesCount = 0; for (int i = 0; i < (vertexCountZ - 1); i++) { for (int j = 0; j < (vertexCountX - 1); j++) { int index = j + i * vertexCountZ; // First triangle indices[indicesCount++] = index; indices[indicesCount++] = index + 1; indices[indicesCount++] = index + vertexCountX + 1; // Second triangle indices[indicesCount++] = index + vertexCountX + 1; indices[indicesCount++] = index + vertexCountX; indices[indicesCount++] = index; } } return indices; }
  90. 90. Terrain private int[] GenerateTerrainIndices() { int numIndices = numTriangles * 3; int[] indices = new int[numIndices]; int indicesCount = 0; for (int i = 0; i < (vertexCountZ - 1); i++) { for (int j = 0; j < (vertexCountX - 1); j++) { int index = j + i * vertexCountZ; // First triangle indices[indicesCount++] = index; indices[indicesCount++] = index + 1; indices[indicesCount++] = index + vertexCountX + 1; // Second triangle indices[indicesCount++] = index + vertexCountX + 1; indices[indicesCount++] = index + vertexCountX; indices[indicesCount++] = index; } } return indices; }
  91. 91. Terrain • Generating the Position and Texture Coordinate of the Vertices for (float i = -halfTerrainDepth; i <= halfTerrainDepth; i += blockScale) for (float j = -halfTerrainWidth; j <= halfTerrainWidth; j += blockScale) vertices[vertexCount].Position = new Vector3(j,heightMap[vertexCount].R * heightScale, i); float terrainWidth = (vertexCountX - 1) * blockScale; float terrainDepth = (vertexCountZ - 1) * blockScale; float halfTerrainWidth = terrainWidth * 0.5f; float halfTerrainDepth = terrainDepth * 0.5f;How to get the “Height” that correspond to each “Color value”?!
  92. 92. for (float i = -halfTerrainDepth; i <= halfTerrainDepth; i += blockScale) for (float j = -halfTerrainWidth; j <= halfTerrainWidth; j += blockScale) vertices[vertexCount].Position = new Vector3(j,heightMap[vertexCount].R * heightScale, i); float terrainWidth = (vertexCountX - 1) * blockScale; float terrainDepth = (vertexCountZ - 1) * blockScale; float halfTerrainWidth = terrainWidth * 0.5f; float halfTerrainDepth = terrainDepth * 0.5f; Terrain you’ll simply take the red color component of each color as height for a vertex
  93. 93. Terrain • Generating the Position and Texture Coordinate of the Vertices for (float i = -halfTerrainDepth; i <= halfTerrainDepth; i += blockScale) for (float j = -halfTerrainWidth; j <= halfTerrainWidth; j += blockScale) vertices[vertexCount].Position = new Vector3(j,heightMap[vertexCount].R * heightScale, i); float terrainWidth = (vertexCountX - 1) * blockScale; float terrainDepth = (vertexCountZ - 1) * blockScale; float halfTerrainWidth = terrainWidth * 0.5f; float halfTerrainDepth = terrainDepth * 0.5f;
  94. 94. Terrain • Generating the Position and Texture Coordinate of the Vertices for (float i = -halfTerrainDepth; i <= halfTerrainDepth; i += blockScale) for (float j = -halfTerrainWidth; j <= halfTerrainWidth; j += blockScale) vertices[vertexCount].Position = new Vector3(j,heightMap[vertexCount].R * heightScale, i); float terrainWidth = (vertexCountX - 1) * blockScale; float terrainDepth = (vertexCountZ - 1) * blockScale; float halfTerrainWidth = terrainWidth * 0.5f; float halfTerrainDepth = terrainDepth * 0.5f; Are we done just yet?
  95. 95. Terrain • Generating the Position and Texture Coordinate of the Vertices for (float i = -halfTerrainDepth; i <= halfTerrainDepth; i += blockScale) for (float j = -halfTerrainWidth; j <= halfTerrainWidth; j += blockScale) vertices[vertexCount].Position = new Vector3(j,heightMap[vertexCount].R * heightScale, i); float terrainWidth = (vertexCountX - 1) * blockScale; float terrainDepth = (vertexCountZ - 1) * blockScale; float halfTerrainWidth = terrainWidth * 0.5f; float halfTerrainDepth = terrainDepth * 0.5f; Texturing!
  96. 96. Terrain • Generating the Position and Texture Coordinate of the Vertices for (float i = -halfTerrainDepth; i <= halfTerrainDepth; i += blockScale) for (float j = -halfTerrainWidth; j <= halfTerrainWidth; j += blockScale) vertices[vertexCount].Position = new Vector3(j,heightMap[vertexCount].R * heightScale, i); float terrainWidth = (vertexCountX - 1) * blockScale; float terrainDepth = (vertexCountZ - 1) * blockScale; float halfTerrainWidth = terrainWidth * 0.5f; float halfTerrainDepth = terrainDepth * 0.5f; Each vertex also has a U and V texture coordinate that should vary between (0, 0) and (1, 1), where (0, 0) corresponds to the top left, (1, 0) to the top right and (1, 1) to the bottom right of the texture
  97. 97. Terrain • Texturing float tu = 0; float tv = 0; float tuDerivative = 1.0f / (vertexCountX - 1); float tvDerivative = 1.0f / (vertexCountZ - 1);
  98. 98. Terrain • Texturing float tu = 0; float tv = 0; float tuDerivative = 1.0f / (vertexCountX - 1); float tvDerivative = 1.0f / (vertexCountZ - 1);
  99. 99. Terrain • Creating Normals
  100. 100. Multitexturing Techniques
  101. 101. Multitexturing
  102. 102. Advanced Terrain • Multitexturing
  103. 103. “App1-MultitexturedTerrain” Advanced Terrain
  104. 104. Advanced Terrain “App1-MultitexturedTerrain”
  105. 105. Advanced Terrain Normal Mapping Technique
  106. 106. Advanced Terrain – Normal Mapping Technique
  107. 107. Advanced Terrain – Normal Mapping Technique
  108. 108. Advanced Terrain – Normal Mapping Technique
  109. 109. Advanced Terrain – Normal Mapping Technique Using the normal mapping technique, you can add the illusion of small-scale details to the terrain’s mesh, without needing to increase the complexity of its mesh You create this illusion by slightly manipulating the lighting in each pixel of your terrain. Variations in lighting are created by the deviated normals. Remember that the amount of lighting falling onto a triangle is determined by the normals of its vertices.
  110. 110. • Creating the Terrain Effects (Apress, Page 277)
  111. 111. Find this at “App2-MultitexturedNormalMappedTerrain”
  112. 112. Terrain - Querying the Terrain’s Height
  113. 113. Terrain - Querying the Terrain’s Height?
  114. 114. Terrain • Querying the Terrain’s Height?
  115. 115. Terrain • Querying the Terrain’s Height? – you first need to calculate this position relative to the terrain’s vertex grid. – You can do this by subtracting the queried world position from the terrain’s origin position, making sure to take the terrain’s world translation and rotation into account.
  116. 116. Terrain • Querying the Terrain’s Height? – you first need to calculate this position relative to the terrain’s vertex grid. – You can do this by subtracting the queried world position from the terrain’s origin position, making sure to take the terrain’s world translation and rotation into account. • Then you need to know in which quad of the terrain grid the position you are querying is located, which you can do by dividing the calculated position (relative to the terrain) by the terrain’s block scale.
  117. 117. Terrain • Quad Tree
  118. 118. Terrain • Quad Tree – The concept
  119. 119. Terrain • Check out the videos in the appendix
  120. 120. Terrain • Querying the Terrain’s Height? – you first need to calculate this position relative to the terrain’s vertex grid. – You can do this by subtracting the queried world position from the terrain’s origin position, making sure to take the terrain’s world translation and rotation into account. • Then you need to know in which quad of the terrain grid the position you are querying is located, which you can do by dividing the calculated position (relative to the terrain) by the terrain’s block scale. How to get our current position?!
  121. 121. Terrain • Querying the Terrain’s Height? No Built-in Methods
  122. 122. Terrain • Querying the Terrain’s Height? Creating our own Transformation class You can store the transformations that are currently set on the terrain (translate, rotate, and scale) inside the Terrain class, using the Transformation class created in Chapter 10, Apress.
  123. 123. Terrain • Querying the Terrain’s Height
  124. 124. Terrain • Querying the Terrain’s Height // Get the position relative to the terrain grid Vector2 positionInGrid = new Vector2( positionX - (StartPosition.X + Transformation.Translate.X), positionZ - (StartPosition.Y + Transformation.Translate.Z)); // Calculate the grid position Vector2 blockPosition = new Vector2( (int)(positionInGrid.X / blockScale), (int)(positionInGrid.Y / blockScale));
  125. 125. Terrain • Querying the Terrain’s Height // Get the position relative to the terrain grid Vector2 positionInGrid = new Vector2( positionX - (StartPosition.X + Transformation.Translate.X), positionZ - (StartPosition.Y + Transformation.Translate.Z)); // Calculate the grid position Vector2 blockPosition = new Vector2( (int)(positionInGrid.X / blockScale), (int)(positionInGrid.Y / blockScale));
  126. 126. Terrain • Querying the Terrain’s Height // Get the position relative to the terrain grid Vector2 positionInGrid = new Vector2( positionX - (StartPosition.X + Transformation.Translate.X), positionZ - (StartPosition.Y + Transformation.Translate.Z)); // Calculate the grid position Vector2 blockPosition = new Vector2( (int)(positionInGrid.X / blockScale), (int)(positionInGrid.Y / blockScale));
  127. 127. Terrain • Querying the Terrain’s Height // Get the position relative to the terrain grid Vector2 positionInGrid = new Vector2( positionX - (StartPosition.X + Transformation.Translate.X), positionZ - (StartPosition.Y + Transformation.Translate.Z)); // Calculate the grid position Vector2 blockPosition = new Vector2( (int)(positionInGrid.X / blockScale), (int)(positionInGrid.Y / blockScale));
  128. 128. Terrain • Querying the Terrain’s Height // Get the position relative to the terrain grid Vector2 positionInGrid = new Vector2( positionX - (StartPosition.X + Transformation.Translate.X), positionZ - (StartPosition.Y + Transformation.Translate.Z)); // Calculate the grid position Vector2 blockPosition = new Vector2( (int)(positionInGrid.X / blockScale), (int)(positionInGrid.Y / blockScale));
  129. 129. Terrain • Querying the Terrain’s Height // Get the position relative to the terrain grid Vector2 positionInGrid = new Vector2( positionX - (StartPosition.X + Transformation.Translate.X), positionZ - (StartPosition.Y + Transformation.Translate.Z)); // Calculate the grid position Vector2 blockPosition = new Vector2( (int)(positionInGrid.X / blockScale), (int)(positionInGrid.Y / blockScale));
  130. 130. Terrain • Querying the Terrain’s Height // Get the position relative to the terrain grid Vector2 positionInGrid = new Vector2( positionX - (StartPosition.X + Transformation.Translate.X), positionZ - (StartPosition.Y + Transformation.Translate.Z)); // Calculate the grid position Vector2 blockPosition = new Vector2( (int)(positionInGrid.X / blockScale), (int)(positionInGrid.Y / blockScale));
  131. 131. Terrain • A block in the terrain grid. If the x position inside the block is bigger than the z position, the object is in the top triangle. Otherwise, the object is in the bottom triangle.
  132. 132. Terrain • After finding in which triangle the object is positioned, you can obtain the height of a position inside this triangle through a bilinear interpolation of the height of the triangle’s vertices. • Use the following code for the GetHeight method to calculate the height of a terrain’s position private float GetHeight(float positionX, float positionZ)
  133. 133. Advanced Terrain Ray and Terrain Collision
  134. 134. Advanced Terrain - Ray and Terrain Collision
  135. 135. Advanced Terrain - Ray and Terrain Collision
  136. 136. Advanced Terrain - Ray and Terrain Collision • Quite Straight forward // A good ray step is half of the blockScale Vector3 rayStep = ray.Direction * blockScale * 0.5f; Vector3 rayStartPosition = ray.Position; // Linear search - Loop until you find a point inside and outside the terrain Vector3 lastRayPosition = ray.Position; ray.Position += rayStep; float height = GetHeight(ray.Position); while (ray.Position.Y > height && height >= 0) { lastRayPosition = ray.Position; ray.Position += rayStep; height = GetHeight(ray.Position); }
  137. 137. Terrain • Chapter 25: Terrain with Height Detection • From “.raw” file
  138. 138. Terrain - packtpub • How to do it perfectly?!
  139. 139. Terrain - packtpub • Read the Height map and convert it to a proper array
  140. 140. Terrain - packtpub • How to get the Heights?! Color[] heightMapData = new Color[width * length]; heightMap.GetData<Color>(heightMapData);
  141. 141. Terrain - packtpub • How to get the Heights?! Color[] heightMapData = new Color[width * length]; heightMap.GetData<Color>(heightMapData);
  142. 142. Terrain - packtpub heights[,]
  143. 143. Terrain - packtpub • Read the Height map and convert it to a proper array?!
  144. 144. Terrain - packtpub • Read the Height map and convert it to a proper array?!
  145. 145. Terrain - packtpub • Read the Height map and convert it to a proper array?!
  146. 146. Terrain • The demonstration used in this chapter shows how to create and implement a height map using an 8-bit “.raw” grayscale image. • Each pixel in the.raw image stores information about the elevation in a range between 0 and 255. • the height data in each pixel can then be accessed with the pixel row and column number!
  147. 147. Terrain • Proper texture covers your terrain, • Original terrain created is 257 pixels wide by 257 pixels high floorTexture = Content.Load<Texture2D>("Imagesterrain"); const int NUM_COLS = 257; const int NUM_ROWS = 257;
  148. 148. Terrain • The vertex buffer used for storing the terrain vertices must now use the height information from the height map. InitializeVertexBuffer() // for NUM_COLS, NUM_ROWS
  149. 149. Terrain • Controlling Height! void UpdateCameraHeight() { const float HOVER_AMOUNT = 0.25f; float height = CellHeight(cam.position); cam.view.Y += height - cam.position.Y + HOVER_AMOUNT; cam.position.Y += height - cam.position.Y + HOVER_AMOUNT; }
  150. 150. Terrain • Controlling Height! void UpdateCameraHeight() { const float HOVER_AMOUNT = 0.25f; float height = CellHeight(cam.position); cam.view.Y += height - cam.position.Y + HOVER_AMOUNT; cam.position.Y += height - cam.position.Y + HOVER_AMOUNT; }
  151. 151. Terrain • How to know the current HoverAmount?!
  152. 152. Terrain • How to know the current HoverAmount?!
  153. 153. Terrain • How to know the current HoverAmount?!
  154. 154. Terrain – Back to our awesome terrain • http://www.packtpub.com/article/environmental-effects
  155. 155. Advanced Terrain - Multitexturing
  156. 156. Advanced Terrain – Multitexturing / packtpub • Just another custom shader!
  157. 157. Advanced Terrain – Spice it Up!
  158. 158. Advanced Terrain – Spice it Up! Adding a detail texture to the terrain
  159. 159. Advanced Terrain –Detailing / packtpub • Snow Texture!
  160. 160. Advanced Terrain –Detailing / packtpub
  161. 161. Advanced Terrain –Detailing / packtpub • Details appear when camera is close to the terrain to fake a higher resolution texture
  162. 162. Advanced Terrain –Detailing / packtpub
  163. 163. Advanced Terrain –Detailing / packtpub
  164. 164. Advanced Terrain –Detailing / packtpub • How to add all these tress and bushes! – Code?!!!!! :@ – XML
  165. 165. Advanced Terrain –Detailing / packtpub
  166. 166. Advanced Terrain –Detailing / packtpub • Clouds! Billboarding!
  167. 167. Advanced Terrain –Detailing / packtpub
  168. 168. Advanced Terrain
  169. 169. Advanced Terrain
  170. 170. Advanced Terrain

×