"offset mapping" or "parallax effect"

[sinbad]

@nfz: Sorry, it's in now.

@leedgitar: I sent you a patch already on the .cg version, hope you got that.

[leedgitar]

Awesome, thanks Steve. I should be slapped for something that stupid, heh

[Kojack]

This may interest you guys. It's from a GDC report on the Unreal Engine 3.0.

The interior of the cathedral was stunning, since its brick walls looked as though each brick had been individually modeled. Up close, not only did the wall look like it had a protruding, textured surface covered with blemishes and scratches, but each brick looked like it cast its own shadow. However, this was just a technical illusion, because the engine uses an advanced form of bump-mapping called "virtual displacement mapping" to make the bricks look three-dimensional. When the texture was removed, it turned out that the wall was almost a completely flat surface.

Sounds a lot like parallax mapping.

Cool, Ogre beat Unreal Engine 3.0 to an effect.
(Well, at least beat them to publically showing an effect)

[Manuel]

that's great!
what has been used to create normal/height map?

[nfz]

There are many different techniques for generating a height map to be used for parallax mapping.

The simplest method is to use the gray scale image of the texture image used on the model. For current generation models the detail is placed into the texture of the model so you can take advantage of that. You then need to do some tweaking of the gray scale so that all the low areas are dark and higher areas get lighter.

Here are the steps that I do to get the final texture to be used for parallax mapping:

1. This is the orginal image that we start with:


2. Using your favourite graphics editor (Gimp) turn the image into a gray scale:


3. Now the fun part. Using the graphic editing tools, shade the objects as if the light was shinning straight down and make the shallow areas dark and the high areas light:


4. The final stage is to generate a normal map from the height map. There are several free tools floating around the web but I wrote my own to learn how to do it and because I wanted some features that others did not have. I decided to have the height map and normal in one texture so my utility takes the height map, generates a normal map and then puts the two into a single texture. The normal map takes up the RGB channels and the height is placed in the alpha channel.


and thats it.

Here is the BeachStone texture applied to the Ogre face with no parralax mapping:


And now parralax mapped with ambient, diffuse, and specular lighting all in one pass on an ATI 8500 using ps.1.4 in OpenGL


A few tips when using this technique:
(NH = normal / height)

don't use jpg for the NH map - to much artifacting
the NH map can be mip mapped
use trilinear filtering on the NH map if mip mapped for best quality
make the NH Map as large as possible for best detail
Don't have abrupt changes in the height map ie black next to white or severe artifacting occurs. Smooth transitions are best.

The technique that is the talk of the town requires the use of a very high polygon count model that defines the detail and then the in game low poly model. As long as both models are set to the same location and orientation you can generate a height map by projecting a normal from the low poly model surface to the high poly model surface. Then its just a matter of generating the normal map from the height map as mentioned before.

Other threads on this forum have mentioned some the free tools that can be used so I won't go into detail here.

[nfz]

For those that are getting tired of the Ogre model with rock textures, here is the robot found in the media folder with parallax mapping. I used the r2skin.jpg texture and turned it into a NH map.



the resulting normal map after gray scaling and touching up.


And the result:


As you can see you don't need to use the high/low polygon model method of getting height data to build a normal map.

[toms]

Very nice shot and useful information about parallax mapping creation.

Thanks Nfz!

It would make a nice addition to the ogre demo!

[Manuel]

you are the man!
very usefull infos! thank you!

[ApWizard]

thanks Man!

[Eastgrove]

This could be extracted and touched up a bit with links to the various tools and put in the tutorial section.

[bad_camel]

This could be extracted and touched up a bit with links to the various tools and put in the tutorial section.

I look forward to reading your tutorial contribution

[Cyberdigitus]

that's amazing.

i knew this was possible with ogre, but seeing it is still making me feel like i made the right choice for my projects. I'll have to redo my crappy spaceships though.

and so it only needs 1.4 ? heh that put's the 3.0 farcry patch in yet another perspective eh.

