Tentei duplicar o efeito usando o sombreador.
Shader00 Center: https://www.shadertoy.com/view/XsXSz2
Shader01 Sides: https://www.shadertoy.com/view/4sXSz2
:) você pode, como disse Byte56, montar três aviões. Um avião voltado para a câmera diretamente para a frente com o Shader00 e, em seguida, dois para o Shader01, talvez como RandyGaul mencionou, superior / inferior não uniformemente dimensionado para dar a ilusão de profundidade.
Devem, acredito, dar uma aparência 3D suficiente para serem convincentes.
Os dois shaders não são exatamente iguais aos do seu link do youtube (também são mais rascunhos). No entanto, acredito que esses shaders podem, esperançosamente, dar a você um lugar para começar a criar sua própria versão.
Tutorial: Como criar um padrão de listras simples.
Cada ponto no plano tem coordenada. Tentar criar um efeito de sombreador é basicamente visualizar matemática 2D no plano. Aqui, deixe-me apresentar um exemplo simples.
//This shader will visualize coordinates
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);
A cor vermelha representará a coordenada x e a tonalidade verde representará a coordenada y. Por enquanto, queremos criar o efeito shader mais simples; uma faixa. Não precisaremos do valor uv.y para este tutorial.
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);
Você pode ver que a tonalidade vermelha fica intensa à medida que ela se direciona para o lado direito. Isso ocorre porque o valor x da coordenada aumenta conforme você se move para o lado direito; a coordenada final esquerda x começa em 0 e a coordenada final direita é 1.
Como temos esse entendimento básico, vamos tentar algo "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á você tem um padrão de listras. Espere ... isso não parece certo. Sim, isso é apenas vermelho e preto. O padrão de distribuição consiste em mais do que apenas duas seções de cores. 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);
mas e se quisermos fazer o número N da faixa?
O que estou tentando exibir é que, se você tentar abordar a programação de sombreador com mais da "lógica" de programação tradicional, é provável que falhe. Quando se trata de shader, é tudo sobre matemática.
Falando em matemática, qual é o padrão que mais se assemelha ao padrão de "faixa"? Em outras palavras, qual é a equação que se parece com listras? Sim. Y = pecado (X). No entanto, nosso valor X varia de 0,0 ~ 1,0. Se queremos usar Y = sin (X), queremos que nosso valor x varie de 0,0 ~ 6,28 (que é aproximadamente 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);
Agora temos "faixa" em termos de padrão gerado por uma equação. Por que devemos adotar essa abordagem? Isso não apenas pode ser mais rápido, mas também elimina a necessidade de escrever condições feias "se" para ter N número de faixas. Se quiséssemos ter mais de uma faixa, poderíamos simplesmente estender o padrão aumentando ainda mais o valor máximo de 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);
Você pode dizer que esse shader não produz a faixa perfeita como no shader inicial, mas, na verdade, tudo o que você precisa fazer é escrever uma equação mais adequada!
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 ~~~
Próximo: Como criar um padrão de listras onduladas.
