GLSL shader example

Crosshatching Shader

Add more stroke orientations in progressively darker lighting bands. The shader varies line coverage rather than just painting gray bands.

Live example

Edit the code and the preview updates as you type.

What to observe

Crosshatching Shader.

Mechanism

Add more stroke orientations in progressively darker lighting bands. The shader varies line coverage rather than just painting gray bands.

The controlling code

float r=dot(p,p),l=0.;if(r<.65){vec3 n=normalize(vec3(p,sqrt(.65-r)));l=max(dot(n,normalize(vec3(.7,.8,1.))),0.);}float h=1.-smoothstep(.03,.08,abs(sin((p.x+p.y)*80.)));float h2=1.-smoothstep(.03,.08,abs(sin((p.x-p.y)*80.)));float h3=1.-smoothstep(.03,.08,abs(sin(p.x*90.)));float ink=h*step(l,.8)+h2*step(l,.5)+h3*step(l,.25);c=mix(vec3(.94,.89,.75),vec3(.1,.08,.13),clamp(ink,0.,1.));

Experiment

Change the first lighting threshold step(l,.8) to step(l,.95). The first diagonal stroke layer now reaches brighter parts of the shaded sphere, while the two darker-band layers retain their old thresholds.

Debugging and cost

The shader builds three sine-line layers and adds their coverage, rather than sampling a paper image. Lower both diagonal frequencies (p.x+p.y)*80. and (p.x-p.y)*80. to 40. to make individual crossings easier to inspect.

Built-in functions used

Learn it step by step