Halftone Effect?

Beginners
1

Hi all,
Wondering if there is a cheap and easy way to create a halftone shading effect? I poked around a bit but didnt see anything. Maybe I need to go the shader route for this? I’d be grateful if anyone has one they would like to share…

2

Here are a couple derived from this tutorial

webstaff.itn.liu.se/~stegu/webgl … orial.html

I haven’t cleaned the shaders up totally but they are usable. This was made in 088 but should work in 077.
HalftoneShader.2.toe (6.49 KB)

3

Wow - thanks. I saw these online, but frankly I don’t know much about shaders. Do you mind sharing what changes, if any, you had to make to these to get them to work inside Touch?

4

I’ll use the simpler black and white one as an example. Below is the original.

[code]#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives : enable
#endif

#ifdef GL_ES
precision highp float;
#endif

uniform float uScale; // For imperfect, isotropic anti-aliasing in
uniform float uYrot; // absence of dFdx() and dFdy() functions
uniform sampler2D uSampler;

varying vec2 st; // Texcoords

float frequency = 40.0; // Needed globally for lame version of aastep()

float aastep(float threshold, float value) {
#ifdef GL_OES_standard_derivatives
float afwidth = 0.7 * length(vec2(dFdx(value), dFdy(value)));
#else
float afwidth = frequency * (1.0/200.0) / uScale / cos(uYrot);
#endif
return smoothstep(threshold-afwidth, threshold+afwidth, value);
}

void main() {
// Distance to nearest point in a grid of
// (frequency x frequency) points over the unit square
vec2 st2 = mat2(0.707, -0.707, 0.707, 0.707) * st;
vec2 nearest = 2.0*fract(frequency * st2) - 1.0;
float dist = length(nearest);
// Use a texture to modulate the size of the dots
vec3 texcolor = texture2D(uSampler, st).rgb; // Unrotated coords
float radius = sqrt(1.0-texcolor.g); // Use green channel
vec3 white = vec3(1.0, 1.0, 1.0);
vec3 black = vec3(0.0, 0.0, 0.0);
vec3 fragcolor = mix(black, white, aastep(radius, dist));
gl_FragColor = vec4(fragcolor, 1.0);
}[/code]

First comment out the line uniform sampler2D uSampler; and replace all instances of uSampler with TDs GLSL input sampler sTD2DInputs[0].

Comment out varying vec2 st; and use TDs reference to the current st vUV.st everywhere st appears.

Add GLSL 3 output code layout(location = 0) out vec4 fragColorOut; just before the main() method and change gl_FragColor to fragColorOut.

Lastly add all of your uniforms (external variables) to the GLSL Top Vector fields. For this one we have uScale and uYrot. I changed frequency to a uniform so you could dynamically change it with a chop. Add each of their names to a Uniform Name field and plug in some variables.

There is probably much more you can do to clean up the GL_ES directives but they don’t seem to hurt anything. I have been using this method to grab fun shaders from here [url]http://glsl.heroku.com/[/url] to play with. I’ve updated the patch with a slider to change the dot size. Enjoy!
HalftoneShader.4.toe (8.38 KB)

5

Thats amazing - thanks so much for the details on this - it’ll be great to begin to get a grip on shaders w/in Touch…a huge help.

-m

6

many thanks tcfr33, for the techniques and explanations, that’s cool stuff, indeed.

7

Fantastic work.
So, where is the rosetta stone that shows how to translate shaders found online to something Touch will parse correctly? How did you know which lines to comment out and what naming conventions TD prefers for uniforms and such? How did you uncover this? What are some of the best resources you have found to start modifying shaders to work in TD?

8

This paged really helped me understand: http://www.derivative.ca/wiki077/index.php?title=Import_a_GLSL_Shader

I would also read through this: http://www.derivative.ca/wiki077/index.php?title=Write_a_GLSL_TOP

And this: http://www.derivative.ca/wiki077/index.php?title=Write_a_GLSL_Material

Then download the examples at the bottom of this page: http://www.derivative.ca/wiki077/index.php?title=GLSL_TOP
The examples are a pretty awesome starting place for learning how to modify code.

Almost all of these shaders can be ported to touch really easily: http://glsl.heroku.com/
The only thing you really need to do is create uniforms for all of the variables they call at the top of the code. Just add them into one of the vectors pages for the GLSL top you’re using. Most of them only use mouse, resolution, time.

-Matt

9

I’ve finally grokked enough of the shader syntax to make it work.

This site has excellent tutorials for making shaders.
[url]http://en.wikibooks.org/wiki/GLSL_Programming/[/url]
even though it’s for other game engines, like Unity, I found it helped a lot to explain the lingo and concepts.

thanks for all your help getting me off the ground~

10

Thanks everybody for the insights, using the HalftoneShader network from @tcfr33 I extended it to a CMYK version
Halftones_CMYK.tox (2.9 MB)