Pixi.js: "WebGL tidak didukung di browser ini" saat menggunakan Chrome 74 w/ GTX 780

Dibuat pada 19 Mei 2019 · 43Komentar · Sumber: pixijs/pixi.js

Saya sudah mencoba googling kesalahan, tetapi hanya muncul 1 hasil yaitu situs web Cina yang merupakan tautan mati.

Perilaku yang Diharapkan

Pixi.js memuat dan berjalan tanpa kesalahan dengan webpack. Itu berjalan dengan baik ketika saya menggunakannya untuk membundelnya kemudian menggunakan browserify.

Perilaku Saat Ini

Uncaught Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.

Kemungkinan Solusi

Saya tidak terlalu berpengalaman dalam ekosistem javascript jadi ini mungkin karena konfigurasi webpack 4 yang buruk, bantuan apa pun akan sangat dihargai!

Lingkungan

TypeScript 3.4.5, Pixi.js 5.0.2, Webpack 4.31.0

Webpack.config.js, bagian Klien adalah bagian dari kode yang menggunakan pixi.js

/// <binding BeforeBuild='Run - Development' />
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
var pixiModule = path.join(__dirname, '/node_modules/pixi.js/')
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = [
    // Server
    {
        mode: "development",
        devtool: "inline-source-map",
        entry: "./app.ts",
        output: {
            filename: "./app.js"
        },
        target: 'node',
        node: {
            __dirname: false,
            __filename: false,
        },
        resolve: {
            // Add `.ts` and `.tsx` as a resolvable extension.
            extensions: [".ts", ".tsx", ".js"]
        },
        module: {
            rules: [
                // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                { test: /\.tsx?$/, loader: "ts-loader" }
            ]
        },
        plugins: [
            new CleanWebpackPlugin()
        ]
    },

    // Client
    {
        mode: "development",
        devtool: "inline-source-map",
        entry: "./public/typescripts/entry.ts",
        output: {
            library: "ASC",
            filename: "public/client.js"
        },
        target: 'web',
        resolve: {
            // Add `.ts` and `.tsx` as a resolvable extension.
            alias: {
                'PIXI': pixiModule,
            },
            extensions: [".ts", ".tsx", ".js"]
        },
        module: {
            rules: [
                // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                { test: /\.tsx?$/, loader: "ts-loader" },
                { test: /\.json$/, include: path.join(__dirname, 'node_modules', 'pixi.js'), loader: 'json-loader' },
                //We expose the non minified pixi file as a global. The minified one was not working with our solution
                { test: pixiModule, loader: 'expose-loader?pixi' }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'public/index.html',
                template: 'public/index.html',
                inject: false
            }),
            new HtmlWebpackPlugin({
                filename: 'public/game.html',
                template: 'public/game.html',
                inject: false
            })
        ]
    }
];

pixi.js versi : 5.0.2
Browser & Versi : Chrome 74.0.3729.157
OS & Versi : _e.g. Windows 10

Sumber

winterNebs

Komentar yang paling membantu

Mengaktifkan akselerasi perangkat keras melakukannya untuk saya.

Chrome -> Pengaturan (⌘,) -> Lanjutan -> Sistem -> aktifkan pertama

mariocastanoromeo pada 4 Jun 2019

👍8 🎉3 🚀2

Semua 43 komentar

Jika WebGL tidak didukung di browser ini, gunakan pixi.js-legacy untuk dukungan fallback canvas2d.

Itu bundel berbeda di npm. Konfigurasi Anda menggunakan pixi.js

ivanpopelyshev pada 20 Mei 2019

Jika WebGL tidak didukung di browser ini, gunakan pixi.js-legacy untuk dukungan fallback canvas2d.
Itu bundel berbeda di npm. Konfigurasi Anda menggunakan pixi.js

Tapi browser yang saya gunakan jelas mendukung WebGL

winterNebs pada 20 Mei 2019

Apakah contoh v5 di https://pixijs.io/examples/ berfungsi untuk Anda? Halaman yang Anda tunjukkan adalah webgl dasar, ya atau tidak. Tetapi ketika kami membuat konteks webgl, kami memintanya dengan beberapa parameter tambahan seperti membutuhkan dukungan stensil.

Bagaimanapun, itulah kesalahannya, dan mengapa itulah sudut pandang kami untuk mencoba membantu. Kami belum pernah melihat kesalahan di luar perangkat yang tidak mendukung webgl atau parameter webgl yang dibutuhkan pixijs

themoonrat pada 20 Mei 2019

