Designing a Low Poly Animated Water Fountain in Blender and Unity

A step-by-step tutorial to design an animated water fountain using Blender, and animating the water in Unity.

At Yarsa Games, we mostly make mobile games. Reducing the number of polygons in the in-game objects is one of the most important aspects of runtime optimization. This is a short, step-by-step tutorial on how to make a low poly water fountain that is cheap on computing resources. You cannot simulate water in real-time, since it is quite resource-intensive, and obviously a bad idea for a mobile game. That's why we need to use a trick to make the water look like it's flowing. This tutorial assumes that you have a basic knowledge of Blender and Unity.

Starting Out

When you're creating a 3D model for a mobile game, it's important that you have just a few faces/edges/vertices in your model. You can't have hundreds of faces. Dozens are already too much if your scene is going to have a number of models rendering at a single frame. That said, either you can start by creating a realistic design and then reduce poly counts, or simply design low-poly designs. Let's start by modeling a low poly fountain using Blender. We design two different models for the fountain and the flowing water. Then align the two models together.

image-1631499500051.png
Models of the fountain (left to right) 

UV Unwrapping

The next step is UV-unwrapping the model so we can design a matching texture for our model. You can unwrap the model of the fountain in any way you like because we're not applying any texture to it. However, the water model needs to be rectified and unwrapped in a specific way. For best results, unwrap the models as shown in the screenshot. Both the vertical and horizontal parts of the cylindrical mesh need to be rectified and unwrapped along the Y-axis. The water texture will move along the Y-axis, so make sure all the UV Islands align accordingly.

UV Islands aligned

The stretched areas of the UV Island mean the water will flow faster in those areas, and the condensed parts mean the water will flow slower in those areas. Now, stretch the bottom areas of the plane a bit more than the areas near the top. You can add support edges to fine-tune the UV Map.

Textures

For the water texture, set the foreground color the light blue and background to white. I'm using a texture that looks like a sparsely cloudy sky. To design a cloudy texture, it's pretty trivial on both Gimp and Photoshop. If you're using Photoshop, from the menu bar, select the FilterRenderDifference Clouds option to generate a cloud. If you're using Gimp, from the menu bar, select the FiltersRenderNoiseDifference Clouds option.

You can repeat the command using the Ctrl + F shortcut. Repeat the process to change the difference cloud to your perfection.

Difference cloud

Importing to Unity

After you're done with the texture, import the mesh and texture to Unity. Make sure the Wrap Mode of the water plane texture is set to Repeat.

Wrap Mode for Texture in Unity

Then add new material to the water model, and then apply the water texture to the material.

Water Texture applied to the Fountain Model in Unity

Make the Water Flow

To make the water look like it's flowing, you can simply slide the texture outwards by changing it's offset using a shader or with a script.

Using the Script

We can use the Material.SetTextureOffset() to increment the values of the offset of the texture, so it looks like it's moving outwards. Attach the following script to the water surface model object. The script simply gets the instance of the Renderer component of the water surface, and in each frame changes the offset.

using UnityEngine;

public class FountainRenderer : MonoBehaviour
{
    float speed = 0.2f;
    Renderer renderer;

    void Start()
    {
        renderer = GetComponent<Renderer> ();
    }

    void Update()
    {
        float offset = Time.time * speed;
        renderer.material
        	.SetTextureOffset("WaterTexture", new Vector2(offset, 0));
    }
}

Using a Shader

Alternatively, if you prefer using a shader, you can create new a shader using the following screenshot as a reference. The results should be similar to using a script.

Using a Shader to Animate the Texture

Final Results

As a final touch, you can add a basic particle system to represent water splashes and bubbles.

Low Poly Water Fountain (Final Result)

What Next?

You can also play with the water texture, add additional textures in PBR setup to make the water more realistic. The possibilities are unlimited, but remember, the more maps you add, the more computing resources it's going to take to render your model.

Thank you for reading this far! Until next time.