J'ai essayé de dupliquer l'effet en utilisant un shader.
Centre Shader00: https://www.shadertoy.com/view/XsXSz2
Shader01 Sides: https://www.shadertoy.com/view/4sXSz2
:) vous pouvez, comme l'a dit Byte56, configurer trois avions. Un avion face à la caméra directement vers l'avant avec Shader00, puis deux avions avec Shader01, peut-être comme RandyGaul l'a mentionné, haut / bas non uniformément mis à l'échelle pour donner l'illusion de profondeur.
Ils devraient, je crois, donner un aspect 3D suffisant pour être convaincants.
Les deux shaders ne sont pas exactement les mêmes que dans votre lien youtube (ils sont également plus de brouillon). Cependant, je crois que ces shaders peuvent, espérons-le, vous donner un endroit pour commencer à créer votre propre version.
Tutoriel: Comment faire un simple motif de rayures.
Chaque point dans le plan a des coordonnées. Tenter de créer un effet de shader revient à visualiser des mathématiques 2D sur le plan. Ici, permettez-moi de vous présenter un exemple simple.
//This shader will visualize coordinates
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);
La couleur rouge représentera la coordonnée x et la teinte verte représentera la coordonnée y. Pour l'instant, nous voulons créer un effet de shader le plus simple; une rayure. Nous n'aurons pas besoin de la valeur uv.y pour ce tutoriel.
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);
Vous pouvez voir que la teinte rouge devient intense lorsqu'elle se dirige vers le côté droit. En effet, la valeur x de la coordonnée augmente lorsque vous vous déplacez vers la droite; la coordonnée x de l'extrémité gauche commence à 0 et la coordonnée x de l'extrémité droite est 1.
Puisque nous avons cette compréhension de base, essayons quelque chose d '"intuitif"
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à, vous avez un motif à rayures. Attendez ... cela ne semble pas tout à fait correct. Oui, c'est juste rouge et noir. Le motif à rayures est composé de plus de deux sections de couleur. 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);
mais que se passe-t-il si nous voulons faire un nombre N de rayures?
Ce que j'essaie de montrer, c'est que si vous essayez d'approcher la programmation des shaders avec plus de "logique" de programmation traditionnelle, vous risquez d'échouer. Quand il s'agit de shader, c'est une question de mathématiques.
En parlant de mathématiques, quel est le motif qui ressemble le plus au motif "à rayures"? En d'autres termes, quelle est l'équation qui ressemble à des rayures? Oui. Y = sin (X). Cependant, notre valeur X varie de 0,0 à 1,0. Si nous voulons utiliser Y = sin (X), nous voulons que notre valeur X varie de 0,0 à 6,28 (ce qui correspond à environ 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);
Nous avons maintenant une "bande" en termes de motif généré par une équation. Pourquoi devrions-nous adopter cette approche? Non seulement cela peut être plus rapide, mais cela élimine également la nécessité d'écrire des conditions "if" moches pour avoir un nombre N de bandes. Si nous voulions avoir plus d'une bande, nous pourrions simplement étendre le motif en augmentant davantage la valeur X maximale.
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);
Vous pourriez dire que ce shader ne produit pas la bande parfaite comme dans les premiers shaders, mais vraiment, tout ce que vous avez à faire est d'écrire une équation plus adaptée!
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 ~~~
Suivant: Comment faire un motif à rayures ondulées.
