# Heightmap implementation in javascript question, a 2D water heightmap

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?

• 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. May 5, 2013 at 2:28
• 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.
– Evan
May 5, 2013 at 3:22
• 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.
– Evan
May 5, 2013 at 3:27