can't wait to play around with shaders, but my vector math is nowhere on the required level and my GPU can't run this kind of shaders yet. (a crappy gf3)

[Robomaniac]

Sorry to resurect this thread, but i've been having problems getting this to run in my game. It works fine in the Dot3Bump demo (excelent) but when i try to set my water plane (generated the same as in the camera track example), the texture is just black. OffsetMapping.material, .cg, .asm, and the Rockwall and Rockwall_NH textures are in my path (no errors int he log) but it just shows black .

Thanks in advance

[nfz]

silly question but did you enable lighting ie you have a light in the scene? The second silly question is: is the material on the correct side of the plane or put another way is the plane facing the right way up?

[nfz]

Cyberdigitus: you can still use ps.1.1 on a GF3 to do dot3 bump mapping with diffuse and specular lighting in one pass. See the image below, it uses a ps.1.1 asm program to do the effect. Offset mapping does add more of a 3D effect since the illusion of depth in the bumps is greater but dot3 bump mapping is just as effective when not up close as you can see in the pic.

[Robomaniac]

I don't have any single lights in my scene, just ambient light. I will try that today. Thankks

[Robomaniac]

Ok, i added a light, and i can see the material, its just really dark and bad looking.

http://centaurforce.sf.net/web/Images/S ... Shot15.jpg

Please help , i've tried ambient light, turning lighting off in the material, adding 3 lights (which made it green) and i have made only like 50% progress

Thanks in advance

[nfz]

Where is the light in relation to the wall and the camera? Looks like it is way off to the top left corner of the wall, maybe even slightly behind it. Depending on which pixel shader code you are using the light must be in front of the wall in order for the wall to be lit up with offset mapping. You mentioned having the asm in the path so maybe you are using the ps.1.4 version?

[Robomaniac]

The light is positioned with my camera

edit-> i'm using the material/cg/asm included in the dot3bump demo, which works like it should

[nfz]

The only other thing I can think of that gives lighting like that is that there is no Tangent Vector data associated with the vertex data. You must call buildTangentVectors(0, 1) on the mesh in order to be able to use the offset mapping shader. Have a look at line 242 in Dot3Bump.cpp for an example of how to do this.

[Khalin]

nfz you use a different offsetmapping tech than the dot3 demo does correct? if so could you show me the way you set up your alpha/normalmap as to how it reads the maps? If I use your maps I get high specular values in Dot3 and all of the other parts of the mesh become very dark. Using normal maps however I create by using a Nvidia plugin for photoshop and pluging them in creates the correct bumping and specular, however the parallax effect is near non existent, making the faces seem... Flat. In the rockwall texture however the NH map has transparent pixels where the groves of the bricks are. My question then is how do I have to make a normal map so that the Dot3 demo can read it?

[nfz]

I don't use a different offsetmapping technique than the offset mapping material used in the dot3 demo. For the NH map you must have the normal vectors placed in the RGB channels of the texture and the height values placed in the alpha channel if you are using the offset mapping shaders from the dot3 demo.

[Khalin]

still getting no height, must be something that i'm saving wrong =/. I create a new channel from photoshop, put in my Height map (right now trying to redo the NH map for the brick wall so that I can prove its working) and my normal map is in my RGB channel, then I save it as a TGA with alpha and it doesn't quite work. Still only getting the bumpmapping but no parallax. If I switch back to the NH map provided by the cvs then it works. I guess its in the way the file is stored, I will rummage around a bit more =)

[Khalin]

I was right =). Apparently the form is 8 8 8 8 i.e. 32bit per pixel ARGB. From photoshop you have to first save it as a .dds file and then convert from there into a tga =). Now to learn the rest ... =D

[A55b0t]

I don't know much about how this kind of thing is implemented but is it possible to do normal and offset mapping on a billboard (sprite, decal?). I was thinking it would be pretty sweet to do bullet holes , tire tracks etc this way if it could be layered onto the existing textures well and I don't know if any engines currently do that.