Sketchy Toon Shader in TouchDesigner

This tutorial looks at porting a sketchy toon shader into TouchDesigner from Jaume Sanchez’s Digital Inktober 2020. https://spite.github.io/sketch/
Beyond discussing the process of going from Three.js and WebGL to TouchDesigner, I’ll touch on convolution and sobel filters. I’ll also preview a polished version of the shader which is available in the example file. Lastly I’ll show how to make a bonus “cube of cubes” scene that works nicely with the effect.

The example file for this tutorial is available on my Patreon https://www.patreon.com/Polyhop
There you can access to exclusive project files and tools, help guide future topics and support the creation of new work.

In this video I’m using TouchDesigner version 2023.11880. If you’re using an older or newer version there may be features that don’t work in exactly the same way.

Video Navigation / Topics:
00:00 – Intro
00:57 – Toon Shaders
02:27 – Jaume Sanchez’s Digital Inktober 2020
04:47 – Download Code
05:45 – First Look
09:06 – Render Setup
12:34 – Edge Detection and Convolution
21:07 – Porting WebGL to TouchDesigner
25:26 – Uniforms
27:44 – Adding Texture Inputs
30:10 – Update Texture Sampling
32:58 – Shader Adjustments
37:19 – Example File Preview
39:26 – Exploring Other Inputs
41:47 – Bonus: Cube of Cubes

About The Author

You might be interested in