Hallo!
Pixie-Code, der auf dem Desktop gut läuft, scheint sich auf Mobilgeräten seltsam zu verhalten.
Ich bin ein Neuling bei pixie.js, daher kann es sein, dass ich hier mit sehr hoher Wahrscheinlichkeit etwas falsch mache.
Wenn ich meinen Zeichencode auf Mobilgeräten verwende, wird die Zeichenfläche anscheinend merkwürdig aktualisiert.
Ich zeichne nicht den gesamten Strich neu, sondern behalte den DrawingBuffer bei und füge nur neue Sprites hinzu.
Egal, ob ich "Legacy:" auf "Falsch" oder "Wahr" setze (wie unten) - es gibt mir das gleiche Ergebnis.
Vielen Dank für Ihren Blick!
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);
}
Sie sollten native Apps für solche fortgeschrittenen Dinge schreiben.
Die Web-App ist überraschend schnell und scheint so nah zu sein - ansonsten spuckt der Zeichnungspuffer natürlich gerne alte Daten aus ...
Die gute Nachricht ist also, dass das Aktivieren von Antialiasing dieses Artefakt behebt. Das eindeutige Aktivieren von Antialiasing hat jedoch immer noch einen erheblichen Einfluss auf die Leistung. Jede Hilfe beim Umgehen / Beheben dieses Fehlers wird sehr geschätzt. Danke!
Hallo! Dies scheint ein Präzisionsproblem zu sein. Haben Sie versucht, die Präzision der Shader auf HighP zu setzen?
Ich kann bestätigen, dass es mit aktiviertem Antialiasing funktioniert.
@GoodBoyDigital : Versuchte Einstellung "highP", die leider keinen Effekt hatte
Irgendeine andere Idee, wie dies ohne den Performance-Hit von Antialiasing behoben werden könnte?
@floepi
Sie können versuchen, die Transparenz zu ändern, wenn Sie diesen Hintergrund nicht benötigen.
{ transparent: 'notMultiplied'}
oder
{ transparent: false}
Leider werden wir beides brauchen, da dies eine transparente Farbschicht ist ...
Wir sollten sehen, ob wir debuggen können, warum dies bei aktiviertem Antialiasing nicht geschieht ...
Möchten Sie den mobilen Browser debuggen?
Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.
Dieser Thread wurde automatisch gesperrt, da nach dem Schließen keine aktuellen Aktivitäten stattgefunden haben. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.
Hilfreichster Kommentar
Die gute Nachricht ist also, dass das Aktivieren von Antialiasing dieses Artefakt behebt. Das eindeutige Aktivieren von Antialiasing hat jedoch immer noch einen erheblichen Einfluss auf die Leistung. Jede Hilfe beim Umgehen / Beheben dieses Fehlers wird sehr geschätzt. Danke!