Графическое программирование, повторяющее переход от Chrono Trigger внутри ворот

Я начал играть в эту игру впервые за последнее время, и это действительно заинтересовало меня

Вы можете увидеть переход в движении, начинающийся с ~ 12: 08

Там, кажется, есть некоторые интересные математики, происходящие там. Казалось бы, есть две разные точки зрения, объединенные вместе. Сначала на заднем плане отрисовывается голубая рябь, а затем появляются фиолетовые колеблющиеся волны в какой-то псевдо 3D проекции.

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

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

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

Центр Shader00: https://www.shadertoy.com/view/XsXSz2

Стороны Shader01: https://www.shadertoy.com/view/4sXSz2

:) Вы можете, как сказал Byte56, установить три самолета. Плоскость, обращенная к камере непосредственно вперед с Shader00, а затем две плоскости с Shader01, perhapss, как упомянул RandyGaul, сверху / снизу неравномерно масштабируется, чтобы создать иллюзию глубины.

Они должны, я считаю, дать достаточно 3D-вид, чтобы быть убедительным.

Оба шейдера не совсем такие же, как в вашей ссылке на YouTube (также они более грубые). Однако я полагаю, что эти шейдеры могут, надеюсь, дать вам место для создания собственной версии.

Учебное пособие: Как сделать простой шаблон в полоску.

Каждая точка на плоскости имеет координату. Попытка создать эффект шейдера - это в основном визуализация 2D-математики на плоскости. Здесь я приведу простой пример.

//This shader will visualize coordinates 
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);

Красный цвет будет представлять координату x, а зеленый оттенок будет представлять координату y. Сейчас мы хотим создать простейший эффект шейдера; полоса Нам не понадобится значение uv.y для этого урока.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);

Вы можете видеть, что красный оттенок становится интенсивным, поскольку он направлен на правую сторону. Это потому, что значение x координаты становится выше, когда вы двигаетесь вправо; координата x левого конца начинается с 0, а координата x правого конца равна 1.

Поскольку у нас есть это базовое понимание, давайте попробуем что-то «интуитивное»

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

Там у вас есть полосатый рисунок. Подожди ... это выглядит не совсем правильно. Да, это только красный и черный. Полосатый рисунок состоит из более чем двух цветовых секций. Там...!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

но что, если мы хотим сделать N номер полосы?

Я пытаюсь показать, что если вы попытаетесь приблизиться к программированию шейдеров с более традиционной «логикой» программирования, то вы, вероятно, потерпите неудачу. Когда дело доходит до шейдеров, это все о математике.

Говоря о математике, какой шаблон больше всего напоминает «полосатый» рисунок? Другими словами, что такое уравнение, которое выглядит как полосы? Да. Y = грех (X). Однако наше значение X находится в диапазоне от 0,0 ~ 1,0. Если мы хотим использовать Y = sin (X), мы хотим, чтобы наше значение X находилось в диапазоне от 0,0 ~ 6,28 (что примерно равно 2 PI).

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI; 
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

Теперь у нас есть «полоса» с точки зрения шаблона, сгенерированного уравнением. Почему мы должны принять этот подход? Это не только может быть быстрее, но также устраняет необходимость написания некрасивых условий «если», чтобы иметь число N полосок. Если бы мы хотели иметь более одной полосы, мы могли бы просто расширить шаблон, увеличивая максимальное значение X еще больше.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

Вы можете сказать, что этот шейдер не производит идеальную полосу, как в ранних шейдерах, но на самом деле все, что вам нужно сделать, это написать более подходящее уравнение!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);

Weeee ~~~

Далее: Как сделать волнистый узор в полоску.