​​Chap 17/100: Terrain with 3 SLOP TEXTURES​
​
What I will Learn here?:
​On this tutorial ​​we will learn how to render the terrain with a dinamic texture based on slop angle
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​Note:
Try to move and see the 3 textures on terrain
​
​Let's check our current main source tree, except the LIBs:
​
Added source on White:
​​
​│ Applicationclass.cpp
│ Applicationclass.h
│ counter.h
│ main.cpp
│ main.h
│
├───camera
│ cameraClass.cpp
│ cameraClass.h
│ frustumClass.cpp
│ frustumClass.h​
│ lightClass.cpp
│ lightClass.h
│ positionClass.cpp
│ positionClass.h
│ RenderFrustumClass.cpp
│ RenderFrustumClass.h
│
├───game
│ playerClass.cpp
│ playerClass.h​
│​
├───graphics
│ renderTextureClass.cpp
│ renderTextureClass.h
│ spriteClass.cpp
│ spriteClass.h​
│ textClass.cpp
│ textClass.h
│ textFontClass.cpp
│ textFontClass.h
│
├───input
│ inputClass.cpp
│ inputClass.h
│
├───loader
│ objModelV2Class.cpp
│ objModelV2Class.h
│
├───shader
│ shaderClass.cpp
│ shaderClass.h
│
├───system
│ dx11Class.cpp
│ dx11class.h
│ SystemClass.cpp
│ SystemClass.h
│ xml_loader.cpp
│ xml_loader.h​
│​
​└───terrain
bitmapclass.cpp
bitmapclass.h
Minimapclass.cpp
Minimapclass.h
quadtreeClass.cpp
quadtreeClass.h
terrainClass.cpp
terrainClass.h
terrainManagerClass.cpp
terrainManagerClass.h
​
​​​(main.h) ​
- Set for Chapter 17
​
017terrain_fog_slope.hlsl shader file using Fog an the Slop (based on normals ) to get the proper texture / light:
​
​
////////////////////////////////////////////////////////////////////////////////
// Filename: 017terrain_fog_slope.hlsl
////////////////////////////////////////////////////////////////////////////////
#include "000cbuffer.hlsl"
//////////////
// TYPEDEFS //
//////////////
struct VSIn
{
float4 position : POSITION;
float2 tex : TEXCOORD0; // 5-TEXTURE
float3 normal : NORMAL; //12-LIGHT
float4 color : COLOR; //Not using on this CHAP
};
struct PSIn
{
float4 position : SV_POSITION;
float2 tex : TEXCOORD0; // 5-TEXTURE
float3 normal : NORMAL; //12-LIGHT
float4 color : COLOR; //Not using on this CHAP
float fogFactor : FOG; //17-FOG
};
/////////////
// GLOBALS //
/////////////
//There are three textures we will be using for the three different degrees of slope that we want to handle.
Texture2D grassTexture : register(t0);
Texture2D slopeTexture : register(t1);
Texture2D rockTexture : register(t2);
SamplerState SampleType; // 5-TEXTURE
////////////////////////////////////////////////////////////////////////////////
// Vertex Shader
////////////////////////////////////////////////////////////////////////////////
PSIn MyVertexShader017terrain_fog_slope(VSIn input)
{
PSIn output;
float4 cameraPosition; //FOG
input.position.w = 1.0f; // Change the position vector to be 4 units for proper matrix calculations.
output.position = mul(input.position, WVP); // Calculate the position of the vertex against the world, view, and projection matrices.
output.tex = input.tex; // Store the texture coordinates for the pixel shader.
//LIGHT:
output.normal = normalize(mul(input.normal, (float3x3)worldMatrix));// Calculate the normal vector against the world matrix only.
output.color = input.color; // Send the color map color into the pixel shader.
//FOG:
cameraPosition = mul(input.position, WV); // FOG: Calculate the camera position.
output.fogFactor = saturate((fogEnd - cameraPosition.z) / (fogEnd - fogStart)); // Calculate linear fog.
return output;
}
////////////////////////////////////////////////////////////////////////////////
// Pixel Shader
////////////////////////////////////////////////////////////////////////////////
float4 MyPixelShader017terrain_fog_slope(PSIn input) : SV_TARGET
{
float4 textureColor;
float lightIntensity; //6-
float4 color = ambientColor;
float4 grassColor; //17
float4 slopeColor; //17
float4 rockColor; //17
float slope; //17
float blendAmount; //17
float4 fogColor = float4(0.5f, 0.5f, 0.5f, 1.0f); //FOG 1- Set the color of the fog to grey.
if (input.fogFactor > 0) {
// 17 - Now determine the slope for this pixel, which is just one subtracted from the Y normal.
slope = 1.0f - input.normal.y;
// 17
// Since we have the slope we can now use it in some if statements and determine which texture to use based on the slope of the pixel.
// To make things look smooth we do a linear interpolation between the textures so the transition between each one
// isn't a sharp line in the terrain.
// Determine which texture should be used based on height:
// --------------------------------------------------------------------------------------------------------------------------------------------
if(slope < 0.2)
{
blendAmount = slope / 0.2f;
// Sample the grass color from the texture using the sampler at this texture coordinate location.
grassColor = grassTexture.Sample(SampleType, input.tex);
slopeColor = slopeTexture.Sample(SampleType, input.tex);
textureColor = lerp(grassColor, slopeColor, blendAmount);
}
else
if((slope < 0.7) && (slope >= 0.2f))
{
blendAmount = (slope - 0.2f) * (1.0f / (0.7f - 0.2f));
// Sample the slope color from the texture using the sampler at this texture coordinate location.
slopeColor = slopeTexture.Sample(SampleType, input.tex);
rockColor = rockTexture.Sample(SampleType, input.tex);
textureColor = lerp(slopeColor, rockColor, blendAmount);
}
else
if(slope >= 0.7)
{
// Sample the rock color from the texture using the sampler at this texture coordinate location.
textureColor = rockTexture.Sample(SampleType, input.tex);
}
//LIGHT:
lightIntensity = saturate(dot(input.normal, lightDirection));// Calculate the amount of light on this pixel.
color += (diffuseColor * lightIntensity); // Determine the final diffuse color based on the diffuse color and the amount of light intensity.
color = color * textureColor; // The texture pixel is combined with the light color to create the final color result.
// 2- The fog color equation does a linear interpolation between the texture color and the fog color based on the fog factor input value.
color = input.fogFactor * color + (1.0 - input.fogFactor) * fogColor; // FOG: Calculate the final color using the fog effect equation.
return color;
} else {
clip (-1.0); return (float4)0; // this pixel is too far away (on fog), SKIP it! CLIP IF: (x is less than zero)
}
}
​
​​
​​​​Project Code:
​​​​​​​​​​​​​​​http://woma.no-ip.org/woma/WoMA_PartII_Chap17.zip
​​
​What's next?
On next tutorial we will see how to Render a detail texture on top of these 3 textures
