I want to make a shader effect using OpenGL ES 2.0 that looks like this image:

lightly shaded pencil drawing

I'm not sure if this image was painted or is the result of some filter, but I want to create a shader that produces images looking similar. I want to know a Shader algoritm to produce this kind of output!

  • 4
    \$\begingroup\$ That is a poorly scaled and jpeg compressed drawing, there is no obvious shader effect in that image. \$\endgroup\$ Commented Jan 15, 2013 at 16:13
  • \$\begingroup\$ I agree the original question is off-topic but I think what the OP is more interested in is how a similar effect can be produced and so I've adjusted the question to highlight that rather than the (uninteresting) question about the origin of the referenced image. \$\endgroup\$
    – user1430
    Commented Jan 15, 2013 at 16:16
  • \$\begingroup\$ @JoshPetrie Really? For all I know he could be asking for a shader to create JPEG artefacts. And your edit hasn't even rectified that. \$\endgroup\$ Commented Jan 15, 2013 at 20:23
  • 9
    \$\begingroup\$ @eBusiness He could also be trying to create a shader to output the color white. Or draw shoes. Both of those are in the image as well; I'm trying to assume good faith here and utilize the collaborative editing facilities of the site to try and preserve a potentially good question rather than immediately shut it down. The rest of the community is free to disagree with me (and vote down / to close as appropriate). \$\endgroup\$
    – user1430
    Commented Jan 16, 2013 at 0:53

3 Answers 3


I can't tell if that specific image you linked was painted that way originally or not, but the resulting effect looks similar to an edge detection filter.

Edge detection post-processing is often done using a Sobel filter implementation. For example, as seen here (a CPU-side implementation). The effect can be achieved in shaders as well (here is an HLSL example that is trivially adaptable).

  • \$\begingroup\$ +1 Looking at a better quality version, I'd say it's a combination between edge detection and hand drawing. But edge detection is the best start for this. \$\endgroup\$
    – House
    Commented Jan 15, 2013 at 17:53

To complete what Josh said, Convolution Matrix is what you want:

Convolution in Gimp
Another link

What you probably are looking for:
Convolution Kernels in OpenGL

  • \$\begingroup\$ Your answer combined with some of the keywords from Josh Petrie's answer encompasses almost everything necessary. \$\endgroup\$
    – namuol
    Commented Jan 16, 2013 at 5:16

If you dont mind having little bit more expensive shader (but it has same number of texture fetches as sobel filter), you can implement frei-chen edge detector.

It provides smoother image than sobel filter.

Great article with example implementation: http://rastergrid.com/blog/2011/01/frei-chen-edge-detector/


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .