Як створити рідкі ефекти з WebGL

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

Сьогодні, конструкції, які виграють "сайт дня" на різних веб-сайтах нагород, зазвичай намагаються зробити те, що трохи більше унікальний, і WebGL чудово підходить для цього. Додавання інтерактивного елемента може дійсно захопити увагу користувачів і показати, що це не так само, як і інші сайти, які вони просто відвідували. Це робить сайт набагато цікавішим, ніж просто маючи гігантську слайд-шоу і деякі Прокручування паралакса . Якщо у вас є сайт з складними потребами, переконайтеся, що веб хостинг Сервіс знаходиться на місці.

• 14 великих дизайнів цільових сторінок

Для того, щоб зробити ефект сплеск у цьому підручнику, буде додана рідина, відбиваюча поверхня, і це буде анімовані до камери з рухомими хвилями, що рухаються вперед. Також будуть частинки, які рухаються вперед, щоб завершити вигляд і відчуття. У центрі буде логотип сайту, і вся сцена реагує на рух миші користувача, щоб зміст змісту та 3D дійсно виділяється.

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

Завантажте файли Для цього підручника.

01. Додати початкові змінні

Відкрийте папку «Пуск» з файлів проекту та перетягніть у своєму редакторі коду. Відчинено ' index.html "І ви побачите, що бібліотеки JavaScript вже були пов'язані для вас. Всередині порожніх тегів сценаріїв, де код буде. Тут WebGL виявляється, щоб переконатися, що проект може бути запущений, то додано цілий ряд змінних, який буде використовуватися на сцені.

 Якщо (! Детектор.Webgl) детектор.addgetwebllmessage ();
var screen_width = вікно.innerwidth;
var screen_height = window.innerheight;
var renderer, камера, сцена, мовергруп, floorgeometry, floormaterial, standlight, pointlight2, pgeometry;
var floor_res = 60;
var floor_ht = 650;
var stepcount = 0;
var noisescale = 9.5;
var noiseseed = math.random () * 100; 

02. Створіть більше змінних

Наступний блок змінних рухається, наскільки велика вода повинна бути та швидкість, яку вона буде рухатися разом з початковими позиціями миші. Розроблено центр екрана, а поліпшена бібліотека шуму використовується для створення поверхні води.

 var floor_width = 3600;
var floor_depth = 4800;
var have_spd = 1.9;
var mousex = 0;
var mousey = 0;
var windowhalfx = вікно.innerwidth / 2;
var windowhalfy = вікно.innerheight / 2;
var snoise = новий replatednoise ();
var textureloader = Новий три.TextureLoader (); 

03. Обчислити мишу

Деякі остаточні змінні дотримуються для пост-обробки ефектів сцени. Додано слухач події, який перевіряє рух миші. Сцена буде рухатися в потінку відображення, щоб реагувати на рух миші. Функція, яка додається, тут виконує кількість дозволу на рух.

04. Змінити налаштування пост обробки

" парами Функція, де будуть зберігатися всі налаштування для ефектів обробки пост. Якщо вам потрібно щось змінити, це місце для цього. Розмивання нахилу Shift покривається першими чотирма лініями, потім фільм проходить у залишкових лініях. Це в основному для інтенсивності екрана та інтенсивності шуму.

05. Встановіть остаточні параметри

