XNA L07–Skybox and Terrain

1. Mohammad Shaker mohammadshaker.com @ZGTRShaker 2011, 2012, 2013, 2014 XNA Game Development L07 – Skybox and Terrian

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. SkyBox • How to make a sky?!

4. Skydome • Skydome

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. 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. 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. 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. Creating skydome Apress, Chapter 13, Skydome approach

13. Creating skydome • Loading the skydome “Hemisphere” public void Load(string modelFileName) { model = Content.Load<Model>(GameAssetsPath.MODELS PATH + modelFileName); }

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. 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. 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. 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); }

31. Another way?

32. SkyBox!

33. SkyBox • The camera is always positioned in the center of the sky • Innovative approach! – Illusion of Endless Boundaries!

34. SkyBox • How to create it?

35. SkyBox • Creating the Box – six faces, each face has a different texture

36. SkyBox • Creating the Box – six faces, each face has a different texture

37. SkyBox • Creating the Box – six faces, each face has a different texture – only 12 triangles!

38. SkyBox • Microsoft Book, Chapter 10 – “Adding Skies and Horizons to Your Levels”

39. SkyBox • Loading Textures, Global Scope Texture2D frontTexture, backTexture, groundTexture, leftTexture, rightTexture, skyTexture;

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. SkyBox • Then drawing 4 textures with? each time we (translate, rotate,... etc)

42. SkyBox • Then drawing 4 textures with Transformation each time we (translate, rotate,... etc)

43. SkyBox • Then drawing 4 textures with Transformation each time we (translate, rotate,... etc)

44. SkyBox

45. SkyBox

46. SkyBox

47. SkyBox

48. SkyBox

49. SkyBox at rbwhitaker web site

50. SkyBox at rbwhitaker web site

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. Terrain

54. 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/

55. Terrain – Innovative games Web Site

56. Terrain – Innovative games Web Site

57. Terrain • Innovative games • Web Site Terrain with fog!

58. Terrain http://www.packtpub.com/article/environmental-effects

59. Terrain • http://www.packtpub.com/article/environmental-effects

60. Terrain - packtpub

61. Terrain – Many ways to create a terrain • From – From File “image” – From File “raw” • With Without – With Shaders – Without Shaders

62. Terrain • Using Planetside’s Terragen! – Create your own customized terrain! – www.planetside.co.uk/terragen/ • Using EarthSculptor – http://www.earthsculptor.com/

63. Height map

64. Planetside’s Terragen

68. Earth Sculptor

69. Earth Sculptor

70. Terrain – Rimer’s, Creating from file “image”

71. http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series1/Terrain_from_file.php Terrain – Rimer’s, Creating from file “image”

72. Terrain - packtpub • How to do it perfectly?!

73. Terrain Chapter 11, Generating a Terrain Page: 227

74. TerrainTerrain

75. Terrain • Height Maps

76. Terrain • Height Maps

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;

87. Terrain • Manipulate through VertexBuffer

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. 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; }

92. 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”?!

93. 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

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;

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; Are we done just yet?

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; Texturing!

97. 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

98. Terrain • Texturing float tu = 0; float tv = 0; float tuDerivative = 1.0f / (vertexCountX - 1); float tvDerivative = 1.0f / (vertexCountZ - 1);

99. Terrain • Texturing float tu = 0; float tv = 0; float tuDerivative = 1.0f / (vertexCountX - 1); float tvDerivative = 1.0f / (vertexCountZ - 1);

100. Terrain • Creating Normals

101. Multitexturing Techniques

102. Multitexturing

103. Advanced Terrain • Multitexturing

104. “App1-MultitexturedTerrain” Advanced Terrain

105. Advanced Terrain “App1-MultitexturedTerrain”

106. Advanced Terrain Normal Mapping Technique

107. Advanced Terrain – Normal Mapping Technique

110. 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.

111. • Creating the Terrain Effects (Apress, Page 277)

116. Find this at “App2-MultitexturedNormalMappedTerrain”

117. Terrain - Querying the Terrain’s Height

118. Terrain - Querying the Terrain’s Height?

119. Terrain • Querying the Terrain’s Height?

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.

121. 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.

122. Terrain • Quad Tree

123. Terrain • Quad Tree – The concept

124. Terrain • Check out the videos in the appendix

125. 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?!

126. Terrain • Querying the Terrain’s Height? No Built-in Methods

127. 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.

128. Terrain • Querying the Terrain’s Height

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));

136. 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.

137. 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)

138. Advanced Terrain Ray and Terrain Collision

139. Advanced Terrain - Ray and Terrain Collision

140. Advanced Terrain - Ray and Terrain Collision

141. 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); }

142. Terrain • Chapter 25: Terrain with Height Detection • From “.raw” file

143. Terrain - packtpub • How to do it perfectly?!

144. Terrain - packtpub • Read the Height map and convert it to a proper array

145. Terrain - packtpub • How to get the Heights?! Color[] heightMapData = new Color[width * length]; heightMap.GetData<Color>(heightMapData);

146. Terrain - packtpub • How to get the Heights?! Color[] heightMapData = new Color[width * length]; heightMap.GetData<Color>(heightMapData);

147. Terrain - packtpub heights[,]

148. Terrain - packtpub • Read the Height map and convert it to a proper array?!

151. 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!

152. 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;

153. 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

154. 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; }

155. 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; }

156. Terrain • How to know the current HoverAmount?!

159. Terrain – Back to our awesome terrain • http://www.packtpub.com/article/environmental-effects

160. Advanced Terrain - Multitexturing

161. Advanced Terrain – Multitexturing / packtpub • Just another custom shader!

162. Advanced Terrain – Spice it Up!

163. Advanced Terrain – Spice it Up! Adding a detail texture to the terrain

164. Advanced Terrain –Detailing / packtpub • Snow Texture!

165. Advanced Terrain –Detailing / packtpub

166. Advanced Terrain –Detailing / packtpub • Details appear when camera is close to the terrain to fake a higher resolution texture

169. Advanced Terrain –Detailing / packtpub • How to add all these tress and bushes! – Code?!!!!! :@ – XML

171. Advanced Terrain –Detailing / packtpub • Clouds! Billboarding!

173. Advanced Terrain

XNA L07–Skybox and Terrain

More Related Content

Similar to XNA L07–Skybox and Terrain (20)

More from Mohammad Shaker (20)

Recently uploaded (20)

XNA L07–Skybox and Terrain