[code] Water ripples « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

[code] Water ripples

(70 posts) (41 voices)

Started 5 months ago by Birkemose
Latest reply from dinabravo

Tags:

« Previous 123 Next »

clarus
Member

@Birkemose: Thanks for the excellent explanation. I wanted to mention that your code is really well documented too.

How hard would it be to make the effect work within irregular shapes and bounce back? Like, If you had a big star or an oval, have it bounce off the inner walls like it was a container? I imagine you could do the boundary checks with a mask to cut down on wall collision calculations, but what about redirecting the waves after they hit the walls, and potentially making new smaller ones from those? Are you getting more into physics engine territory at that point? I'm curious how you guys would approach that.

Posted 5 months ago #
slembcke
Administrator

@clarus Yes, but you'd need to use a pretty different method. Birkemose's method is calculating the waves at each point in the grid if I'm reading the code correctly. If you wanted them to bounce around you'd need to actually simulate them. It's not very hard though, the technique is pretty old. The 1D wave code I posted to answer varedis's question can be trivially applied in 2D as a separable filter. I actually did both the 1D and 2D wave physics for the Alice in New York book. 1D for the boat scene, and 2D for the ripples in the looking glass. Although I just did simple shading for the 2D waves as I only had a few hours on each scene to stay in the budget.

I'll ask Atomic Antelope if they would mind if I shared the simulation snippets from the Alice book. It was only like 100 lines for each effect including rendering. It could be plugged into Birkemose's mesh code pretty easily to do the image deformations.

Posted 5 months ago #
Birkemose
Moderator

It wasn't hard to do

Get the Video Player

but it starts to smell like brute force.
When a ripple hits the bounds, I simply create a mirrored copy, and flag it "child" ( otherwise the number of ripples explodes )

It is also clearly visible, that the ripples expires a bit abrupt ( not visible in the no-bounce version, as 99% of all ripples expire outside screen )

Posted 5 months ago #
clarus
Member

Nice. In your touch methods, are you just generating new ripples with every touch, then every 100mS as long as the touch is moving or are you doing something else? I like the flow. Are all the ripples you're creating at the same strength?

Posted 5 months ago #
Birkemose
Moderator

I fiddles a bit with ripple settings, and making the bounce ripples stronger.
The entire project is available here.

http://thebackfiregames-dk.temp14.domaindirect.dk/Media/rippleDemo.zip

EDIT:
For some reason the link doesn't work if you just click it. I seems to work if you copy paste it into the browser.

Posted 5 months ago #
clarus
Member

Thanks for posting that. It downloaded for me by just clicking the link. Ok, I see what you're doing--that's even simpler than I imagined. I hadn't thought of using the update delta to manage the timing of the ripples in the touches. Nice simple low-overhead approach.

Posted 5 months ago #
adamk77
Member

Thanks for sharing Birkemose!

It will be really useful. I was looking for something like this recently.

Posted 5 months ago #
Brooksilver
Member

I am wondering, any thoughts on how this could be modified to have animated sprites/layers/images underneath the ripple effect? I see m_texture being set in initWithFile, but this is for a single static image.

Posted 5 months ago #
Birkemose
Moderator

A added this
1) create a new rippleSprite factory method taking a CCTexture2D as parameter, and set the m_texture member directly.
2) create a CCRenderTexture, and provide its sprite.texture property as input to rippleSprite
3) render anything you normally would render, to CCRenderTexture

The downside is, that you effectively render anything two times. First to the CCRenderTexture, and then when you render the rippleSprite.

Posted 5 months ago #
Brooksilver
Member

works. just trying to support portrait mode properly. great work birkemose! cheers

Posted 5 months ago #
yhcliang
Member

so cool. Thanks

Posted 5 months ago #
Birkemose
Moderator

The demo is now available on github
https://github.com/Birkemose/rippleDemo

The current state of the ripple projects, can be seen here, including vertex lighting and caustics.
http://thebackfiregames.wordpress.com/2012/01/16/ripples/

