Ho provato a duplicare l'effetto usando lo shader.
Shader00 Center: https://www.shadertoy.com/view/XsXSz2
Shader01 Lati: https://www.shadertoy.com/view/4sXSz2
:) potresti, come diceva Byte56, installare tre aerei. Un piano rivolto verso la telecamera direttamente in avanti con Shader00, e poi due piani con Shader01, forse come menzionato da RandyGaul, in alto / in basso non uniformemente ridimensionati per dare l'illusione della profondità.
Credo che dovrebbero dare un aspetto 3D sufficiente per essere convincenti.
Entrambi i shader non sono esattamente gli stessi del link di YouTube (inoltre sono più di bozza approssimativa). Tuttavia credo che questi shader possano, spero, darti un posto per iniziare a costruire la tua versione.
Tutorial: come realizzare un semplice motivo a strisce.
Ogni punto nel piano ha coordinate. Il tentativo di creare un effetto shader consiste essenzialmente nel visualizzare la matematica 2D sul piano. Qui lascia che ti presenti un semplice esempio.
//This shader will visualize coordinates
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);
Il colore rosso rappresenterà la coordinata x e la tonalità verde rappresenterà la coordinata y. Per ora, vogliamo creare l'effetto shader più semplice; una striscia. Non avremo bisogno del valore uv.y per questo tutorial.
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);
Puoi vedere che la tonalità rossa diventa intensa quando si dirige verso il lato destro. Questo perché il valore x della coordinata aumenta quando ci si sposta sul lato destro; la coordinata x dell'estremità sinistra inizia da 0 e la coordinata x dell'estremità destra è 1.
Dal momento che abbiamo questa comprensione di base proviamo qualcosa di "intuitivo"
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);
Lì hai un motivo a strisce. Aspetta ... non sembra del tutto giusto. Sì, questo è solo rosso e nero. Il motivo a strisce è composto da più di due sole sezioni di colore. Là...!
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);
ma cosa succede se vogliamo creare un numero N di striscia?
Quello che sto tentando di mostrare è che se provi ad avvicinarti alla programmazione dello shader con più della "logica" di programmazione tradizionale, allora probabilmente fallirai. Quando si tratta di shader, si tratta di matematica.
A proposito di matematica, qual è il modello che più assomiglia al modello "a strisce"? In altre parole, qual è l'equazione che sembra strisce? Sì. Y = sin (X). Tuttavia il nostro valore X varia da 0,0 ~ 1,0 Se vogliamo usare Y = sin (X) vogliamo che il nostro valore x sia compreso tra 0,0 ~ 6,28 (che è approssimativamente 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);
Ora abbiamo "striscia" in termini di modello generato da un'equazione. Perché dovremmo adottare questo approccio? Questo non solo può essere più veloce, ma elimina anche la necessità di scrivere brutte condizioni "if" per avere N numero di strisce. Se volessimo avere più di una striscia, potremmo semplicemente estendere il motivo aumentando ulteriormente il valore X massimo.
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);
Potresti dire che questo shader non produce la striscia perfetta come dai primi shader, ma in realtà, tutto ciò che devi fare è scrivere un'equazione più adatta!
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 ~~~
Avanti: Come realizzare un motivo a strisce ondulate.
