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
![image.png.df7b1e26b92062f182ee1ca239cae1de.png]()
the filter uses that shape to generate a red drop shadow like this:
![image.png.4ac05a8c41559b8d6e9b52e51ea5cb6d.png]()
The problem is the shader messes up and doesn't calculate properly the length of a pixel resulting on this:
![image.png.50c827a69d7ad030740e80ebcf0a609c.png]()
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.
This one calculates the position of each group of text automatically and will save me a lot of dev time now.
