HalftoneShader.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. ( function () {
  2. /**
  3. * RGB Halftone shader for three.js.
  4. * NOTE:
  5. * Shape (1 = Dot, 2 = Ellipse, 3 = Line, 4 = Square)
  6. * Blending Mode (1 = Linear, 2 = Multiply, 3 = Add, 4 = Lighter, 5 = Darker)
  7. */
  8. const HalftoneShader = {
  9. uniforms: {
  10. 'tDiffuse': {
  11. value: null
  12. },
  13. 'shape': {
  14. value: 1
  15. },
  16. 'radius': {
  17. value: 4
  18. },
  19. 'rotateR': {
  20. value: Math.PI / 12 * 1
  21. },
  22. 'rotateG': {
  23. value: Math.PI / 12 * 2
  24. },
  25. 'rotateB': {
  26. value: Math.PI / 12 * 3
  27. },
  28. 'scatter': {
  29. value: 0
  30. },
  31. 'width': {
  32. value: 1
  33. },
  34. 'height': {
  35. value: 1
  36. },
  37. 'blending': {
  38. value: 1
  39. },
  40. 'blendingMode': {
  41. value: 1
  42. },
  43. 'greyscale': {
  44. value: false
  45. },
  46. 'disable': {
  47. value: false
  48. }
  49. },
  50. vertexShader:
  51. /* glsl */
  52. `
  53. varying vec2 vUV;
  54. void main() {
  55. vUV = uv;
  56. gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  57. }`,
  58. fragmentShader:
  59. /* glsl */
  60. `
  61. #define SQRT2_MINUS_ONE 0.41421356
  62. #define SQRT2_HALF_MINUS_ONE 0.20710678
  63. #define PI2 6.28318531
  64. #define SHAPE_DOT 1
  65. #define SHAPE_ELLIPSE 2
  66. #define SHAPE_LINE 3
  67. #define SHAPE_SQUARE 4
  68. #define BLENDING_LINEAR 1
  69. #define BLENDING_MULTIPLY 2
  70. #define BLENDING_ADD 3
  71. #define BLENDING_LIGHTER 4
  72. #define BLENDING_DARKER 5
  73. uniform sampler2D tDiffuse;
  74. uniform float radius;
  75. uniform float rotateR;
  76. uniform float rotateG;
  77. uniform float rotateB;
  78. uniform float scatter;
  79. uniform float width;
  80. uniform float height;
  81. uniform int shape;
  82. uniform bool disable;
  83. uniform float blending;
  84. uniform int blendingMode;
  85. varying vec2 vUV;
  86. uniform bool greyscale;
  87. const int samples = 8;
  88. float blend( float a, float b, float t ) {
  89. // linear blend
  90. return a * ( 1.0 - t ) + b * t;
  91. }
  92. float hypot( float x, float y ) {
  93. // vector magnitude
  94. return sqrt( x * x + y * y );
  95. }
  96. float rand( vec2 seed ){
  97. // get pseudo-random number
  98. return fract( sin( dot( seed.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 );
  99. }
  100. float distanceToDotRadius( float channel, vec2 coord, vec2 normal, vec2 p, float angle, float rad_max ) {
  101. // apply shape-specific transforms
  102. float dist = hypot( coord.x - p.x, coord.y - p.y );
  103. float rad = channel;
  104. if ( shape == SHAPE_DOT ) {
  105. rad = pow( abs( rad ), 1.125 ) * rad_max;
  106. } else if ( shape == SHAPE_ELLIPSE ) {
  107. rad = pow( abs( rad ), 1.125 ) * rad_max;
  108. if ( dist != 0.0 ) {
  109. float dot_p = abs( ( p.x - coord.x ) / dist * normal.x + ( p.y - coord.y ) / dist * normal.y );
  110. dist = ( dist * ( 1.0 - SQRT2_HALF_MINUS_ONE ) ) + dot_p * dist * SQRT2_MINUS_ONE;
  111. }
  112. } else if ( shape == SHAPE_LINE ) {
  113. rad = pow( abs( rad ), 1.5) * rad_max;
  114. float dot_p = ( p.x - coord.x ) * normal.x + ( p.y - coord.y ) * normal.y;
  115. dist = hypot( normal.x * dot_p, normal.y * dot_p );
  116. } else if ( shape == SHAPE_SQUARE ) {
  117. float theta = atan( p.y - coord.y, p.x - coord.x ) - angle;
  118. float sin_t = abs( sin( theta ) );
  119. float cos_t = abs( cos( theta ) );
  120. rad = pow( abs( rad ), 1.4 );
  121. rad = rad_max * ( rad + ( ( sin_t > cos_t ) ? rad - sin_t * rad : rad - cos_t * rad ) );
  122. }
  123. return rad - dist;
  124. }
  125. struct Cell {
  126. // grid sample positions
  127. vec2 normal;
  128. vec2 p1;
  129. vec2 p2;
  130. vec2 p3;
  131. vec2 p4;
  132. float samp2;
  133. float samp1;
  134. float samp3;
  135. float samp4;
  136. };
  137. vec4 getSample( vec2 point ) {
  138. // multi-sampled point
  139. vec4 tex = texture2D( tDiffuse, vec2( point.x / width, point.y / height ) );
  140. float base = rand( vec2( floor( point.x ), floor( point.y ) ) ) * PI2;
  141. float step = PI2 / float( samples );
  142. float dist = radius * 0.66;
  143. for ( int i = 0; i < samples; ++i ) {
  144. float r = base + step * float( i );
  145. vec2 coord = point + vec2( cos( r ) * dist, sin( r ) * dist );
  146. tex += texture2D( tDiffuse, vec2( coord.x / width, coord.y / height ) );
  147. }
  148. tex /= float( samples ) + 1.0;
  149. return tex;
  150. }
  151. float getDotColour( Cell c, vec2 p, int channel, float angle, float aa ) {
  152. // get colour for given point
  153. float dist_c_1, dist_c_2, dist_c_3, dist_c_4, res;
  154. if ( channel == 0 ) {
  155. c.samp1 = getSample( c.p1 ).r;
  156. c.samp2 = getSample( c.p2 ).r;
  157. c.samp3 = getSample( c.p3 ).r;
  158. c.samp4 = getSample( c.p4 ).r;
  159. } else if (channel == 1) {
  160. c.samp1 = getSample( c.p1 ).g;
  161. c.samp2 = getSample( c.p2 ).g;
  162. c.samp3 = getSample( c.p3 ).g;
  163. c.samp4 = getSample( c.p4 ).g;
  164. } else {
  165. c.samp1 = getSample( c.p1 ).b;
  166. c.samp3 = getSample( c.p3 ).b;
  167. c.samp2 = getSample( c.p2 ).b;
  168. c.samp4 = getSample( c.p4 ).b;
  169. }
  170. dist_c_1 = distanceToDotRadius( c.samp1, c.p1, c.normal, p, angle, radius );
  171. dist_c_2 = distanceToDotRadius( c.samp2, c.p2, c.normal, p, angle, radius );
  172. dist_c_3 = distanceToDotRadius( c.samp3, c.p3, c.normal, p, angle, radius );
  173. dist_c_4 = distanceToDotRadius( c.samp4, c.p4, c.normal, p, angle, radius );
  174. res = ( dist_c_1 > 0.0 ) ? clamp( dist_c_1 / aa, 0.0, 1.0 ) : 0.0;
  175. res += ( dist_c_2 > 0.0 ) ? clamp( dist_c_2 / aa, 0.0, 1.0 ) : 0.0;
  176. res += ( dist_c_3 > 0.0 ) ? clamp( dist_c_3 / aa, 0.0, 1.0 ) : 0.0;
  177. res += ( dist_c_4 > 0.0 ) ? clamp( dist_c_4 / aa, 0.0, 1.0 ) : 0.0;
  178. res = clamp( res, 0.0, 1.0 );
  179. return res;
  180. }
  181. Cell getReferenceCell( vec2 p, vec2 origin, float grid_angle, float step ) {
  182. // get containing cell
  183. Cell c;
  184. // calc grid
  185. vec2 n = vec2( cos( grid_angle ), sin( grid_angle ) );
  186. float threshold = step * 0.5;
  187. float dot_normal = n.x * ( p.x - origin.x ) + n.y * ( p.y - origin.y );
  188. float dot_line = -n.y * ( p.x - origin.x ) + n.x * ( p.y - origin.y );
  189. vec2 offset = vec2( n.x * dot_normal, n.y * dot_normal );
  190. float offset_normal = mod( hypot( offset.x, offset.y ), step );
  191. float normal_dir = ( dot_normal < 0.0 ) ? 1.0 : -1.0;
  192. float normal_scale = ( ( offset_normal < threshold ) ? -offset_normal : step - offset_normal ) * normal_dir;
  193. float offset_line = mod( hypot( ( p.x - offset.x ) - origin.x, ( p.y - offset.y ) - origin.y ), step );
  194. float line_dir = ( dot_line < 0.0 ) ? 1.0 : -1.0;
  195. float line_scale = ( ( offset_line < threshold ) ? -offset_line : step - offset_line ) * line_dir;
  196. // get closest corner
  197. c.normal = n;
  198. c.p1.x = p.x - n.x * normal_scale + n.y * line_scale;
  199. c.p1.y = p.y - n.y * normal_scale - n.x * line_scale;
  200. // scatter
  201. if ( scatter != 0.0 ) {
  202. float off_mag = scatter * threshold * 0.5;
  203. float off_angle = rand( vec2( floor( c.p1.x ), floor( c.p1.y ) ) ) * PI2;
  204. c.p1.x += cos( off_angle ) * off_mag;
  205. c.p1.y += sin( off_angle ) * off_mag;
  206. }
  207. // find corners
  208. float normal_step = normal_dir * ( ( offset_normal < threshold ) ? step : -step );
  209. float line_step = line_dir * ( ( offset_line < threshold ) ? step : -step );
  210. c.p2.x = c.p1.x - n.x * normal_step;
  211. c.p2.y = c.p1.y - n.y * normal_step;
  212. c.p3.x = c.p1.x + n.y * line_step;
  213. c.p3.y = c.p1.y - n.x * line_step;
  214. c.p4.x = c.p1.x - n.x * normal_step + n.y * line_step;
  215. c.p4.y = c.p1.y - n.y * normal_step - n.x * line_step;
  216. return c;
  217. }
  218. float blendColour( float a, float b, float t ) {
  219. // blend colours
  220. if ( blendingMode == BLENDING_LINEAR ) {
  221. return blend( a, b, 1.0 - t );
  222. } else if ( blendingMode == BLENDING_ADD ) {
  223. return blend( a, min( 1.0, a + b ), t );
  224. } else if ( blendingMode == BLENDING_MULTIPLY ) {
  225. return blend( a, max( 0.0, a * b ), t );
  226. } else if ( blendingMode == BLENDING_LIGHTER ) {
  227. return blend( a, max( a, b ), t );
  228. } else if ( blendingMode == BLENDING_DARKER ) {
  229. return blend( a, min( a, b ), t );
  230. } else {
  231. return blend( a, b, 1.0 - t );
  232. }
  233. }
  234. void main() {
  235. if ( ! disable ) {
  236. // setup
  237. vec2 p = vec2( vUV.x * width, vUV.y * height );
  238. vec2 origin = vec2( 0, 0 );
  239. float aa = ( radius < 2.5 ) ? radius * 0.5 : 1.25;
  240. // get channel samples
  241. Cell cell_r = getReferenceCell( p, origin, rotateR, radius );
  242. Cell cell_g = getReferenceCell( p, origin, rotateG, radius );
  243. Cell cell_b = getReferenceCell( p, origin, rotateB, radius );
  244. float r = getDotColour( cell_r, p, 0, rotateR, aa );
  245. float g = getDotColour( cell_g, p, 1, rotateG, aa );
  246. float b = getDotColour( cell_b, p, 2, rotateB, aa );
  247. // blend with original
  248. vec4 colour = texture2D( tDiffuse, vUV );
  249. r = blendColour( r, colour.r, blending );
  250. g = blendColour( g, colour.g, blending );
  251. b = blendColour( b, colour.b, blending );
  252. if ( greyscale ) {
  253. r = g = b = (r + b + g) / 3.0;
  254. }
  255. gl_FragColor = vec4( r, g, b, 1.0 );
  256. } else {
  257. gl_FragColor = texture2D( tDiffuse, vUV );
  258. }
  259. }`
  260. };
  261. THREE.HalftoneShader = HalftoneShader;
  262. } )();