GLSL Dithering and Crosshatching

toneburst's picture

Simple GLSL shaders for dithering and crosshatching effects. I claim no credit for the algorithms. Credits are in comments in the Fragment Shaders. I made RGB versions of both (though the dither is more successful that the crosshatch variant), and added a Scale control.

a|x

PreviewAttachmentSize
tb Dither.qtz14.74 KB

cybero's picture
Re: GLSL Dithering and Crosshatching

I noted with interest the link you gave on your blog post http://machinesdontcare.wordpress.com/2011/02/02/glsl-crosshatch/ the source of inspiration and initial reference for this work concerning WebGL.

The crosshatch really does have one whole lot of white to it, although that said, so too does the WebGL demo version that sparked your creative interest in porting this into QC.

The dither works pretty well indeed; one thing that I couldn't help but wonder about was why it was that the Crosshatch RGB shader's GLSL Grid just fails to render when switching blending modes. That doesn't happen with any of the other Grids & Shaders :-).

After reading your blog post and browsing the learning WebGL site's shader code [great find BTW] I found that I was part way towards a solution, but not a reliable one at all•~ .

The thing is by exposing the Ambient Light and Colour values to be shader inputs I was, sometimes at least, able to get the same level of definition that the WebGL demo inputs allow.

vade's picture
Re:

toneburst wrote:
Simple GLSL shaders for dithering and crosshatching effects. I claim no credit for the algorithms. Credits are in comments in the Fragment Shaders. I made RGB versions of both (though the dither is more successful that the crosshatch variant), and added a Scale control.

a|x

Oh, nice. I like these a lot, esp the simple black and white dither.

I applied it to the model loader, which actually looks pretty cool, and an in progress, not quite yet stable true 3D text plugin:

PreviewAttachmentSize
DitheredModel.png
DitheredModel.png35.33 KB
Dithered3DText.png
Dithered3DText.png26.16 KB

franz's picture
Re:

reminds me the good old time on apple II

toneburst's picture
Re: GLSL Dithering and Crosshatching

Yeah, dunno what's going on with the non-rendering there. I don't get that here, but I have been noticing longish (couple of seconds, sometimes) pauses with a black output when switching GLSL shaders, before the new, switched-to shader kicks in. I don't remember that happening a lot in the past.

I've been trawling through a load of WebGL links lately, and there's some nice stuff out there. The nice thing is that WebGL uses a combination of JavaScript (which I've been working with for a while, and can usually unpick relatively easily), and GLSL shaders, which you can usually see in the page sourcecode, so getting them to work in QC is often just a copy-paste job.

a|x

cybero's picture
Re: GLSL Dithering and Crosshatching

Quote:
Yeah, dunno what's going on with the non-rendering there.

Differing levels of support for OpenGL, not all GPUs are created equal. You are working with an ATI/AMD type of card , yes? I am working with an nVidia. Of course it could be the result of your being on a MacBook with two available GPU processors.

When I tried some of my shader based stuff on an ATI based iMac I couldn't believe at first just how more colourful and responsive the resulting live render was.

toneburst's picture
Re: GLSL Dithering and Crosshatching

I'm using a MacBook Pro, with NVIDIA 9600M GT.

a|x

cybero's picture
Re: GLSL Dithering and Crosshatching

Well, that puts paid to that theory :-) [I guess]

toneburst's picture
Re: GLSL Dithering and Crosshatching

:-D

I'm sure it didn't always happen. Might be some backend update that did it- LLVM or hardware driver changes, maybe.

a|x

cybero's picture
Re: GLSL Dithering and Crosshatching

In one sense, its not too much of a problem in any case, as the RGB Crosshatch works OK when set to Replace blending mode, but no when set to any other mode. Doesn't affect any other of those shaders you ported into QC.