Pixi.js: Problemas do Pixi JS Renderer Drawingbuffer no iOS

Criado em 16 jun. 2017  ·  10Comentários  ·  Fonte: pixijs/pixi.js

Olá!
O código Pixie, que funciona bem no desktop, parece se comportar de maneira estranha no celular.
Eu sou um novato em pixie.js, então posso com muita probabilidade estar fazendo algo errado aqui.

Quando uso meu código de desenho no celular, parece que a tela se atualiza de maneira estranha.
Não estou redesenhando todo o traço, mas mantendo o DrawingBuffer e apenas adicionando novos sprites a ele.

Não importa se eu defini 'legado:' como falso ou verdadeiro (como abaixo) - ele me dará o mesmo resultado.

Obrigado por dar uma olhada!

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

Comentários muito úteis

Portanto, a boa notícia é que ativar o anti-serrilhamento corrige esse artefato. Mas, claramente, ativar o antialiasing ainda tem um impacto significativo no desempenho. Qualquer ajuda sobre como contornar / corrigir esse bug é muito apreciada. THX!

Todos 10 comentários

Você deve escrever aplicativos nativos para coisas tão avançadas.

O aplicativo da web é surpreendentemente rápido e parece tão perto - exceto que o drawingbuffer gosta de regurgitar dados antigos, é claro ...

Portanto, a boa notícia é que ativar o anti-serrilhamento corrige esse artefato. Mas, claramente, ativar o antialiasing ainda tem um impacto significativo no desempenho. Qualquer ajuda sobre como contornar / corrigir esse bug é muito apreciada. THX!

Olá! Isso pode ser um problema de precisão. Você tentou definir a precisão dos shaders para highP?

Posso confirmar que funciona com o antialiasing ativado.

@GoodBoyDigital : Tentei definir "highP" que não teve um efeito, infelizmente

Alguma outra ideia de como isso poderia ser consertado sem o impacto no desempenho do antialiasing?

@floepi

Você pode tentar alterar a transparência, se não precisar desse fundo.

{ transparent: 'notMultiplied'}

ou

{ transparent: false}

infelizmente, precisaremos de ambos, pois esta é uma camada de tinta transparente ...
Devemos ver se podemos depurar por que isso não está acontecendo com o antialiasing ativado ...

Você quer depurar o navegador móvel?

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que foi fechado. Abra um novo problema para bugs relacionados.

Esta página foi útil?
0 / 5 - 0 avaliações