I have a height map function from GPU Gems 2 Chapter 18, where they're generating a set of B/W pixels from this equation: H(x,y,t) = Σi=0N h ( Axi x + Bxi,  Ayi y + Byi,  Ati x + Bti )

The article suggests using 4 height maps to generate the final height map, so that's N = 4. I understand it's using 3 equations of a line to describe the 2D plotting of a 1D B/W pixel. So, I have to iterate through a set of points, say from (0,0) to (100,100):

  • [ x0 - x100,  y0 - y100,,  t0 - t100 ]

So that's a "for loop" of 100 x 100 x 100 and with the 4 times that's 100 x 100 x 100 x 4 loops, the number of A's,B's and T's, i.e. the data I would need to provide would be:

  • [ A0x, A0y, A0t ] , [ B0x, B0y, B0t ]

  • [ A1x, A1y, A1t ] , [ B1x, B1y, B1t ]

  • [ A2x, A2y, A2t ] , [ B2x, B2y, B2t ]

  • [ A3x, A3y, A3t ] , [ B3x, B3y, B3t ]

My question is, is this correct? Are my for loops correct? Did I interpret the equation OK so that its just 4 for loops of 4x100x100x100 and the 24 pieces of data are all I need to generate this map?

I'm implementing this in javascript, using a plot pixel function.

Edit: I have another problem, how do I output the data? If I have say a 100x100 pixel height map, how do I "keep" only the data that applies to that area, do I just "throw away" the rest of the data in a conditional if statement that only does within that range?

Edit: also it was my understanding that x and y were the plots for the u and v of the height map and t was that alpha channel? I think I'm misunderstanding that part if the equation


Your understanding of the article seems correct, it is explaining a process of superimposing 4 separate height maps onto each other to represent surface displacement with water. You could write it as four separate loops if you wanted, but why not condense it into a single loop that accesses each of the four height maps each iteration?

  • \$\begingroup\$ I'd love to if I could understand how to do it. It's probably very simple, but all this math is confusing me a bit. \$\endgroup\$ – jaysonpowers May 5 '13 at 2:28
  • 1
    \$\begingroup\$ You should start by thinking about what you are trying to do, and understand the solution from a ten thousand foot view first. Height map displacement is a process by which a vertex is displaced vertically using a black and white color scale, black being the negative peak, and white being the positive. This article describes a process of blending heightmaps, as well as selecting the most appropriate map based on the distance the water is from the view point. \$\endgroup\$ – Evan May 5 '13 at 3:22
  • 2
    \$\begingroup\$ Also, they represent their height maps using three components, not simply two. The first two components (x/y) represent colorized displacement, while the third component represents time. The equation that they have simply demonstrates how they sum these components from separate height maps to generate a displacement at a specific location. Focus less on the specific details of the implementation, and more on understanding the theory behind the implementation. You may then find yourself writing a simpler (or better) solution based on the context. \$\endgroup\$ – Evan May 5 '13 at 3:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.