Я новичок в использовании 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
