Приветствую! Я Алексей, frontend‑разработчик в SimbirSoft. Вы, возможно, видели потрясающие веб‑сайты, представленные на www.awwwards.com. Это онлайн‑каталог лучших веб‑сайтов, который оценивает и награждает творческие и инновационные работы веб‑дизайнеров и разработчиков. На этом сайте можно найти множество примеров креативного веб‑дизайна, анимаций и визуальных эффектов. Такие удивительные анимации обычно разрабатываются с использованием WebGL. Эта технология позволяет более свободно и творчески подходить к созданию впечатляющих визуальных эффектов без ущерба для производительности. Для работы с WebGL используются такие библиотеки, как Three.js, PIXIJS или BABYLON, которые также популярны при создании игр.
В данной статье мы рассмотрим совмещение WebGL‑анимации с прокруткой страницы HTML, используя библиотеку Three.js. Работа с ней во многом схожа с работой 3D‑редактора (3ds Max, Maya, Blender и т. д.). Для получения результата в виде картинки или анимации необходимо создать сцену, поместить в нее камеру, создать примитив (геометрию или 3D‑модель), создать источник освещения и запустить процесс рендеринга.
Эта статья будет полезна middle и senior фронтенд‑разработчикам, которые хотят ознакомиться с Three. В статье очень мало теории и вводных материалов, акцент сделан на практической части. Если вы совсем не знаете, как работает Three.js и шейдеры, рекомендую вначале ознакомиться с этой технологией, а после вернуться к статье.
Как это будет работать на базовом уровне
У нас есть HTML‑страница со скрытыми картинками. Блок canvas абсолютно позиционирован относительно body и находится за HTML‑страницей. Внутри сцены расположены плоскости, на которых будут отображаться наши картинки (те же самые, что и на HTML‑странице). Текстуры картинок будут реализованы с помощью вершинных и пиксельных шейдеров, благодаря этому мы сможем добавлять различные эффекты при наведении мыши. Для получения размеров и координат картинок мы вызовем функцию getBoundingClientRect и применим эти данные к нашим плоскостям в сцене, что позволит разместить их соответствующим образом и сделать их такого же размера, как и картинки. При прокрутке также будем получать значение скролла и двигать наши плоскости вверх.
Настройка проекта
Для сборки я буду использовать vite. Как установить vite, можно почитать тут. Команда
npm create vite@latest app --template vanilla
создаст базовый шаблон для разработки на JavaScript. Сразу установим Three.js, выполнив команду:
npm install three
Чтобы свободно импортировать шейдеры, необходимо установить библиотеку vite-plugin-glsl, устанавливаем библиотеку с помощью команды:
npm i vite-plugin-glsl --save-dev
Теперь создаем файл vite.config.js и прописываем там конфиг:
// vite.config.js
import glsl from 'vite-plugin-glsl';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [glsl()]
});Согласно этой библиотеке, структура проекта должна выглядеть следующим образом:
Не забудьте поменять путь до файла main.js в файле index.html, который должен находиться в папке src.
Базовые настройки сцены
В нашей сцене будет установлена перспективная камера. Чтобы камера захватывала всю ширину и высоту экрана, рассчитываем угол обзора fov:
А теперь небольшой урок школьной тригонометрии :) Камера расположена на расстоянии 1000 px от плоскости (на рисунке показана как canvas), на которой будут располагаться наши картинки. Арктангенс fov/2 будет равен (отношение противолежащего катета к прилежащему) window.innerHeight / 2 / perspective. Чтобы получить угол в градусах, умножим удвоенное значение на 180 и разделим на PI:
Если вы будете делать свой проект из моего репозитория на github, то вам следует закомментировать класс main в css, чтобы в дальнейшем все совпадало.
Изначально скроем все наши картинки, установив им значение непрозрачности (opacity: 0). Для тега canvas зададим следующие стили:
Создадим класс Sketch и вызовем экземпляр этого класса:
файл:src/main.js
import "/src/assets/style.scss";
import * as THREE from 'three';
class Sketch {
constructor() {
this.body = document.querySelector('body');
this.createScene();
this.createCamera();
this.createMesh();
this.initRenderer();
this.render();
}
get viewport() {
const width = window.innerWidth;
const height = window.innerHeight;
const aspectRatio = width / height;
return { width, height, aspectRatio };
}
createScene() {
this.scene = new THREE.Scene();
}
createCamera() {
const perspective = 1000;
const fov = (180 * (2 * Math.atan(window.innerHeight / 2 / perspective))) / Math.PI;
this.camera = new THREE.PerspectiveCamera(fov, this.viewport.aspectRatio, 1, 1000)
this.camera.position.set(0, 0, perspective);
}
createMesh() {
const geometry = new THREE.PlaneGeometry( 250, 250, 10, 10 );
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const mesh = new THREE.Mesh(geometry, material);
this.scene.add(mesh);
}
onWindowResize() {
this.camera.aspect = this.viewport.aspectRatio;
this.createCamera();
this.camera.updateProjectionMatrix();
this.renderer.setSize(this.viewport.width, this.viewport.height);
}
initRenderer() {
this.renderer = new THREE.WebGL1Renderer({ antialias: true, alpha: true });
this.renderer.setSize(this.viewport.width, this.viewport.height);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.body.appendChild(this.renderer.domElement);
}
render() {
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.render.bind(this));
}
}
new Sketch();Описание методов класса Sketch:
viewport — получаем размеры и соотношение сторон экрана;
createScene — создаем сцену;
createCamera — создаем камеру с расчетными параметрами;
createMesh — создаем материал, геометрическую плоскость и добавляем ее в нашу сцену;
THREE.PlaneGeometry (250, 250, 10, 10) — задаем размер плоскости 250×250 и 10×10 размер полигональной сетки деления плоскости по горизонтали и вертикали;
THREE.MeshBasicMaterial({ color: 0×00ff00, wireframe: true }) — задаем цвет плоскости в формате Hex Color. wireframe: true — отображение плоскости в виде полигональной сетки (позже мы это исправим);
onWindowResize — функция для обновления параметров рендера при изменении размеров экрана;
initRenderer — инициализация рендера, при изменении размеров экрана будет вызывать функцию onWindowResize;
setPixelRatio — устанавливает соотношение пикселей устройства, чтобы предотвратить размытие выходного холста. Возможно, на устройствах mac retina это значение нужно будет изменить, чтобы анимация не тормозила.
render — рекурсивная функция, которая будет запускать саму себя для обновления рендера сцены.
Страница должны выглядеть так:
Замена картинок на Three.js плоскости
Для начала доработаем наш класс Sketch.
файл: src/main.js
сlass Sketch{
constructor(){
this.body = document.querySelector('body');
this.images = [...document.querySelectorAll('img')];
this.meshItems = [];
this.createScene();
this.createCamera();
this.createMesh();
this.initRenderer();
this.render();
}
initRenderer() {
window.addEventListener('resize', this.onWindowResize.bind(this), false);
this.renderer = new THREE.WebGL1Renderer({ antialias: true, alpha: true });
this.renderer.setSize(this.viewport.width, this.viewport.height);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.body.appendChild(this.renderer.domElement);
}
...
createMesh() {
// const geometry = new THREE.PlaneGeometry( 250, 250, 10, 10 );
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
// const mesh = new THREE.Mesh(geometry, material);
// this.scene.add(mesh);
this.images.map((image) => {
const meshItem = new MeshItem(image, this.scene);
this.meshItems.push(meshItem);
})
}
...
render(){
for(let i = 0; i < this.meshItems.length; i++){
this.meshItems[i].render();
}
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.render.bind(this));
}
}this.images — получаем массив картинок;
this.meshItems — изначально равен пустому массиву;
В методе createMesh удалим ранее существовавший код и вставим цикл, который будет обходить массив изображений. Создадим экземпляр класса MeshItem для каждой фотографии и разместим его в массиве this.meshItems. Присвоим каждой картинке уникальный id, соответствующий ее индексу в массиве. Для метода render добавим цикл, который будет проходить по массиву изображений и делать их перерендер на каждом этапе requestAnimationFrame;
Все остальные методы в классе Sketch останутся без изменений.
Далее создадим класс MeshItem:
файл: src/main.js
class MeshItem{
constructor(element, scene){
this.element = element;
this.scene = scene;
this.offset = new THREE.Vector2(0,0);
this.sizes = new THREE.Vector2(0,0);
this.createMesh();
}
getDimensions(){
const {width, height, top, left} = this.element.getBoundingClientRect();
this.sizes.set(width, height);
this.offset.set(left - window.innerWidth / 2 + width / 2, -top + window.innerHeight / 2 - height / 2);
}
createMesh(){
const geometry = new THREE.PlaneGeometry( 1, 1, 10, 10 );
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
this.mesh = new THREE.Mesh(geometry, material);
this.scene.add(this.mesh);
}
render(){
this.getDimensions();
this.mesh.position.set(this.offset.x, this.offset.y, 0);
this.mesh.scale.set(this.sizes.x, this.sizes.y, 1);
}
}THREE.Vector2 — класс, представляющий двумерный вектор. Точка в 2D пространстве (то есть положение на плоскости) или размер плоскости, как у нас. Экземпляр Vector2 создаст объект с полями (x, y), зададим им начальные значения (0,0);
this.offset — координаты расположения плоскости;
this.sizes — размер плоскости;
getDimensions — задает размеры и координаты плоскостям в соответствии с размерами и координатами картинок. В THREE JS координаты расположения объектов задается не как в браузере от верхнего левого угла, а от координат x=0, y=0, z=0 (соответствующих центру экрана в нашем случае) до центральной точки объекта.
render — обновляет координаты и размеры картинок и устанавливает соответствующие размеры и координаты плоскости.
Должно получиться так:
При прокрутке страницы можно заметить, что наши плоскости немного запаздывают за картинками (при прокрутке за картинками видны наши зеленые плоскости). На анимации я сделал картинки видимыми (opacity: 1), чтобы эффект был лучше виден. Нужно сделать плавную прокрутку на странице, чтобы избавиться от этого.
Добавляем плавную прокрутку на страницу
При скролле значения прокрутки изменяются не последовательно 1,2,3,4,5, а с пропуском некоторых тактов для увеличения производительности. Из-за этого в нашей анимации плоскости не всегда успевают за картинками.
Плавный скролл можно сделать по-разному, я сделаю через свойство transform: translate3d.
файл: src/main.js
import "/src/assets/style.scss";
import * as THREE from 'three';
const lerp = (start, end, t) => {
return start * (1 - t) + end * t;
};
class Sketch {
constructor() {
this.body = document.querySelector('body');
this.images = [...document.querySelectorAll('img')];
this.meshItems = [];
this.scrollable = document.querySelector(".smooth-scroll");
this.current = 0;
this.target = 0;
this.ease = 0.065;
this.createScene();
this.createCamera();
this.createMesh();
this.initRenderer();
this.render();
}
get viewport() {
const width = window.innerWidth;
const height = window.innerHeight;
const aspectRatio = width / height;
return { width, height, aspectRatio };
}
smoothScroll = () => {
this.target = window.scrollY;
this.current = lerp(this.current, this.target, this.ease);
this.scrollable.style.transform = `translate3d(0,${-this.current}px, 0)`;
};
createScene() {
this.scene = new THREE.Scene();
}
createCamera() {
const perspective = 1000;
const fov = (180 * (2 * Math.atan(window.innerHeight / 2 / perspective))) / Math.PI;
this.camera = new THREE.PerspectiveCamera(fov, this.viewport.aspectRatio, 1, 1000)
this.camera.position.set(0, 0, perspective);
}
createMesh() {
this.images.map((image) => {
const meshItem = new MeshItem(image, this.scene);
this.meshItems.push(meshItem);
})
document.body.style.height = `${this.scrollable.getBoundingClientRect().height}px`;
}
onWindowResize() {
document.body.style.height = `${this.scrollable.getBoundingClientRect().height}px`;
this.camera.aspect = this.viewport.aspectRatio;
this.createCamera();
this.camera.updateProjectionMatrix();
this.renderer.setSize(this.viewport.width, this.viewport.height);
}
initRenderer() {
window.addEventListener('resize', this.onWindowResize.bind(this), false);
this.renderer = new THREE.WebGL1Renderer({ antialias: true, alpha: true });
this.renderer.setSize(this.viewport.width, this.viewport.height);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.body.appendChild(this.renderer.domElement);
}
render() {
this.smoothScroll();
for(let i = 0; i < this.meshItems.length; i++){
this.meshItems[i].render();
}
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.render.bind(this));
}
}
new Sketch();С помощью translate3d будем сдвигать блок с классом smooth‑scroll вверх.
this.target — количество пикселей в документе, которые были пролистаны на данный момент от начальной позиции;
lerp — функция линейной интерполяции;
this.current — текущее значение прокрутки;
this.ease — коэффициент линейной интерполяции для прокрутки;
this.scrollable.getBoundingClientRect().height — будет задавать значение высоты тегу body равное значению высоты контента.
CSS свойства, которые прописаны для блоков html, body, main, scrollable тоже влияют на качество и плавность прокрутки. В HTML-документе это выглядит так:
файл: index.html
файл:src/assets/style.scss
Отображение картинок с помощью шейдеров
Добавим шейдеры которые будут отвечать нашу анимацию. Создадим файл vertex.glsl в папке glsl:
файл:src/glsl/vertex.glsl
uniform sampler2D uTexture;
uniform vec2 uOffset;
uniform vec2 u_mouse;
uniform float u_time;
varying vec2 vUv;
#define PI 3.14
vec3 deformationCurve(vec3 position, vec2 uv, vec2 offset) {
position.y = position.y + (sin(uv.x * PI) * offset.y);
return position;
}
void main() {
vUv = uv;
float noise = 1. - sin(4. * uv.x + u_mouse.x * 90.) / 30.;
vec3 newPosition = deformationCurve(position, uv , uOffset + noise * 0.02 * sin(u_time));
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}Создадим файл fragment.gls lв папке glsl:
файл:src/glsl/fragment.glsl
uniform sampler2D uTexture;
uniform float uAlpha;
uniform vec2 uOffset;
varying vec2 vUv;
uniform vec2 u_mouse;
uniform float u_time;
vec3 rgbShift(sampler2D textureImage, vec2 uv, vec2 offset) {
float noise = 1. - sin(2. * sin(uv.x * u_mouse.x) * 20. + u_time * 0.6) / 30.;
vec3 rgb = texture2D(textureImage, uv * noise).rgb;
rgb.b = texture2D(textureImage, uv * noise + sin(u_mouse.x * u_time - u_time * 0.3)*0.015).b;
rgb.r = texture2D(textureImage, uv * noise - sin(u_mouse.x * u_time + u_time * 0.3)*-0.02).r;
return vec3(rgb);
}
void main() {
vec3 color = rgbShift(uTexture, vUv, uOffset);
gl_FragColor = vec4(color, uAlpha);
}Импортируем шейдеры:
файл: src/main.js
import "/src/assets/style.scss";
import * as THREE from 'three';
import vertex from './glsl/vertex.glsl';
import fragment from './glsl/fragment.glsl';В этой статье не будет описания работы с шейдерами. Тема достаточно объемная и в рамках одной статьи не получится сделать это качественно. Для изучения шейдеров можно воспользоваться The Book of Shaders – это пошаговое руководство по абстрактной и сложной вселенной фрагментных шейдеров.
Создадим новый материал для нашей плоскости:
файл:src/main.js класс:MeshItem
createMesh() {
const geometry = new THREE.PlaneGeometry(1, 1, 10, 10);
const imageTexture = new THREE.TextureLoader().load(this.element.src);
imageTexture.minFilter = THREE.LinearFilter;
this.uniforms = {
uTexture: { value: imageTexture },
uOffset: { value: new THREE.Vector2(0.0, 0.0) },
uAlpha: { value: 1.0 },
u_mouse: { type: "v2", value: new THREE.Vector2() },
u_time: { type: "f", value: 0.0 },
};
const material = new THREE.ShaderMaterial({
uniforms: this.uniforms,
vertexShader: vertex,
fragmentShader: fragment,
transparent: true,
//wireframe: true,
side: THREE.DoubleSide
})
this.mesh = new THREE.Mesh(geometry, material);
this.scene.add(this.mesh);
}imageTexture — асинхронно загружает нашу текстуру по указанному пути;
THREE.LinearFilter — нужен для правильного отображения асинхронно загружаемых текстур;
this.uniforms — специальное свойство Three.js, через которое можно передавать параметры в шейдеры;
uTexture — в это поле передается текстура;
uOffset — двумерный вектор, в который будем передавать параметры;
uAlpha — значение альфа канала. 0 — прозрачный, 1 — непрозрачный;
u_mouse — в это поле будут записываться координаты (x и y) положения мыши;
u_time — в это поле будет записываться значение счетчика времени.
Создадим новый материал и передадим в него параметры вершинных и вертексных шейдеров, значение юниформы, установим значение непрозрачности и сделаем материал двухсторонним:
файл: src/main.js класс: Sketch
class Sketch {
imageLoaded(url) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.onload = function () {
resolve(url);
};
img.onerror = function () {
reject(url);
};
img.src = url;
});
}
createMesh() {
const imagesLoaded = this.images.map((image) => {
const meshItem = new MeshItem(image, this.scene);
this.meshItems.push(meshItem);
return this.imageLoaded(image.src);
})
Promise.all(imagesLoaded).then(() => {
document.body.style.height = ${this.scrollable.getBoundingClientRect().height}px`;
})
}
}
new Sketch();imageLoaded — проверяем, загружена ли картинка и возвращает промис;
Promise.all(imagesLoaded) — если все картинки загружены, то обновляем значение высоты body (если этого не сделать, то высота прокрутки рассчитается до загрузки картинок, и значение высоты будет меньше).
Делаем Hover-эффект при наведении курсора на картинку
файл: src/main.js класс: MeshItem
class Sketch {
constructor() {
this.body = document.querySelector('body');
this.images = [...document.querySelectorAll('img')];
this.scrollable = document.querySelector(".smooth-scroll");
this.current = 0;
this.target = 0;
this.ease = 0.065;
this.meshItems = [];
this.planeItems = [];
this.mouseCoordinates = new THREE.Vector2();
this.raycaster = new THREE.Raycaster();
this.selectMesh = null;
this.onMouse();
this.onTouchMove();
this.createScene()
this.createCamera();
this.createMesh();
this.initRenderer();
this.render();
}
onTouchMove() {
document.addEventListener("touchmove", (event) => {
const x = (event?.touches[0].clientX / window.innerWidth) * 2 - 1;
const y = -(event?.touches[0].clientY / window.innerHeight) * 2 + 1;
this.mouseCoordinates = { x, y: window.innerWidth > 450 ? y : 0. };
})
}
onMouse() {
document.addEventListener("mousemove", (event) => {
const x = (event.clientX / window.innerWidth) * 2 - 1;
const y = -(event.clientY / window.innerHeight) * 2 + 1;
this.mouseCoordinates = { x, y }
})
}
createMesh() {
const imagesLoaded = this.images.map((image) => {
const meshItem = new MeshItem(image, this.scene);
this.meshItems.push(meshItem);
return this.imageLoaded(image.src);
})
Promise.all(imagesLoaded).then(() => {
document.body.style.height = ${this.scrollable.getBoundingClientRect().height}px`;
})
this.scene.traverse((item) => {
if (item.isMesh) {
this.planeItems.push(item);
}
})
}
render() {
this.smoothScroll();
this.raycaster.setFromCamera(this.mouseCoordinates, this.camera);
const intersects = this.raycaster.intersectObjects(this.planeItems, true);
if (intersects.length > 0) {
this.selectMesh = intersects[0].object;
} else {
if (this.selectMesh !== null) {
this.selectMesh = null;
}
}
const velocity = (this.target - this.current);
for (let i = 0; i < this.meshItems.length; i++) {
this.meshItems[i].render(velocity, this.mouseCoordinates, this.selectMesh);
}
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.render.bind(this));
}
}
new Sketch()
this.mouseCoordinates — двумерный вектор с координатами x, y, куда будут записываться координаты мыши;
Raycaster — специальный класс Three. Используется для выбора объектов в трехмерной сцене;
selectMesh — объект, на который наведена мышь;
onTouchMove, onMouse — функции, которые будут записывать координаты мыши или координаты движения пальца на мобильном в переменную this.mouseCoordinates. Но перед этим мы должны нормализовать координаты мыши в диапазоне от -1 до 1;
this.scene.traverse — будет проходить по массиву сцены и, если это геометрия, то будем ее записывать в this.planeItems;
this.raycaster.setFromCamera(this.mouseCoordinates, this.camera) — передаем координаты мыши и камеру в raycaster;
this.raycaster.intersectObjects — передаем массив с геометрией (this.planeItems) пересечение с которой нужно отслеживать. this.raycaster.intersectObjects вернет отсортированный массив с объектами сцены, которые пересеклись с мышью, начиная от самого ближнего к камере. В нулевой индекс запишется первый объект, который находился ближе к камере, и на который была наведена мышь.
Далее проверяем, есть ли пересечение, и записываем геометрию пересечения в переменную selectMesh. В противном случае обнуляем эту переменную.
this.meshItems[i].render(velocity, this.mouseCoordinates, this.selectMesh) – передаем скорость прокрутки, координаты мыши и выбранную геометрию в метод render-класса meshItems для обновления параметров шейдера:
файл: src/main.js класс: MeshItem
class MeshItem {
render(velocity = 0, mouseCoordinates, selectMesh) {
this.getDimensions();
this.mesh.position.set(this.offset.x, this.offset.y, 0);
this.mesh.scale.set(this.sizes.x, this.sizes.y, 1);
this.uniforms.uOffset.value.set(this.offset.x * 0.5, -(velocity) * 0.0003);
if (this.mesh.uuid === selectMesh?.uuid) {
this.uniforms.u_mouse.value.x = lerp(0.0, mouseCoordinates.x, 0.6);
this.uniforms.u_mouse.value.y = lerp(0.0, mouseCoordinates.y, 0.6);
this.uniforms.u_time.value += 0.05;
return;
}
this.uniforms.u_mouse.value.x = lerp(this.uniforms.u_mouse.value.x, 0.0, 0.02);
this.uniforms.u_mouse.value.y = lerp(this.uniforms.u_mouse.value.y, 0.0, 0.02);
this.uniforms.u_time.value = lerp(this.uniforms.u_time.value, 0.0, 0.02);
}
}this.uniforms.uOffset.value.set(this.offset.x * 0.5, -(velocity) * 0.0003) — передаем скорость прокрутки в шейдер;
this.mesh.uuid === selectMesh?.uuid — проверяем, если выбранный uuid геометрии совпадает с uuid текущей геометрии, то обновляем параметры шейдера через функцию линейной интерполяции. Если uuid не совпадает, то возвращаем параметры шейдера в первоначальное состояние;
Наглядный пример анимации без линейной интерполяции, если бы мы сразу присваивали значение напрямую и плавное завершение анимации с функцией линейной интерполяции.
Без линейной интерполяции:
С линейной интерполяцией:
Заключение
В этой статье мы рассмотрели пример встраивания WebGL в HTML‑страницу, с синхронизацией по прокрутке. Картинки заменены на плоскости Three.js, мы также можем управлять расположением наших картинок, используя CSS (посмотрите, как представленное демо работает на мобильной версии экрана). Благодаря использованию 3D‑графики и шейдеров можно делать различные анимации, что дает больше возможностей для творческой реализации. Единственное ограничение — это ваше воображение и уровень мастерства:)
В качестве самостоятельного домашнего задания можете сделать курсор, который следует за движением мыши вот так:
Спасибо за внимание!
Полезные материалы о frontend-разработке мы также публикуем в наших соцсетях – ВКонтакте и Telegram.
