Преломляющий стеклянный шейдер

10

У меня есть бесконечное гексагональное дно, созданное путем тесселяции точечной сетки в паре тесселяционных шейдеров:

введите описание изображения здесь

Обратите внимание, что это плоский каркас - «тени» - это трюк освещения:

введите описание изображения здесь

Теперь я хотел бы, чтобы это казалось толстым, преломляющим стеклом, но я не уверен, как поступить.

Первое, что пришло в голову, это

  1. установить униформу, содержащую запрашиваемую «толщину» блоков
  2. При расчете освещения используйте закон Снелла, чтобы рассчитать длину оптического пути, который луч прошел бы через шестнадцатеричный блок, если бы он был на самом деле таким же толстым, как говорит форма "толщины", и суммировать альфа по этой длине. Это даст прозрачность, но не учитывает такие вещи, как внутреннее отражение / МДП и т. Д.

введите описание изображения здесь

Я еще не пробовал, поэтому не уверен, каким будет визуальный результат.

В конечном счете, для этого конкретного уровня, я пытаюсь получить тот стеклянный, шестиугольный вид пола, который используется в Tron: Legacy во время битвы за диск. ( См. Это изображение для примера .)

Предложения?

3Dave
источник
1
Можете ли вы объяснить, какой внешний вид вы пытаетесь достичь? Снимок Tron показывает в основном отражение, AFAICT, а не преломление - в большинстве случаев вы не можете видеть сквозь пластины пола. Предполагая, что вы не просто хотите блестящую поверхность, что вы хотите видеть сквозь пол? Есть ли текстура подложки, которую вы хотите показать? Есть ли целая сцена под полом (как в Троне)? Или вы хотите, чтобы это было больше похоже на матовое стекло, где вы не видите четкого изображения, но имеете эффект рассеяния под поверхностью?
Натан Рид
Подповерхностное рассеяние, хотя я не знал, как оно называется. Делает поиск в Google легче. :)
3Dave

Ответы:

4

В этой статье в GPU Gems подробно рассматривается преломление, которое может дать довольно хорошие результаты.

(а) полная прозрачность (б) преломляющее стекло

В самом простом смысле

Первым шагом базовой техники преломления является преобразование геометрии сцены в текстуру, пропуская все сетки преломления. Эту текстуру можно использовать для определения того, какие объекты видны за преломляющими объектами, которые будут визуализированы в последующем проходе. Мы обозначаем эту текстуру как S.

Второй шаг - визуализация рефракционных сеток, поиск значений из текстуры S с возмущением, примененным для имитации рефракционного вида. Возмущение может быть достигнуто с помощью карты нормалей N, где красный и зеленый (XY) компоненты карты нормалей используются и масштабируются по некоторому небольшому значению, чтобы добавить смещение к проецируемым координатам текстуры. Этот подход легко реализовать в шейдере:

  1. получить текстуру N
  2. используйте компоненты XY, масштабированные на небольшое значение (например, 0,05)
  3. добавить это значение смещения в проекции координат текстуры для S

В следующем листинге показан шейдер, демонстрирующий этот подход

half4 main(float2 bumpUV : TEXCOORD0,
  float4 screenPos : TEXCOORD1,
  uniform sampler2D tex0,
  uniform sampler2D tex1,
  uniform float4 vScale) : COLOR
{
  // fetch bump texture, unpack from [0..1] to [-1..1]
  half4 bumpTex=2.0 * tex2D(tex0, bumpUV.xy) - 1.0;

  // displace texture coordinates    
  half2 newUV = (screenPos.xy/screenPos.w) + bumpTex.xy * vScale.xy;

  // fetch refraction map
  return tex2D(tex1, newUV);
}

Следующие изображения иллюстрируют эти три шага

Три шага, перечисленные в шейдере выше

В той же статье есть более продвинутые методы, которые могут придать гораздо более привлекательный вид


Для аналогичного эффекта в Unity, вы можете взглянуть на вики-страницу The Refraction Shader

codemonkey
источник
3

Я возьму изображение, которое вы показали, в качестве примера того, как я представляю эффект. Алгоритм, о котором я могу думать, прост:

  1. Визуализация среды в порядке текстуры текстуры кубической карты для имитации отражения окружающей среды.
  2. Примените текстуру кубической карты в плоскость, которая представляет слой ниже преломляющего пола. Пока не визуализируйте самолет.
  3. Рендеринг самолета в текстуру, нормальную 2D текстуру.
  4. Передайте текстуру в рефракционный шейдер, используемый для рендеринга рефракционного пола.
  5. Теперь визуализируем рефракционные сетки / пол с помощью рефракционного шейдера.

Что касается рефракционного шейдера, то для имитации стекла вы можете сделать

  • Используйте термин Френеля для имитации отражения и преломления.
  • Используйте карту нормалей / нормалей, чтобы сделать выборку текстуры.

Я просто подумал об этой идее, поэтому я не проверял ее. Я уверен, что это требует больше работы, может быть, я сделаю, как только вернусь с работы.

concept3d
источник
Интересный подход - мне придется немного потушить на этом. Спасибо за вклад.
3Dave