Extrude effecs. Everyone loves them, right?
Well, they look cool. What’s not to love?
Through my work, I ended up doing a visualization that required some extrude effects. I’m going to share it with you. In the complex example scene, there is also a second effect. “explode mesh”-effect. I won’t be explaining the explode mesh, at least not now.
It’s a visualization of scratch lottery, so if you don’t see extrude effects, keep scratching the lottery
So. Let’s get cracking. EXTRUDE!
Step 1, the spline
I am going to divide this up into three parts. The first part is explaining what I want to create. I want to create a mesh on the xy plane that has its geometry aligned to a spline. If you look at the picture, you can see the geometry generated.
Lookie, it's generated mesh from spline!
Now, we kinda need a technique for doing this. First of all, we need a spline. There is different spline techniques out there. I choose to go for a spline technique called “catmull-rom splines”(cat-spline for shorts). The nice thing about cat-splines, is that the spline(read curve), will go through all the control points.
I also had the code for cat-splines laying around. The cat-spline works like this, it takes in four points and a value t, it then spits out a point that is laying on the curve that goes through all of these points.
To support more than four points in a cat-spline, we need some hacks. Let’s say we have 50 points, and we want to access this spline with a t ranging from 0 to 1. When t = 0 , we want the first point to be returned, when t = 1.0 we want the last point to be returned, and when t = 0.5 we want the 25th point to be returned. We also want all points returned from this, to be on a continious line, touching all our points in the spline.
With me so far? Allright. The way I’m doing this, is to generate four indices into the array of control points on the spline. These indices is calculated based on the t value, and the length of the control point array. I then calculate a new t value, that I’ll call localT. localT is a value that goes from 0 to 1 for only these four control points that we’ve chosen. I then plot that in to the cat-spline function, and get my result.
If this makes no sense, don’t worry. The code for it is in the example.
Step 2, the geometry aka the mesh
Okey. We’ve got a spline that can chug out points. We need to create geometry to go along this spline. By geometry, I mean a bunch of quads aligned along the spline, just like in the picture. I’ve gone for an approuch that keeps the extrude in the xy plane. Basically, I generate a vector that goes from the current point on the spline, to the previous one. Let’s call this the tangent. What we really need, is a vector that is pointing 90 deg away from the tangent, i.e normal to the tangent.
This vector, I’ll call sideVector, because it will be used to define the sides of the current quad we are making. After we have a technique to get the sideVector, all we need to generate points to make a quad, is to generate p1 = pointOnSpline + sideVector*width , and p2 = pointOnSpline – sideVector*width.
Well, that’s just two points, we need four. Say we got p1 and p2 at t = 0.0 . Our next set of points p3 and p4 is then calculated further ahead on the spline, say t=0.001 . We connect p1 and p2 with the p3 and p4, and we have four points that make a quad.
The code for doing this can look a bit iffy, but if you work through it on pen and paper, you’ll se it makes sense.
Now, the final part. the extrude part!
Step 3, the big extrude!
Everyone loves to extrude themself
The extrude effect is really just a shader effect. What I have done, is to use the color channel to store the t value of the vertex. That is, in the red of the color channel, there is values ranging from 0 to 1 depending on where on the spline this vertex is.
The fragment shader reads this color, and also reads a value seed, which describes how much of the spline to be rendered. By adjusting/animating this seed value, one gets the extrude effect.
My shader also has the option of adjusting the length of the extrude. This can turn it into a snake like effect.
The important part of the shader code looks like this:
float4 original = tex2D(_MainTex, uv);
float lightIntensityR = step(i.color.r,_Seed) * (1.0f -step(i.color.r, _Seed – _FlowLength));
original.a*=lightIntensityR*_Opas;
_Seed decides how much of the spline to fill, flowlength enables the snake effect and opas is if one whishes to make everything a bit transperant.
If one is worried about too much alpha blending, one coud do this effect with discard instead of alpha blending. I did it with discard when I first tried out the technique in OpenGL and glsl.
The project!
so here is the project ready for download. Open up example scene. It should be simple enough to get your head around. Just ignore all the assets not in use. To get a look at the effect in action, the gamblingExample scene is your friend. the gamblingExample scene is the same one that I linked to up at the top.
If you have any questions or feedback, drop me a comment! Peace out, make cool stuff, have fun!
