Я намагався дублювати ефект, використовуючи шейдер.
Shader00 Center: https://www.shadertoy.com/view/XsXSz2
Shader01 Sides: https://www.shadertoy.com/view/4sXSz2
:) Ви могли, як сказав Байт56, встановити три літаки. Камера, спрямована на площину прямо вперед з Shader00, а потім два літаки з Shader01, пергапс, як згадував RandyGaul, вгорі / внизу нерівномірно масштабується, щоб створити ілюзію глибини.
Вважаю, вони повинні надати достатньо тривимірного вигляду, щоб бути переконливим.
Обидва два шейдери не зовсім такі, як у вашому посиланні на 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 ~~~
Далі: Як зробити хвилястий візерунок смужки.
