I tried to duplicate the effect by using shader.
Shader00 Center : https://www.shadertoy.com/view/XsXSz2
Shader01 Sides : https://www.shadertoy.com/view/4sXSz2
:) you could, as Byte56 said, set up three planes. A plane facing camera directly forward with Shader00, and then two plane with Shader01, perhapss as RandyGaul mentioned, top/bottom non uniformly scaled to give the illusion of depth.
They should, I believe, give sufficient 3D look to be convincing.
Both two shaders are not exactly the same as in your youtube link(also they are more of rough draft). However I believe these shaders can, hopefully, give you a place to start building your own version.
Tutorial : How to make a simple stripe pattern.
Each point in the plane has coordinate. Attempting to create a shader effect is basically visualizing 2D math onto the plane. Here let me introduce a simple example.
//This shader will visualize coordinates
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);
The color red will represent x coordinate and the green hue will represent y coordinate.
For now, we want to create simplest shader effect; a stripe. We won't need uv.y value for this tutorial.
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);
You can see that red hue gets intense as it directs to the right side. That's because x value of the coordinate gets higher as you move to the right side; the left end x coordinate starts from 0 and the right end x coordinate is 1.
Since we have this basic understanding let's try something "intuitive"
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);
There you have a stripe pattern. Wait... that doesn't look quite right. Yes this is just red and black. Stripe pattern is consist of more than just two color sections.
There...!
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);
but what if we want to make N number of stripe?
What I am attempting to display is that if you try to approach shader programming with more of traditional programming "logic" then you are likely to fail. When it comes to shader, it's all about math.
Speaking of math, what's the pattern that most resembles "stripe" pattern? In other words, what's the equation that looks like stripes? Yes. Y = sin(X). However our X value ranges from 0.0~1.0 If we want to use Y = sin(X) we want our x value to range from 0.0 ~ 6.28(which is roughly 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);
We now have "stripe" in terms of pattern generated by an equation. Why should we take this approach? Not only can this be faster, but also it eliminates the need of writing ugly "if" conditions to have N number of stripe. If we wanted to have more than one stripe, we could simply extend the pattern by increasing the maximum X value further.
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);
You might say this shader doesn't produce the perfect stripe like from early shader, but really, all you need to do is write more fitting equation!
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~~~
Next : How to make a wavy stripe pattern.
