# NPR

## Procedural Hatching

I’ve been using Shadershop as a tool to explore useful procedural functions. In this case I needed procedural hatching. A square wave was quick to define:
In this case, all that we need to do is call a couple of floor functions. Frequency, phase and amplitude are easy enough to adjust after the fact just as you would any other periodic function. (A simpler method to create a square wave is to use a rounding function, but I wanted to see where Shadershop’s approach took me.)
I then extrapolated this function into a vector2, skewed it with a 2×2 matrix, and voila. Shadershop makes figuring this kind of thing out much easier by using a visual workflow and graphing your function as you go. Very handy!

You can do something similar with a 1d random function fract(sin(x)*999) to achieve a periodic 2d noise pattern.

A simple crosshatch shader in unity can be made by adding two of the above square wave functions. In this case I used a min and max function to change the “pulse length” of the square wave. You can get a similar look by using the more common approach of establishing a sine wave which you then clip/threshold. I’m not sure which method would be faster… Here’s the basic shader:

``````Shader "Unlit/Test"
{
Properties
{
_Density ("Density", Range(1,400)) = 150
_Rotation ("Rotation", Range(0,360)) = 45.0
_Width ("Width", Range(0,1)) = 0.4
}
{
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
float _Density;
float _Rotation;
float _Width;
v2f vert (float4 pos : POSITION, float2 uv : TEXCOORD0)
{
v2f o;
o.vertex = UnityObjectToClipPos(pos);
o.uv = uv * _Density;
return o;
}

fixed4 frag (v2f i) : SV_Target
{
float sn, cs;
float2x2 mt = float2x2(cs, -sn, sn, cs);
float2 c = i.uv;
c.xy = mul ( c.xy, mt );
float hatch = max(abs(floor((c.x/2 - 0.5)/-1)
+ floor(c.x/2)+1),
abs(floor(((c.x-_Width)/2 - 0.5)/-1)
+ floor((c.x-_Width)/2)+1))
- min(abs(floor((c.y/2 - 0.5)/-1)
+ floor(c.y/2)+1),
abs(floor(((c.y-_Width)/2 - 0.5)/-1)
+ floor((c.y-_Width)/2)+1));
return hatch;
}
ENDCG
}
}
}
``````

The problem with this kind of approach is that it’s overly complex. All of that min/max/floor stuff can be replaced with a much shorter step function. Same look, much more direct.

``````{
float sn, cs;
float2x2 mt = float2x2(cs, -sn, sn, cs);
float2 c = i.uv;
c.xy = mul ( c.xy, mt );
float hatch = abs(step(1-_Width,sin(c.x)))
+ abs(step(1-_Width,sin(c.y)));
return hatch;
}
``````

I added some lighting to the shader and here’s the result. Procedural and written entirely in notepad!

## NPR Final Touches

It’s wrapping up, I’ve added all the bells and whistles – Ambient Occlusion, Depth fading, Image Adjustment, etc. Highlights can now be dialated or eroded. Support for separate outlines of normals. Presets and clean menus. I think this shader is about done.

The shader allows for a pretty broad array of looks, from architectural sketches to classic toon shading. Below is an example of a more painterly rendering.

Here are some presets:

I’m continuing to refine the NonPhotoRealistic (NPR) sketch post-process in Unreal. This is using completely different methods now, I’ve changed the method of convolution edge detection for outlines, and am using world-aligned sketch texturing in the shadow and highlight regions.

The background is also given a custom color and texture. The light source is defined through any number of unreal lights.

There is now support for sketchy highlights and varying line colors, and much better response to light. Ideally the post process would support variation in outline width, although I don’t have a good method for that yet.

There are options to use procedural line, dot and crosshatching for a more comic/newsprint look.

The results are very solid and smooth in motion, with no temporal swimming or distractions. I see this shader being ideal for architectural stylization and general NPR usage.

To get a more chalk-like effect with ink outlines I take this post process and combine it with an NPR painterly process which applies brushstrokes on the image in world space. Here’s the result:

## Unreal Matcap PostProcess

Some more NPR experimentation, this time implementing a Matcap shader in Unreal as a post process.

