Hand-Drawn Pencil Sketch Effect Shader

What is this?

This is a wilting flower scene made in Unity with shader graph and timeline animations. Another challenge entry made as part of Harry Alisavakis‘s tech art challenge on his discord – the theme this time was ‘Flowers‘. My mind went straight to meadows of vibrant wild flowers with wind effects and tall blades of green swaying grass. But I feel like I’ve seen that a million times so I took inspiration from my own house plants and went with another aspects of flowers – they die! 🥀

I knew I’d be able to use a vertex displacement shader to wilt the stem and the petals easily enough but I wanted a scene which evoked a lonely flower’s sad demise so the idea for a black and white, still-life drawing came to mind (or maybe I was just thinking of The Simpsons). After researching ways to achieve this in URP I settled on a full-screen custom render feature for the hand-drawn pencil effect which starts off full colour and fades to black and white at the end. But this felt a little depressing so I thought of adding a little magic to bring our flower back to life and the scene can repeat again. That effect is just a modified version of a shockwave shader I’ve already done. To emphasis the hand-drawn feel there are also some sobel outlines.

The sobel outlines are taken from Unity’s toon outline effect tutorial.

The post effect for the hand-drawn / pencil sketch is based on this fantastic tutorial by IronStar Interactive. In short, I made a series of pencil brush sketches in photoshop which builds up from lightly sketched to heavily sketched. I then used this script to make a texture array asset. A shader gives random vector2 values to the UVs of the texture array per index to provide a jittery, drawn-differently-every-frame look. Some procedural noise and a masked texture is layered on top to add to the sketched appearance. The effect looks best when tiled a lot however I believe it could be improved with the use of seamless textures. Lastly some saturation control is added so we can have the effect in black and white or full-colour. We then blit this to the whole scene by adding the shader instance in an after rendering transparents pass in a custom render feature along with the sobel filter.

The drying-up / wilting petals are also based on the vertex deformation technique from the shockwave shader, a GameObject is placed near where I want the petal to deform which outputs its vector3 transform position to the shader via script, the shader then gets the distance between that point and the absolute world position of the mesh’s vertices and offsets those vertices on whichever axis I specify. The shader values are then animated. The stem wilting is based off of the curved world shader with the axes changed.

Lastly, some post-processing allows for the saturation to be animated as well as cycling through the hue shift value to make the rainbow effect at the end.

Features:

  • Hand-drawn pencil sketch effect shader graph blit via a custom render feature
  • Sobel outline effect shader blit via a custom render feature
  • Vertex deformation based on the game object positions, played through timeline animation
  • Scripted post-processing effects

Credits:

Pencil effect tutorial by IronStar Interactive – https://www.youtube.com/watch?v=FpvJAG6R99k

Texture array creation script by Caleb Faith – https://medium.com/@calebfaith/how-to-use-texture-arrays-in-unity-a830ae04c98b

Flower model based on mesh from Kringle – https://www.turbosquid.com/3d-models/pink-primrose-flowering-3d-obj/516226

Vase model from jonesolivier – https://www.turbosquid.com/3d-models/free-max-model-royal-ascot-tumbler/710426

Sobel shader and outline tutorial from Unity – https://www.youtube.com/watch?v=joG_tmXUX4M

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s