2
0

FreiChenShader.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * Edge Detection Shader using Frei-Chen filter
  3. * Based on http://rastergrid.com/blog/2011/01/frei-chen-edge-detector
  4. *
  5. * aspect: vec2 of (1/width, 1/height)
  6. */
  7. THREE.FreiChenShader = {
  8. uniforms: {
  9. 'tDiffuse': { value: null },
  10. 'aspect': { value: new THREE.Vector2( 512, 512 ) }
  11. },
  12. vertexShader: [
  13. 'varying vec2 vUv;',
  14. 'void main() {',
  15. ' vUv = uv;',
  16. ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
  17. '}'
  18. ].join( '\n' ),
  19. fragmentShader: [
  20. 'uniform sampler2D tDiffuse;',
  21. 'varying vec2 vUv;',
  22. 'uniform vec2 aspect;',
  23. 'vec2 texel = vec2(1.0 / aspect.x, 1.0 / aspect.y);',
  24. 'mat3 G[9];',
  25. // hard coded matrix values!!!! as suggested in https://github.com/neilmendoza/ofxPostProcessing/blob/master/src/EdgePass.cpp#L45
  26. 'const mat3 g0 = mat3( 0.3535533845424652, 0, -0.3535533845424652, 0.5, 0, -0.5, 0.3535533845424652, 0, -0.3535533845424652 );',
  27. 'const mat3 g1 = mat3( 0.3535533845424652, 0.5, 0.3535533845424652, 0, 0, 0, -0.3535533845424652, -0.5, -0.3535533845424652 );',
  28. 'const mat3 g2 = mat3( 0, 0.3535533845424652, -0.5, -0.3535533845424652, 0, 0.3535533845424652, 0.5, -0.3535533845424652, 0 );',
  29. 'const mat3 g3 = mat3( 0.5, -0.3535533845424652, 0, -0.3535533845424652, 0, 0.3535533845424652, 0, 0.3535533845424652, -0.5 );',
  30. 'const mat3 g4 = mat3( 0, -0.5, 0, 0.5, 0, 0.5, 0, -0.5, 0 );',
  31. 'const mat3 g5 = mat3( -0.5, 0, 0.5, 0, 0, 0, 0.5, 0, -0.5 );',
  32. 'const mat3 g6 = mat3( 0.1666666716337204, -0.3333333432674408, 0.1666666716337204, -0.3333333432674408, 0.6666666865348816, -0.3333333432674408, 0.1666666716337204, -0.3333333432674408, 0.1666666716337204 );',
  33. 'const mat3 g7 = mat3( -0.3333333432674408, 0.1666666716337204, -0.3333333432674408, 0.1666666716337204, 0.6666666865348816, 0.1666666716337204, -0.3333333432674408, 0.1666666716337204, -0.3333333432674408 );',
  34. 'const mat3 g8 = mat3( 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408 );',
  35. 'void main(void)',
  36. '{',
  37. ' G[0] = g0,',
  38. ' G[1] = g1,',
  39. ' G[2] = g2,',
  40. ' G[3] = g3,',
  41. ' G[4] = g4,',
  42. ' G[5] = g5,',
  43. ' G[6] = g6,',
  44. ' G[7] = g7,',
  45. ' G[8] = g8;',
  46. ' mat3 I;',
  47. ' float cnv[9];',
  48. ' vec3 sample;',
  49. /* fetch the 3x3 neighbourhood and use the RGB vector's length as intensity value */
  50. ' for (float i=0.0; i<3.0; i++) {',
  51. ' for (float j=0.0; j<3.0; j++) {',
  52. ' sample = texture2D(tDiffuse, vUv + texel * vec2(i-1.0,j-1.0) ).rgb;',
  53. ' I[int(i)][int(j)] = length(sample);',
  54. ' }',
  55. ' }',
  56. /* calculate the convolution values for all the masks */
  57. ' for (int i=0; i<9; i++) {',
  58. ' float dp3 = dot(G[i][0], I[0]) + dot(G[i][1], I[1]) + dot(G[i][2], I[2]);',
  59. ' cnv[i] = dp3 * dp3;',
  60. ' }',
  61. ' float M = (cnv[0] + cnv[1]) + (cnv[2] + cnv[3]);',
  62. ' float S = (cnv[4] + cnv[5]) + (cnv[6] + cnv[7]) + (cnv[8] + M);',
  63. ' gl_FragColor = vec4(vec3(sqrt(M/S)), 1.0);',
  64. '}'
  65. ].join( '\n' )
  66. };