Posted 4 months ago #
p0o0q
Member

Excellent !

Would you please explain more how to add CCLabel/CCSprite (runtime update) underneath the ripple effect? Thanks.

Regards,
p0o0q

Posted 3 months ago #
Birkemose
Moderator
@pOoOq
The rippleSprite renders a texture to a rectangle you define. This is done "manually", ie using OpenGL directly.
So in order to render anything which will be affected by the ripples, you need to include it in the texture you provide for rippleSprite.
The easiest way, is to grab the texture from a CCRenderTexture. You then render your stuff to the CCRenderTexture, and in the draw method of rippleSprite, you then simply bind the texture of the CCRenderNode.
So the changes to rippleSprite only includes maintaining a pointer to the CCTexture2D of the CCRenderTexture, and bind this when drawing.
```
@property ( retain ) CCTexture2D* texture; 

@synthesize texture;

glBindTexture( GL_TEXTURE_2D, [ texture name ] );
```
Posted 3 months ago #
Panajev
Member

I think that it would be useful to render to a low resolution texture and upscale it with bi-linear filtering active. I have used it with the old CCGrid3D ripple effects and it looks quite good(1/4 resolution CCRenderTexture). I'll practice with your code by forking it and doing the least it has to be done to convert it to OpenGL ES 2.0 and Cocos2D 2.0.

Posted 3 months ago #
Panajev
Member

https://github.com/Panajev/rippleDemo

Here it is, a very quick conversion.
I'll toy with shaders next although I do believe that it might be cheaper with vertex trickery on iPad 1 than moving to a full shaders based solution on such a constrained device (pixel processing power:resolution wise).

Posted 3 months ago #
sefiroths
Member

wow it's really cool seeing professionals talking and sharing their solutions!

Posted 3 months ago #
Panajev
Member

Added a small README and made a pull request (one can try ;)). One of the other changes is that the compiler being targeted now is the latest Clang release. Tested with iOS 5.1 Beta 3 on the simulator and on the iPad 1 on which it is a bit slow when played full-screen, but not too slow. Load must be reduced further because the touches are lagging behind a bit too much right now (if you move the finger fast across the screen).

Edit: iPad is full screen and Retina should work too... brute force scale to create the hd and ipad images and adjustments wherever I saw iPhone's resolution being targeted.

Posted 3 months ago #
Birkemose
Moderator

@Panajev
Cool of you to add on this. I really haven't got friendly with github yet, so I have a hard time following.

As for the updates. I use the final rippleSprite for two projects I am currently working on, so classes tend to be specific at this point.
What saved me the most time in my final classes is:
1)
Only scan inside ripple area. I calculate a simple box based on current ripple radius, and only scan that. Saved a lot of calculations, especially when the ripples are "young"
2)
Since I only simulate water, and the center in water simulation settles fast, I also do not scan ripples below a certain radius threshold. While it saves less calculations, it especially adds up on "older" ripples. ( good combination with saving on young ripples )
3)
I count ongoing calculations ( ripple vertices modified ), and based on hardware ( 4999 calculations on a 3G ), I remove oldest ripples. On an iP4 ( double tesselation due to HD ) and max 19999 calculations, it is almost unnoticeable.
4)
Texture correction is dropped above a certain radius, and only vertex lighting is done. The distortion is so subtle at this point, that vertex lighting makes a better result at higher radius. Vertex lighting at lower radius is darkened, because that makes twirls look more impressive. At hight radius vertex lighting is lightened because it makes it look more like caustics on the background.

The caustics is made like HalfLife, by scanning two patterns in opposite Y direction. I added a modulation in X direction, to make it more subtle and less repeatable.

I hope this made sense ...

Posted 3 months ago #
Paco_777
Member

Hi,
Just saw this topic.
You may already know it, but there is a quite good ripple demo effect provided by Apple in their samples :
http://developer.apple.com/library/ios/#samplecode/GLCameraRipple/Introduction/Intro.html

