FreiChenShader.js 3.1 KB

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