Apakah contoh v5 di https://pixijs.io/examples/ berfungsi untuk Anda? Halaman yang Anda tunjukkan adalah webgl dasar, ya atau tidak. Tetapi ketika kami membuat konteks webgl, kami memintanya dengan beberapa parameter tambahan seperti membutuhkan dukungan stensil.
Bagaimanapun, itulah kesalahannya, dan mengapa itulah sudut pandang kami untuk mencoba membantu. Kami belum pernah melihat kesalahan di luar perangkat yang tidak mendukung webgl atau parameter webgl yang dibutuhkan pixijs

Contoh-contoh itu tidak berfungsi (v4, tetapi tidak v5) dan juga memberikan kesalahan yang sama. Itu tampak sangat aneh bagi saya, saya tidak yakin mengapa browser saya tidak mendukungnya.

Saya juga memeriksa aplikasi pixi.js saya yang berfungsi dan itu menggunakan 5.0.0-rc.2, yang mungkin mengapa itu berhasil?

Terima kasih sekali lagi atas bantuannya

winterNebs pada 20 Mei 2019

v4 akan berfungsi karena kembali ke penyaji kanvas. Dalam rilis resmi untuk v5 tidak, kecuali jika Anda menggunakan paket lawas.

Jadi mungkin kartu gfx Anda mendukung webgl tetapi tidak memiliki sesuatu seperti dukungan stensil yang kami perlukan untuk penyembunyian, jadi kami menolak mencoba menggunakannya?

themoonrat pada 20 Mei 2019

Untuk berjaga-jaga jika stensilnya, coba perbarui driver grafis Anda.

Namun akan sangat lucu jika ternyata webpack sangat mempengaruhi hal :)

ivanpopelyshev pada 20 Mei 2019

Oke ini sangat aneh desktop saya (i7 7700k, gtx 780) tidak menjalankannya, tetapi itu berfungsi di permukaan buku 1 saya, iPhone XS saya, dan teman-teman saya macbook pro 2015. GPU saya agak tua tapi saya tidak' t berpikir itu akan menjadi masalah.

Kecuali ada hal lain yang harus saya coba, saya kira saya hanya akan menggunakan paket warisan karena saya ingin kompatibilitas maksimum (dan juga saya tidak dapat benar-benar mengembangkan sesuatu yang tidak dapat saya jalankan)

winterNebs pada 20 Mei 2019

Instal ulang driver grafis, versi maju atau mundur. GPU tidak menjadi masalah, tetapi bagian driver yang terbuka.

ivanpopelyshev pada 20 Mei 2019

👎1

Tunggu sebentar, saya merasa sangat bodoh, saya pikir ini masalah chrome, ini berfungsi di Microsoft edge ... meskipun saya menggunakan chrome di laptop dan ponsel saya jadi itu aneh.

winterNebs pada 20 Mei 2019

Peramban memiliki daftar hitam untuk perangkat keras yang berbeda... terkadang hanya menonaktifkan webgl sama sekali, tetapi terkadang membuat daftar hitam fitur tertentu pada versi perangkat keras/driver tertentu jika ada masalah yang diketahui.

themoonrat pada 20 Mei 2019

Saya memperbarui judul masalah ini (bukan masalah Webpack + PixiJS) dan ditandai sebagai "Tidak Akan Diperbaiki" karena ini tampaknya sangat mungkin merupakan masalah perangkat keras/driver.

bigtimebuddy pada 20 Mei 2019

Oke, jadi menggunakan pixi.js-legacy dan mengubah semuanya menjadi referensi pixi.js-legacy masih memberikan kesalahan yang sama.

Saya memeriksa versi kerja saya menggunakan 5.0.0-rc.2 dan _melakukannya_ bekerja menggunakan webgl2:

Tetapi menggunakan 5.0.0-rc.2 memberi saya kesalahan ini: "Uncaught TypeError: Cannot read property 'performMixins' of undefined" pada versi webpack saya.

Bantuan apa pun akan dihargai, terima kasih!

winterNebs pada 20 Mei 2019

Tolong jangan gunakan 5.0.0-rc.2. Gunakan rilis terbaru: 5.0.3

bigtimebuddy pada 20 Mei 2019

Saya baru saja mencoba 5.0.3, "Kesalahan Tidak Tertangkap: WebGL tidak didukung di browser ini, gunakan "pixi.js-legacy" untuk dukungan fallback canvas2d." seperti sebelumnya. Saya memiliki versi berjalan menggunakan PixiJS 5.0.0-rc.2 yang mengatakan itu berjalan dengan WebGl 2, apakah ada beberapa fitur baru yang ditambahkan ke 5.0.1+ yang membuatnya tidak berfungsi?

