Moebius Shader — James Åkesson

The final appearance using lighting and all the different methods discussed below.

This project has been going on for a while now. I've worked on it from time to time when I learnt more about Unreal and its features.

Hooded character in blue armour walking through tall grass past a wooden fence towards a large sandstone rock formation, rendered with ink-style line art, red hatching and yellow speckles.

My first attempt at outlines was to use an inverted hull. It gives the desired effect of giving objects outlines, but it doubles the mesh of all objects, and since I was the 2D, 3D and VFX artist on this project I didn't want to have to model specifically for getting good inverted outlines.

Pink rock formation with thick dark inverted-hull outlines around its silhouette and along its creases, beside round green bushes and a grassy field under a pale sky.

I tried out the same methods I had been using for outlines when working in Blender, trying to extract the angles on objects and adding lines based on that. But I quickly noticed it doesn't work in a living and moving environment, so I scrapped it quickly.

(Tried making hatching with textures, also scrapped)

Brown rock face covered in a web of thin angular lines produced by extracting surface angles, with a grey boulder resting on top and an orange dot marker near the bottom.

Unreal material graph labelled 'outline': a dense network of nodes fed by scene texture samples and red, green and black colour constants, an early normal-based edge detection. — Edge detection from normals, an early attempt

Large grey boulder covered in a cross-hatch texture in a sunny field, with a white-hooded character running past and a shrine-like tower and stylised trees behind. — Hatching with textures, also scrapped

I tried making outlines by simply adding a small zone between the different shades in the cel shader to make lines within shapes. My idea was to combine this with my edge detection to get good line art for my shader. This did not work out so well...

Monochrome blue test scene: a large rounded cel-shaded form with dark bands marking the zones between its shades, beside a pile of angular light-blue rock chunks on a yellow floor.

Here you can see why it didn't work. It only works for specific shapes. When the shadow becomes low contrast, the outlines can become huge and no longer feel like outlines.

Pink and purple rock formation where the cel-band outlines have swollen into large blotchy black patches, with white boulders and a hooded blue character in the foreground.

Unreal material graph for the cel-band line art, with comment groups for extracting lighting data, mapping gradients to cel shade through stepped thresholds, line art and defining colours. — The material graph behind the cel-band line art: extract lighting data, map gradients to cel shades, line art, defining colours

I looked at a lot of Moebius artworks to help me in the search for simplified ways of giving the impression of lighting and line weight. I ended up using a gradient based on world position to give the impression of top-down lighting without the actual use of any lighting, and then I use the diffuse colour of the objects to define the line art in the shader.

I base the line art on the actual screen. I did it this way because line art is often done to adhere to the viewer's ability to read the lines. If the viewer will not be able to perceive a line then there does not need to be a line there. So by using the view of the player, I can add the line work where it actually matters. And in the process of doing so, we also get distance-scaled lines for free.

This process also gives the artist a lot of room for artistic expression since the shader takes into consideration both texture and modeling work.

The final method uses convolution written in HLSL and takes the inputs shown in the image. The scene textures can be any scene texture since they are just connected to access scene texture components in the HLSL code.

Unreal material graph with two 'Edge Detection / line art' groups and a 'Shadow Edge' group; each feeds scene texture samples, texel size and 3x3 row parameters into a custom convolution node, then masks, desaturates and multiplies the results together. — The final method: convolution in HLSL on scene textures

Edge detection / line art
Shadow edge

Zoomed-out overview of the whole Moebius shader material graph in Unreal, with comment groups for speckle details, lighting extraction, cel-shade mapping, line art, hatch textures, gradient mapping, removing the sky, distance scaling, outline, edge detection, shadow edge, paper texture, adding colours and adding back the sky. — The full material graph

Speckle details
Extract lighting data
Mapping gradients to cel shade
Line art
Hatch textures
Gradient mapping
Remove sky
Distance scaling
Outline
Edge detection / line art
Shadow edge
Paper texture
Adding colours
Adding back the sky

I added shadow edge detection and a paper texture onto the camera to make this final appearance.