[Перевод] Как сделать магический шар на Three.js03.08.2021 22:17

Анимированный объём при помощи встроенного шейдера

Конечно же, после смерти Flash веб не превратился в простую, скучную плоскость. К старту курса по фронтенду показываем, как при помощи Three.js и технологии WebGL создать магический шар с анимацией внутри объёма. Автор статьи не только опубликовал код на CodePen для удобной демонстрации, но и добавил на страницу ползунки, чтобы вы могли экспериментировать с шаром и сразу видеть результат. В конце вы найдёте ссылку на исходный код на Github и демонстрацию не на CodePen.

В апреле 2019 года Гарри Алисавакис написал отличный пост об эффекте «магических шариков», которым поделился в Твиттере. Сначала посмотрите эту статью, чтобы увидеть эффект в целом. Статья содержит краткое описание техники, но цель руководства — показать код в рамках Three.js. При этом метод немного упрощён. Это руководство — промежуточное знакомство с Three.js и GLSL.

Обзор

Вначале рекомендую прочитать пост Гарри: он представляет полезные наглядные примеры, а в списке ниже — их суть:

• Поиск тектуры смещается в зависимости от направления камеры, добавляя материалу глубину.

• На каждой итерации применяются «срезы» карты высот по глубине для динамики объёма.

• Помск текстуры перемещается прокручиванием шума, так движения становятся волнообразными.

В статье Гарри было несколько не совсем понятных частей, наверное, из-за разницы возможностей в Unity и Three.js:

• Первый момент — переход от параллаксного отображения на плоскости к отображению на сфере.

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

Пример ниже — шаблон для приложения Three.js с жизненным циклом init и tick, с управлением цветом и картой окружения из Poly Haven для освещения.

1. Пустой шар

Магические шары сделаны из стекла, а шарики Гарри блестели. Чтобы сделать по-настоящему красивый материал, нужно написать сложный код шейдеров PBR, поэтому просто возьмём встроенный в Three.js PBR-материал и подключим к нему наши магические кусочки.

onBeforeCompile — свойство обратного вызова базового класса THREE.Material, которое позволяет применять исправления к встроенным шейдерам до компиляции в WebGL. Эта техника — хакерская, она не слишком хорошо объясняется в официальной документации, но узнать подробности о ней можно здесь.

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

Я обнаружил элегантный способ расширить встроенные материалы при помощи экспериментальных Three Node Materials. Находка заслуживает отдельного руководства, поэтому я буду придерживаться распространённого подхода с onBeforeCompile.

Хорошая база для начала — MeshStandardMaterial. В нём есть блеск и отражение окружения, благодаря которым материал будет очень похожим на стекло; также, если вы хотите добиться царапин на поверхности, есть возможность добавить карту нормалей.

Изменить нужно только основной цвет, на который накладывается освещение; найти его легко. Фрагментный шейдер для MeshStandardMaterial определён в meshphysical_frag.glsl.js — подмножестве MeshPhysicalMaterial, поэтому они оба определены в одном файле).

Часто приходится копаться во включённых директивой #include кусках шейдера, но у нас тот редкий случай, когда переменная, которую мы хотим изменить, на виду. Вот первая строка функции main ():

vec4 diffuseColor = vec4( diffuse, opacity );

Она обычно считывает данные из uniform-переменных диффузии и непрозрачности в JS-свойствах материала .color и .opacity, следующий код выполняет сложную работу по освещению.

Заменим эту строку присвоением diffuseColor, чтобы иметь возможность нанести любой рисунок на поверхность шара. Сделать это можно при помощи строковых методов JavaScript предоставленное обратному вызову onBeforeCompile поля .fragmentShader в shader.

