How do the hell do the water effect in koi pond?

Member
Posts: 749
Joined: 2003.01
Post: #1
Anyone can guess how do they manage to deform the "stones" bitmap under the water? (and with such amazing performance...)

©h€ck øut µy stuƒƒ åt ragdollsoft.com
New game in development Rubber Ninjas - Mac Games Downloads
Quote this message in a reply
Moderator
Posts: 3,579
Joined: 2003.06
Post: #2
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.
Quote this message in a reply
Member
Posts: 749
Joined: 2003.01
Post: #3
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?

©h€ck øut µy stuƒƒ åt ragdollsoft.com
New game in development Rubber Ninjas - Mac Games Downloads
Quote this message in a reply
Moderator
Posts: 3,579
Joined: 2003.06
Post: #4
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.
Quote this message in a reply
Moderator
Posts: 1,140
Joined: 2005.07
Post: #5
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..
Quote this message in a reply
Moderator
Posts: 3,579
Joined: 2003.06
Post: #6
iPhones don't have shaders.

... although you can do Dot3, but I don't see how that would be helpful
Quote this message in a reply
Member
Posts: 283
Joined: 2006.05
Post: #7
Reubert would be well placed to advise on this. His Duck Duck Duck has similar (but better apparently) effects.
Quote this message in a reply
Member
Posts: 446
Joined: 2002.09
Post: #8
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.
Quote this message in a reply
Sage
Posts: 1,234
Joined: 2002.10
Post: #9
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.
Quote this message in a reply
Member
Posts: 749
Joined: 2003.01
Post: #10
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.

©h€ck øut µy stuƒƒ åt ragdollsoft.com
New game in development Rubber Ninjas - Mac Games Downloads
Quote this message in a reply
Moderator
Posts: 1,140
Joined: 2005.07
Post: #11
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... Blush 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)
Quote this message in a reply
Moderator
Posts: 3,579
Joined: 2003.06
Post: #12
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.
Quote this message in a reply
Member
Posts: 320
Joined: 2003.06
Post: #13
I guess I should probably chirp in Smile

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.

Chopper, iSight Screensavers, DuckDuckDuck: http://majicjungle.com
Quote this message in a reply
Member
Posts: 749
Joined: 2003.01
Post: #14
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?

©h€ck øut µy stuƒƒ åt ragdollsoft.com
New game in development Rubber Ninjas - Mac Games Downloads
Quote this message in a reply
Member
Posts: 45
Joined: 2008.04
Post: #15
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.
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Wave tips 2d water chrisevans1001 1 2,844 Dec 9, 2011 04:12 PM
Last Post: OneSadCookie
  Water effect markhula 9 8,570 May 10, 2011 12:03 AM
Last Post: markhula
  Creating a water effect iamflimflam1 0 2,562 Aug 4, 2009 06:46 AM
Last Post: iamflimflam1
  Odd effect on loading a .png with alpha channel. Madrayken 4 3,099 Jul 14, 2009 03:45 PM
Last Post: Madrayken
  Texture2d rainbow effect on flip THRESHE 15 6,768 Mar 19, 2009 08:33 AM
Last Post: AnotherJake