Friday, November 24, 2017

[Hlsl] Parallax Mapping Tutorial

If you don't have a clue what Tangent Space is about, read this.

This time, Parallax Mapping will be discussed.

Theory
Well, what is a Parallax supposed to be anyway? It's quite a common phenomenon. Actually, it's so common most people wouldn't even notice it as anything out of the ordinary. Let's take a spedometer as a common example for people not sitting behind the steering wheel.

Let's suppose dad's driving at 100km/h. His spedometer also shows that amount more or less. But mom sitting next to him, will see him driving a tad slower. Why, you might ask? Well, it's because dad's viewing the spedometer from the front, so the pointer will sit on top of '100'. From the point of view of mom, it'll be hovering above, let's say, 95km/h. This is because she is viewing it at an angle and there's a depth difference between the needle and the text.

here.


/* VERTEX SHADER
outVS.toeyetangent = mul((camerapos - worldpos),tbnMatrix);
*/


// PIXEL SHADER
float3 toeyetangent = normalize(toeyetangentin);


// The only thing we're doing here is skewing textures. We're only moving 
// textures around. The higher a specific texel is, the more we move it. 
// We'll be skewing in the direction of the view vector too.


// This is a texture coordinate offset. As I said it increases when height
// increases. Also required and worth mentioning is that we're moving along with
// the viewing direction, so multiply the offset by it.
// We also need to specify an effect multiplier. This normaly needs to about 0.4
float2 offset = toeyetangentin.xy*height*0.04f;
texcoordin += offset;


In its most basic form, this is all you need to do Parallax Mapping working. Let's sum things up, shall we?
  • Textures lack depth. Depth is necessary to bring back a 3D feel to it.
  • An important part of the depth illusion is Parallax. We want to bring it back into our textures.
  • To do that, we need to obtain texel depth and the viewing direction. The viewing direction needs to be supplied in Tangent Space to the pixel shader.
  • To do that we need to supply normals, binormals and tangents to the vertex shader. Combining these to a matrix and transposing it gives us the opportunity to transform from world to texture space.
  • Then supply texture coordinates and the tangent space view vector to the pixel shader.
  • Then sample depth from a regular heightmap. Multiply it by the view vector.
  • And tada, you've got your texture coordinate offset. You're then supposed to use this texture coordinate for further sampling.
Let's post a couple of screenshots then. First the one without any parallax mapping.


Now it does include a Parallax Map. It uses a multiplier of 0.4 and a single sample.


Yes, a single sample is all you need. No need to do PCF averaging or anything. Just a single tex instruction per pixel. But as you can see in the latter picture, there are some minor artifacts, especially on steeper viewing angles. To partially fix this, you need to include an offset constant, like this:


float2 offset = toeyetangentin.xy*(height*0.04f-0.01f);
texcoordin += offset;



With this result:


Well, that's pretty much all there is to it. Have fun with it!
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)