material.onBeforeCompile = shader => {
  shader.fragmentShader = shader.fragmentShader.replace('/vec4 diffuseColor.*;/, `
    // Assign whatever you want!
    vec4 diffuseColor = vec4(1., 0., 0., 1.);
  `)
}

Определение типа для этого загадочного аргумента обратного вызова вы найдёте здесь. В следующем примере я поменял геометрию на сферу, уменьшил шероховатость и заполнил diffuseColor нормалями экранного пространства, которые доступны в стандартном фрагментном шейдере через свойство vNormal. Результат выглядит как блестящая версия MeshNormalMaterial.

2. Объём

Теперь начинается самое сложное — применение рассеянного цвета для иллюзии объёма внутри шарика. В раннем посте Гарри о параллаксе рассказывается, как найти направление камеры в касательном пространстве и использовать его для смещения UV-координат, а на learnopengl.com и в этой архивной заметке объясняется, как этот общий принцип работает для эффектов параллакса.

Однако преобразование материала в касательное пространство в Three.js может оказаться непростой задачей. Насколько я знаю, для этого нет встроенной утилиты, как для других преобразований пространства, так что придётся потрудиться, чтобы сгенерировать касательные к вершинам и затем собрать матрицу TBN для преобразования.

Кроме того, сфера — не очень хорошая форма для касательных из-за теоремы о волосатом шарике [или о ёжике в Европе] (да, она существует), а функция Three.js computeTangents () демонстрировала разрывы, поэтому шейдеры придётся вычислять вручную.

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

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

Другое преимущество чтения из текстуры в том, что оно позволяет нам использовать более профессиональный конвейер для создания карт высот, так что возможно генерировать интересные объёмы, но не писать новый код.

Сначала я написал функцию для выполнения этого сферического преобразования — XYZ→UV — на основании ответов из интернета, но оказалось, что функция equirectUv в common.glsl.js делает то же самое. Мы можем использовать её повторно, если в стандартном шейдере поместим логику построения лучей после строки #include_trailing_comma.

Карта высоты

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

Чтобы решить эту проблему, создадим текстуру с помощью Blender. Один из способов сделать это — согнуть сетку высокого разрешения «Grid» в сферу с помощью двух экземпляров модификатора «Simple Deform», подключить полученные координаты текстуры «Object» к выбранному вами процедурному шейдеру, а затем выполнить emissive bake с помощью рендера Cycles. Я также добавил контурные вырезы возле полюсов и модификатор подразбиения, чтобы избежать артефактов при запекании.

Результат:

Реймаршинг (рейкастинг)

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

uniform sampler2D heightMap;
uniform vec3 colorA;
uniform vec3 colorB;
uniform float iterations;
uniform float depth;
uniform float smoothing;

/**
  * @param rayOrigin - Point on sphere
  * @param rayDir - Normalized ray direction
  * @returns Diffuse RGB color
  */
vec3 marchMarble(vec3 rayOrigin, vec3 rayDir) {
  float perIteration = 1. / float(iterations);
  vec3 deltaRay = rayDir * perIteration * depth;

  // Start at point of intersection and accumulate volume
  vec3 p = rayOrigin;
  float totalVolume = 0.;

  for (int i=0; i

const myUniforms = {
  foo: { value: 0 }
}

material.onBeforeCompile = shader => {
  shader.uniforms.foo = myUniforms.foo

  // ... (all your other patches)
}

const myUniforms = {
  // ...(lots of stuff)
}

material.onBeforeCompile = shader => {
  shader.uniforms = { ...shader.uniforms, ...myUniforms }

  // ... (all your other patches)
}

uniform float time;
uniform float strength;

// Lookup displacement texture
vec2 uv = equirectUv(normalize(p));
vec2 scrollX = vec2(time, 0.);
vec2 flipY = vec2(1., -1.);
vec3 displacementA = texture(displacementMap, uv + scrollX).rgb;
vec3 displacementB = texture(displacementMap, uv * flipY - scrollX).rgb;

// Center the noise
displacementA -= 0.5;
displacementB -= 0.5;

// Displace current ray position and lookup heightmap
vec3 displaced = p + strength * (displacementA + displacementB);
uv = equirectUv(normalize(displaced));
float heightMapVal = texture(heightMap, uv).r;