I don't know how easy this could be integrated with Cocos2D.
I also don't know how good your results are compared to this demo, but, in case you're not aware of that demo, you should have a look at it, since it might contain some interesting info.

Posted 3 months ago #
Panajev
Member

Performance on iPad 1 is still too low once you drag your finger around for a while. Still, this experiment allowed me to practice with quite a few things.

Posted 3 months ago #
Birkemose
Moderator

@paco_777
That demo uses ES2.0 and vertex shaders. That is SO much cheating ...

Posted 3 months ago #
Panajev
Member

AFAICS, the only two shaders I saw were related to image capturing... maybe I should look at it again.

I am now going for a shaders based solution myself... right now testing a fragment shader solution (I have to get the center of the function moving according to the user's touch, the shader already supports changing its center, and then work on decay of the ripples as they repeat indefinitely right now), but I would like to explore your solution with a mixed CPU+VS approach (tessellate on the CPU, transform position and UV's on the GPU).

Another thing that I am trying to do is to make sure we can make the effect more resolution dependent: this way you can handle the fragment shader load on a low resolution buffer and then scale it up with bi-linear filtering. I am trying to think about how Cocos2D handles rendering: ideally, for this to work as easily as possible the -draw method would update a bitmap for the surface and geometric operations such as scaling, translation, and rotation were done in a separate pass starting from the surface bitmap.

I'll keep updating that github project to test this.

Hehe, cramming too many random thoughts in a single post.

Posted 3 months ago #
bryce
Member

I noticed if I try to use CCLiquid, CCWaves, etc. with this ripple effect that the ripple effect just turns black. Is there a way to get them both to work at the same time?

Posted 3 months ago #
GoldenJoe
Member

Magnificent. This will make for an excellent shockwave effect.

Posted 3 months ago #
ragnarrok
Member

I just tried this out, it is wonderfully amazing and fast. Now forgive me, as I am but a noob, and I am learning about profiling and performance and whatnot, and I happened to notice that I get an additional 20 batches called when I run Open GL ES Analysis. Now, again the speed is very fast and it doesn't affect performance (from what I can tell) so I am wondering it this would be an issue? My understanding is that the lower the number the better, but since it's all relative I don't know if 20 is a "high" number. Between my batchnode and a couple of labels I usually only have 2-3 so 20 is a big jump. Thanks!

Posted 2 months ago #
Birkemose
Moderator

It is a tradeoff. I chose to make the tesselastion as triangle strips, and as such I need to render each strip, one at a time. If I had made it with individual triangles, it could have been rendered in a single call, but there would have been 2-3 times more vertices. Cant really say which approach would be fastest. Still, the openGL overhead is small, compared to the actual texture calculations. That is where you really can save some time.
The example is simple brute force, and you can save a lot of time by calculating a bounding box for the ongoing ripple, and only calculate texture coordinates inside. Also, if you are simulating water or a shockwave, you can make an "inside" bounding box, and drop calculations close to center, as only the outer radius is distorted.

Posted 2 months ago #
BobbyGilbert
Member

Birkemose - you OK with this being used in commercial software? I notice you have your default copyright header on the code.

Looks awesome. Just having a go at integrating it.

Bobby

Posted 2 months ago #
ShinySteelRobot
Member

@Birkemose Wow this is great stuff! Thanks for posting it!

Posted 2 months ago #
BobbyGilbert
Member

Another thing, is it possible to define the z-layer for the sprite?

I have a page background (z-layer 0) and I want a river with ripples (z-layer 1) with bridges, overhanging trees etc (z-layer 2).

Just had a go and can't see the ripple sprite. I suspect it is hidden under the others. I'm hoping that the ripples are confined to the sprite in question so in my example they will only be in the river and not go up the bank.

Posted 2 months ago #

RSS feed for this topic

« Previous 123 Next »

Reply »

You must log in to post.