Рубрика «вау-эффект»

image

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

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

Читать полностью »

Введение в программирование шейдеров для верстальщиков - 1

WebGL существует уже давно, про шейдеры написано немало статей, есть серии уроков. Но в основной массе они слишком сложные для верстальщика. Даже лучше сказать, что они охватывают большие объемы информации, которые скорее нужны разработчику игрового движка, чем верстальщику. Там сразу начинают с построения сложной сцены, камера, свет… На обычном сайте для создания пары эффектов с фотографиями все эти знания избыточны. В результате люди делают очень сложные архитектурные конструкции и пишут длинные-длинные шейдеры ради очень простых по сути действий.

Все это побудило создать введение в те аспекты работы с шейдерами, которые наиболее вероятно пригодятся в работе именно верстальщику для создания различных 2d-эффектов с картинками на сайте. Конечно с поправкой на то, что сами по себе в дизайне интерфейсов они у нас применяются относительно редко. Мы сделаем стартовый шаблон на чистом JS без сторонних библиотек и рассмотрим идеи создания некоторых популярных эффектов, основанных на сдвиге пикселей, которые сложно сделать на SVG, но при этом они легко реализуются с помощью шейдеров.

Читать полностью »

Левитирующие гаджеты: что предлагает рынок гику? - 1

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

Среди таких систем — «левитирующие» устройства. Речь идет о целой категории устройств, которые благодаря магнитной индукции могут парить в воздухе без всякой видимой поддержки. И таких гаджетов довольно много. Возможно, у вас уже есть что-то подобное? В любом случае, давайте посмотрим, что сейчас предлагает рынок в этом направлении.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js