Как создавать жидкие эффекты с WebGL

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

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

• 14 отличных дизайнов посадочной страницы

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

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

Загрузите файлы Для этого учебника.

01. Добавить начальные переменные

Откройте папку «Пуск» из файлов проекта и перетащите это в свой редактор кода. Открыть ' index.html. «И вы увидите, что библиотеки JavaScript уже были связаны с вами. Внутри пустых тегов скрипта - там, где будет идти код. Здесь установлено WebGL, чтобы убедиться, что проект может быть запущен, то добавляется весь диапазон переменных, которые будут использоваться в сцене.

 Если (! Detector.webgl) detector.addgetWebglmessage ();
var screen_width = window.innerwidth;
var screen_height = window.innerheight;
var renderer, камера, сцена, морурская группа, полгена, плавник, pointry, pointlight2, ппгеометрия;
var fload_res = 60;
var fload_ht = 650;
var stepcount = 0;
var noisescale = 9,5;
var noiseeed = math.random () * 100; 

02. Создайте больше переменных

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

 var floor_width = 3600;
var fload_depth = 4800;
var move_spd = 1.9;
var mousex = 0;
var mousey = 0;
var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerheight / 2;
var snoise = новый улучшенный ();
var textureloader = новый trey.textureloader (); 

03. Рассчитайте мышь

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

04. Изменение параметров обработки после обработки

" параметры «Функция - это то, где все настройки для эффектов после обработки после обработки будут сохранены. Если вам нужно что-нибудь изменить, это место для этого. Размытие наклона Shift покрыто в первых четырех линиях, затем пленка проходит в оставшихся линиях. Это в основном для интенсивности экрана и интенсивности шума.

05. Установить окончательные параметры

