Project Ven "Jitter" Shader Exercise

-WebGL Demo-

Still of modified shader

Still of modified shader

Still of original shader

Still of original shader

Problems With Original Shader

The most immediately obvious issue is the rate the jittering varies over time. The noise changes every frame, making the jitter look "wild" and completely unlike the variations in drawing it's meant to be emulating. The solution here is simple, to make the jitter maintain the same position over frames, only changing at a desire rate.

After that, the most glaring visual issue is the occurrence of "Speckles" due to lumps and divots caused by the jitter making shadows or outlines appear.

Modified shader, no "speckles"

Modified shader, no "speckles"

Original shader, "speckles" circled

Original shader, "speckles" circled

Improvements Made

Jitter changed to happen at a lower framerate (~8fps at the moment) by clamping time in the noise calculation. There is a complication with this though, currently the shader uses the vertex model-space position as the seed for the random function. This is fine with static objects, but animated meshes are by default animated on the CPU, with the after-animation positions passed to the shader. This means that unless the animation framerate is also reduced, simply clamping the time value will not be enough to effectively control the framerate of the jitter effect. Two solutions to this are to use another vertex value that isn't modified pre-shader (such as texture coordinates) or to supply a random seed as a new vertex attribute.

The issue of 'speckles' is resolved through modifying the effect in a way that also more closes matches the target art style. Observing art in rough illustration like Hotel Dusk, the variations in drawing tend to affect the outlines and 'silhouette' of the artwork more than the interior lines and features, such as facial features. The shader was modified to modulate the amount of jitter applied based on how closely the vertex faces the camera, causing vertices facing perpendicular to the camera (silhouette vertices) to distort more than vertices facing the camera (interior vertices). This also means that flat surfaces facing the camera such as the character's torso have much reduced jitter, eliminating the small hills and divots that cause the "speckles" observed in the original shader. On the edges of the model, hills and divots contribute to the 'sketchiness' of the look and are already at extreme angles so do not show 'speckles' as flat surfaces do.

Closely observing the animation style of Hotel Dusk, you can see that as well as the general shape and features shifting, the location of shaded areas and the "strokes" used to shade them also vary slightly frame-to-frame. To emulate this, the shader was modified to slightly vary the lighting "threshold" at each vertex, and to shift the screen-texture used for shading. This is also made to happen at the same framerate as the positional jitter.