Останній з параметрів для темної віньєтки навколо краю екрана. " в цьому "і" анімувати Функції закликаються. " анімувати Функція буде створена набагато пізніше у підручнику, але " в цьому Функція створюється тут. Камера та сцена встановлюються, щоб дозволити перегляду 3D-вмісту.

 ЕфектВинька. Нормас ["зміщення"]. Значення = 1,0;
  effectvignette.uniformss ["темрява"].value = 1.3;
}
в цьому();
анімація ();
функція init () {
  Камера = Нова три.ПерспективаКамера (70, вікна.Іннергійд / вікна.Іннер, 1, 4000);
  camera.position.z = 2750;
  Сцена = нові три.Ссені ();
  scene.fog = новий three.fogexp2 (0x1c3c4a, 0.00045); 

06. Нехай світло

Для того, щоб побачити вміст сцени, будуть розміщені чотири вогні. Перше - це світло півкулі, яке використовується лише для отримання основної атмосфери сцени. Далі вгору - це центр світла, який додають світло-блакитне світло в середині сцени. Це виходить до однієї сторони, щоб дати трохи світла на всю сцену.

 Var HemiSpherelight = Нова три.HEMISPHERELAGE (0XE3FEFF, 0XE6DDC8, 0,7);
scene.add (hemixherelight);
hemispherelight.position.y = 300;
Var Centerlight = Нова три.Spotlight (0xB7F9FF, 1);
SCENE.ADD (центральне слово);
центральний центр.position.set (2500, 300, 2000);
centrallight.penumbra = 1;
Centerlight.decay = 5; 

07. Анімаційні вогні

Наступні два вогні, які потрібно додати. "" Доглядати "і" Softlight2 "Кольорові вогні, які будуть кружляти в протилежних напрямках навколо сцени, щоб світло змінюється постійно на думку. Перший - це рожеве світло, а другий - це помаранчеве світло. Шлях і формат для зображень відбиття встановлюються в останніх двох рядках.

 Pointlight = Нова три.Pointlight (0xe07BFF, 1.5);
pointlight.position.z = 200;
scene.add (softlight);
Softlight2 = Нова три.Pointlight (0xFF4E00, 1.2);
pointlight2.position.z = 200;
scene.add (sandlight2);
var path = "img /";
var формат = '.jpg'; 

08. Блискучі поверхні

Рідка поверхня матиме відбиваючу, блискучу поверхню, і це робиться шляхом створення відбиття куба. Це куб з 360-градусним версією, розташованим всередині нього, який буде відбитий на поверхні рідини. " urls 'Масив містить зображення, які потрібно завантажити, то матеріал встановлюється.

09. Налаштування деяких груп

Група Mover буде містити деякі частинки, які будуть додані пізніше, тоді як група підлоги буде містити поверхню рідини. Новий 3D-об'єкт створюється, що буде мати цю поверхню. Будуть дві рідкі поверхні; один буде мати відбивний матеріал, а другий буде мати каркас ' флорматеріал ", як визначено тут.

 MoverGroup = Новий три.OBJECT3D ();
scene.add (movergroup);
var floorgroup = Нова три.OBJECT3D ();
var floormaterial = нові три.meshhongmaterial ({{
Колір: 0xeeeeee, side: three.doubleide, beleding: three.additivebliness, wireframe: true
});
floorgeometry = new three.planegoometry (floor_width + 1200, floor_depth, floor_res, floor_res); 

10. Зробіть поверхні

Два рідких поверхні створюються тут як " флормаш "і" floormesh2 ". Вони розташовані і розміщуються всередині ' підлога Потім повертається до гарного кута огляду перед камерою. Це не безпосередньо плоский, але трохи кутовий, як це виглядає краще.

 var floormesh = Нова три.mesh (floorgoometry, cubematerial);
var floormesh2 = новий три.mesh (floometermentry, floormaterial);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
formgroup.add (floormesh);
floorgroup.add (floormesh2);
scene.add (floorgroup);
floormesh.rotation.x = math.pi / 1.65;
floormesh2.rotation.x = math.pi / 1.65;
floorgroup.position.y = 180; 

11. Додайте плаваючі частинки

Розділ коду тут створює порожній об'єкт геометрії, а потім розміщує в ній 2000 вершин, які діють як частинки. Вони розподіляються при випадкових положеннях на осі x, y та z. Вони будуть плавати трохи над поверхнею рідкого підлоги.

 pgeometry = Нова три.Геометрія ();
sprite = textureloader.load ("img / sprite.png");
для (i = 0; i & lt; 2000; i ++) {
  var vertex = новий три.vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  vertex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  pgeometry.vertices.push (вершина);
} 

12. Створіть погляд

Матеріал, визначений тут, встановить, як виглядають частинки. Зображення було завантажено на попередньому кроці, і це використовується як зображення на кожній частині, після створення матеріалу. Потім застосовується до кожної точки геометрії для всіх частинок. Потім вони додаються до сцени.

13. Додайте логотип

Логотип буде поміщений у центр екрана, і це буде додано до плоскої площини, яка зіткнеться з камерою. Логотип зроблений злегка прозорим і отримує добавку, щоб вона більш помітна, коли легкі об'єкти переходять за ним. Це розташовується і поміщається на сцену.

 Sprite = textureloader.load ("img / logo.png");
Геометрія = Нова три.planebuffergeometry (500, 640, 1);
матеріал = новий три.meshlambertmaterial ({{
  Прозорі: True, непрозорість: 0.8, змішування: три.Додвійний, карта: Sprite, сторона: three.doubseide
});
var plane = нові три.mesh (геометрія, матеріал);
plane.position.set (0, 70, 1800);
scene.add (літак); 

14. Додайте налаштування рендерингу

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

15. Зробіть прохід

Після додавання плівки та глюкового проходу, створюється ефект композитора, який складає всі пропуски разом. Вони додаються один за допомогою композитора, і це буде в кінцевому підсумку на екрані для дисплея аудиторії.

16. Закрийте функцію "init"

Останні кілька параметрів додаються для ініціалізації сцени. Набір параметрів для обробки пост, встановлення хвиль, і для кожного разу, коли браузер буде додано слухач події. Це дозволяє відображати дисплей, щоб відповідати новим розмірам.

17. Налаштуйте хвилі

Хвилі створюються зараз для поверхні рідини. Це робиться шляхом переміщення кожної вершини геометрії підлоги на осі x та Z і переміщуючи його вгору на осі Y. На цьому етапі " за "Петлі" створюються для осі x та z.

 Функція setwaves () {
  StepCount ++;
  movergroup.position.z = -move_spd;
  var i, ipos;
  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 ++) {
  ipos = i + компенс; 

18. роблять хвилі

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

 If (((i & gt; 30) || (J & LT; 12) || (J & GT, 48)) {
  floorgeometry.vertices [i * (floor_res + 1) + j] .z = snoise.noise (iPos / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * floor_ht;
  } Ще, якщо (i & gt; 25 & amp; & amp; i & lt; 30) {
  floorgeometry.vertices [i * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (floor_ht / 1.2);
  } else {
  floorgeometry.vertices [i * (floor_res + 1) + j] .z = snoise.noise (iPos / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (floor_ht / 2);
  }
  }
  }
  floorgeometry.verticesneedupdate = true;
} 

19. Зміна розміру та анімації

Коли вікно змінюється, функція тут називається від слухача, який був створений на кроці 16. Камера, Renderer та композитор - це відновлення тут, щоб відповідати новим розмірам вікна браузера. Анімаційна функція просто встановлюється на 60FPS, викликаючи функцію Render, щоб оновити дисплей.

 Функція OnWindowResize () {
  camera.aspect = вікно.innerwidth / Window.innerHeight;
  camera.updateproectionMatrix ();
  renderer.setsize (window.innerwidth, window.innerheight);
  composer.setsize (window.innerwidth, window.innerheight);
}
Функція анімація () {
  Запит на кадр (анімація);
  рендеринг ();
} 

20. Встановіть кожну рамку дії

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

Функція рендерингу () {
  var timer = -0.0002 * date.ow ();
  sandlight.position.x = 2400 * math.cos (таймер);
  sandlight.position.z = 2400 * math.sin (таймер);
  standlight2.position.x = 1800 * math.cos (-tiмер * 1.5);
  pointlight2.position.z = 1800 * Math.Sin (-tiimer * 1.5);
  camera.position.x + = (mousex - camera.position.x) * .05;
  camera.position.y + = (-mousey - камери.position.y) * .05;
camera.lookat (Scene.position); 

21. надайте сцену

У заключному етапі частинки рухаються вперед на їхню індивідуальну вершину, і якщо вони потрапляють до камери, вони розміщуються назад у відстань. Це оновлено і " нестава Функція називається, щоб зробити хвилі рухати вперед. Сцена відтворюється ефектами композитора.

Ця стаття була опублікована в журналі Creative Web-дизайну Веб-дизайнер . Підписатися на веб-дизайнер тут .

Пов'язані статті:

• Початок роботи з WebGL за допомогою трьох.js
• 11 кроків для створення кращих логотипів
• 18 веб-дизайну каналів YouTube ви повинні дивитися