Pixi.js: Masalah Pixi JS Renderer Drawingbuffer di iOS

Dibuat pada 16 Jun 2017  ·  10Komentar  ·  Sumber: pixijs/pixi.js

Hai yang disana!
Kode Pixie yang berjalan dengan baik di desktop tampaknya berperilaku aneh di perangkat seluler.
Saya pemula di pixie.js jadi saya mungkin dengan kemungkinan sangat tinggi melakukan kesalahan di sini.

Ketika saya menggunakan kode gambar saya di ponsel, tampaknya kanvas menyegarkan dengan aneh.
Saya tidak menggambar ulang seluruh goresan tetapi mempertahankan DrawingBuffer dan hanya menambahkan sprite baru ke dalamnya.

Tidak masalah jika saya menyetel 'legacy:' ke false atau true (seperti di bawah) - ini akan memberi saya hasil yang sama.

Terima kasih sudah melihatnya!

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

Komentar yang paling membantu

Jadi kabar baiknya adalah, mengaktifkan perbaikan antialiasing akan memperbaiki artefak ini. Namun yang jelas menyalakan antialiasing masih berdampak signifikan pada kinerja. Bantuan apa pun untuk melewati / memperbaiki bug ini sangat dihargai. Terima kasih!

Semua 10 komentar

Anda harus menulis aplikasi asli untuk hal-hal yang canggih ini.

Aplikasi webnya sangat cepat dan sepertinya sangat mirip - selain itu, drawbuffer suka memuntahkan data lama tentunya ...

Jadi kabar baiknya adalah, mengaktifkan perbaikan antialiasing akan memperbaiki artefak ini. Namun yang jelas menyalakan antialiasing masih berdampak signifikan pada kinerja. Bantuan apa pun untuk melewati / memperbaiki bug ini sangat dihargai. Terima kasih!

Halo! Sepertinya ini masalah presisi, sudahkah Anda mencoba menyetel presisi shader ke highP?

Saya dapat mengonfirmasi bahwa ini berfungsi dengan antialiasing diaktifkan.

@GoodBoyDigital :

Ada ide lain bagaimana ini bisa diperbaiki tanpa kinerja hit antialiasing?

@tokopedia

Anda dapat mencoba mengubah transparansi, jika Anda tidak membutuhkan latar belakang itu.

{ transparent: 'notMultiplied'}

atau

{ transparent: false}

sayangnya kita akan membutuhkan keduanya karena ini adalah lapisan cat transparan ...
Kita harus melihat apakah kita dapat men-debug mengapa ini tidak terjadi dengan antialiasing diaktifkan ...

Apakah Anda ingin men-debug browser seluler?

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas baru-baru ini setelah ditutup. Silakan buka masalah baru untuk bug terkait.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat