Создаем эффект воды для сайта на WebGL

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

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

Создаем эффект воды для сайта с помощью WebGL

Шаг 1. HTML

Стоит напомнить, что мы будем использовать небольшой плагин jQuery который называется ripples, именно данный плагин позволяет достичь такого эффекта, по этому после подключения, нам необходимо просто вызвать данную функцию, с помощью следующей команды:

$(document).ready(function() {

try {

$('body').ripples({

resolution: 512,

dropRadius: 20, //px

perturbance: 0.04,

});

$('main').ripples({

resolution: 128,

dropRadius: 10, //px

perturbance: 0.04,

});

}

catch (e) {

$('.error').show().text(e);

}

$('.disable').show().on('click', function() {

$('body, main').ripples('destroy');

$(this).hide();

});

setInterval(function() {

var $el = $('main');

var x = Math.random() * $el.outerWidth();

var y = Math.random() * $el.outerHeight();

var dropRadius = 20;

var strength = 0.04 + Math.random() * 0.04;

$el.ripples('drop', x, y, dropRadius, strength);

}, 400);

});

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