Pixi.js: Problèmes de Pixi JS Renderer Drawingbuffer sur iOS

Créé le 16 juin 2017  ·  10Commentaires  ·  Source: pixijs/pixi.js

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!

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

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!

Tous les 10 commentaires

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.

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

courtneyvigo picture courtneyvigo  ·  3Commentaires

samueller picture samueller  ·  3Commentaires

neciszhang picture neciszhang  ·  3Commentaires

madroneropaulo picture madroneropaulo  ·  3Commentaires

gaccob picture gaccob  ·  3Commentaires