Симуляция океана на WebGL

    image

    Небольшое красивое демо, выложенное Дэвидом Ли — посмотреть (обсуждение).



    Большая часть «магии» сделана при помощи шейдеров GLSL на GPU, код на JavaScript с матрицами — необходимая заготовка для работы с 3D графикой. Алгоритм движения волн основан на методе, описанном Джерри Тессендорфом в статье «Симуляция волн океана», опубликованной на SIGGRAPH 2002 (по ссылке есть исходный код, который написан на С++); по теме можно почитать вот это.

    У кого демонстрация не заработает («Your browser does not appear to support the required technologies. You can still view this on YouTube»), могут попробовать посмотреть ее вместе с исходным кодом на jsfiddle, потому что часть браузеров, способных отобразить ее и тем не менее оставленных за бортом, не пропускает hasWebGLSupport().

    P.S. Еще пара интересных ссылок.

    Комментарии 54

      +23
      Выглядит просто потрясающе
        0
        Вторая «интересная ссылка» просто потрясла, от того что это именно в браузере и в реальном времени. Хотя i5 все 4 ядра на 30 процентов загрузил. Если каждый такие скрипты вставлять будет, то для 5-10 открытых вкладок нужно будет бежать за очередным апгрейдом :)
          0
          Угу, а Core 2 Duo эта демка грузит на 90 каждое ядро, так что пока реальное применение еще далековато…
            +2
            ЧЯДНТ: у меня на Core 2 Quad Q6600 при любых параметрах в Firefox не нагружает процессор более чем на 15%.
              0
              Могу ошибаться, но в Quad четыре честных ядра, а не Hyperthreading, как в i5.
              Если кому-то еще интересны подробности, то в моем случае это Chrome, Ubuntu 13.10, nVidia 240 sx (кажется).
              И загрузка от процеса рендеринга 50-60%, тогда как в сумме (там сам хром жрет сколько-то и прочие накладки) примерно 70-80. Без этой вкладки 7-8%.
                0
                В i5 нет HT, зато есть 4 ядра и сносная графика.
              0
              У меня на офисном компе она вообще проц не трогает. Через видеокарту играет.
              +1
              FF уже давно такие вещи на неактивной вкладке фризит, так что количество открытых вкладок роли не играет
                0
                Для статистики: Phenom 2 x4 3,5Ghz грузит на 25% (Firefox, win 7 x64).
                Но иногда подтормаживает. Наверное, из-за интегрированного видео HD 4290. Его загрузка 100%.

                Если пойдет в массы, то надо будет апгрейдить видеокарты под сайты :)
                +10
                Это просто отвал башки!
                  +5
                  Есть еще проект от F4, с водой на карте через WebGL. Не так круто, но тоже интересно.
                    0
                    Там не везде оправдано подобное использование шейдеров: когда маленький ручеёк в приближении бушует как океан — выглядит этот как минимум странно.
                    Зато этот проект наглядно показывает зачем на картах OSM надо указывать этажность зданий: те районы города, где она проставлена выглядят круто.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      +1
                      Посреди океана пены и нет (если только во время большого шторма или бури).
                        +1
                        25 m/s как на демо — это 50 узлов или 10 баллов

                        Очень высокие волны (максимальная высота — 12,5 м, средняя — 9 м) с длинными загибающимися вниз гребнями. Образующаяся пена выдувается ветром большими хлопьями в виде густых белых полос. Поверхность моря белая от пены. Сильный грохот волн подобен ударам


                        должно быть очень много пены и выглядеть должно так
                        image
                        +2
                        >По-моему не очень. Во-первых цвет воды на океан не похож (мало зеленого), во-вторых пены нет вообще.

                        Стесняюсь спросить: а вы океан-то видели? ;)

                        Сравните сами:


                        image
                          0
                          При ветре 25 м/с всё действительно должно быть в пене.
                            +1
                            Насчет пены не спорю (даже на моей фотографии то тут то там видны «барашки»), мой пример был в основном для иллюстрации цвета.
                        0
                        Интересно через лет 5 какой процент современных на тот момент игр будет в вебе? (юнити не в счет =)
                          +1
                          Firefox 25.0.1 Your browser does not appear to support the required technologies.
                          Хром 31.0.1650.57 m Тоже самое.

                          Где тогда оно работает?
                            +2
                            На другом железе
                              –3
                              Браузер теперь относится к категории «железо»?
                                +1
                                Mozilla Firefox — WebGL был включён во все платформы, у которых есть нужная графическая карта с актуальными драйверами, начиная с версии 4.0.[5]

                                Понимаете о чем речь?
                                  0
                                  Еще в FF приходится включать спец хотелки из черновиков webgl. В свежих Хромах эти хотелки уже активированы по умолчанию.
                                  Так что не только дрова, но и конкретный браузер и его версия уже можно относить к требованиям железа :)
                                    0
                                    К примеру, эта штука aleksandarrodic.com/p/jellyfish/ работает отлично, там тоже WebGL. Следовательно, я могу сказать, что с графической картой всё нормально. Тогда, что не так?
                                      0
                                      Попробуйте проверить в about:config выставленное значение в webgl.disable-extensions.
                                        0
                                        false
                                          0
                                          Тогда не знаю, FF использую только для тестов, что и в нем тоже работает, а не только в Chrome :)
                                            0
                                            Так у меня и в последней версии Хрома не работает =/
                                              0
                                              Даже эта версия с закомменченной проверкой?
                                                0
                                                Вот что вижу d.pr/i/zq4o
                                                  0
                                                  Нечто подобное получается при не загруженном расширении OES_texture_float.
                                                  Я в другом комментарии тут же приводил ссылку проверки расширений webgl.
                                                    0
                                                    OES_texture_float есть в списке.
                              +2
                              Относительно сносно взлетело под Linux на проприетарных ATI-дровах (12.4, кажется) с Radeon HD 6450 под Chrome 31.0.1650.57. Относительно сносно = «есть небольшие фризы, но если не приглядываться, их не заметить».

                              Вообще, сделано очень круто. Вспомнил тут, как выглядела вода в Morrowind, и как научились делать всего 11 лет спустя. Небо и земля.
                                +5
                                Даже на встроенной intel HD все ссылки из поста работают в линухе. Прогресс :)

                                И если обсуждать воду на webgl, то я бы еще эту демку вспомнил.
                                  +1
                                  Ага, «даже». У Intel как раз единственные нормальные драйвера для видеокарт под Linux.
                                    0
                                    Мне в последнее время (со времен 10.04 уже точно) вполне нравятся дрова от nvidia. Всякие Unigine Heaven или Epic Citadel JS прекрасно работают.

                                    P.S. Но «даже» было про производительность видеокарты. Демка одинаково хорошо работает как на GT 650Ti, так и на HD 4000.
                                      0
                                      Видимо, в nvidia все-таки переслали жест Линуса нужным людям в нужное место? :)
                                        0
                                        Не иначе :)

                                        Еще бы в команду IE пришел подзатыльник для реализации webgl расширений…
                                  0
                                  На маке в safari не работает(даже с включенной поддержкой webgl), там же но в chrome все отлично.
                                    0
                                    Демка проверяет наличие webgl расширения texture_float. Проверьте его наличие например тут.
                                      0
                                      Это то есть, а вот ANGLE_instanced_arrays нет.
                                        0
                                        Разве ANGLE это не win-only? Какой DirectX на маке?
                                          0
                                          Могу сделать скриншот наличия в chrome на маке.
                                            0
                                            Да я не про Chrome, а именно ANGLE в нем. Это ж проброс OpenGL вызовов самого WebGL в видеокарту через транслирование в DirectX вызовы. Наличие или отсутствие этого расширения WebGL, имхо, актуально только под виндой.
                                            Я сиду на Chrome в линухе (intel и nvidia карточки) и все демки webgl прекрасно работают.
                                            Без ANGLE_instanced_arrays вполне можно обойтись простыми вызовами DrawElements.
                                            0
                                            Кстати, именно texture_float есть для safari.
                                        0
                                        Safari какой версии?
                                        У меня 7-й и куча FPS.
                                          0
                                          Так же 7-й и говорит, что не поддерживается. Сам не пойму в чем причина.
                                        0
                                        Silent Hunter Online как раз использует webGL, если я не ошибаюсь. Меня ещё поразило, как шикарно волны моделируются
                                          +3
                                          Еще 2-3 года и будет что-то вроде: «хочу такую водичку фончиком на свой сайтик»…
                                            +2
                                            Насторожился вначале, подумав, что опять 30 строк на JS — очень круто!
                                              0
                                              30 строк на JS, и ещё 300 на GLSL.
                                              +1
                                              Технология крутая, но в этой демке показана только базовая реализация. Плюс немного криво сделанная. Не видна зависимость волны от направления ветра. Т.е. увеличивая силу ветра вода больше бурлит, вместо того чтобы формировать направленные волны. А данный метод это позволяет. Вот видео с презентации NVidia, которые сделали воду по подобной технологии, но гораздо более продвинутую: www.youtube.com/watch?v=WGjRLJpXYxA. Там создается несколько таких симуляций, для создания крупных волн и мелких волн-деталей. Все это хитро замешивается для устранения тайлинг артефактов. Также они считают турбулентность для создания красивой пены.
                                                0
                                                Хром показывает, но все вкладки и все приложение зависло наглухо. Пришлось снимать задачи. Все два десятка.

                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                Самое читаемое