Pixi.js: Probleme mit dem Pixi JS Renderer Drawingbuffer unter iOS

Erstellt am 16. Juni 2017  ·  10Kommentare  ·  Quelle: pixijs/pixi.js

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!

pixierenderer


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);
}
Stale 💾 v4.x (Legacy) 🤔 Question

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!

Alle 10 Kommentare

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.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

Makio64 picture Makio64  ·  3Kommentare

readygosports picture readygosports  ·  3Kommentare

st3v0 picture st3v0  ·  3Kommentare

Darker picture Darker  ·  3Kommentare

SebastienFPRousseau picture SebastienFPRousseau  ·  3Kommentare