Anyone can guess how do they manage to deform the "stones" bitmap under the water? (and with such amazing performance...)

Render the scene to a texture, then put that texture on a grid of vertices and distort the location of the vertices and render that to screen.

Ah... seems like you would need quite a grid...

also idea on how they make the waves? i.e. they make some parts lighter and some darker? do they simply change the colors of the vertices of the grid? its strange cause some waves look so sharp...

I tried doing a grid similar to that with smooth untextured quads and the device starts suffering at 50x50 or so. You need 2 triangles for each square so it's already 5000 triangles... or am i missing something?

These are guesses on my part, but:

- For the waves, maybe you could make use of gl lighting to get light/dark for the waves, perhaps with a light, at a low angle, in one corner or something. You wouldn't have to move the vertices [edit] actually you would for the compression and rarefaction distortion[/edit], but you'd need to recalculate your normals every frame, which might be expensive.

- For the grid, yeah, it'd obviously get pretty expensive pretty fast if you aren't careful. I don't know how much resolution you'd have to have though, since you'd be using GL's per-vertex lighting. I'd maybe try like 10 pixel squares, so on iPhone it'd be a 48x32 grid, which would be 3072 triangles. That should certainly be doable, although I don't know how much the normal calculations for the waves would cost.

That is a very inefficient way to do it. The fast way to do it is to render the scene below the water to a texture, then render the water as a flat plane and use a shader combined with a normal map to deform the texture, as well as perform lighting and fresnel effects. You can also render the reflection and deform that similarly to the refraction..

iPhones don't have shaders.

... although you can do Dot3, but I don't see how that would be helpful

Reubert would be well placed to advise on this. His Duck Duck Duck has similar (but better apparently) effects.

Yes, it would be interesting to hear how this was handled in Duck Duck Duck - the water looks nice indeed...

In my experience rendering a 4800 triangle 60x40 grid (full screen with vertexes at 8 pixel intervals) is totally doable on the hardware, but it's probably overkill for a wave simulation - even half that resolution could work convincingly.

You certainly don't need shaders to do this (obviously, since Koi Pond is doing it in ES1.1.)

As AnotherJake says, this is just a grid where you manipulate the vertex attributes.
See Drew's old distort sample for the general approach.

Hmm, for the light maybe they are just changing the color of the grid vertices (no lighting, just change the color of the vertex if a "light wave" or a "dark wave" is on top of it). It looked to me that you would need pixel-level effects but looking carefully the light effects are not that sharp so a smooth vertex based shading might be enough.

AnotherJake Wrote:iPhones don't have shaders.

... although you can do Dot3, but I don't see how that would be helpful

Oops, I was reading down the column with new posts, and didn't see that this was the iPhone forum... Yes, for fixed function, manipulating the texture coordinates for each vertex on a uniform grid would be the way to go. The weaker hardware of a mobile device is offset by a smaller screen, making it doable. (since as mentioned, you can have each triangle span man pixels and have it still look good)

Hey, I put together a Mac version of Drew's distort demo if you guys wanna play with it: http://www.anotherjake.com/AnotherJake/Distort.html

I just kind of whipped it together real quick, so I don't know if there are issues, but you can give it a try and see how it goes for you.

I guess I should probably chirp in

The DuckDuckDuck water is done with a mesh, moving texture coordinates around. I experimented with moving vertices also, but with an ortho top down view like that it's a waste of time.

One of the biggest problems I faced was with the artifacts of triangle texture coordinate interpolation. In the end I had to make the mesh twice the dimensions of the water simulation and bilinear interpolate. I'm still not sure what exactly I did there, or even why it works, but somehow at 3am one morning I had a eureka moment and the artifacts went away.

Performance was definitely a fine balancing act. It's a 64x96 mesh. At times it was higher but various improvements to quality meant I had to slowly reduce the mesh size to keep the frame rate up. It also took a lot of sharking.

It uses multi-texturing to render both reflection and refraction.

Thanks for the info reubert.

May i ask what how the texture for reflection and refraction is generated? is it made by setting vertices colors on your 64x96 mesh?

From my own experiences:

• use a a mesh with static vertices
• alternate the triangle layout within each cell of the mesh, i.e. if((x+y)%2) then NE&SW else NW&SE triangles
• use multi-texturing, and thus the only thing varying between frames is the texture coords
  

The first texture unit is refraction - i.e the image you're distorting.

The second texture unit is the reflection - typically you provide some faux spherical envmap looking thing and index it's texcoords by some pretend normal.

In terms of artifacts I've usually found it sufficient to box blur the reflection coords.