# OpenGL Rendering liquids

## Recommended Posts

Hi guys, I'm working on a simple 2D platform game (that uses OpenGL ES for rendering) that involves fluids management. So far, each particle of the fluid simulation is being rendered using a single texture sprite. However the effect is not that good so I was thinking to try to alternative way to render the fluids when particles are in contact. What I want to achieve is something like PixelJunk Shooter's water rendering. The only thing I've tried so far is using Delaunay trinagulation on the particles: this creates a decent mesh out of a group of connected particles, that is then rendered using OpenGL. However the effect is not as expected because Delaunay triangulation creates every possible triangle that could be generated by the given set of points. So, if you have a situation like this one:
|
|O
|OOO
|AOOOOOO
-------OO
OO
OO
OO
B

You end out having additional edges (for instance the one that connects A and B, that shouldn't be there. As long as I'm on a mobile device, I cannot execute too much code so what I was thinking about was to remove all the edges that are longer then a given threshold (lets say that 2 particles interact when the distance is less then N, I can remove all the edges longer then N safely), and then render the fluid mesh below the obstacles on the screen. The effect won't be extremely good, but probably it will remove connections that are not required. Do you have any other suggestion ? Maybe an alternative approaches that are able to generate a less complicated mesh in less time ?

#### Share this post

##### Share on other sites
I'm sure a 2D iso-surface is what you need. Basically a marching cubes implementation in 2D only. I'm sure this would be much simpler than the 3D case it's known for, but it still won't be trivial. I've not seen a demo for it done in 2D but tbh I never looked either.

Some kind of 2D metaballs might work too. At least it's a good seach term for you

#### Share this post

##### Share on other sites
Quote:
 Original post by Rubicon...Basically a marching cubes implementation in 2D only...

If you want to try this then 'Marching Squares' is the term to search for.

#### Share this post

##### Share on other sites
I have done this before, and I'm having trouble following the example on wikipedia.org, so perhaps that isn't the best example to go from.

Anyway, if you need some working source code for the 2D case, you can send me a private message, or pry it out of http://nd-disconnectedness.googlecode.com/files/nd-disconnectednessv1.zip -- this zip file contains code for the 1D and 2D cases. In the 2D case I convert a grayscale image to a mesh.

#### Share this post

##### Share on other sites
Quote:
Original post by PolyVox
Quote:
 Original post by Rubicon...Basically a marching cubes implementation in 2D only...

If you want to try this then 'Marching Squares' is the term to search for.
LOL, I guess I shoulda worked that one out for myself :)

#### Share this post

##### Share on other sites
Great, thanks for the code.

I already did a 2D marching squares implementation but it wasn't working as expected. However I think that the problem might have been related to the fact that the grid was too small.
The other problem I was having was with the fact that the generated mesh was too complex (too many triangles).

I'll give a look at the code and let you know if I can achieve a good result.

#### Share this post

##### Share on other sites
Quote:
 Original post by gabriele farinaGreat, thanks for the code.I already did a 2D marching squares implementation but it wasn't working as expected. However I think that the problem might have been related to the fact that the grid was too small.The other problem I was having was with the fact that the generated mesh was too complex (too many triangles).I'll give a look at the code and let you know if I can achieve a good result.

You will find that this code also gives lots of triangles. It's the nature of the beast.

Some kind of naive mesh simplification/decimation algorithm might work for you, like combining all adjacent squares on each "line" into a single rectangle.

#### Share this post

##### Share on other sites
Not sure why you're getting too many triangles, but if they're mainly internal then it should be fairly easy to navigate the complex mesh you get and find just the edges, then restitch them using ear clipping.

#### Share this post

##### Share on other sites
Quote:
 Original post by RubiconNot sure why you're getting too many triangles, but if they're mainly internal then it should be fairly easy to navigate the complex mesh you get and find just the edges, then restitch them using ear clipping.

I think you're probably right, that they're internal. Let's all remember though that the time taken to decimate the mesh on the CPU has to be roughly less than the time it takes to transfer the non-optimized mesh to GPU RAM and render it, otherwise decimation's not even worth it in the first place. I should have made this explicit beforehand.

#### Share this post

##### Share on other sites
this is an extremely awesome idea! id love to see it once you got it working i bet its really cool :)

All I could think of is to grid up all the particles in a mesh, but then it wouldnt be able to spread apart so that idea doesnt work.

#### Share this post

##### Share on other sites
Quote:
Original post by taby
Quote:
 Original post by RubiconNot sure why you're getting too many triangles, but if they're mainly internal then it should be fairly easy to navigate the complex mesh you get and find just the edges, then restitch them using ear clipping.

I think you're probably right, that they're internal. Let's all remember though that the time taken to decimate the mesh on the CPU has to be roughly less than the time it takes to transfer the non-optimized mesh to GPU RAM and render it, otherwise decimation's not even worth it in the first place. I should have made this explicit beforehand.
You're right actually. Even if you're targetting quite old hardware, "too many" triangles is usually many orders of magnitude above "a visually acceptable amount". I'd just run with it as is, but I was trying to help the poster.

