Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Parallax


havenphillip

129 views

Parallax is a cheap way to add a lot of 3D details to any scene. The less vertices on a mesh the better, because parallax doesn't actually add any geometric information. And it requires only the bare minimum number of vertices to work. That makes it fast. And the effect is believable. All you really need is a heightmap and a dream... It's a lot of fun trying different textures with it, and if I could I'd use it for everything.

However, there are a few limitations to parallax. The first problem you run into  is that it has trouble with the curve. It works best on a flat plane or a slightly curved surface. I've tried this on boulders and such and there is always a problem somewhere at the grazing angles (see below at the parallax occlusion shader). Secondly, parallax sort of "sinks in" to the texture, so your depth is slightly off, thus when you use this texture on the ground and then put objects on it, you get a slight sense that things are always floating a bit. I've done what I can to reduce this problem and you can get away with using it on floors so long as you are not trying to get extreme parallax depth out of it. POM is awesome, but for floors you may also consider the pixel depth offset shader or the parallax + splat shader.

Noob tips: I think a good general rule of thumb for using parallax is to think in terms of how far your texture details are meant to stick out. In the case of the bricks you're looking at something like an inch from the surface. In that case you can get away with using the base or the classic parallax. But if your details are meant to stick out further (up to about 5 or 6 inches) then you may want to consider parallax occlusion. You can also improve the speed of your parallax shader by scaling down your normal, specular, and height maps in a 2D image manipulation program such as GIMP of Photoshop because the parallax effect is doing some of the work. And if you're not using a lot of depth, or you're not catching the grazing angles, you can reduce your parallax steps in the shaders for speed.

So on to the shaders:

Classic parallax is the first shader in this noob_shader series where we actually do something within the vertex stage of the shader by adding what's called a "TBN matrix," which allows for the texture to shift slightly according to the view angle (see link in shader for more on this). This classic parallax effect should be seen as an extension to the normals because the parallax itself is subtle. I haven't messed with this one much, but since parallax is so cheap this could be used to replace the base shader in many cases to add just a little extra to the scene detail, and I reused this brick texture to imply that connection to the base shader here:

1264711214_classicparallax.thumb.jpg.2293c9a1236d92036fd4a3402a9ad06a.jpg

26_classic parallax.zip

 

Next we have parallax occlusion (or POM). Parallax occlusion takes parallax to a whole new level. Here we use a different version of the TBN matrix - and one I prefer  - because it allows me to adjust the degree of the effect at the grazing angle. Increase the value in this line below (in the vertex stage of the shader) and the effect will flatten along the sides relative to the view angle, and this allows you to use parallax on more rounded objects. Smooth, rolling hills, for instance. But you may have to go back and adjust the parallax depth after raising this:

    TBN_Matrix[2][2] -= 0.25; //lateral reduction

POM creates several layers or slices of the texture according to the heightmap and stacks them with a "for" loop, creating a 3D effect down "into" the texture. It then slides these layers around according to the heightmap and the view angle. You may notice that there are still sharp corners and edges on the mesh. This is because the parallax effect doesn't cross those bounds. It's a trick of the eye. Not geometry. Note all the tiny little details you can get in there:

pom.thumb.jpg.9d374863e1f60df1ca46ec856372909a.jpg

27_parallax occlusion.zip

 

Next is my attempt at UE4's pixel depth offset (PDO) using gl_FragDepth in glsl. You can see in the circled area what this shader does. It is essentially the POM but the heightmap is used to overlap objects in the scene which furthers the impression of a non-flat surface...using textures on a flat surface. I haven't tried this on anything but a flat floor but I suspect it will work similarly to the POM shader, so it may work on rolling hills and such. Previous versions of this shader worked fairly well on stuff like that. The rocks overlapping the wall near the bottom are actually just the flat texture. One word of note: the gl_FragDepth affects the plane slightly so when you set objects on this surface manually push them down into it a little bit.

pdo.thumb.jpg.f60b04183a523ca6304fc928655a1fee.jpg

28_parallax pixel depth offset.zip

 

Here's a parallax + splat shader. I kind of love this thing. Want to put bullet holes on a stop sign or cracks in the sidewalk for cheap? This is the shader to do that. I sometimes refer to it as the "damage" shader because that's essentially the effect this shader yields. And this is probably the most widely useful of these four because the majority of the surface is at the correct depth. I've tried this with success even on very angled surfaces and it works pretty well even there. Note the bool in the shader. This allows you to "puncture" the mesh or not. Use true for bulletholes and such, or false if you don't want something to go all the way through. Also make  sure your alpha masks are set to something other than DXT1 and you're not using .jpg image format.

763166878_footstepsinsnow.thumb.jpg.d4f8f46554c3c2e29489f8ed36c6ce49.jpg

29_parallax + splat.zip

 

Happy shading!

 

Next: Simplex Noise...

  • Like 4

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...