## Unreal Lithograph Post Process Shader

This is a first test of a simple NPR shader I just put together, used as a post process in Unreal for a lithograph-like effect. Works well temporally but lacks a “handdrawn” feel, being very precise.

## Procedural Blueprint Elements

This houdini file creates an infinite number of shapes to populate blueprints or info screens, with a “pen and ink” rendering look. It was a lot of fun to make.

## Update – MatCap (litsphere) shading in Softimage 2013

A discussion about Mudbox and Zbrush-style shading arose on the Softimage mailing list. Their signature look comes from “MatCap” shaders (originally known as lit-spheres.) It’s a popular way to achieve a custom lighting solution from a texture, in realtime, which is particularly useful when modeling – you can get a nice clay or sculpy “look” to geometry in realtime. It’s also useful for creating nonphotorealistic (NPR) looks in realtime, toon shading etc.

As mentioned in an earlier post, the grey-ball shader in mental ray can render litsphere textures, and a user suggested that in the high quality viewport you can get the desired result by plugging the metaSL node “Map_ball” into the environment channel. The problem with this is the result (on my machine, at least) appears in world space. A proper litsphere should be in view space.

But it called my attention to something important – almost all of the metaSL nodes used in Mental Mill are now accessible in the render tree and can be used similarly – meaning for most intents and purposes all softimage users now have Mental Mill. Which is awesome.

But we still needed a solution for matcap functionality in the high quality viewport. So I bit the bullet and wrote a metaSL shader which seems to do the trick. It can be used for both realtime performance in the high quality viewport as well as full renders in mental ray (and any other platform supporting metaSL.)

Update: Daniel Brassard kindly fixed some bugs, the new version is now available below. Thanks Daniel!

Here’s the shader (MetaSL ~2kb): litspherev11

## Dragon NPR

A render region capture using a litsphere in Softimage, with a quick vignette slapped on in photoshop. Quick, easy, fun.

## “LitSphere” aka MatCap Materials in Softimage and Maya

It had been a while since I wrote anything technique-specific for softimage, so I decided to come up with a rendertree setup for “lit sphere” rendering and share it on this blog. I would talk about normals and angles of incidence and it would be completely cool. Well, it’s still cool, but no need for much in the way of discussion…  it turned out to be ridiculously simple.

Have you ever used mudbox or zBrush and noticed how nice their realtime clay-like materials are? That’s what we’re talking about.

A “lit sphere”, or what zBrush users might recognize as a “MatCap” material, is a technique first described (as far as I know) by Bruce and Amy Gooch, Peter Sloan and William Martin in their 2001 paper  “The Lit Sphere – A model for Capturing NPR shading from Art.”

The basic idea is simple: a spherical image can act as a stand-in for the lighting of a more complex surface, by mapping the angle of the surface normal  (as seen from the camera) to XY coordinates of an image, such that the center of the image relates to a surface facing the camera and every other angle of incidence maps to an X (horizontal angles) and Y (vertical) coordinate on the texture.

The result is “lighting” defined for every possible normal via a simple texture, and what’s really cool is that the result can easily approximate various painterly, sketchy or waxy surfaces. Since everything derives from a texture, it’s fast enough for realtime shaders and easy to change and edit.

Ok, so how do we get this result in realtime, and how do we get it in Mental Ray? Well, realtime requires a realtime shader. It’s easy to make a HLSL shader in Mental Mill without any shader programming expertise at all. Here’s an admittedly junky one for use in Maya, which works in Softimage as well.

But if you don’t want realtime display in your viewport, it’s just as simple to render litspheres in Mental Ray, regardless of what package you’re using. Just use the mipGrayBall shader, and feed it a “litsphere” texture. That’s it. Done.

So, while this topic didn’t prove to be a basis for a insightful tour through the rendertree, at least it’s cool in the sense that you just can’t get a more powerful shading tool any simpler than this. If you are looking for an interesting approach to NPR or “Painterly” rendering styles, you want to specifically mimic a sketchy or painterly style of a traditional artist, or you want a good realtime material to model with that has the same feel of lighting you get in mudbox, now you’re set.  Enjoy.