This particular problem is going to be pure CPU and I'd suggest getting off it asap.

#### Share this post

##### Share on other sites
Quote:
Original post by Rubicon
Quote:
Original post by taby
Quote:
 Original post by RubiconNot sure why you're getting too many triangles, but if they're mainly internal then it should be fairly easy to navigate the complex mesh you get and find just the edges, then restitch them using ear clipping.

I think you're probably right, that they're internal. Let's all remember though that the time taken to decimate the mesh on the CPU has to be roughly less than the time it takes to transfer the non-optimized mesh to GPU RAM and render it, otherwise decimation's not even worth it in the first place. I should have made this explicit beforehand.
You're right actually. Even if you're targetting quite old hardware, "too many" triangles is usually many orders of magnitude above "a visually acceptable amount". I'd just run with it as is, but I was trying to help the poster.

This particular problem is going to be pure CPU and I'd suggest getting off it asap.

That's a good idea in and of itself... I assume you mean using a geometry shader to generate the triangles.

#### Share this post

##### Share on other sites
I was thinking of using 2D metaballs, but not triangulating them, but using the GPU to calculate the "charges".

1. Drawing precalculated textures with the "charges" of one metaball on a rendersurface with additive alpha blending. The "charges" will rise.
2. Using a post-processing effect to calculate threshold.

Using this method calculates the iso-surface with pixel-precision. I don't know if this method has any major flaws. I hope someone else can comment on that.

Edit: I found a reference: here.

Emiel1

#### Share this post

##### Share on other sites
Quote:
Original post by taby
Quote:
Original post by Rubicon
Quote:
Original post by taby
Quote:
 Original post by RubiconNot sure why you're getting too many triangles, but if they're mainly internal then it should be fairly easy to navigate the complex mesh you get and find just the edges, then restitch them using ear clipping.

I think you're probably right, that they're internal. Let's all remember though that the time taken to decimate the mesh on the CPU has to be roughly less than the time it takes to transfer the non-optimized mesh to GPU RAM and render it, otherwise decimation's not even worth it in the first place. I should have made this explicit beforehand.
You're right actually. Even if you're targetting quite old hardware, "too many" triangles is usually many orders of magnitude above "a visually acceptable amount". I'd just run with it as is, but I was trying to help the poster.

This particular problem is going to be pure CPU and I'd suggest getting off it asap.

That's a good idea in and of itself... I assume you mean using a geometry shader to generate the triangles.

Not particularly, just do the verts in the fastest way (ie no edge find and ear clip) and just send em up. However, if you can do this code on a GS and don't mind limiting your market that would be even better for performance, yeah.

#### Share this post

##### Share on other sites
Hey, I'm interested in this type of 2D fluid liquid graphics style that was shown in Pixel Junk Shooter as well. Looking forward to seeing your results, as well as the expansion of this thread with some good info. Thanks.

#### Share this post

##### Share on other sites
Quote:
 Original post by emiel1I was thinking of using 2D metaballs, but not triangulating them, but using the GPU to calculate the "charges".1. Drawing precalculated textures with the "charges" of one metaball on a rendersurface with additive alpha blending. The "charges" will rise.2. Using a post-processing effect to calculate threshold.Using this method calculates the iso-surface with pixel-precision. I don't know if this method has any major flaws. I hope someone else can comment on that.Edit: I found a reference: here.Emiel1

That's a pretty ingenious approach, given its simplicity (simple conversion of grayscale data to binary data).

The edges will be aliased, mind you, but that's not really a show stopper. Also, if your field resolution is less than the screen resolution (e.g., you're stretching it out), don't use nearest neighbour interpolation or your result will look like something straight out of Q*Bert.

## Create an account or sign in to comment

You need to be a member in order to leave a comment

## Create an account

Sign up for a new account in our community. It's easy!

Register a new account

## Sign in

Already have an account? Sign in here.

Sign In Now

• ### Forum Statistics

• Total Topics
628357
• Total Posts
2982225
• ### Similar Content

• Hi all,

I'm starting OpenGL using a tut on the Web. But at this point I would like to know the primitives needed for creating a window using OpenGL. So on Windows and using MS VS 2017, what is the simplest code required to render a window with the title of "First Rectangle", please?

