Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 12
Спасибо большое за статью! Шейдеры в веб — действительно очень интересное и перспективное направление.
Скажите пожалуйста, а можно всю эту магию применить к уже существующим изображениям на сайте?
К примеру, есть сайт с множеством обычных скучных картинок — можно не особо вмешиваясь в логику существующих страниц, реализовать шейдер вывода картинок чтобы их слегка оживить?
Или еще пример — взять карту, скажем гугла, и дописать поверх обработку с помощью шейдера реализовав погодные условия и т.п.?
Было бы здорово в такой же практической форме почитать об этом вопросе. Это сильно раздвинет границы применимости такой красивой технологии.
Скажите пожалуйста, а можно всю эту магию применить к уже существующим изображениям на сайте?
К примеру, есть сайт с множеством обычных скучных картинок — можно не особо вмешиваясь в логику существующих страниц, реализовать шейдер вывода картинок чтобы их слегка оживить?
Или еще пример — взять карту, скажем гугла, и дописать поверх обработку с помощью шейдера реализовав погодные условия и т.п.?
Было бы здорово в такой же практической форме почитать об этом вопросе. Это сильно раздвинет границы применимости такой красивой технологии.
можно не особо вмешиваясь в логику существующих страниц, реализовать шейдер вывода картинок чтобы их слегка оживить?
Можно после загрузки фотографий (в том виде, в котором они уже есть) для каждой из них сделать canvas и расположить его ровно поверх фотографии с помощью абсолютного позиционирования. Затем вытащить данные из фотографии и продублировать их на canvas. Получается как бы второй слой фотографий, но уже с возможностью добавить эффекты. При изменении размера окна можно следить за размером исходной фотографии и обновлять размер canvas.
Про карты не задавался вопросом, спасибо за идею.
Понятно. Похоже сделать такую систему стабильно работающей в разных браузерах/платформах — будет непросто.
А что-то подобного GrabPass для web не существует? Так чтобы захватить область экрана под элементом и использовать ее как текстуру?
В общем, если будет не о чем писать еще статью — было бы интересно почитать об этом вопросе:)
А что-то подобного GrabPass для web не существует? Так чтобы захватить область экрана под элементом и использовать ее как текстуру?
В общем, если будет не о чем писать еще статью — было бы интересно почитать об этом вопросе:)
Очень жалею, что в веб завезли столько бесполезных фентивлюшек.
Надеюсь большинство не будет с этим связываться.
Надеюсь большинство не будет с этим связываться.
На самом деле Вороной прекрасно делается силами шейдера. Для мозайки достаточно передать в шейдер массив текстур из которых собирать мозайку и их количество. Там только одно ограничение — количество точек должно разбирать область на целое количество одинаковых ячеек. Коряво описал, но не соображу, как лучше. На shadertoy полно примеров.
На shadertoy полно примеров
И все они знатно подтормаживают на моем нетбуке. Поэтому я и обращаю внимание на производительность.
Очень сомневаюсь. У вас во фрагментном шейдере на каждый пиксел считается полный список точек, когда в стандартной версии перебор идёт только по 8 ближайшим, благодаря чему скорость от количества точек практически не зависит. Уже на этом этапе должен быть выигрыш. Реально тормозной там только ГСЧ, но там можно изрядно сэкономить или даже передать их текстурой вместо генерации в рилтайме. На буке 10+летней давности 60фпс ткнутые наугад версии (с рилтайм ГСЧ) показывают без проблем. Версий с текстурой не попалось, но скорее всего больше 60 он не покажет просто ввиду ограничений браузера.
Спасибо, интересная статья. Но хотелось бы подробнее про шумы на GPU
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Применяем мозаику Вороного, пикселизацию и геометрические маски в шейдерах для украшения сайта