Beautifying Your Render - sahilshahpatel/fluid-sim GitHub Wiki

The version of render.glsl that we present in the main chapters can be very useful for debugging, but it's not a very beautiful way to show off your fluid simulator. This appendix will give you some tips for improving it.

There are many ways that you could go about this. The simplest is to set a background color and a dye color and mix between the two based on the dye amount.

In our shader these colors are constants:

const vec4 background = vec4(0.02, 0.2, 0.5, 1.);
const vec4 fluid = vec4(0.75, 1., 1., 1.);

You could also make them uniforms and have multiple themes selectable from the UI via JavaScript, or even a full color picker!

To mix between colors you can use the built-in GLSL function mix(<background>, <foreground>, <amount>). The third parameter to this function should be between 0 and 1, so you'll want to use another built-in function, clamp(<value>, <min>, <max>), to clamp the dye value into this range.

You can play around with this too! Clamping the value as-is will make most of the screen fully saturated. You can divide the dye value first to get a better spread. You can also use a non-linear calculation for your mixing parameter if you like.

While you are still working on the simulator, you may want to switch back and forth between this nicer render and the debug render. I recommend doing so by just commenting out sections to get what you need, but you could also add a boolean uniform to select between the two.