EdgeShader.js 3.0 KB

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