Making Time-based jitter for papery Outlines


Here is a cool shader effect I came up with for an in-house team's jam I did with my friends. 
The starting point was to make a paper outline, as if you have a model that is hand-drawn on a piece of paper, and it is ripped off. Quite like Paper Mario.  Not the inside sphere, look at the outside of it, the way it outlines the sphere.



Making Outlines:

Before I begin this, you need to know something called Vertex Shading. You can look it up, it is a whole world of 3D graphics. Basically, when your GPU renders a 3D model, it has information of where each vertex should be, and depending on UV, how many times each vertex should be rendered. UV properly, kids! Or you risk duplicating vertices, and it hits performance hard. The CPU provides the vertex information (what vertex is at what location in the 3D space), but the GPU gets to be sneaky and edit those informations if needed. That is Vertex Shading.

  1.  To move the vertices randomly, we will use the ever-present in tech art, the one algorithm to rule all, the Noise algorithm.  Let's plug it and process it to get hard greyscale colors. Different numerical values can be slotted into get different level of hardness. We will plug values between 4 and 8 to get the varying levels of hard grayscale.
  2. For that, we will begin with Time and plug it to get Sin so that we get oscillating -1 to 1 values. Again, we will process it to get the range of values we want. In this case, we first limit it to 0 and 1 (do not use absolute note, or you will get hard transition from 0 to 1, but not from 1 to 0). Then a float variable to control the jitteriness between 0 to 1, and then lerp it between some values.  The jitteriness is achieved due to the Floor node, because that will force the values to stick between integer values.
  3. The processed noise is put through a threshold once again 
  4. Now we simply use these 0 to 1 values to displace the vertices.  But how? Each vertex also comes with normal information. What is Normal? Normal map? No, normals in 3D refer to which direction in the 3D space the vertex/edge/face is looking at. It is almost always facing inside or outside, and always normalized, so we need a variable, in my case ControlSize, to control the effect how big the displacement will be. ( Note: Normal maps are the same, but on a pixel level so that light knows how and where to bounce when scenes are rendering. Without a normal map, pixels will inherit interpolated vertex normals of the vertices of the face it belongs to). So we use the normal to move the vertices in the direction they are facing.
  5. Using a float PaperNoise, basically to control the strength of the displacement,  we multiply the thresholded processed noise and just the processed Noise. We then multiply by the Normal and add the result to the Position of each vertex. But Prasin, if we are all multiplying, what's the difference between ControlSize and PaperNoise, you ask? ControlSize describes how big it will be overall, and PaperNoise will define the spikiness/smoothness of the ups and downs.  And we will have one more variable to lerp between the fully smooth and noisy paper. 
For color, just use a triplanar projection. 


Now with this setup, try in a sphere and you will get that outline look that will jitter every few seconds!

BUT WE CAN DO MORE! ESPECIALLY WITH NON-SMOOTH OBJECTS AND SEPARATED UV.

Here you see the results of the UV map affecting the rendering of the vertices. In 3D software, the vertices are joined; they arent separated at all. But because each face is a UV island in itself, each vertex for each face is a separate vertex to keep track of for the GPU. And therefore, different normals, and therefore they all face move in different directions. Don't believe me, If you set the ControlSize to 0, you get this:

For random color on each cube, you can use its world-space location to dictate color. Like this:



Thats it for today! I will soon write a tutorial for the toon shader but with pencil strokes.

THE FILES FOR THE TUTORIAL IS IN THE GAME DOWNLOAD PAGE.

Files

Jam1Team5.zip 33 MB
22 days ago

Get Some toon shader demo with papery thing

Leave a comment

Log in with itch.io to leave a comment.