Параллакс текстуры что это
Параллакс на чистом CSS
В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.
Теория
Прежде, чем погрузиться в понимание работы этого механизма, создадим необходимую разметку:
Коррекция глубины
Так как параллакс эффект создаётся за счёт 3D преобразований, смещение элемента по оси Z имеет побочный эффект — размеры элемента меняются, в зависимости от того, ближе или дальше он к вьюпорту. Чтобы исправить это, нам нужно применять scale() трансформацию, чтобы элемент отрисовывался в своём изначальном размере:
Регулирование скорости слоя
Скорость слоя регулируется комбинацией значений перспективы и смещения по Z. Элементы с отрицательными значениями Z будут скроллиться медленнее, чем элементы с положительными значениями. Чем больше разность значения от 0, тем явнее параллакс эффект
( т.е. translateZ(-10px) будет скроллиться медленнее, чем translateZ(-1px) ).
Создание разных участков параллакс эффекта
Предыдущие примеры демонстрировали базовую технику использования простого контента, но ведь большинство параллакс сайтов делят страницу на разные участки с разными эффектами. Вот как можно реализовать это в нашем методе.
для него CSS будет выглядеть так:
Важное правило, которое нужно помнить — при группировке элементов мы не можем обрезать контент внутри группы, тк overflow: hidden у элемента parallax__group сломает весь параллакс эффект. Необрезанный контент приведёт к тому, что дочерние элементы будут выступать за рамки. Поэтому нужно пошаманить с значением z-index у группы, чтобы быть уверенным, что контент будет корректно прятаться и показываться по мере того, как пользователь будет скроллить сайт.
Нет никаких жестких или быстрых правил по поводу работы со слоями и разные методы подразумевают разную реализацию. Но, чтобы упростить отладку позиционирования слоёв, можно применить простую трансформацию групповых элементов:
Поддержка браузеров
Урок №35. Эффект параллакса в OpenGL
На этом уроке мы рассмотрим эффект параллакса в OpenGL.
Эффект параллакса
Параллакс — это метод аналогичный методу наложения карты нормалей, но основанный на других принципах. Так же, как и в случае с картами нормалей, это — техника, которая значительно повышает детализацию текстурированной поверхности, придающая ей ощущение глубины. Хотя параллакс также является иллюзией, он намного лучше передает ощущение глубины и в сочетании с нормальным отображением (или «наложением карты нормалей») дает невероятно реалистичные результаты. Метод параллакса является логическим продолжением метода наложения карты нормалей, а поэтому перед изучением параллакса настоятельно рекомендуется получить представление о нормальном отображении, в частности — о касательном пространстве.
Параллакс тесно связан с семейством методов карт смещений, которые смещают или сдвигают вершины на основе информации о геометрии объекта, хранящейся внутри текстуры. Один из способов сделать это — взять плоскость с примерно 1000 вершинами и переместить каждую из этих вершин, основываясь на значении в текстуре, сообщающем нам высоту поверхности в рассматриваемой области. Такая текстура, содержащая значения высоты каждого текселя, называется картой высот. Пример карты высот, полученной на основе геометрических свойств простой кирпичной поверхности, выглядит примерно так:
При наложении её на плоскость произойдет смещение каждой вершины на некоторую величину, в зависимости от выбранного значения высоты из карты высот, тем самым преобразуя плоскость в шероховатую неровную поверхность, определяемую геометрическими свойствами материала. Например, если взять плоскость и применить к ней смещения с помощью вышеприведенной карты высот, то получится следующее изображение:
Проблема со смещением вершин при использовании данного метода заключается в том, что плоскость должна содержать огромное количество треугольников, чтобы результат смещения выглядел реалистичным, иначе объект будет выглядеть блочным. Поскольку для каждой плоской поверхности может потребоваться более 10000 вершин, то мы получаем вычислительно неосуществимую задачу. Что, если бы мы могли каким-то образом достичь подобного реализма без необходимости в дополнительных вершинах? А если бы я сказал вам, что ранее показанная смещенная поверхность на самом деле визуализируется только при помощи всего 2 треугольников? Кирпичная поверхность, показанная на рисунке, визуализируется с помощью параллакса — метода смещения, который не требует дополнительных вершин для передачи глубины объекта, но (подобно наложению карты нормалей) использует хитроумную технику, чтобы обмануть пользователя.
Идея параллакса состоит в изменении координаты текстуры таким образом, чтобы она выглядела так, как будто поверхность фрагмента расположена выше или ниже, чем она есть на самом деле, и всё это основано на направлении линии визирования наблюдателя (вида) и карте высот. Чтобы понять, как это работает, взгляните на следующее изображение нашей кирпичной поверхности:
Ломаная красная линия изображает значения карты высот в виде геометрического представления поверхности кирпича, а вектор V представляет направление визирования от поверхности к наблюдателю ( viewDir ). Если бы плоскость была объемной, то наблюдатель увидел бы поверхность в точке B . Однако, поскольку наша плоскость не имеет реального объема, направление взгляда вычисляется из точки A . Параллакс стремится сместить текстурные координаты в точке A таким образом, чтобы мы получили текстурные координаты точки B . Затем мы используем текстурные координаты точки B для всех последующих подвыборок текстуры, создавая впечатление, что наблюдатель действительно смотрит в точку B .
Хитрость заключается в том, чтобы выяснить, как, находясь в точке A , получить координаты текстуры точки B . Параллакс пытается решить эту проблему путем масштабирования вектора направления фрагмент-наблюдатель V на высоту фрагмента A . Таким образом, мы масштабируем длину вектора V , чтобы она была равна значению выборки H(A) из карты высот в точке A . На следующем рисунке показан масштабированный вектор P :
Затем мы берем этот вектор P и используем его векторные координаты, лежащие в плоскости, в качестве смещения текстурных координат. Это работает, потому что вектор P вычисляется с использованием значения высоты из карты высот. Таким образом, чем выше высота фрагмента, тем большее смещение он получает.
В большинстве случаев данный маленький трюк отлично выполняет свою работу, но это все еще очень грубое приближение точки B . При быстром изменении высоты над поверхностью результаты имеют тенденцию выглядеть нереалистичными, так как вектор P не будет в конечном итоге близок к точке B , как вы можете видеть ниже:
Еще одна проблема с параллаксом заключается в том, что трудно определить, какие координаты получать из вектора P , когда поверхность произвольно поворачивается каким-либо образом. Мы бы предпочли сделать это в другом координатном пространстве, в котором x- и y- компоненты вектора P ориентированы вдоль поверхности текстуры. Если вы внимательно читали предыдущий урок, то, вероятно, уже догадались, как мы можем это сделать. И да, мы будем выполнять параллакс в касательном пространстве.
Путем преобразования вектора направления фрагмент-наблюдатель V в касательное пространство преобразованный вектор P будет иметь x- и y- компоненты в базисе, построенном на касательном и бикасательном векторах поверхности. Поскольку касательный и бикасательный векторы направлены в том же направлении, что и координаты текстуры поверхности, то мы можем использовать x- и y- компоненты вектора P в качестве смещения текстурных координат, независимо от ориентации поверхности.
Но хватит теории, давайте перейдем к практике…
Отображение параллакса
Для параллакса мы будем использовать простую двумерную плоскость, для которой мы рассчитали её касательный и бикасательный векторы перед отправкой на графический процессор. На эту плоскость мы наложим диффузную текстуру…
В этом примере мы будем использовать параллакс в сочетании с наложением карты нормалей. Поскольку параллакс дает иллюзию смещения поверхности, то при несоответствующем освещении данная иллюзия теряет свой эффект. Поскольку карты нормалей часто генерируются из карт высот, использование карты нормалей вместе с картой высот гарантирует, что освещение корректно связано со смещением.
Возможно, вы уже заметили, что карта смещений, приведенная выше, является инвертированной картой высот, показанной в начале данного урока. При отображении параллакса имеет смысл использовать инвертированную карту высот, поскольку на плоских поверхностях легче подделать глубину, нежели высоту. Это несколько меняет то, как мы будем воспринимать параллакс, что и показано на следующей картинке:
У нас снова есть точки A и B , но на этот раз мы получаем вектор P , вычитая вектор V из текстурных координат в точке A . Вместо значений высоты мы можем получить значения глубины, вычитая в шейдерах значения выборки глубины из 1.0 или просто инвертируя значения текстуры фрагмента в любом графическом редакторе.
Параллакс реализуется во фрагментном шейдере, так как по всей поверхности треугольника эффект смещения будет отличаться. Затем во фрагментном шейдере нам нужно будет вычислить вектор направления фрагмент-наблюдатель V , поэтому нам потребуются координаты наблюдателя и координаты фрагмента в касательном пространстве. На предыдущем уроке у нас уже был вершинный шейдер, который отправляет эти векторы в касательное пространство, поэтому мы можем его скопировать:
[1.7.10/1.7.9/1.7] STCM’s Parallax для Minecraft
Описание
STCM’s Parallax Resource Pack — потрясающий ресурс пак для minecraft, текстуры которого созданы с эффектом параллакс. А это значит что у каждого блока или предмета будет не плоская текстура, а объемная со своим уникальным рельефом. Разрешение пака составляет 128×128. Так же рекомендуется использовать шейдеры(Seus 10.1) для придания еще большей реалистичности.
Установка
1. Установите OptiFine HD или пропатчите клиент с помощью McPatcher HD
2. Скачайте и поместите Ресурс пак в папку resourcepacks
путь умолчанию: С:/Users/’UserName’/AppData/Roaming/.minecraft/resourcepacks
3. Запустите Minecraft
4. Зайдите в Настройки
5. Перейдите в Ресурс паки
6. Нажмите на стрелочку рядом с нужным паком (он должен переместиться в одну колонку со стандартным)
Карты высот и параллакс
Из этой статьи вы узнаете о картах высот (height maps), также называемых картами параллакса (parallax maps).
Что такое карта высот?
Как обычно, когда я говорю «карта», то имеют в виду текстуру, содержащую информацию о внешнем виде 3D-объекта. Карта высот/параллакса — это карта, которую можно использовать для того, чтобы создать иллюзию того, что одни части объекта выступают сильнее, чем другие, то есть имеют бОльшую высоту.
По описанию это может показаться очень похожим на карту нормалей (normal map), благодаря которой 3D-объект кажется более рельефным, но действует она немного иначе. Карта нормалей использует освещение, чтобы объект казался более рельефным, чем на самом деле. Карта высот использует параллакс, чтобы сделать объект выше, чем на самом деле.
Параллакс
Замечали ли вы в детстве, что когда идёшь вечером, луна идёт за тобой? Объекты, мимо которых мы проходим — или движемся параллельно им, приближаются и удаляются, но луна всегда занимает в небе одно и то же место. Если вы, как и я, выросли рядом с горами, то могли также замечать, что они тоже не очень быстро двигаются, однако если уехать достаточно далеко, они всё-таки останутся позади. Чем дальше от нас предметы, тем медленнее они «движутся» при изменении угла взгляда на них (например, когда проезжаешь их на машине) и чем ближе объекты, тем быстрее они смещаются при смене вашей позиции и угла взгляда.
В таких двухмерных играх-сайдскроллерах, как Mario или Rayman, создатели использовали этот эффект. Они создали несколько слоёв фона, прокручивающихся с разной скоростью в зависимости от того, насколько близкими они должны казаться. Это просто иллюзия — разумеется, все спрайты плоские, но она придаёт сцене ощущение глубины!
Однако в 3D-графике мы тоже можем использовать это явление. Но вместо прокрутки здесь можно комкать или растягивать координаты текстур в зависимости от направления обзора, чтобы обмануть глаз и увидеть глубину! Именно этим данный эффект отличается от карты нормалей. Карта нормалей оставляет неизменными координаты текстур, но изменяет сторону, в которую по нашим ощущениям направлен объект. Карта высот сохраняет направление, но меняет координаты текстур, которые мы используем для всех остальных карт.
Если посмотреть на них по отдельности, то различия очевидны. Вы можете воссоздать изображения из статьи в собственном проекте, или просто читать её.
Если вы хотите создать собственный проект, то перейдите по адресу www.textures.com/download/pbr0419/137925 и скачайте файлы в папку своего проекта, например, в Assets/Textures/Acoustic Foam. (Не волнуйтесь, текстуры бесплатны!) Затем создайте материал и установите этот шахматный паттерн в слот основной текстуры, а потом задайте материал плоскости. У материала оставьте шейдер Standard shader.
Материал плоскости имеет только этот шахматный паттерн в качестве основной текстуры albedo и больше никаких других карт.
Здесь использован шахматный паттерн как основная текстура albedo и карта нормалей в виде акустического поролона (acoustic foam). Заметьте, что шахматный паттерн по-прежнему идеально ровный.
Здесь шахматный паттерн используется как основная текстура albedo, а acoustic foam — как карта высот.
Если приглядеться, то можно увидеть, что эффект неравномерный! Так получилось, потому что направление обзора этих двух частей неодинаково.
Эффект довольно интересен, но лучше всего он работает, если вы смотрите на плоскость почти перпендикулярно, и разваливается при взгляде на плоскость сбоку.
Итак, всё это очень здорово, но иллюзия может добиться только этого. Похоже, что лучше всего её использовать в небольших дозах на тех объектах, на которые игрок не сможет смотреть под такими углами.
А вот плоскость с шахматным паттерном в качестве текстуры albedo, картой нормалей acoustic foam и картой высот acoustic foam. Они отлично сочетаются! Ну ладно, хватит болтовни, давайте уже напишем шейдер, выполняющий эту задачу!
Подготовка
Откройте сцену в Unity. Добавьте плоскость, нажав правой клавишей мыши внутри иерархии и выбрав 3D Object > Plane.
Установите transform плоскости в 0, 0, 0 и оставьте на ней материал по умолчанию, она нужна будет, чтобы дать нам представление о масштабе. Добавьте таким же образом ещё одну или две фигуры. Я буду использовать сферу и куб. Расположите их, где угодно, на плоскости или над ней. Скачайте эти бесплатные текстуры в свой проект: https://www.textures.com/download/pbr0579/138828 (или используйте любой другой набор текстур с картами высот!), например в Assets/Textures/CrystalOre. В той же папке или в подпапке папки Materials создайте новый материал под названием Crystal Ore. Примените новый материал к двум фигурам. Нажмите правой клавишей мыши в Assets/Shaders/Standard и выберите Create > Shaders > Standard Surface Shader
Назовите новый файл шейдера BasicParallax, затем дважды щёлкните по нему, чтобы открыть его в Visual Studio. Измените первую строку на Shader «Xibanya/Standard/BasicParallax», затем сохраните его и вернитесь в Unity.
Назначьте шейдер BasicParallax материалу Crystal Ore. Теперь можно перетащить в слот текстуры карту albedo.
Создаём шейдер
Мы уже говорили о том, как использовать карту нормалей, metallic map и так далее, поэтому я буду предполагать, что вы уже знаете, как это делается. (Если нет, то прочитайте информацию по ссылкам и возвращайтесь!).
Перейдите к созданному мной базовому шейдеру, нажмите на кнопку Raw, скопируйте и вставьте шейдер в BasicParallax (но перед сохранением обязательно измените название сверху на Xibanya/Standard/BasicParallax!). Теперь можно перетащить карту нормалей и карту AO.
Я создала этот минималистичный шейдер для записи всех свойств, используемых стандартной моделью освещения (Standard lighting model), и больше в нём ничего нет, поэтому требуется дополнительная настройка, чтобы шейдер мог использовать roughness map. Добавьте эту строку в свойства (например, над gloss map)
Добавьте это под surface pragma
Затем измените часть, после которой распаковывается glossmap, на это:
(Если вы незнакомы с roughness map или ключевыми словами, то о них можно прочитать здесь!) Завершив с этим, сохранитесь и возвращайтесь в Unity. Теперь перетащите roughness map и переключите флаг Roughness на true.
Отлично! Наконец мы подготовили основу, настало время приступать к параллаксу!
Создание шейдера параллакса
Наверху, в разделе свойств добавьте следующие пять строк:
Мы сделаем параллакс функцией, которая активируется/отключается ключевым словом _PARALLAXMAP. Для правильно применения карты параллакса нам нужно использовать касательное направление обзора. Если мы пишем поверхностный шейдер, то если ключевое слово задано (то есть мы его включили), это будет направление обзора, получаемое от структуры Input. Если ключевое слово _PARALLAXMAP не задано, мы всё равно будем получать касательное направление обзора, если выполняем запись в o.Normal. Однако возможно, что мы не всегда будем это делать, поэтому об этом легко забыть и запутаться, поэтому лучше привыкнуть использовать его каждый раз, когда нам нужно распаковать карту параллакса! В pragma ключевого слова Roughness добавим следующую строку:
и добавим в структуру Input float3 viewDir.
Наконец, объявим в подшейдере текстуру карты параллакса и свойства силы параллакса.
Сохраним код и вернёмся в Unity, чтобы убедиться, что не сделали никаких опечаток или ошибок. Если всё правильно, то теперь мы можем перетащить текстуру CrystalOre_1k_height в слот карты параллакса материала. Не забудьте там же включить параллакс.
Разумеется, это пока ни к чему не приведёт, ведь мы не внесли никаких изменений в функцию поверхности! Мы используем карту параллакса для определения того, как сжимать или растягивать координаты текстуры, поэтому нам нужно обрабатывать всё связанное с параллаксом перед всем остальным. Добавим следующее в самое начало функции поверхности:
Мы распакуем текстуру и возьмём зелёный канал (большинство карт высот чёрно-белые, из-за чего все каналы одинаковы, поэтому нам достаточно использовать один), а затем передадим его, силу параллакса и касательное направление обзора (удобно вычисленное за нас магией поверхностного шейдера Unity) во встроенную функцию под названием ParallaxOffset. ParallaxOffset — это величина, определяющая сжатие или растягивание UV-координат в зависимости от направления обзора. Её можно найти в библиотеке UnityCG.cginc, включаемой в каждый поверхностный шейдер. ParallaxOffset возвращает значение float2, которое мы затем можем прибавить к координатам текстуры IN.uv_MainTex (которые также являются float2!), чтобы каждая распаковываемая после этого текстура распаковывалась со смещением. Если вам любопытно, то это выглядит так, но вам необязательно знать, как это работает, чтобы добавить параллакс к своим поверхностным шейдерам!
(не добавляйте это в свой шейдер, этот код уже встроен!) И наша работа здесь на этом закончена! Сохранитесь и вернитесь в Unity. Поиграйтесь с ползунком Parallax Strength, чтобы увидеть эффект в действии.
В свойствах я при помощи ползунка с интервалом ограничил силу параллакса в пределах от 0 до 0.1, потому что при значениях выше 0.1 всё начинает выглядеть довольно безумно даже при самых идеальных углах обзора, но вы можете изменить свойство с интервала на float, чтобы поэкспериментировать с различной силой параллакса.
Проект Параллакс / Project Parallax Remastered
Предисловие:
Автор данного мода решил полностью возобновить работу и сделал реинкарнацию, скорее ремастеринг мода и полностью всё переработал. Все параллакс карты из предыдущей версии мода были удалены и полностью переделаны для достижения максимального эффекта и точности. Кроме того мод теперь имеет один общий архив с текстурами и мешами для всех локаций. Теперь в мод вошли такие локации как Рифтен, фермерские хозяйства и деревни во владении Винтерхолда. Этот мод охватывает только экстерьеры (внешний мир,улица), за исключением нескольких внутренних текстур в Вайтране. 99% других внутренних (интерьеры, помещения) текстур не имеют никаких параллакс карт и следовательно не будут работать. Этот мод охватывает Вайтран, Солитьюд, Виндхельм, Винтерхолд, фермерских хозяйства/села, Маркарт, дороги, мосты и Рифтен.
Обновление:1.3а
— Добавлены meshes файлы мостов для совместимости с новой версией SMIM 1.74 и выше
— Добавлены отсутствующие meshes файлы камешков шпунтовки (укладка), каменные стены, камни которые вы видите вдоль дорог и в деревнях
— Удален патч для мода «Enhanced Lights and FX», так как с этим патчем происходили различного рода баги (прочтите ниже как быть если у вас есть мод Enhanced Lights and FX)
Описание:
Все наверно замечали что игровые поверхности, такие как дороги из камней, стены каменные, мосты, и тому подобное выглядят абсолютно плоскими, как обыкновенная картинка, а должно же всё быть наоборот! Камни на стыках и швах будут выделятся, вы увидите как камни на дорогах, стенах, домах, мостах будут иметь объём визуальный, можно будет разглядеть каждую черепицу на крыше а так же множество мелких деталей! Автор разработал этот проект на таком уровне, что потери в FPS нет!
Известные ошибки:
— Иногда вы можете заметить смещение на некоторых текстурах, но на 95% всё работает хорошо
При обновлении до v1.3a:
— Удалять ничего не нужно, просто если у вас уже установлен данный мод, то заново переустановите мод SMIM и мод Enhanced Lights and FX (если вы им пользуетесь) и потом уже установите новую версию 1.3а поверх с заменой всех файлов
Установка:(только вручную, через NMM менеджер архив не установится)
На всякий случай сохраните свои папки textures и meshes которые в игре в папке Data,на то случай если вам не понравиться данный мод
— В архиве 2 папки, Основной мод и Фикс исправляющий дефект с чёрными дверными проемами в Виндхельме (этот фикс если у кого то будет такой баг)
— Поместить папку Data из Основного мода в папку с игрой (не Data внутрь Data, а поверх), подтвердить слияние всех файлов и папок при установке
— Данный мод устанавливать только после установки мода SMIM, поверх с заменой файлов при установке
— Данный мод устанавливать только после установки мода Enhanced Lights and FX, поверх с заменой файлов при установке (если вы пользуетесь данным модом)
— Если вы установите данный мод без мода SMIM, то в конечном итоге будут отсутствовать некоторые текстуры в игре (синие текстуры)
— Если у вас в Виндхельме появляется дефект с чёрными дверными проемами,то установите фикс поверх с заменой файлов
