Pixijs V8 -Custom Filter: Координаты выпуска ⇐ Javascript

[Anonymous]

Я новичок в использовании Pixijs и Custom-Shaders/Filters, и я пытаюсь отображать спрайт с помощью фильтра, который влияет на пиксели в положении мыши пользователей и поворачивает их красным, в зависимости от расстояния между мышью и пикселем. Но я просто не могу получить позицию красного права. Он всегда смещен вниз и справа.const { Application, Assets, Filter, GlProgram, Sprite, Texture } = PIXI;

let app;
(async () => {
app = new Application();
await app.init({
resizeTo: window,
hello: true,
preference: 'webgl',
});
document.body.appendChild(app.canvas);

const texture = await Assets.load('./img/Haus1.png');
const sprite = Sprite.from(texture);
app.stage.addChild(sprite);

const filter = new Filter({
glProgram: new GlProgram({
fragment,
vertex: PIXI.defaultFilterVert
}),
resources: {
localUniforms: {
uLightPosition: { value: [0.0, 0.0], type: 'vec2' },
uLightRadius: { value: 0.1, type: 'f32' },
},
},
});

sprite.filters = [filter];

addEventListener("mousemove", (event) => {
const x = (event.clientX - sprite.x) / sprite.width
const y = (event.clientY- sprite.y ) / sprite.height

filter.resources.localUniforms.uniforms.uLightPosition = [x, y];
});

let pixelRadius = 0.1
addEventListener("wheel", (event) => {
if (event.deltaY > 0) {
pixelRadius = (pixelRadius * sprite.width + 5) / sprite.width
filter.resources.localUniforms.uniforms.uLightRadius = pixelRadius
}

if (event.deltaY < 0) {
pixelRadius = (pixelRadius * sprite.width - 5) / sprite.width
filter.resources.localUniforms.uniforms.uLightRadius = pixelRadius
}
})
})();
< /code>
Fragment shader: < /p>
const fragment = `
in vec2 vTextureCoord;
in vec4 vColor;

uniform vec2 uLightPosition;
uniform float uLightRadius;
uniform vec2 uResolution;
uniform sampler2D uTexture;

void main(void)
{
float dist = distance(vTextureCoord, uLightPosition);

float brightness = dist/uLightRadius;

vec4 fg = texture2D(uTexture, vTextureCoord);

fg.r = 1.0-brightness;

gl_FragColor = fg;
}
`
< /code>
Если вы посмотрите на эту ссылку, вы можете испытать то, что я имею в виду < /p>
, когда вы падаете над спрайтом, вы можете увидеть красный свет после вашей мыши. Но его положение странно растягивается, и поэтому она смещается от мыши, чем больше вы уходите от 0, 0 точек PF текстуры. Я хочу, чтобы это всегда было расположено в месте мыши.

Подробнее здесь: https://stackoverflow.com/questions/796 ... ates-issue