Введение
Three.js обладает обширными возможностями, и его взаимосвязь с другими областями 3D-технологий может вызывать некоторую путаницу. Его сфера применения постоянно развивается, поэтому его непросто суммировать, и эти наблюдения субъективны.
JavaScript 3D-библиотека
Цель этого проекта — создание лёгкой и простой в использовании 3D-библиотеки. Эта библиотека предоставляет возможности визуализации. , , CSS3D и WebGL.
Это официальное описание из репозитория GitHub. Оно, на самом деле, довольно точно отражает суть, но каждая тема в этом предложении — это отдельная обширная тема, и это ещё не всё, что есть в three.js.
Сама библиотека написана на JavaScript и предназначена для использования в среде JavaScript. В большинстве случаев это означает, что она работает на стороне клиента — в веб-браузере на каком-либо устройстве. Но с помощью node.js и headless-браузеров её можно использовать и на стороне сервера. Первая мысль, которая приходит на ум, — это рендеринг — возможно, какие-то изображения для предварительного просмотра на сервере, но это могут быть и просто трёхмерные вычисления, поскольку three.js имеет богатую математическую библиотеку. Это невероятно широкий термин. 3D может означать многое. В большинстве случаев мы подразумеваем “графику”.
Большинство проектов three.js, которые мы видим, связаны с 3D-графикой в реальном времени, где взаимодействие с пользователем приводит к мгновенной визуальной обратной связи. Другие виды 3D-графики — это различные эффекты, искусственные персонажи в фильмах, а также различные «рендеринги», которые можно увидеть в печатных изданиях или веб-каталогах (например, сайт IKEA полон 3D-графики, поскольку все фотографии их продукции созданы на компьютере).
Частью всего этого является трёхмерная математика. 3D-графика невозможна без математики, а компьютерные языки программирования изначально не понимают трёхмерные концепции. Именно здесь на помощь приходит библиотека, абстрагирующая эти математические операции, возможно, оптимизирующая их и предоставляющая высокоуровневый интерфейс, такой как Matrix4 или .dot().
Three.js поставляется с собственной математической библиотекой с классами, специально предназначенными для трёхмерной математики. Существуют отдельные библиотеки, работающие только с этой математикой, но Three — это лишь подмножество гораздо более крупной системы.
Рендеринг — ещё одна важная задача библиотеки, но и здесь всё немного сложнее. WebGL очень специфичен и выделяется среди остальных.
В случае с холстом, SVG и CSS рендеринг полностью 3D-графикой. Эти API предлагают множество библиотек для отрисовки не трёхмерных объектов или же делают это по умолчанию (CSS рисует двумерные прямоугольники, а холст — различные двумерные фигуры), но для реального трёхмерного рендеринга требуется определённое волшебство и трёхмерная математика.
Волшебное прикосновение в основном проявляется в форме абстракции интерфейса. Например, в управлении трёхмерным состоянием элемента. <div> Конвертировать в 3D с помощью CSS очень сложно. Чтобы заставить Canvas API отрисовывать что-то похожее на 3D, требуется много логики. WebGL гораздо сложнее.
Three абстрагирует все эти API в нечто столь же простое, как render() , но для этого ему необходимо общее представление того, что такое “трехмерный мир”.
Диаграмма сцены
Можно выделить область three.js, которая выступает в качестве общей абстракции «трёхмерного мира». Граф сцены — это структура данных, используемая для описания взаимосвязей объектов в некоторой трёхмерной сцене (мире). Граф сцены не обязательно должен быть трёхмерным, поскольку это удобный способ описания любой иерархии векторной графики. Более конкретно, это “дерево”, разветвлённое на “узлы” с “корневым узлом”. В three.js базовым классом для этой структуры данных является Object3D.
Это почти то же самое, что и дерево DOM. THREE.Scene похожа. <body> Будет, а всё остальное — ветви. В DOM мы можем размещать объекты, но возможности относительно ограничены. Вращение обычно происходит вокруг оси, и мы перемещаем объекты влево/вправо или вверх/вниз. В трёхмерном графе сцены у нас больше степеней свободы.
Третья сцена больше похожа на виртуальный DOM. Мы выполняем операции и задаём состояние в этом дереве, а когда нам нужно получить визуальный снимок этого состояния (например, в непрерывном цикле или при взаимодействии с пользователем/изменении состояния), мы вызываем функцию render (сцена). При изменении чего-либо не нужно обновлять всё дерево DOM, в то время как с элементом , нам придется очистить все представление, а затем перерисовать все, даже если только один элемент изменит свое положение.
Один <div> В одном <div> Аналогично родительско-дочернему отношению THREE.Mesh('sun')->THREE.Mesh('earth'). Правило CSS может быть похоже на THREE.Material, где описание типа color:'red' заставляет магию творить, и что-то становится красным. Наконец, вызов threeRenderer.render(scene) может быть похож на загрузку браузером HTML-страницы с определёнными правилами CSS.
Mesh, Scene, Camera и Light — подклассы этого универсального класса. Именно это позволяет добавлять () “ящик” к “сцене” или “свет” к “камере”.
Простая структура может быть очень плоской. Корневой узел можно рассматривать как “мир”, а его дочерними узлами могут быть “земля”, “дом”, “солнце” и “камера”.
THREE.Scene('world')
|-THREE.Mesh('ground')
|-THREE.Mesh('house')
|-THREE.Light('sun')
|-THREE.Camera('main')Этой информации достаточно, чтобы передать её рендереру для получения визуального результата. В некоторых сценах используются две сетки, представляющие разные объекты: землю и дом на холме. Источник света определяет их освещённость (утро, полдень, вспышка), а объект (камера) определяет нашу точку зрения, наше видение мира.
Результаты могут различаться, например, CSS ограничивается очень легкой визуализацией, в то время как WebGL может обеспечить тени и, в целом, высокую точность.
Благодаря этой структуре управляется трёхмерный мир. Если мы хотим смоделировать, как дневной свет влияет на дом в разные времена года, мы программно меняем положение и направление света в мире. Задача графа сцены — предоставить доступ к этому “позиционному” хуку, но для его анимации необходимо реализовать собственную логику. Простой способ анимировать трёхмерную сцену — three.js с библиотекой “tweening”.
Всё это, вероятно, верно только в теории, и вы не сможете менять рендеры сцены по своему усмотрению. Но это в основном связано с перекрытием “материалов” графом сцены и их связью с рендерами. Например, невозможно затенить <div> Или он не выглядит как металл, что можно описать с помощью материала WebGL, но его можно сделать красным, что доступно всем материалам.
В основе всего этого Object3D по-прежнему лежит обобщенный подход, а пространственные и иерархические взаимоотношения узлов друг с другом описываются посредством “графа сцены”.
Проще говоря, это переменная сцены, которая получается после многократного вызова scene.add(my_foo).
WebGL
Webgl невероятно специфичен и, вероятно, используется примерно в 99% существующих приложений three.js. Это обширная тема, поэтому, возможно, стоит сначала сделать краткий обзор альтернатив.
холст, css, svg
Всё это API. Это интерфейс, который вы, как программист, можете использовать, чтобы заставить браузер отрисовывать определённые элементы. CSS — самый распространённый интерфейс в вебе, потому что без него всё выглядит как обычный текст. Исторически он не имел никакого отношения к 3D.
Canvas фактически использует тот же элемент WebGL для рисования, но имеет другой контекст. Этот контекст называется “2D”, но поскольку 3D в любом случае ненастоящее, и мы всегда рисуем некую двумерную поверхность, реальную или виртуальную, мы можем использовать этот контекст и для рисования 3D-графики.
SVG — ещё один API, не поддерживающий трёхмерную графику, который обычно используется для описания таких объектов, как логотипы или значки. Однако, поскольку он может описывать такие простые объекты, как линии, его можно представить и в трёхмерном контексте (например, в виде наложения на карту или элементов пользовательского интерфейса или HUD с учётом пространственного положения).
Общая черта здесь в том, что ни один из них не предназначен для использования в 3D. Другая важная особенность заключается в том, что все они высокоуровневые — ранее они предназначались для чего-то другого. Например, все три умеют рисовать “круг”. В Canvas это явная фигура, в CSS, возможно, придётся использовать радиусы границ, но в итоге получается очень прямой доступ к кругу.
WebGL — очень низкоуровневый интерфейс, мало что понимающий в концепции 3D-графики. 3D-графика требует выполнения определённых математических вычислений, и их требуется немало. Просто представьте на секунду экран высокого разрешения и количество его пикселей. Если вам нужно выполнять вычисления для каждого пикселя, чтобы определить, как определённое количество света влияет на поверхность, и делать это 60 раз в секунду, это число будет огромным.
Графический процессор
Большинство компьютеров, таких как ноутбуки, настольные компьютеры, мобильные телефоны и даже часы, оснащены аппаратным устройством, которое может эффективно выполнять эти трёхмерные операции и отображать интерактивную графику. Это устройство называется графическим процессором.
Он отличается от основного процессора, поскольку создан для других целей — определенных математических операций, которые выполняются параллельно.
Так же, как мы используем JavaScript для программирования браузера, мы используем WebGL для программирования видеокарт.
Что ж, в теории это верно, но на практике это два совершенно разных явления. WebGL состоит из кода JavaScript (инструкций) и совершенно другого языка, на котором фактически выполняются вычисления (GLSL). Можно провести параллели между HTML и JavaScript и тем, как они работают вместе на странице.
Двумерный и трехмерный
Аппаратное ускорение выгодно не только для 3D. Обработка видео также является хорошим кандидатом. Вы можете запрограммировать видеокарту на изменение цветов или изменение изображения в режиме реального времени.
WebGL, будучи очень низкоуровневым, универсален. Он не знает ни 2D, ни 3D, но знает о памяти, буферах, очередях команд, шейдерах и т. д.
Параллельное программирование отличается от программирования на JavaScript. Распространенная проблема заключается в том, как разные потоки обращаются к общей переменной.
Эта другая парадигма означает, что существует совершенно другой язык — GLSL. Это язык шейдеров, который есть практически в каждом низкоуровневом графическом API. Именно в нём пишется реальная логика для этих больших чисел, и единственное его преимущество — отсутствие необходимости писать машинный код.
Другая часть API WebGL — это привязки JavaScript, с помощью которых вы сообщаете графическому процессору, что делать. Шейдер “выполняет вычисления A”, а привязка “выполняется миллион раз”.
Программист должен рассчитать, чему равно A. Это может быть что-то, связанное с 3D, или ядро, размывающее видео.
Когда вы начинаете абстрагировать эти вычисления и эти команды, вы получаете three.js.
Рендеры, которые работают вместе
Один из наиболее разумных вариантов использования — это использование комбинации рендереров для отрисовки объектов, которые хорошо смотрятся в 3D. WebGL может обрабатывать множество чисел и создавать действительно реалистичные изображения, но он слабо справляется с обработкой текста и даже некоторых линий. Дополнительный слой отрисовываемого текста можно обрабатывать с помощью CSS и рендереров Canvas, а контуры и различные линии — с помощью SVG.
THREE.WebGLRenderer
Все эти низкоуровневые процессы абстрагируются с помощью класса three.js WebGLRenderer. Именно он превращает куб в набор чисел в памяти видеокарты.
По иронии судьбы, это единственный рендерер three.js, которому не требуется 3D-графика, но для этого он лучший вариант. Остальные создают имитацию 3D с помощью 2D-API, а WebGL намеренно использует универсальный API параллельных вычислений. Но это всё равно не исключает возможность использования его исключительно для обработки живого видеопотока. Он достаточно абстрагирован от WebGL, чтобы быть полезным для этого, но вы, вероятно, используете треть библиотеки. Вы можете создать суперадаптивный пользовательский интерфейс с помощью WebGL или платформер типа Super Mario, где three.js всё равно будет отличным инструментом.
Тот факт, что вы используете только треть библиотеки, означает, что для этого может быть лучше подобран другой инструмент, или вы можете просто создать подмножество three.js. И для Super Mario, и для примеров обработки видео может потребоваться только PlaneGeometry и, возможно, тип материала.
три-математика
Код JavaScript, выполняющий определённые математические операции в 3D. В JavaScript по умолчанию есть метод Math.pow(), но нет метода Quaternion.inverse(). С помощью этих классов можно писать алгоритмы, не требующие рендеринга, например, игровой сервер, который проверяет, кто стреляет, кто испускает много лучей, но ничего не рисует.
три сцены-графа
Семейство подклассов Object3D, образующих древовидную структуру данных, описывающую “трёхмерный мир” и взаимосвязи объектов в нём. Концептуально он абстрактен, но может быть отчасти представлен с помощью специального рендеринга, если разобраться в коде.
три рендера
Слой, который преобразует этот общий граф в визуальное представление на экране или в буфере (например, создаваемом на стороне сервера). Для достижения этой цели он использует различные технологии.
THREE-WebGLRenderer
Специальный рендерер, поддерживающий аппаратное ускорение и распознающий множество концепций 3D-графики, но также подходящий для 2D-графики (и даже для общих вычислений). На мой взгляд, это основные строительные блоки three.js. Я обычно заменяю “3D” на “Graphics”, но это относится только к WebGLRenderer.
Three.js — это не игровой движок.
Не все, кому нужно 3D (или графика) в интернете, создают игры. Игровые движки обычно выполняют множество оптимизаций, выходящих за рамки описания и отображения трёхмерных миров. У разных игр разные потребности, и физика и системы рендеринга для стратегий в реальном времени и шутеров от первого лица, вероятно, будут иметь совершенно разные потребности. Всё это означает больше кода, и для того, кто просто хочет создать 3D-модель для каталога продуктов, это не только ненужно, но и нежелательно. Конечно, можно создать игровой движок и использовать три из них для рендеринга и построения блоков движка.
Three.js не загружается
Конечно, в ядре есть несколько загрузчиков для некоторых ресурсов, но все распространённые форматы, такие как gltf или fbx, независимы. Threejs не имеет значения, как вы получаете ресурсы, главное, чтобы вы их правильно анализировали и создавали 3D-объект. Для Threejs нет разницы между сеткой из файла gltf и процедурной сферой. Многие примеры творческих работ используют кубы и сферы и не загружают ничего, кроме самого Three.js. Загрузчики ядра очень общие, загружают изображения и файлы и имеют прямое представление объекта Threejs, например, материала или текстуры. Загрузчики, специфичные для конкретных форматов, построены на основе этих строительных блоков.
