Salut!
Le code Pixie qui fonctionne bien sur le bureau semble se comporter étrangement sur mobile.
Je suis un noob pour pixie.js, donc je peux avec une très grande probabilité de faire quelque chose de mal ici.
Lorsque j'utilise mon code de dessin sur mobile, il semble que le canevas s'actualise étrangement.
Je ne redessine pas le trait entier mais je maintiens le DrawingBuffer et j'y ajoute simplement de nouveaux sprites.
Peu importe si je mets 'legacy:' sur false ou true (comme ci-dessous) - cela me donnera le même résultat.
Merci d'avoir jeté un coup d'œil!
initializePixieCanvas() {
console.log("init canvas")
const cArea = this.canvasContainer;
const width = 1000;
const height = 1000;
this.stage = new PIXI.Container();
this.renderer = new PIXI.WebGLRenderer(
width,
height,
{
antialias: false,
transparent: true,
resolution: 2,
clearBeforeRender: false,
preserveDrawingBuffer: true,
premultipliedAlpha: false,
forceFXAA: true,
legacy: true
}
);
cArea.appendChild(this.renderer.view);
this.renderer.view.style.position = "absolute";
this.renderer.view.style.top = "0";
this.renderer.view.style.left = "0";
this.renderer.view.style.pointerEvents = "none";
this.renderer.view.style.zIndex = "99";
const cnvs = this.renderer.view;
const scaleForHighResDisplay = true;
if (scaleForHighResDisplay) {
cnvs.width = width * 2;
cnvs.height = height * 2;
cnvs.style.width = width + 'px';
cnvs.style.height = height + 'px';
}
this.pointer = new PIXI.Sprite(PIXI.Texture.fromCanvas(this.brushElement));
this.pointer.texture.destroy();
this.pointer.texture = PIXI.Texture.fromCanvas(this.brushElement);
this.pointer.anchor.x = 0.5;
this.pointer.anchor.y = 0.5;
this.renderer.clear();
this.stage.addChild(this.pointer);
}
Vous devriez écrire des applications natives pour des choses aussi avancées.
L'application Web est étonnamment rapide et semble si proche - à part cela, le tampon de dessin aime bien sûr régurgiter d'anciennes données ...
La bonne nouvelle est que l'activation de l'anticrénelage corrige cet artefact. Mais l'activation de l'anticrénelage a toujours un impact significatif sur les performances. Toute aide pour contourner / corriger ce problème est extrêmement appréciée. THX!
salut! Cela semble être un problème de précision, avez-vous essayé de régler la précision des shaders sur highP?
Je peux confirmer que cela fonctionne avec l'anticrénelage activé.
@GoodBoyDigital :
Avez-vous une autre idée de la façon dont cela pourrait être corrigé sans les performances de l'anticrénelage?
@floepi
Vous pouvez essayer de changer la transparence, si vous n'avez pas besoin de cet arrière-plan.
{ transparent: 'notMultiplied'}
ou
{ transparent: false}
malheureusement, nous aurons besoin des deux car il s'agit d'une couche de peinture transparente ...
Nous devrions voir si nous pouvons déboguer pourquoi cela ne se produit pas avec l'antialiasing activé ...
Voulez-vous déboguer le navigateur mobile?
Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité n'a lieu. Merci pour vos contributions.
Ce thread a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau numéro pour les bogues associés.
Commentaire le plus utile
La bonne nouvelle est que l'activation de l'anticrénelage corrige cet artefact. Mais l'activation de l'anticrénelage a toujours un impact significatif sur les performances. Toute aide pour contourner / corriger ce problème est extrêmement appréciée. THX!