понедельник, октября 27, 2008

Имитация воды

Сегодня на повестке дня - эффект имитации ряби на поверхности воды. Воду имитировать не так сложно, есть разные подходы.

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

Поглядим, какие эффекты делают наши коллеги:

Realistic Flash Water Effect - AS2. Вода получается сочетанием Bitmap.perlinNoise и DisplacementMapFilter. Вода смотрится вполне реалистично, если не считать недостатка отсутствия перспективы.
Кстати, мой коллега разрабатывал flash-заставку для Алых парусов. Он изначально сделал ставку на искажения водяной поверхности при помощи именно такого метода. Увы, требования заказчика по производительности были столь высоки, что эффект пришлось убрать... А было очень сильно сделано. К сожалению, фильтры на больших площадях очень медленны.

Здесь: Water effect, обошлись без фильтров и сделали всё масками. Смотрится конечно слабовато да и работы многовато. Но, для тех, кто не хочет дружить с flash-программированием, то вполне сойдет.
Сюда же отнесу и вот этот вариант: Flash Water Effects - пример для совсем начинающих.

Довольно продвинутый способ создания ряби, плюс имитация подводных каустиков: Water caustic effects with Flash/AS2. Демка смотрится довольно свеженько, но как-то не совсем реалистично. А всё из-за того, что карта подводных каустиков не генерируется, а является секвенцией. И сгенерирована она специальной программой, неким Caustics Generator. Что же, такой подход тоже имеет право на существование и, возможно, пожертвовав памятью на секвенцию карты, мы выиграем в производительности. А я думаю, что для того, чтобы на лету генерировать такую графику, ресурсов надо прилично, да и алгоритм еще поискать/разработать придется.

Смотрим далее: несравненный блог #Laboratory Andre Michelle и эффект Water. К сожалению, для него нет исходников. Приходится просто любоваться...

Продолжаем любоваться на воду: Rain Drop Water Effect. Сайт предлагает купить flash-компоненты с различными эффектами. Мы, безусловно, вежливо отказываемся и продолжаем рыскать.

Люди выкладывают исходный код на форумах: например, здесь - water effect. Правда нет демки, а прежде чем потратить время на проверку, хочется знать, ради чего. Пока пропустим, но будем иметь в виду.

По соседству лежит еще код: is this water effect possible in AS3? Он позволяет скрывать/появлять изображение с эффектом искажения. Как-то не очень...

Следующий претендент: Water ripples revisited (AS3-only version). Вот это то что надо! Есть Демка с "волнующейся" поверхностью и исходники. Думаю, здесь стоит остановиться и поэкспериментировать. О результатах обязательно отпишусь. Добавлю, что сам блог еще свежий, но пестрит очень любопытными демками с исходниками.

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

Пока это всё, что я смог нарыть про эффект водяной ряби. Причем, помню, что видел еще что-то стоящее по этой теме, но, увы не смог найти. Буду рад помощи.

* * *

Вспомнил еще одну статью по анимации воды: Море воды - программная анимация и не только, и здесь же: Еще раз о воде - самый главный секрет. Очень полезные примеры имитации воды с помощью анимационных приемов и капельки программирования.

* * *

Уже поступают новые решения: Облака с отражением в воде - генеруемые облака, отражающиеся в генерируемой воде. Думаю, если подобрать хорошее сочетание цветов, можно получить довольно реалистичную картинку. Вот еще демка, правда без исходников.

14 комментариев:

Анонимный комментирует...

Хорошая подборка. Обычно такие статьи читаешь, когда они не нужны, а когда нужны - не можешь их найти xD

foreground комментирует...

да мне этот чел (David Lenaerts) тоже понравился. Помог мне с его 3D разобраться.

foreground комментирует...

кстати, если что я больше не carbonik.

Unknown комментирует...

2 Slon_vsapogah: Вот-вот. Подобные изыскания потом опять понадобятся - рано или поздно. Лучше их один раз закрепить где-нибудь :)

2 foreground: Да, по-ходу скоро увидем восход нового движка flash-трехмера - Wick3d. Когда-то мы подобные демки наблюдали у Альтернативщиков. Посмотрим, что у него получится.

vapes комментирует...

Меня забыл с http://vapes.na.by/swf/speed.swf и http://vapes.na.by/swf/cloudsinwater.html :)

Анонимный комментирует...

Блин мужики Хелп, сам я родом из 3D моделинга, малость PHP знаю, но в AS почти ноль, все жду готовых библиотек с подробным руководством, чтоб только параметры в функциях менять.
Короче нужен из поста выше "Water ripples revisited (AS3-only version)"
предложенный пример качнул а как его запустить? Там не .Fla а тупо скрипт.as причем при его подключении ошибка, на самом сайте выложен fla но тоже не работает...
Как я понял там подключается баблиотека которой по умолчанию нет в CSS3 строчка:
package {
import be.nascom.flash.graphics.Rippler;

Как запустить эффект ?

PS: Огромное спасибо автору за блог...

Unknown комментирует...

Да, пример "как есть" запускается только компиляцией Flex SDK. Кроме того, надо незабыть положить картинку "../embeds/images/shallow-water-750509-ga.jpg".
Для того чтобы запустить пример под Flash CS, нужно создать .fla, соответстующую параметрам тега [SWF(...)], внести в библиотеку желаемую картинку, в ее свойствах Linkage указать какое-нибудь имя класса.
Положить код примера и папку с библиотеками "be..." рядом с .fla.
В коде new Bitmap(new _sourceImage... вместо _sourceImage указать введенный выше класс картинки.
И не забыть указать в Document class - Ripple. Ну и конечно, .fla должен быть для ActionScript 3.0.

Lena комментирует...

Уважаемые, мастера flash, понимаю, что топик довольно старый, но может кто нибудь откликнется и поможет моему горю?
Признаюсь, что с flash я на "ВЫ", тем более мало смыслю в AS3, проблема в следующем: для моего диплома мне очень подходит эффект из примера "Water ripples revisited (AS3-only version)"
но я конечно не смогу воспроизвести это самостоятельно.
Может кто скажет, что делать пошагово..... если это не безнадёжно конечно.
буду благодарна за помощь.
P.S.
очень благодарна

Unknown комментирует...

@Lena: Исходный код к этому примеру прилагается. Остается только скачать Flex SDK, скачать и поставить FlashDevelop, создать проект, скопировать в его папку исходники и откомпилировать.
Информации по установке нужного софта у меня навалом здесь: http://racer242install.blogspot.com/
Остальное - дело техники.

Vacsa комментирует...

Уважаемые!
Вопрос по поводу водички Water ripples revisited (AS3-only version).
Направте на путь решения такой проблемы, пытаюсь создать водный ручей,с торчащими камнями из под воды,камешек должен как бы омываться водой. Т.е. как сделать дырявый битмап водной поверности. Пока, приходит в голову реализация нажатий в местах где камни кодом.

Unknown комментирует...

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

Vacsa комментирует...

Если камни "положить" сверху битмапа воды, то эффект что камни ПАРЯТ над водой, а волны создаваемые курсором мыши проходят под ними. Хочется добиться эффекта отражения волн от камней.

Vacsa комментирует...

Если камни положить сверху битмапа,то ощущение что камни парят. Вопрос в том, как сделать чтобы камни отражали волны создаваемые мышой?

Unknown комментирует...

Люди добрые сделайте плз кто нить в fla этот эффект Water ripples revisited (AS3-only version) очень нужно уже 5 дней бьюсь не могу сделать скиньте на mksiga@gmail.com заранее благодарен.