Использование шейдеров для создания реалистичных спецэффектов в веб-дизайне

WebGL стал предметом экспериментов и проверки пределов возможного в Интернете. Почти каждый день мы натыкаемся на грандиозные решения, основанные на нем. В качестве доказательства мы уже рассмотрели ряд реальных проектов.

Сегодня мы собираемся изучить некоторые концепции, демонстрирующие преимущества использования шейдеров. Мы собираемся сосредоточиться на GLSL.

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

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

Waterdroplet WebGL Shader от Stefan Weck

Штефан Верк открывает наш обзор своим шедевром, доказывая всем, что высокие технологии — это настоящее волшебство. Ему удалось воссоздать дождь, падающий на окно (или, в нашем случае, на экран). Поведение и реализация капель дождя настолько реальны, что к ним хочется прикоснуться. Здесь за симуляцию дождя стоит JavaScript, а за липкий эффект и преломление отвечает шейдер WebGL.

Шейдер воды на трех js от Джонатана Блэра / ShaderToy Compilation от Дэвида Хартли

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

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

Пример шейдера Pixijs.v3 от Omar Shehata

Этот увлекательный концепт от Омара Шехаты, созданный на основе Pixi.js, удивит вас своим очень подробным моделированием эффекта дымки. Приправленные красивой пурпурной окраской и темным фоном, эти облака дыма выглядят невероятно аутентично. Поведение хорошо продумано. Концепция просто завораживает.

Шейдер Snowfall WebGL от Бориса Шеховаца

Эта концепция оправдывает свое название. Это очень реалистично. Борис Сеховац использовал снежинки разного размера, разный уровень размытия и разную скорость, чтобы воссоздать глубину. Более того, он также пытался имитировать ветер, заставляя композицию менять свое направление слева направо и наоборот. В результате мы можем стать свидетелями какой-то небольшой снежной бури. За этой красотой стоит нативный шейдер WebGL.

Концепция Ананда Даваасурена

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

Шейдер облаков Дэвида Хартли

Это еще один шедевр, созданный Дэвидом Хартли. На этот раз художник демонстрирует свой взгляд на облака и их парящее поведение. Опять же, за этим грандиозным проектом стоит Pixi.js. Здесь камера проходит прямо сквозь облака, позволяя ощутить всю красоту идеи. Но Давиду этого было мало. Он также предоставил нам возможность исследовать сцену, перемещая курсор. Просто невероятно.

Шейдер огня от 14islands

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

GLSL: Chrome от Лиама Игана

Chrome от Liam Egan представляет собой жидкость с высокой плотностью. Проект слегка напоминает сцену из эпопеи «Терминатор 2», когда злобный Т-1000 показал свой жидкометаллический состав. Концепция кажется искусственной, без сомнения. Тем не менее, поведение и глянцевая поверхность выглядят невероятно реалистично. Более того, вы можете поиграть, перемещая мышь вверх и вниз, чтобы изменить параметр сглаживания.

Волновой эффект Мартина Лаксенера

Этот проект Мартина Лаксенера — прекрасный пример применения шейдеров на практике. Здесь автору удалось создать настоящий эффект ряби, который заставляет изображение двигаться, как занавес, при наведении курсора мыши. Curtains.js поддерживает эту концепцию. Единственным недостатком является то, что может быть слишком рано снабжать каждое изображение на веб-сайте этим эффектом, поскольку он все еще слишком тяжел для слабого компьютера, чтобы «переварить» его.

Глючные светлячки, Фабьен Мотте

В проекте Фабьена Мотта есть и практичное решение. Однако мы не имеем в виду этих ярких светлячков, которые хаотично перемещаются вокруг вертикальной оси. Речь идет об эффекте глюка, который время от времени попадает на экран. Это просто невероятно. И поскольку она популярна в наши дни, эта концепция может послужить идеальной основой для ваших экспериментов.

Бросьте немного тени

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

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

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