Я попытался продублировать эффект с помощью шейдера.
Центр 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 ~~~
Далее: Как сделать волнистый узор в полоску.