• Hi, New here.
I need some help. My fiance and I like to play this mobile game online that goes by real time. Her and I are always working but when we have free time we like to play this game. We don't always got time throughout the day to Queue Buildings, troops, Upgrades....etc....
I was told to look into DLL Injection and OpenGL/DirectX Hooking. Is this true? Is this what I need to learn?
How do I read the Android files, or modify the files, or get the in-game tags/variables for the game I want?
Any assistance on this would be most appreciated. I been everywhere and seems no one knows or is to lazy to help me out. It would be nice to have assistance for once. I don't know what I need to learn.
So links of topics I need to learn within the comment section would be SOOOOO.....Helpful. Anything to just get me started.
Thanks,
Dejay Hextrix
• By mellinoe
Hi all,
First time poster here, although I've been reading posts here for quite a while. This place has been invaluable for learning graphics programming -- thanks for a great resource!
Right now, I'm working on a graphics abstraction layer for .NET which supports D3D11, Vulkan, and OpenGL at the moment. I have implemented most of my planned features already, and things are working well. Some remaining features that I am planning are Compute Shaders, and some flavor of read-write shader resources. At the moment, my shaders can just get simple read-only access to a uniform (or constant) buffer, a texture, or a sampler. Unfortunately, I'm having a tough time grasping the distinctions between all of the different kinds of read-write resources that are available. In D3D alone, there seem to be 5 or 6 different kinds of resources with similar but different characteristics. On top of that, I get the impression that some of them are more or less "obsoleted" by the newer kinds, and don't have much of a place in modern code. There seem to be a few pivots:
The data source/destination (buffer or texture) Read-write or read-only Structured or unstructured (?) Ordered vs unordered (?) These are just my observations based on a lot of MSDN and OpenGL doc reading. For my library, I'm not interested in exposing every possibility to the user -- just trying to find a good "middle-ground" that can be represented cleanly across API's which is good enough for common scenarios.
Can anyone give a sort of "overview" of the different options, and perhaps compare/contrast the concepts between Direct3D, OpenGL, and Vulkan? I'd also be very interested in hearing how other folks have abstracted these concepts in their libraries.
• By aejt
I recently started getting into graphics programming (2nd try, first try was many years ago) and I'm working on a 3d rendering engine which I hope to be able to make a 3D game with sooner or later. I have plenty of C++ experience, but not a lot when it comes to graphics, and while it's definitely going much better this time, I'm having trouble figuring out how assets are usually handled by engines.
I'm not having trouble with handling the GPU resources, but more so with how the resources should be defined and used in the system (materials, models, etc).
This is my plan now, I've implemented most of it except for the XML parts and factories and those are the ones I'm not sure of at all:
I have these classes:
For GPU resources:
Geometry: holds and manages everything needed to render a geometry: VAO, VBO, EBO. Texture: holds and manages a texture which is loaded into the GPU. Shader: holds and manages a shader which is loaded into the GPU. For assets relying on GPU resources:
Material: holds a shader resource, multiple texture resources, as well as uniform settings. Mesh: holds a geometry and a material. Model: holds multiple meshes, possibly in a tree structure to more easily support skinning later on? For handling GPU resources:
ResourceCache<T>: T can be any resource loaded into the GPU. It owns these resources and only hands out handles to them on request (currently string identifiers are used when requesting handles, but all resources are stored in a vector and each handle only contains resource's index in that vector) Resource<T>: The handles given out from ResourceCache. The handles are reference counted and to get the underlying resource you simply deference like with pointers (*handle).
And my plan is to define everything into these XML documents to abstract away files:
Resources.xml for ref-counted GPU resources (geometry, shaders, textures) Resources are assigned names/ids and resource files, and possibly some attributes (what vertex attributes does this geometry have? what vertex attributes does this shader expect? what uniforms does this shader use? and so on) Are reference counted using ResourceCache<T> Assets.xml for assets using the GPU resources (materials, meshes, models) Assets are not reference counted, but they hold handles to ref-counted resources. References the resources defined in Resources.xml by names/ids. The XMLs are loaded into some structure in memory which is then used for loading the resources/assets using factory classes:
Factory classes for resources:
For example, a texture factory could contain the texture definitions from the XML containing data about textures in the game, as well as a cache containing all loaded textures. This means it has mappings from each name/id to a file and when asked to load a texture with a name/id, it can look up its path and use a "BinaryLoader" to either load the file and create the resource directly, or asynchronously load the file's data into a queue which then can be read from later to create the resources synchronously in the GL context. These factories only return handles.
Factory classes for assets:
Much like for resources, these classes contain the definitions for the assets they can load. For example, with the definition the MaterialFactory will know which shader, textures and possibly uniform a certain material has, and with the help of TextureFactory and ShaderFactory, it can retrieve handles to the resources it needs (Shader + Textures), setup itself from XML data (uniform values), and return a created instance of requested material. These factories return actual instances, not handles (but the instances contain handles).

Is this a good or commonly used approach? Is this going to bite me in the ass later on? Are there other more preferable approaches? Is this outside of the scope of a 3d renderer and should be on the engine side? I'd love to receive and kind of advice or suggestions!
Thanks!
• By nedondev
I 'm learning how to create game by using opengl with c/c++ coding, so here is my fist game. In video description also have game contain in Dropbox. May be I will make it better in future.
Thanks.

• 10
• 9
• 9
• 24
• 11