Pixi Filter and pixel size

Hi, I'm trying to learn how to pass and use textures in PIXI.Filter. I have a game that uses a complex filter that takes multiple textures and behaves differently depending on the color of the pixel of each texture. It's too complicated to post here.

The main problem I have is: I don't know how to measure the width / height of a pixel of the texture I'm passing inside my shader.

Here I have a very simple filter that illustrates my issue:

I want to create a filter that I pass the following "u" shape texture

the filter uses that shape to generate a red drop shadow like this:

The problem is the shader messes up and doesn't calculate properly the length of a pixel resulting on this:

I was expecting to have a perfect stair going up, and I was expecting more steps on the stair (see algorithm below).

Does anyone know what I'm doing wrong?

Here's a link to a codepen illustrating the issue:

https://codepen.io/alvaromartinlop/pen/abOvzxb?editors=0010

Here's the vertex shader:

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
varying vec2 vTextureCoord;

uniform mat3 shadowMapMatrix;
varying vec2 vShadowMapCoord;

void main(void)
{
    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

    vTextureCoord = aTextureCoord;
    vShadowMapCoord = (shadowMapMatrix * vec3(aTextureCoord, 1.0)).xy;   
}

Here's the frag shader:

precision highp float;

varying vec2 vTextureCoord;
uniform vec4 inputPixel; // Problem is here

varying vec2 vShadowMapCoord;
uniform sampler2D shadowMapTexture;

void main() {
  vec4 shadowColor = vec4(1, 0, 0, 1);

  vec2 displacementCoord = vShadowMapCoord;
  vec4 shadowMapColor = texture2D(shadowMapTexture, vShadowMapCoord);
  vec4 finalColor;
  vec4 translateColor;

  vec2 translate = vec2(inputPixel.z,-inputPixel.w);
  for(int i= 0; i < 10; i++) {
    displacementCoord -= translate;
    translateColor = texture2D(shadowMapTexture, displacementCoord);
    if (translateColor.x > 0.0 && shadowMapColor.x == 0.0) {
      finalColor = shadowColor;
      break;
    }
  }
	gl_FragColor = finalColor;
}

Clearly the issue is with inputPixel, displacementCoord is not decrementing properly on each iteration in the for loop.

Here's how I calculate the matrix for the texture

  public apply(
    filterManager: systems.FilterSystem,
    input: RenderTexture,
    output: RenderTexture,
    clearMode: boolean
  ): void {
    this.uniforms.shadowMapMatrix = filterManager.calculateSpriteMatrix(
      this._matrix,
      this._shadowMapSprite
    );
    filterManager.applyFilter(this, input, output, clearMode);
  }

So the question is. How do I properly calculate inputPixel so that I don't have the irregular staircase problem?

Thanks.