GLSL Canny Shader

Viewed 409

I'm trying to create an edge detector shader using canny edge detector, I've adjusted a few nodeJS libraries till the point I have:

vertex:

precision highp float;

    attribute vec2 a_VertexPosition;
    attribute vec2 a_TextureCoord;

    varying vec2 v_TextureCoord;

    void main() {

      v_TextureCoord = a_TextureCoord;

      gl_Position = vec4(a_VertexPosition, 0., 1.);
    }

fragment shader:

precision highp float;

    uniform vec2 resolution;
    uniform sampler2D t;

    uniform float u_WeakThreshold;
    uniform float u_StrongThreshold;
    uniform bool u_UseEdgeDetection;

    varying vec2 v_TextureCoord;

   ...functions canny

    float cannyEdgeDetection(
      sampler2D textureSampler,
      vec2 textureCoord,
      vec2 resolution,
      float weakThreshold,
      float strongThreshold
    ) {
      vec2 gradient = getSuppressedTextureIntensityGradient(textureSampler, textureCoord, resolution);
      float edge = applyDoubleThreshold(gradient, weakThreshold, strongThreshold);
      if (edge == .5) {
        edge = applyHysteresis(
          textureSampler, textureCoord, resolution, weakThreshold, strongThreshold);
      }
      return edge;
    }

    void main() {

      // vec2 uvTex = vec2(v_TextureCoord.x/3.0, v_TextureCoord.y/3.0);

      float edge = cannyEdgeDetection(
        t, v_TextureCoord, resolution, u_WeakThreshold, u_StrongThreshold);
      if (u_UseEdgeDetection) {
        gl_FragColor = vec4(vec3(edge), 1.);
      } else {
        gl_FragColor = texture2D(t, v_TextureCoord);
      }
    }

Sorry for such big mess of code but I'm really new into it and don't know a better way of referencing functions.

Which results in a canny edged image 1/4 size of expected. Anyone could help me out finding why the result is smaller than expected? Thanks in advance! I think is something vertex coordinates related but I'm not sure.

Result

0 Answers
Related