GLSL Interactive Water

s.rozsa's picture

i was playing around with some GLSL stuff in QC and did some extensive search on the net. I am trying to accomplish something similar to this wonderfull stuff (it is a screensaver using the isight camera) in QC - preferably using the TUIO patch as an input.

Anyhow i am getting right now a quite convincing water surface using normal maps in the GLSL patch.

What i would like to do is a kind of an "interactive" water surface: touch the water and you will get some ripples over the surface. Obviously someting like Josh Stams stable water solver would do that job (here a java implementation). But that exceeds my coding knowledge...

Maybe somebody has an idea on how to make someting similar in QC? Could the Kineme3d stuff be used for that?

Any help is greatly appreciated...

I am attaching the GLSL stuff anyhow. Maybe it is usefull for some of you.



water_shader.qtz1.33 MB
water_shader2.qtz1.03 MB

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

franz's picture
Re: GLSL Interactive Water

If you have a look a the screensaver bundle, verts and frag shaders are included.

From your shader, i would make a "render in image" that renders ripples (according to user input), connect the generated ripples to a CIfilter that generates normal maps from an image, then feed your shader with it.

gtoledo3's picture
Re: GLSL Interactive Water

This GLSL shader is REALLY nice, but I agree with franz... CI is probably the way to go, and there few filters that generate normals from a texture input, it's kind of just a matter of preference. Take whatever you use inside of the render in image (which will go to your texture/normal map input on whatever CI filter) to generate the displacement, publish your x and y's and link it to a mouse, TUIO or whatever for something that will be responsive to touch. For mouse/trackpad, publish the render enable and link it to your mouse click button, and it will only give texture displacement whenever you click with your mouse.

leegrosbauer's picture
Re: GLSL Interactive Water

franz wrote:
... verts and frag shaders are included ...
Probably beyond my technical capabilities, but worth inquiring anyway in hopes there is perhaps a somewhat simple implementation. How is the verts and shader data extracted from the files and utilized?

I understand the rest of the two posted responses.

cwright's picture
Re: GLSL Interactive Water

you could do it -- almost no technical prowess required.

Right click the .saver icon in the DMG -- click "show package contents" (or something similar).

expand the folders as necessary, until you see this:

See the .vert and .frag files? Those are Vertex Shader and Fragment Shader pairs - right click them, open with TextEdit, and you've got the source.

Copy/Paste into the GLSL Shader Patch's source windows as appropriate, and you're good to go.

(some may not work properly, or at all, but you can learn some neat stuff that way).

VertAndFrag.png143.74 KB

leegrosbauer's picture
Re: GLSL Interactive Water

Thanks so much!

Also, I just now noticed that after clicking on those files I now have a newly opened app in my dock entitled Open GL Shader Builder. I'll look that over too. It's just a world of mysterious wonders around here, isn't it. :-)

Thanks again!

s.rozsa's picture
Re: GLSL Interactive Water

Thanks Gentlemen,

@franz and George: yeah i was thinking about that also, but i have really no clue how i should make something convincigly "fluid" witht paint/Ci operations... I was thinking about using the Kineme Particle patch with 4 collision objects on the sides and with an explosion patch, render that to image and apply some blur-CI filter. But i'm not sure if that would be performant and convincing enough... Any other idea from you guys? Maybe a nice workaround for a "fake fluid solver"???

@chris: yeah, usually looking at the code is a good thing. And that was the first thing i have done... even if i would never steal code ;-) If i find something cool an usefull (like your wonderfull 3d plugin) than i buy that if it's commercial (what i did btw). So i would prefere allways the clean solution :-) Beside that i have to disappoint: the shader files are somehow encoded, you will get only some hyerogliphs if you open them...

Chris: do you think that we could use Kineme3d with some kind of "multi ripple" to physically modify a plane for those wake effects? That would be the ultimate solution - on that way you could make several "layers" by applying the ripple effect to a plane with a transparent reflecting/refracting shader as the "water surface" (than you could put your "boid fishes" underneath, and under that a seafloor plane ad so on.)... Any idea for an "iterate ripple" vodoo-mambo-jumbo?

BTW: i have contacted the developer of the screensave asking him kindly for some advise. Maybe he will give an answer...



dust's picture
Re: GLSL Interactive Water


don't know if you figured this out or not. the way i would approach this would be ci as well. it is a really simple technique to simulate water. take a particle render put it inside a render in image then attach you background pic to a glass distortion filter and use the particle as a texture. this method works really good. mess with the particle system to get the flow of the water you like. then add more particles for your multi touch tuio ripples. i have actually tried this and it surprising looks very real.