123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314 |
- /**
- * RGB Halftone shader for three.js.
- * NOTE:
- * Shape (1 = Dot, 2 = Ellipse, 3 = Line, 4 = Square)
- * Blending Mode (1 = Linear, 2 = Multiply, 3 = Add, 4 = Lighter, 5 = Darker)
- */
- var HalftoneShader = {
- uniforms: {
- 'tDiffuse': { value: null },
- 'shape': { value: 1 },
- 'radius': { value: 4 },
- 'rotateR': { value: Math.PI / 12 * 1 },
- 'rotateG': { value: Math.PI / 12 * 2 },
- 'rotateB': { value: Math.PI / 12 * 3 },
- 'scatter': { value: 0 },
- 'width': { value: 1 },
- 'height': { value: 1 },
- 'blending': { value: 1 },
- 'blendingMode': { value: 1 },
- 'greyscale': { value: false },
- 'disable': { value: false }
- },
- vertexShader: [
- 'varying vec2 vUV;',
- 'void main() {',
- ' vUV = uv;',
- ' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
- '}'
- ].join( '\n' ),
- fragmentShader: [
- '#define SQRT2_MINUS_ONE 0.41421356',
- '#define SQRT2_HALF_MINUS_ONE 0.20710678',
- '#define PI2 6.28318531',
- '#define SHAPE_DOT 1',
- '#define SHAPE_ELLIPSE 2',
- '#define SHAPE_LINE 3',
- '#define SHAPE_SQUARE 4',
- '#define BLENDING_LINEAR 1',
- '#define BLENDING_MULTIPLY 2',
- '#define BLENDING_ADD 3',
- '#define BLENDING_LIGHTER 4',
- '#define BLENDING_DARKER 5',
- 'uniform sampler2D tDiffuse;',
- 'uniform float radius;',
- 'uniform float rotateR;',
- 'uniform float rotateG;',
- 'uniform float rotateB;',
- 'uniform float scatter;',
- 'uniform float width;',
- 'uniform float height;',
- 'uniform int shape;',
- 'uniform bool disable;',
- 'uniform float blending;',
- 'uniform int blendingMode;',
- 'varying vec2 vUV;',
- 'uniform bool greyscale;',
- 'const int samples = 8;',
- 'float blend( float a, float b, float t ) {',
- // linear blend
- ' return a * ( 1.0 - t ) + b * t;',
- '}',
- 'float hypot( float x, float y ) {',
- // vector magnitude
- ' return sqrt( x * x + y * y );',
- '}',
- 'float rand( vec2 seed ){',
- // get pseudo-random number
- 'return fract( sin( dot( seed.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 );',
- '}',
- 'float distanceToDotRadius( float channel, vec2 coord, vec2 normal, vec2 p, float angle, float rad_max ) {',
- // apply shape-specific transforms
- ' float dist = hypot( coord.x - p.x, coord.y - p.y );',
- ' float rad = channel;',
- ' if ( shape == SHAPE_DOT ) {',
- ' rad = pow( abs( rad ), 1.125 ) * rad_max;',
- ' } else if ( shape == SHAPE_ELLIPSE ) {',
- ' rad = pow( abs( rad ), 1.125 ) * rad_max;',
- ' if ( dist != 0.0 ) {',
- ' float dot_p = abs( ( p.x - coord.x ) / dist * normal.x + ( p.y - coord.y ) / dist * normal.y );',
- ' dist = ( dist * ( 1.0 - SQRT2_HALF_MINUS_ONE ) ) + dot_p * dist * SQRT2_MINUS_ONE;',
- ' }',
- ' } else if ( shape == SHAPE_LINE ) {',
- ' rad = pow( abs( rad ), 1.5) * rad_max;',
- ' float dot_p = ( p.x - coord.x ) * normal.x + ( p.y - coord.y ) * normal.y;',
- ' dist = hypot( normal.x * dot_p, normal.y * dot_p );',
- ' } else if ( shape == SHAPE_SQUARE ) {',
- ' float theta = atan( p.y - coord.y, p.x - coord.x ) - angle;',
- ' float sin_t = abs( sin( theta ) );',
- ' float cos_t = abs( cos( theta ) );',
- ' rad = pow( abs( rad ), 1.4 );',
- ' rad = rad_max * ( rad + ( ( sin_t > cos_t ) ? rad - sin_t * rad : rad - cos_t * rad ) );',
- ' }',
- ' return rad - dist;',
- '}',
- 'struct Cell {',
- // grid sample positions
- ' vec2 normal;',
- ' vec2 p1;',
- ' vec2 p2;',
- ' vec2 p3;',
- ' vec2 p4;',
- ' float samp2;',
- ' float samp1;',
- ' float samp3;',
- ' float samp4;',
- '};',
- 'vec4 getSample( vec2 point ) {',
- // multi-sampled point
- ' vec4 tex = texture2D( tDiffuse, vec2( point.x / width, point.y / height ) );',
- ' float base = rand( vec2( floor( point.x ), floor( point.y ) ) ) * PI2;',
- ' float step = PI2 / float( samples );',
- ' float dist = radius * 0.66;',
- ' for ( int i = 0; i < samples; ++i ) {',
- ' float r = base + step * float( i );',
- ' vec2 coord = point + vec2( cos( r ) * dist, sin( r ) * dist );',
- ' tex += texture2D( tDiffuse, vec2( coord.x / width, coord.y / height ) );',
- ' }',
- ' tex /= float( samples ) + 1.0;',
- ' return tex;',
- '}',
- 'float getDotColour( Cell c, vec2 p, int channel, float angle, float aa ) {',
- // get colour for given point
- ' float dist_c_1, dist_c_2, dist_c_3, dist_c_4, res;',
- ' if ( channel == 0 ) {',
- ' c.samp1 = getSample( c.p1 ).r;',
- ' c.samp2 = getSample( c.p2 ).r;',
- ' c.samp3 = getSample( c.p3 ).r;',
- ' c.samp4 = getSample( c.p4 ).r;',
- ' } else if (channel == 1) {',
- ' c.samp1 = getSample( c.p1 ).g;',
- ' c.samp2 = getSample( c.p2 ).g;',
- ' c.samp3 = getSample( c.p3 ).g;',
- ' c.samp4 = getSample( c.p4 ).g;',
- ' } else {',
- ' c.samp1 = getSample( c.p1 ).b;',
- ' c.samp3 = getSample( c.p3 ).b;',
- ' c.samp2 = getSample( c.p2 ).b;',
- ' c.samp4 = getSample( c.p4 ).b;',
- ' }',
- ' dist_c_1 = distanceToDotRadius( c.samp1, c.p1, c.normal, p, angle, radius );',
- ' dist_c_2 = distanceToDotRadius( c.samp2, c.p2, c.normal, p, angle, radius );',
- ' dist_c_3 = distanceToDotRadius( c.samp3, c.p3, c.normal, p, angle, radius );',
- ' dist_c_4 = distanceToDotRadius( c.samp4, c.p4, c.normal, p, angle, radius );',
- ' res = ( dist_c_1 > 0.0 ) ? clamp( dist_c_1 / aa, 0.0, 1.0 ) : 0.0;',
- ' res += ( dist_c_2 > 0.0 ) ? clamp( dist_c_2 / aa, 0.0, 1.0 ) : 0.0;',
- ' res += ( dist_c_3 > 0.0 ) ? clamp( dist_c_3 / aa, 0.0, 1.0 ) : 0.0;',
- ' res += ( dist_c_4 > 0.0 ) ? clamp( dist_c_4 / aa, 0.0, 1.0 ) : 0.0;',
- ' res = clamp( res, 0.0, 1.0 );',
- ' return res;',
- '}',
- 'Cell getReferenceCell( vec2 p, vec2 origin, float grid_angle, float step ) {',
- // get containing cell
- ' Cell c;',
- // calc grid
- ' vec2 n = vec2( cos( grid_angle ), sin( grid_angle ) );',
- ' float threshold = step * 0.5;',
- ' float dot_normal = n.x * ( p.x - origin.x ) + n.y * ( p.y - origin.y );',
- ' float dot_line = -n.y * ( p.x - origin.x ) + n.x * ( p.y - origin.y );',
- ' vec2 offset = vec2( n.x * dot_normal, n.y * dot_normal );',
- ' float offset_normal = mod( hypot( offset.x, offset.y ), step );',
- ' float normal_dir = ( dot_normal < 0.0 ) ? 1.0 : -1.0;',
- ' float normal_scale = ( ( offset_normal < threshold ) ? -offset_normal : step - offset_normal ) * normal_dir;',
- ' float offset_line = mod( hypot( ( p.x - offset.x ) - origin.x, ( p.y - offset.y ) - origin.y ), step );',
- ' float line_dir = ( dot_line < 0.0 ) ? 1.0 : -1.0;',
- ' float line_scale = ( ( offset_line < threshold ) ? -offset_line : step - offset_line ) * line_dir;',
- // get closest corner
- ' c.normal = n;',
- ' c.p1.x = p.x - n.x * normal_scale + n.y * line_scale;',
- ' c.p1.y = p.y - n.y * normal_scale - n.x * line_scale;',
- // scatter
- ' if ( scatter != 0.0 ) {',
- ' float off_mag = scatter * threshold * 0.5;',
- ' float off_angle = rand( vec2( floor( c.p1.x ), floor( c.p1.y ) ) ) * PI2;',
- ' c.p1.x += cos( off_angle ) * off_mag;',
- ' c.p1.y += sin( off_angle ) * off_mag;',
- ' }',
- // find corners
- ' float normal_step = normal_dir * ( ( offset_normal < threshold ) ? step : -step );',
- ' float line_step = line_dir * ( ( offset_line < threshold ) ? step : -step );',
- ' c.p2.x = c.p1.x - n.x * normal_step;',
- ' c.p2.y = c.p1.y - n.y * normal_step;',
- ' c.p3.x = c.p1.x + n.y * line_step;',
- ' c.p3.y = c.p1.y - n.x * line_step;',
- ' c.p4.x = c.p1.x - n.x * normal_step + n.y * line_step;',
- ' c.p4.y = c.p1.y - n.y * normal_step - n.x * line_step;',
- ' return c;',
- '}',
- 'float blendColour( float a, float b, float t ) {',
- // blend colours
- ' if ( blendingMode == BLENDING_LINEAR ) {',
- ' return blend( a, b, 1.0 - t );',
- ' } else if ( blendingMode == BLENDING_ADD ) {',
- ' return blend( a, min( 1.0, a + b ), t );',
- ' } else if ( blendingMode == BLENDING_MULTIPLY ) {',
- ' return blend( a, max( 0.0, a * b ), t );',
- ' } else if ( blendingMode == BLENDING_LIGHTER ) {',
- ' return blend( a, max( a, b ), t );',
- ' } else if ( blendingMode == BLENDING_DARKER ) {',
- ' return blend( a, min( a, b ), t );',
- ' } else {',
- ' return blend( a, b, 1.0 - t );',
- ' }',
- '}',
- 'void main() {',
- ' if ( ! disable ) {',
- // setup
- ' vec2 p = vec2( vUV.x * width, vUV.y * height );',
- ' vec2 origin = vec2( 0, 0 );',
- ' float aa = ( radius < 2.5 ) ? radius * 0.5 : 1.25;',
- // get channel samples
- ' Cell cell_r = getReferenceCell( p, origin, rotateR, radius );',
- ' Cell cell_g = getReferenceCell( p, origin, rotateG, radius );',
- ' Cell cell_b = getReferenceCell( p, origin, rotateB, radius );',
- ' float r = getDotColour( cell_r, p, 0, rotateR, aa );',
- ' float g = getDotColour( cell_g, p, 1, rotateG, aa );',
- ' float b = getDotColour( cell_b, p, 2, rotateB, aa );',
- // blend with original
- ' vec4 colour = texture2D( tDiffuse, vUV );',
- ' r = blendColour( r, colour.r, blending );',
- ' g = blendColour( g, colour.g, blending );',
- ' b = blendColour( b, colour.b, blending );',
- ' if ( greyscale ) {',
- ' r = g = b = (r + b + g) / 3.0;',
- ' }',
- ' gl_FragColor = vec4( r, g, b, 1.0 );',
- ' } else {',
- ' gl_FragColor = texture2D( tDiffuse, vUV );',
- ' }',
- '}'
- ].join( '\n' )
- };
- export { HalftoneShader };
|