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\$ – aaaaaaaaaaaa Jan 15 '13 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 Jan 15 '13 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\$ – aaaaaaaaaaaa Jan 15 '13 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 Jan 16 '13 at 0:53

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\$ – MichaelHouse Jan 15 '13 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 Jan 16 '13 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/


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.