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.
