Встраивание WebGL в HTML-страницу с помощью Three.JS

demo, github 

Приветствую! Я Алексей, 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.