Последние параметры для темной виньетки вокруг края экрана. " в этом ' и ' анимация «Функции вызываются для запуска. " анимация Функция будет создана намного позже в руководстве, но в этом Функция создана здесь. Камера и сцена настроены, чтобы обеспечить просмотр 3D-контента.

 ExtressVignette.Uniforms [«смещение»]. Значение = 1,0;
  EffectVignette.Uniforms [«тьма»].value = 1,3;
}
в этом();
анимация ();
Функция init () {
  Camera = New Three.PerspectiveCamera (70, Window.innerwidth / Window.innerheight, 1, 4000);
  Camera.position.z = 2750;
  сцена = новые три.Scene ();
  case.fog = new three.fogexp2 (0x1c3c4a, 0,00045); 

06. Пусть свет в

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

 VAR HOMESSHERELIGHT = новые три. HemispherLight (0xe3Feff, 0xE6DDC8, 0,7);
Scene.add (полусфера);
HOMESSHERELIGHT.POSITION.Y = 300;
var centerlight = новые три .spotlight (0xb7f9ff, ​​1);
Case.add (Centerlight);
Centerlight.Position.Set (2500, 300, 2000);
Centerlight.Penumbra = 1;
Centerlight.decay = 5; 

07. Анимирующие огни

Следующие два фонаря будут добавлены. « Заметки ' и ' Pointlight2. «Цветные огни, которые будут кружок в противоположных направлениях вокруг сцены, так что свет меняется постоянно в поле зрения. Первый - розовый свет, а второй - оранжевый свет. Путь и формат для изображений отражения устанавливаются в последние две строки.

 Pointlight = New Trey.Pointlight (0xe07BFF, 1.5);
Pointlight.Position.z = 200;
stase.add (pointright);
Pointlight2 = новые три .PointLight (0xFF4E00, 1.2);
Pointlight2.Position.z = 200;
stase.add (pointright2);
var path = "img /";
var format = '.jpg'; 

08. Блестящие поверхности

Поверхность жидкости будет иметь отражающую, блестящую поверхность, и это делается путем создания куба отражения. Это кубик с на 360 градусов Skybox, расположенный внутри него, который будет отражен на поверхности жидкости. " URL-адреса «Массив содержит изображения, которые будут загружены, то материал устанавливается.

09. Настройте некоторые группы

Группа MOVER будет содержать некоторые частицы, которые будут добавлены позже, в то время как группа пола будет содержать поверхность жидкости. Создан новый трехмерный объект, который удержит эту поверхность. Будут две жидкие поверхности; У одного будет отражающий материал, а второй будет иметь каркас изготавливать «Как определено здесь.

 MOVERGOUP = новые три .Object3D ();
Scene.add (MoverGroup);
var floorgroup = новые три.Object3d ();
var floomaterial = новые три.Мешфонгматериал ({{
Цвет: 0xeeeeee, сторона: Three.doublyide, смешивание: Three.Addiveybranded, Warmframe: True
});
Plockgeometry = New Three.planegeometry (floor_width + 1200, floor_depth, floor_res, plase_res); 

10. Сделайте поверхности

Две жидкие поверхности создаются здесь как « Floormesh ' и ' floormesh2. '. Они расположены и размещены внутри этажная группа Затем повернули до хорошего угла обзора перед камерой. Это не прямо, но слегка угловая, так как это выглядит лучше.

 var floormesh = new three.mesh (полгеометрия, кублуатериал);
var floormesh2 = новые три.mesh (полгеометрия, floomaterial);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
floorgroup.add (floormesh);
floorgroup.add (floormesh2);
stase.add (этажная группа);
floormesh.Rotation.x = math.pi / 1.65;
floormesh2.Rotation.x = math.pi / 1.65;
PLALGROUP.POSITION.Y = 180; 

11. Добавить плавающие частицы

Секция кода здесь создает пустую геометрию объекта, а затем помещает в него 2000 вершин, которые действуют как частицы. Они распределяются на случайных положениях на оси x, y и z. Они будут плавать чуть выше поверхности жидкого пола.

 Пьегеметрия = новая трех. Геометрия ();
SPRITE = TEXTURELOADER.LOAD («IMG / SPRITE.PNG»);
для (i = 0; i ++) {
  var vertex = new three.vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  Vertex.y = -200 + Math.random () * 700;
  VERTEX.Z = 5000 * MATH.RANDOM () - 2000;
  PGEOMOMETRY.VERTICES.PUSH (вершина);
} 

12. Создайте взгляд

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

13. Добавьте логотип

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

 SPRITE = TEXTURELOADER.LOAD («IMG / LOGOOP.PNG»);
Геометрия = новые три.planeBuffergeometry (500, 640, 1);
Материал = новый три. MeShombertMaterial ({
  Прозрачный: True, непрозрачность: 0,8, смешивание: TROW.AddiveyClending, Map: Sprite, сторона: три.
});
вари плоскость = новые три.Меша (геометрия, материал);
плоскость.Position.Set (0, 70, 1800);
Case.add (самолет); 

14. Добавьте настройки Render

Рендерер устанавливается, чтобы иметь гладкие, антисеменные края, и теперь цвет фона установлен. Это добавляется в тело документа, так что сцена находится на HTML-странице. Эффекты после обработки устанавливаются, наличие различных инициализированных проходов рендеринга и шейдера.

15. Сделайте пропуск

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

16. Закройте функцию «init»

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

17. Настройте волны

Волны создаются сейчас для поверхности жидкости. Это делается путем перемещения каждой вершины геометрии пола на оси X и Z и перемещая его вверх на оси Y. На этом этапе за Петли создаются для оси X и Z.

 Функция SetWaves () {
  stepcount ++;
  MOVERGOUP.POSITION.Z = -MOVE_SPD;
  VAR I, IPO;
  var offset = stepcount * move_spd / floor_depth * floor_res;
  для (i = 0; I & lt; floor_res + 1; i ++) {
  для (var j = 0; j & lt; floor_res + 1; j ++) {
  IPO = I + смещение; 

18. Сделайте волны

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

 Если ((I & GT; 30) || (J & LT; 12) || (J & GT; 48)) {
  Plicegeometry.Vertices [I * (floor_res + 1) + j] .z = snoise.noise (IPO / floar_res * Noisescale, j / floor_res * noisescale, noiseiseed) * floor_ht;
  } еще если (I & GT; 25 и AMP; I & LT; 30) {
  Ploadgeometry.Vertices [I * (floor_res + 1) + j] .z = snoise.noise (IPO / floas_res * noisescale, j / floor_res * noisescale, noiseeseed) * (floor_ht / 1.2);
  } еще {
  Plockgeometry.Vertices [I * (floor_res + 1) + j] .z = snoise.noise (IPO / floas_res * noisescale, j / floor_res * noisescale, noiseeseed) * (floor_ht / 2);
  }
  }
  }
  на полу. Функция.
} 

19. Изменение размера и анимации

Когда окно изменяется, функция здесь вызывается из слушателя, которая была установлена ​​на этапе 16. Камера, рендерер и композитор все сбрасываются здесь, чтобы соответствовать новым размерам окна браузера. Функция Animate просто устанавливает себя на 60FPS, вызывая функцию рендеринга для обновления дисплея.

 Функция OnWindowResize () {
  Camera.aspect = window.innerwidth / window.innerheight;
  Camera.UpdateProjectionMatrix ();
  renderer.setsize (window.innerwidth, window.innerheight);
  composer.setsize (window.innerwidth, window.innerheight);
}
Функция Animate () {
  ProwelsimationFrame (Animate);
  оказывать();
} 

20. Установите каждый кадр действий

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

Функция визуализации () {
  var timer = -0.0002 * date.now ();
  Pointlight.Position.x = 2400 * math.cos (таймер);
  Pointlight.Position.z = 2400 * Math.sin (таймер);
  Pointlight2.Position.x = 1800 * Math.cos (-Timer * 1.5);
  Pointlight2.Position.z = 1800 * math.sin (-timer * 1.5);
  Camera.position.x + = (MouseX - Camera.position.x) * .05;
  Camera.position.y + = (-mousey - Camera.position.y) * .05;
Camera.lookat (Сцена.позиция); 

21. Визуализация сцены

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

Эта статья была первоначально опубликована в Creative Web Design Magazine Веб-дизайнер Отказ Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

• Начните с WebGL, используя Three.js
• 11 шагов, чтобы создать лучшие логотипы
• 18 веб-дизайн YouTube каналов Вам нужно смотреть