Pixi.js: Проблемы с Pixi JS Renderer Drawingbuffer на iOS

Созданный на 16 июн. 2017  ·  10Комментарии  ·  Источник: pixijs/pixi.js

Всем привет!
Код Pixie, который хорошо работает на настольных компьютерах, на мобильных устройствах ведет себя странно.
Я новичок в pixie.js, поэтому с очень большой вероятностью могу делать что-то здесь не так.

Когда я использую свой код для рисования на мобильном телефоне, кажется, что холст странно обновляется.
Я не перерисовываю всю обводку, а сохраняю DrawingBuffer и просто добавляю к нему новые спрайты.

Независимо от того, установил ли я для «legacy:» значение false или true (как показано ниже) - результат будет тот же.

Спасибо, что заглянули!

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

Самый полезный комментарий

Итак, хорошая новость в том, что включение сглаживания устраняет этот артефакт. Но явное включение антиалиасинга по-прежнему оказывает значительное влияние на производительность. Любая помощь по обходу / исправлению этой ошибки очень ценится. Спасибо!

Все 10 Комментарий

Вы должны писать нативные приложения для таких сложных вещей.

Веб-приложение на удивление быстрое и кажется таким близким - если не считать того, что рисовальный буфер, конечно, любит изрыгать старые данные ...

Итак, хорошая новость в том, что включение сглаживания устраняет этот артефакт. Но явное включение антиалиасинга по-прежнему оказывает значительное влияние на производительность. Любая помощь по обходу / исправлению этой ошибки очень ценится. Спасибо!

Здравствуйте! Похоже, это может быть проблема с точностью, вы пытались установить точность шейдеров на highP?

Могу подтвердить, что он работает с включенным сглаживанием.

@GoodBoyDigital : Пытался установить "highP", но, к сожалению, это не помогло.

Есть ли другие идеи, как это можно исправить без снижения производительности сглаживания?

@floepi

Вы можете попробовать изменить прозрачность, если вам не нужен этот фон.

{ transparent: 'notMultiplied'}

или же

{ transparent: false}

к сожалению, нам понадобится и то, и другое, так как это прозрачный слой краски ...
Мы должны посмотреть, сможем ли мы отладить, почему этого не происходит при включенном сглаживании ...

Хотите отладить мобильный браузер?

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

courtneyvigo picture courtneyvigo  ·  3Комментарии

readygosports picture readygosports  ·  3Комментарии

finscn picture finscn  ·  3Комментарии

lunabunn picture lunabunn  ·  3Комментарии

zcr1 picture zcr1  ·  3Комментарии