winterNebs pada 20 Mei 2019

Melakukan sedikit pengujian lagi menunjukkan beberapa potensi keanehan

Gelisah
Contoh V5 berjalan tetapi dengan _WebGL 1?_

Contoh V4 dijalankan dengan _WebGL 1 lagi_

Game kerja saya (https://ascension.azurewebsites.net/game.html) menjalankan Pixi.js 5.0.0-rc.2 berjalan dengan _Webgl 1_

Game webpack saya dimuat dengan Pixi.js 5.0.3 dengan _WebGL 1_ tetapi tidak berfungsi dengan baik
Di Chrome
V5 tidak berfungsi

V4 berfungsi tetapi dengan _canvas_

Game kerja saya berjalan dengan 5.0.0-rc.2 dengan _webgl 2_

Game webpack saya memiliki kesalahan seperti yang dijelaskan dalam posting dengan 5.0.3

Tidak yakin apakah ini membantu sama sekali, tetapi tampaknya aneh bagi saya

winterNebs pada 20 Mei 2019

Saya memperkirakan bahwa satu-satunya cara yang baik adalah membuat fungsi yang menciptakan konteks dengan cara yang sama seperti yang dilakukan pixi (meminta " stensil: benar " dan mengujinya tanpa pixi, hanya html+js biasa.

Kemudian Anda dapat memberikan laporan Anda dengan spesifikasi dan demo ke chromium devs di chromium bugtracker.

Saya mengerti bahwa ini sangat jauh, tetapi, dibandingkan dengan mozilla, mereka lebih cepat dan ada harapan :)

Saya bertanya lagi: apakah Anda mencoba memperbarui driver?

ivanpopelyshev pada 21 Mei 2019

Saya memperkirakan bahwa satu-satunya cara yang baik adalah membuat fungsi yang menciptakan konteks dengan cara yang sama seperti yang dilakukan pixi (meminta " stensil: benar " dan mengujinya tanpa pixi, hanya html+js biasa.
Kemudian Anda dapat memberikan laporan Anda dengan spesifikasi dan demo ke chromium devs di chromium bugtracker.
Saya mengerti bahwa ini sangat jauh, tetapi, dibandingkan dengan mozilla, mereka lebih cepat dan ada harapan :)
Saya bertanya lagi: apakah Anda mencoba memperbarui driver?

Ya, saya memang memperbarui driver saya, saya juga mengaktifkan komputasi webGL 2.0 di Chrome://flags juga.

Jadi Anda curiga ini masalah di ujung Chrome? Saya akan mencoba saran Anda dan melihat apa yang terjadi.

Secara kebetulan gtx 780 dan 780ti mengalami masalah crash saat memainkan game "Nier Automata" juga, mungkin saja driver untuk kartu ini rusak dalam beberapa hal.

winterNebs pada 21 Mei 2019

Oke saya menulis javascript tes cepat ini:

    var canvas = document.createElement("canvas");
    // Get WebGLRenderingContext from canvas element.
    console.log("Context (no args):");
    var a = canvas.getContext("webgl");
    console.dirxml(a.getContextAttributes());
    console.log("Context (stencil):" );
    var b = canvas.getContext("webgl",{ stencil: true});
    console.dirxml( b.getContextAttributes());
    console.log("Context (failIfMajorPerformanceCaveat):" );
    var c = canvas.getContext("webgl",{ failIfMajorPerformanceCaveat: true});
    console.dirxml( c.getContextAttributes());
    console.log("Context (Both):" );
    var d = canvas.getContext("webgl",{ stencil: true, failIfMajorPerformanceCaveat: true });
    console.dirxml( d.getContextAttributes());
    console.log("Context (Alias):" );
    var e = canvas.getContext("webgl",{ antialias: false});
    console.dirxml( e.getContextAttributes());

Dan sepertinya tidak peduli apa yang saya coba, saya tidak bisa mendapatkan stensil yang benar. Saya mencoba ini baik di pc dan laptop saya (laptop berfungsi dengan v5). Saya tidak yakin apa yang dilakukan pada saat ini.

winterNebs pada 21 Mei 2019

Lakukan retas ke pixi yang menonaktifkannya, hapus lampiran stensil yang dibuat secara default untuk framebuffers RenderTexture dan cobalah untuk tidak menggunakan topeng;)

Atau, gunakan cara lain, coba driver LAMA :) Btw pengguna linux sering mengalami masalah seperti itu

ivanpopelyshev pada 21 Mei 2019

Oke saya tutup masalah ini. Pixi.js tampaknya berfungsi dengan baik menggunakan firefox (webgl 2), jadi untuk saat ini saya hanya akan menggunakannya. Saya pikir ini mungkin kombinasi _spesifik_ driver + chrome yang menyebabkannya tidak berfungsi. Saya sudah mencoba beberapa contoh v5 pada mesin mulai dari buku mac lama, mesin windows 7 lama, dan laptop windows 10 saya. Sepertinya pc saya adalah outlier yang aneh, jika orang mengalami masalah ini dengan firefox, chrome dan edge, mungkin ada baiknya membuka kembali tiket ini.

Terima kasih untuk semua bantuan teman-teman!

winterNebs pada 22 Mei 2019

👍1

Oke tidak dibuka kembali. Itu adalah 100% pemasangan chrome saya beralih ke saluran beta tampaknya telah memperbaikinya.
(Bermain-main dengan chrome://flags tidak membantu, dan menghapus semua ekstensi juga tidak membantu).

winterNebs pada 22 Mei 2019

Jenis masalah ini sangat berguna bagi pengguna di masa mendatang yang mungkin mengalami masalah yang sama di lingkungan yang serupa. Terima kasih telah memberikan begitu banyak detail.

bigtimebuddy pada 22 Mei 2019

👍1

Oke tidak dibuka kembali. Itu adalah 100% pemasangan chrome saya beralih ke saluran beta tampaknya telah memperbaikinya.
(Bermain-main dengan chrome://flags tidak membantu, dan menghapus semua ekstensi juga tidak membantu).

Saya dapat mengonfirmasi ini bekerja untuk saya juga, Menginstal chrome beta menjalankan aplikasi dengan baik. Terima kasih.

marwan38 pada 25 Mei 2019

Penemuan acak: ini bukan kesalahan chrome beta:

Untuk beberapa alasan accel perangkat keras saya dinonaktifkan.

winterNebs pada 2 Jun 2019

👍5

Mengaktifkan akselerasi perangkat keras melakukannya untuk saya.

Chrome -> Pengaturan (⌘,) -> Lanjutan -> Sistem -> aktifkan pertama

mariocastanoromeo pada 4 Jun 2019

👍8 🎉3 🚀2

@ivanpopelyshev Bisakah ini diselesaikan dengan menggunakan metode alternatif untuk menutupi di WebGL? Ada beberapa opsi lagi dengan penjelasan di utas stackoverflow ini

Adamfsk pada 10 Jul 2019

Saya pikir jika kami mengaktifkannya secara manual, itu tidak akan membantu pengguna. Kode di bawah ini berfungsi untuk saya!
import * as PIXI from 'pixi.js-legacy'

HarishBoke pada 3 Sep 2019

Saya mengalami masalah ini juga menggunakan Chrome karena pengaturan Akselerasi Perangkat Keras saya dinonaktifkan. Saya pasti telah menonaktifkannya beberapa waktu lalu karena seharusnya diaktifkan secara default.

Tapi saya ingin tahu mengapa Pixi gagal memuat dalam kasus ini, karena bukankah seharusnya jatuh kembali ke kanvas HTML 5?

immanuelx2 pada 9 Sep 2019

👍3 👎1

@immanuelx2 Dokumen yang Anda kirimkan tangkapan layarnya tidak mutakhir. Pengganti kanvas dipindahkan ke cabang lama dari v5.0.0 - Lihat pengumuman rilis di sini: https://medium.com/goodboy-digital/pixijs-v5-lands-5e112d84e510

Gunakan pixi.js-legacy jika Anda masih membutuhkan kanvas fallback; cabang master tidak lagi berisi dukungan untuk kanvas, itu "hanya" WebGL, dan lebih cepat untuk itu.

Adamfsk pada 10 Sep 2019

👎1

Saya mengalami masalah ini saat membuka aplikasi saya di tab baru setelah mendapatkan kesalahan: CONTEXT_LOST_WEBGL

Menutup chrome dan kemudian memulai kembali menyelesaikannya untuk saya

EDIT:
Saya telah mencoba mereproduksi sesuai langkah saya di atas tetapi tidak dapat melakukannya

spesifik:
krom: 77.0.3865.90
osx: 10.14.6
grafis: Radeon Pro Vega 20 4 GB, Intel UHD Graphics 630 1536 MB

RossKinsella pada 25 Sep 2019

Jadi saya memiliki masalah yang sama dengan @winterNebs tetapi bagi saya, Chrome tampaknya baik-baik saja pada versi > 5.0.0-rc.2 dan firefox memberi tahu saya bahwa webgl tidak didukung

g7parsh pada 10 Okt 2019

Memetikan orang lain memiliki masalah ini. Saya harus secara manual mengaktifkan tanda " Override software rendering list " chrome://flags

spesifik:
krom: 78.0.3904.97
osx: 10.13.6

goodgecko pada 12 Nov 2019

🎉3 👍3

Terima kasih @goodgecko - meskipun perpustakaan masih perlu diperbaiki; tidak masuk akal atau tidak layak untuk meminta pengguna akhir melakukan langkah itu untuk mengatasinya. Auto-fallback harus dapat diandalkan.

erayd pada 12 Nov 2019

👍3

Saya memiliki masalah persis ini di Linux dan Windows di Brave Browser 1.1.23 berdasarkan Chromium 79.0.3945.88
Yang menarik adalah bahwa Chrome biasa berdasarkan build Chromium yang sama bekerja dengan sempurna.
Firefox 71.0 baik-baik saja tanpa masalah apapun.

@goodgecko tip tidak membantu

konchunas pada 22 Des 2019

👍1

Periksa status akselerasi perangkat keras (lanjutan) setelan Chrome Anda? Masalah yang sama muncul ketika saya menutup opsi ini di chrome.
Semoga ini membantu.

h0ngzhe pada 8 Jan 2020

👍2

Periksa status akselerasi perangkat keras (lanjutan) setelan Chrome Anda? Masalah yang sama muncul ketika saya menutup opsi ini di chrome.
Semoga ini membantu.

Ini berhasil untuk saya. Harus mengaktifkan akselerasi perangkat keras

choopk pada 17 Feb 2020

Bahkan lebih aneh bagiku. https://get.webgl.org/ berfungsi. Contoh PIXI v5 berfungsi dengan baik, bahkan yang dengan topeng

Tetapi ketika saya mencoba membuka game saya, dikatakan bahwa WebGL tidak didukung.

Fxlr8 pada 22 Mar 2020

Memetikan orang lain memiliki masalah ini. Saya harus secara manual mengaktifkan tanda " Override software rendering list " chrome://flags
spesifik:
krom: 78.0.3904.97
osx: 10.13.6

Ini berhasil untuk saya, Terima kasih!

othneildrew pada 24 Mar 2020

Saya memiliki masalah yang sama pada Chrome stable 80.0.+, Ubuntu 18.04 menggunakan driver open source X.Org X Server Nouveau. Saya lulus tes WebGL dan mengira itu pasti drivernya jadi setelah menginstal yang berpemilik (Nvidia), semuanya berfungsi dengan baik sekarang.

Rock-son pada 2 Apr 2020

Penemuan acak: ini bukan kesalahan chrome beta:
Untuk beberapa alasan accel perangkat keras saya dinonaktifkan.

Sama disini. Saya menonaktifkan akselerasi perangkat keras. Saya sebelumnya telah menonaktifkannya untuk merekam browser di OBS.

Maelfyn pada 11 Apr 2020

Masalah yang sama di sini dengan Chrome 83 | macos 10.13.6 | nVidia Geforce 210

Contoh PixiJS berfungsi dengan baik dengan Firefox:
keluaran konsol

PixiJS 5.3.0 - WebGL 1 - http://www.pixijs.com/

tetapi dengan Chrome, kembali ke Canvas:
konsol keluaran

PixiJS 5.3.0 - Canvas - http://www.pixijs.com/

@Fxlr8 contoh berfungsi dengan baik karena chrome jatuh kembali ke Canvas. Buka konsol web dan periksa.

bySabi pada 21 Jun 2020

Itu berhasil untuk saya!

hu-qi pada 9 Jul 2020

Bisakah kita mengunci utas ini? Tidak ada lagi yang bisa disumbangkan di sini, masalahnya adalah bagaimana akselerasinya.

Jika Anda masih memiliki masalah, ini masalah yang berbeda sehingga Anda harus membuka utas baru alih-alih melakukan necroing yang ini.

winterNebs pada 9 Jul 2020

Apakah halaman ini membantu?

0 / 5 - 0 peringkat

Masalah terkait

[Pertanyaan] Standarisasi properti jangkar untuk semua Objek Tampilan

st3v0 · 3Komentar

Animasi header di pixijs.com

sntiagomoreno · 3Komentar

PIXI.Teks tidak dapat ditampilkan saat ditambahkan ke wadah anak

gaccob · 3Komentar

PIXI.Sprite.from() tidak berfungsi dengan URL data base64

gigamesh · 3Komentar

Waktu animasi MovieClip => fps

Makio64 · 3Komentar