В своём туториале «Создание шейдеров» я в основном рассматривал фрагментные шейдеры, которых достаточно для реализации любых 2D-эффектов и примеров на ShaderToy. Но существует целая категория техник, требующих использования вершинных шейдеров. В этом туториале я расскажу о создании стилизованного мультяшного шейдера воды и познакомлю вас с вершинными шейдерами (vertex shaders). Также я расскажу о буфере глубин и о том, как использовать его для получения дополнительной информации о сцене и для создания линий морской пены.
Вот как будет выглядеть готовый эффект. Интерактивное демо можно посмотреть здесь.
Этот эффект состоит из следующих элементов:
- Просвечивающий меш воды с разбитыми на части (subdivided) полигонами и смещёнными вершинами для создания волн.
- Статичные линии воды на поверхности.
- Имитируемая плавучесть лодок.
- Динамические линии пены вокруг границ объектов в воде.
- Постобработка для создания искажений всего, что находится под водой.
В этом эффекте мне нравится то, что он затрагивает множество различных концепций компьютерной графики, поэтому позволит нам использовать идеи из предыдущих туториалов, а также развить техники, которые можно будет применить в новых эффектах.
Читать дальше →
[Перевод] Создание мультяшного шейдера воды для веба. Часть 1
Source: habrahabr