В настоящее время я реализую игру с видом сверху на океан. Я использую следующую небольшую абстрактную текстуру:

Фактическая текстура прозрачна, я добавил зеленый цвет для ясности.

Теперь у меня проблема в том, что я не знаю, как анимировать эту текстуру, чтобы вода выглядела хорошо. Я попытался переместить текстуру синусоидальной волной: texture.y += sin(angle) . Конечно, теперь вся текстура движется, что выглядит нереально. Следующее, что я попробовал, это добавить еще один слой и реализовать эффект параллакса. Так что отражения под поверхностью воды также будут двигаться, но намного медленнее. Это выглядит немного лучше, но все еще не ... достаточно хорошо.

Я думаю, что лучше всего будет выглядеть анимация, если отдельные ячейки будут расширяться и сжиматься, как сеть или кусок ткани. Представьте, что кто-то слегка потянет за одну вершину этих ячеек, и соседняя ячейка расширится, и ячейка, к которой я стремлюсь (или подтолкну), сократится. Вроде как паутина пружин (?). Но я понятия не имею, как реализовать что-то вроде этого:

• Какая математическая модель для этого? Что-то с пружинами, где силы толкать / тянуть?
• И если да, то как мне сопоставить эту модель с заданной текстурой? Сохраняя все кривые, а что нет ...

(Я также открыт для различных идей / ответов о том, как оживить данную текстуру. Реализм здесь не главное, просто приятные на вид воды, похожие на движения ...)

Решение от DMGregory

В этом посте я опубликовал пример libgdx: 2d анимация воды неровная и не плавная (см. Ответ о фильтрации текстур)

Обычный способ сделать это - использовать косвенный поиск текстур в шейдере, чтобы исказить текстуру дисплея:

Здесь я использую текстуру с некоторыми низкочастотными цветовыми шумами (сглаживание сглаженных пятен случайных цветов) и прокручиваю ее по геометрии дисплея с течением времени.

Вместо того, чтобы рисовать цвета из этой текстуры, я беру красные и зеленые каналы и вычитаю их, 0.5fчтобы превратить их в псевдослучайный двухмерный вектор, который плавно меняется во времени и пространстве.

Затем я могу добавить небольшой множитель этого вектора к моим UV-координатам, прежде чем брать образцы из основной текстуры воды. Это смещает часть текстуры, которую мы читаем и отображаем, деформируя ее.

Усредняя две выборки из этого шума, прокручивая в противоположных направлениях, мы можем скрыть направление движения, чтобы оно выглядело как бесцельное выплескивание.

В Unity шейдер будет выглядеть следующим образом - он должен быть достаточно простым для перевода на язык шейдера по вашему выбору:

fixed4 frag (v2f i) : SV_Target
{               
    float2 waveUV = i.uv * _NoiseScale;
    float2 travel = _NoiseScrollVelocity * _Time.x;

    float2 uv = i.uv;
    uv += _Distortion * (tex2D(_Noise, waveUV + travel).rg - 0.5f);
    waveUV += 0.2f; // Force an offset between the two samples.
    uv += _Distortion * (tex2D(_Noise, waveUV - travel).rg - 0.5f);

    // Sample the main texture from the distorted UV coordinates.
    fixed4 col = tex2D(_MainTex, uv);

    return col;
}

Это называется эффектом каустики, и генерация этих эффектов во время выполнения довольно трудоемка, поэтому это традиционно делается с помощью предварительно визуализированной покадровой анимации. Существуют инструменты, которые будут генерировать кадры каустической анимации для вас, например, Caustics Generator , у которого есть бесплатная версия для некоммерческого использования. Есть также некоторые готовые, которые вы можете купить за значительно более дешевую, чем профессиональная версия инструмента, о котором я говорил.

Обратите внимание, что едкие эффекты также обычно являются эффектом, применяемым в виде легкого печенья на подводной местности или на подводной поверхности. То есть, положить его на поверхность воды, глядя вниз, обычно не то, как выглядит вода.

Это похоже на текстуру, которую вы можете сгенерировать из графа вороной, например:

Вы можете сделать небольшие плавные корректировки графика, перемещая точки; Перерисовка графика каждого кадра будет довольно дорогой, поэтому вы, вероятно, захотите предварительно визуализировать анимацию.

Существует метод oldschool, включающий нижний слой текстуры и две полупрозрачные текстуры для отражения сверху.

Если вы хотите пройти весь путь и хотите, чтобы вода не выглядела полной клонированных волн или голубоватых суповых карт, то вам нужно достичь цели.

https://steamcdn-a.akamaihd.net/apps/valve/2010/siggraph2010_vlachos_waterflow.pdf