Pixi.js: Problemas de Pixi JS Renderer Drawingbuffer en iOS

Creado en 16 jun. 2017  ·  10Comentarios  ·  Fuente: pixijs/pixi.js

¡Hola!
El código Pixie que funciona bien en el escritorio parece comportarse de manera extraña en el móvil.
Soy un novato en pixie.js, por lo que es muy probable que esté haciendo algo mal aquí.

Cuando utilizo mi código de dibujo en un dispositivo móvil, parece que el lienzo se actualiza de forma extraña.
No estoy redibujando todo el trazo, sino manteniendo el DrawingBuffer y simplemente agregando nuevos sprites.

No importa si configuro 'legacy:' en falso o verdadero (como se muestra a continuación), me dará el mismo resultado.

¡Gracias por echar un vistazo!

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

Comentario más útil

Entonces, la buena noticia es que activar el antialiasing corrige este artefacto. Pero es evidente que activar el antialiasing todavía tiene un impacto significativo en el rendimiento. Cualquier ayuda para evitar / corregir este error es muy apreciada. ¡gracias!

Todos 10 comentarios

Deberías escribir aplicaciones nativas para cosas tan avanzadas.

La aplicación web es sorprendentemente rápida y parece tan cercana, aparte de eso, al búfer de dibujo le gusta regurgitar datos antiguos, por supuesto ...

Entonces, la buena noticia es que activar el antialiasing corrige este artefacto. Pero es evidente que activar el antialiasing todavía tiene un impacto significativo en el rendimiento. Cualquier ayuda para evitar / corregir este error es muy apreciada. ¡gracias!

¡Hola! Esto parece que puede ser un problema de precisión, ¿ha intentado establecer la precisión de los sombreadores en highP?

Puedo confirmar que funciona con el antialiasing habilitado.

@GoodBoyDigital :

¿Alguna otra idea de cómo podría solucionarse esto sin el impacto de rendimiento del antialiasing?

@floepi

Puede intentar cambiar la transparencia, si no necesita ese fondo.

{ transparent: 'notMultiplied'}

o

{ transparent: false}

lamentablemente necesitaremos ambos, ya que se trata de una capa de pintura transparente ...
Deberíamos ver si podemos depurar por qué esto no sucede con el antialiasing habilitado ...

¿Quieres depurar el navegador móvil?

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de que se cerró. Abra un nuevo problema para errores relacionados.

¿Fue útil esta página
0 / 5 - 0 calificaciones