loading...
Cover image for SDF Texture Halftone Shader

SDF Texture Halftone Shader

sketchpunk profile image SketchPunk ・2 min read

So I'm back with another lighting shader. There was some textures being used by a commercial shader that deals with halftones. Someone pointed out that those special looking textures are "Signed Distance Field" textures. The idea of these things is that with a lil bit of math you can resize the shape or pattern by using a scale value between 0 and 1, very much similar to how halftones work, which are just circles of various sizes.

So i found a SDF-ish image of a star on google and with some examples and lots & lots of trail & error, I was able to create something half decent. This is just another "style" i'm exploring. I really enjoy halftones, so why not spruce it up and use textures to defined various different shapes I can use.

In the future I'm going to try to use these sort of patterns as transitions between colors in a toon shader to try to create a nice style that isn't flat nor gradient. How about each set of characters has their own pattern, like the hero gets a stars, bad guys get skull, quest givers a scroll. Maybe quest to find a character with a specific shading pattern? So many wacky Ideas I'm thinking of with this :D

[ DEMO ]
https://sketchpunk.bitbucket.io/src/fungi_v5_5/006_sdf_halftones.html

[ SOURCE ]
https://bitbucket.org/sketchpunk/sketchpunk.bitbucket.io/src/master/src/fungi_v5_5/005_dithering.html

[ RESOURCE ]
https://www.ronja-tutorials.com/2018/11/10/2d-sdf-basics.html

[ SHAMELESS PLUG ]
I have a patreon for anyone who would like to support my work. Everything I do I release as open source. With a enough support I can do this full time and make more stuff for people to use and learn from. https://www.patreon.com/sketchpunk

Posted on by:

sketchpunk profile

SketchPunk

@sketchpunk

10% luck, 20% skill, 15% concentrated power of will. 5% pleasure, 50% pain, And a 100% reason to remember the name.

Discussion

markdown guide