Pixi.js: "WebGL غير مدعوم في هذا المتصفح" عند استخدام Chrome 74 w / GTX 780

تم إنشاؤها على ١٩ مايو ٢٠١٩  ·  43تعليقات  ·  مصدر: pixijs/pixi.js


لقد حاولت البحث عن الخطأ في googling ، لكنه ظهر نتيجة واحدة فقط وهي موقع ويب صيني يعد رابطًا معطلاً.

سلوك متوقع

يتم تحميل Pixi.js وتشغيله بدون أخطاء مع حزمة الويب. إنه يعمل بشكل صحيح عندما اعتدت تجميعه ثم استخدم browserify.

السلوك الحالي

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

حل ممكن

لست خبيرًا جدًا في نظام جافا سكريبت البيئي ، لذا قد يكون هذا بسبب التكوين السيئ لـ webpack 4 ، أي مساعدة ستكون موضع تقدير كبير!

بيئة

Typescript 3.4.5 ، Pixi.js 5.0.2 ، Webpack 4.31.0

Webpack.config.js ، قسم العميل هو جزء من الكود يستخدم 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 : 5.0.2
  • المتصفح والإصدار : Chrome 74.0.3729.157
  • نظام التشغيل والإصدار : _e.g. نظام التشغيل Windows 10

التعليق الأكثر فائدة

تمكين تسريع الأجهزة فعل ذلك من أجلي.

Chrome -> الإعدادات (⌘ ،) -> خيارات متقدمة -> النظام -> تمكين الأول

ال 43 كومينتر

إذا كان WebGL غير مدعوم في هذا المستعرض ، فاستخدم pixi.js-legacy للحصول على دعم canvas2d الاحتياطي.

هذه حزمة مختلفة في npm. يستخدم التكوين الخاص بك pixi.js

إذا كان WebGL غير مدعوم في هذا المستعرض ، فاستخدم pixi.js-legacy للحصول على دعم canvas2d الاحتياطي.

هذه حزمة مختلفة في npm. يستخدم التكوين الخاص بك pixi.js

لكن من الواضح أن المتصفح الذي أستخدمه يدعم WebGL
image
image

هل أمثلة الإصدار 5 الموجودة على https://pixijs.io/examples/ تناسبك؟ تلك الصفحة التي أظهرتها هي صفحة ويب أساسية ، نعم أو لا. ولكن عندما نقوم بإنشاء سياق webgl ، فإننا نطلبه مع معلمتين إضافيتين مثل طلب دعم الاستنسل.

هذا هو الخطأ ، على أي حال ، ولماذا هذه هي زاوية محاولتنا المساعدة. لم نر أبدًا هذا الخطأ خارج الجهاز لا يدعم webgl أو تتطلب معلمات webgl pixijs

هل أمثلة الإصدار 5 الموجودة على https://pixijs.io/examples/ تناسبك؟ تلك الصفحة التي أظهرتها هي صفحة ويب أساسية ، نعم أو لا. ولكن عندما نقوم بإنشاء سياق webgl ، فإننا نطلبه مع معلمتين إضافيتين مثل طلب دعم الاستنسل.

هذا هو الخطأ ، على أي حال ، ولماذا هذه هي زاوية محاولتنا المساعدة. لم نر أبدًا هذا الخطأ خارج الجهاز لا يدعم webgl أو تتطلب معلمات webgl pixijs

هذه الأمثلة لا تعمل (الإصدار 4 يعمل ، ولكن ليس الإصدار 5) كما أنه يعطي نفس الخطأ. هذا يبدو غريبًا حقًا بالنسبة لي ، لست متأكدًا من سبب عدم دعم متصفحي لذلك.

لقد تحققت أيضًا من تطبيق pixi.js الذي يعمل لدي وهو يستخدم 5.0.0-rc.2 ، والذي قد يكون سبب نجاحه؟

شكرا مرة أخرى للمساعدة

سيعمل الإصدار 4 لأنه يعود إلى عارض اللوحات القماشية. في الإصدار الرسمي لـ v5 لا يحدث إلا إذا كنت تستخدم الحزمة القديمة.

لذلك ربما تدعم بطاقة gfx الخاصة بك webgl ولكن لا تحتوي على شيء مثل دعم الاستنسل الذي نحتاجه للإخفاء ، لذلك نرفض محاولة استخدامه؟

Juts في حالة الاستنسل ، حاول تحديث برنامج تشغيل الرسومات الخاص بك.

ومع ذلك ، سيكون الأمر مضحكًا جدًا إذا اتضح أن webpack يؤثر حقًا على الأشياء :)

حسنًا ، هذا غريب للغاية سطح مكتبي (i7 7700k ، gtx 780) لا يعمل به ، لكنه يعمل على سطح كتابي 1 ، و iPhone XS ، وأصدقائي macbook pro 2015. وحدة معالجة الرسومات الخاصة بي قديمة نوعًا ما ولكني لم أفعل ' لا أعتقد أنها ستكون المشكلة.

ما لم يكن هناك أي شيء آخر يجب أن أجربه ، أعتقد أنني سأستخدم الحزمة القديمة فقط لأنني أريد أقصى قدر من التوافق (وأيضًا لا يمكنني تطوير شيء لا يمكنني تشغيله)

أعد تثبيت برنامج تشغيل الرسومات ، الإصدار للأمام أو للخلف. GPU ليست مشكلة ، ولكن جزء opengl من السائق.

انتظر لحظة ، أشعر بالغباء حقًا ، أعتقد أنها مشكلة تتعلق بالكروم ، إنها تعمل في Microsoft edge ... على الرغم من أنني كنت أستخدم الكروم على كل من الكمبيوتر المحمول والهاتف الخاص بي ، لذا كان ذلك غريبًا.

تحتوي المتصفحات على قائمة سوداء للأجهزة المختلفة ... في بعض الأحيان يكون الأمر يتعلق بتعطيل webgl تمامًا ، ولكن في بعض الأحيان يتم وضع قائمة سوداء بميزات معينة على إصدارات معينة من الأجهزة / برامج التشغيل إذا كانت هناك مشكلات معروفة.

لقد قمت بتحديث عنوان هذه المشكلة (ليست مشكلة Webpack + PixiJS) ووضعت علامة "لن يتم الإصلاح" نظرًا لأنه من المحتمل جدًا أن تكون مشكلة في الجهاز / برنامج التشغيل.

حسنًا ، لا يزال استخدام pixi.js-legacy وتغيير كل شيء للإشارة إلى pixi.js-legacy يعطي نفس الخطأ.

لقد راجعت إصدار العمل الخاص بي باستخدام 5.0.0-rc.2 وهو يعمل باستخدام webgl2:
image

لكن استخدام 5.0.0-rc.2 يعطيني هذا الخطأ: "خطأ في النوع لم يتم اكتشافه: لا يمكن قراءة خاصية" PerformMixins "غير المحددة في إصدار webpack الخاص بي.
image

سيكون موضع تقدير أي مساعدة شكرا!

من فضلك لا تستخدم 5.0.0-rc.2. استخدم أحدث إصدار: 5.0.3

لقد جربت للتو 5.0.3 ، "خطأ غير معلوم: WebGL غير مدعوم في هذا المستعرض ، استخدم" pixi.js-legacy "للحصول على دعم canvas2d الاحتياطي." كما كان من قبل. لدي إصدار قيد التشغيل باستخدام PixiJS 5.0.0-rc.2 والذي يشير إلى أنه يعمل مع WebGl 2 ، هل هناك بعض الميزات الجديدة المضافة إلى 5.0.1+ التي تجعله لا يعمل؟

يُظهر إجراء المزيد من الاختبارات بعض الغرابة المحتملة

  1. على حافة الهاوية
    أمثلة V5 تعمل ولكن مع _WebGL 1؟ _
    image
    أمثلة V4 تعمل مع _WebGL 1 مرة أخرى_
    image
    تعمل لعبة العمل الخاصة بي (https://ascension.azurewebsites.net/game.html) على تشغيل Pixi.js 5.0.0-rc.2 مع _Webgl 1_
    image
    يتم تحميل لعبة webpack الخاصة بي مع Pixi.js 5.0.3 مع _WebGL 1_ ولكنها لا تعمل بشكل صحيح
    image
  2. على كروم
    V5 لا يعمل
    image
    يعمل V4 ولكن مع _canvas_
    image
    تعمل لعبة العمل الخاصة بي مع 5.0.0-rc.2 مع _webgl 2_
    image
    تحتوي لعبة webpack الخاصة بي على الخطأ كما هو موضح في المنشور بـ 5.0.3
    image

لست متأكدًا مما إذا كان هذا مفيدًا على الإطلاق ، لكنه يبدو غريبًا بالنسبة لي

أتوقع أن الطريقة الجيدة الوحيدة هي إنشاء دالة تنشئ السياق بنفس الطريقة التي يعمل بها pixi (يسأل " استنسل: صحيح " واختباره بدون بيكسي ، مجرد html + js عادي.

ثم يمكنك تقديم تقريرك بالمواصفات والعروض التوضيحية إلى مطوري الكروم في أداة تتبع أخطاء الكروم.

أدرك أن الطريق طويل جدًا ، لكن بالمقارنة مع الموزيلا ، فهي أسرع وهناك أمل :)

أسأل مرة أخرى: هل حاولت تحديث برنامج التشغيل؟

أتوقع أن الطريقة الجيدة الوحيدة هي إنشاء دالة تنشئ السياق بنفس الطريقة التي يعمل بها pixi (يسأل " استنسل: صحيح " واختباره بدون بيكسي ، مجرد html + js عادي.

ثم يمكنك تقديم تقريرك بالمواصفات والعروض التوضيحية إلى مطوري الكروم في أداة تتبع أخطاء الكروم.

أدرك أن الطريق طويل جدًا ، لكن بالمقارنة مع الموزيلا ، فهي أسرع وهناك أمل :)

أسأل مرة أخرى: هل حاولت تحديث برنامج التشغيل؟

نعم لقد قمت بتحديث برامج التشغيل الخاصة بي ، لقد قمت أيضًا بتشغيل حساب webGL 2.0 في Chrome: // flags أيضًا.

هل تشك في أنها مشكلة في نهاية Chrome؟ سأحاول اقتراحك ونرى ما سيحدث.

من قبيل الصدفة أن gtx 780 و 780ti واجهتا مشكلات في التعطل أثناء لعب لعبة "Nier Automata" أيضًا ، فقد تكون برامج تشغيل هذه البطاقة معطلة بطريقة ما.

حسنًا ، لقد كتبت هذا الاختبار السريع لجافا سكريبت:

    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());

ويبدو أنه بغض النظر عما أحاوله ، لا يمكنني الحصول على الاستنسل ليكون صحيحًا. لقد جربت هذا على جهاز الكمبيوتر والكمبيوتر المحمول (يعمل الكمبيوتر المحمول مع الإصدار 5). لست متأكدًا مما أفعله في هذه المرحلة.

اخترق pixi لتعطيله ، وقم بإزالة مرفق الاستنسل الذي تم إنشاؤه افتراضيًا لـ RenderTexture Framebuffers وحاول عدم استخدام الأقنعة ؛)

بدلاً من ذلك ، اذهب في الاتجاه الآخر ، جرب برامج تشغيل OLD :) بالمناسبة ، يواجه مستخدمو Linux هذا النوع من المشكلات بشكل متكرر

حسنًا ، سأغلق هذا الموضوع. يبدو Pixi.js للعمل بشكل صحيح باستخدام فايرفوكس (تقنية WebGL 2)، حتى الآن أنا مجرد استخدام ذلك. أعتقد أنه قد يكون مزيجًا محددًا من برامج التشغيل + الكروم مما يتسبب في عدم عمله. لقد جربت العديد من الأمثلة v5 على أجهزة تتراوح من كتب Mac القديمة ، وأجهزة Windows 7 القديمة ، وجهاز الكمبيوتر المحمول الذي يعمل بنظام Windows 10. يبدو أن جهاز الكمبيوتر الخاص بي غريب بعض الشيء ، إذا واجه الناس هذه المشكلة مع Firefox و chrome و edge ، فقد يكون من المفيد إعادة فتح هذه التذكرة.

شكرا لكل المساعدة يا أصدقاء!

حسنًا ، لم يتم إعادة الفتح. لقد كان تثبيت Chrome بنسبة 100 ٪ ويبدو أن التبديل إلى القناة التجريبية قد أصلحه.
(العبث باستخدام chrome: // flags لم يساعد ، وإزالة جميع الامتدادات لم تفعل أي شيء أيضًا).

هذا النوع من المشكلات مفيد جدًا للمستخدمين في المستقبل الذين قد يواجهون نفس المشكلة في بيئة مماثلة. شكرا لتقديم الكثير من التفاصيل.

حسنًا ، لم يتم إعادة الفتح. لقد كان تثبيت Chrome بنسبة 100 ٪ ويبدو أن التبديل إلى القناة التجريبية قد أصلحه.
(العبث باستخدام chrome: // flags لم يساعد ، وإزالة جميع الامتدادات لم تفعل أي شيء أيضًا).

يمكنني أن أؤكد أن هذا يعمل بالنسبة لي أيضًا ، فقد أدى تثبيت chrome beta إلى تشغيل التطبيق بشكل جيد. شكرا.

اكتشاف عشوائي: ليس خطأ بيتا الكروم:

لسبب ما تم تعطيل تسريع الجهاز الخاص بي.

تمكين تسريع الأجهزة فعل ذلك من أجلي.

Chrome -> الإعدادات (⌘ ،) -> خيارات متقدمة -> النظام -> تمكين الأول

ivanpopelyshev هل يمكن حل ذلك باستخدام طريقة بديلة لإخفاء WebGL؟ هناك خياران آخران مع تفسيرات حول سلسلة التدفقات المتراكمة هذه

أعتقد أنه إذا قمنا بتمكينه يدويًا فلن يساعد المستخدم. أدناه رمز يعمل بالنسبة لي!
import * as PIXI from 'pixi.js-legacy'

واجهت هذه المشكلة أيضًا باستخدام Chrome بسبب تعطيل إعداد تسريع الأجهزة. لابد أنني قمت بتعطيله منذ فترة لأنه من المفترض أن يتم تمكينه افتراضيًا.

لكنني أشعر بالفضول لماذا فشل تحميل Pixi في هذه الحالة ، لأنه لا ينبغي أن يعود إلى لوحة HTML 5؟

image

@ immanuelx2 المستند الذي قمت بنشر لقطة شاشة له ليس محدثًا. تم نقل النسخة الاحتياطية من القماش إلى الفرع القديم من الإصدار 5.0.0 - انظر إعلان الإصدار هنا: https://medium.com/goodboy-digital/pixijs-v5-lands-5e112d84e510

استخدم pixi.js-legacy إذا كنت لا تزال بحاجة إلى قماش احتياطي ؛ لم يعد الفرع الرئيسي يحتوي على دعم للوحات القماش ، إنه WebGL "فقط" ، وأسرع له.

واجهت هذه المشكلة عند فتح طلبي في علامة تبويب جديدة بعد ظهور الخطأ: CONTEXT_LOST_WEBGL

أدى إغلاق الكروم ثم إعادة تشغيله إلى حل المشكلة بالنسبة لي

تعديل:
لقد حاولت إعادة الإنتاج وفقًا لخطواتي المذكورة أعلاه ولكن لم أتمكن من القيام بذلك

تفاصيل:
الكروم: 77.0.3865.90
أو إكس: 10.14.6
الرسومات: Radeon Pro Vega 20 4 جيجا بايت ، Intel UHD Graphics 630 1536 ميجا بايت

أواجه مشكلة مماثلة مثل winterNebs ولكن بالنسبة لي ، يبدو أن Chrome جيد في الإصدار> 5.0.0-rc.2 ويخبرني Firefox أن webgl غير مدعوم

في حالة شخص آخر لديه هذه المشكلة. اضطررت إلى تمكين علامة " تجاوز قائمة عرض البرامج " يدويًا chrome: // flags

تفاصيل:
الكروم: 78.0.3904.97
OSX: 10.13.6

شكرًا @ goodgecko - على الرغم من أن المكتبة لا تزال بحاجة إلى

لدي هذه المشكلة بالضبط على كل من Linux و Windows في Brave Browser 1.1.23 استنادًا إلى Chromium 79.0.3945.88
المثير للاهتمام أن Chrome المعتاد المستند إلى نفس بنية Chromium يعمل بشكل مثالي.
فايرفوكس 71.0 مناسب تمامًا دون أي مشاكل على الإطلاق.

goodgecko نصيحة لم تساعد

تحقق من إعدادات تسريع أجهزة Chrome (المعروضة) الحالة؟ ظهرت نفس المشكلة عندما أغلق هذه الخيارات على الكروم.
أتمنى أن يساعدك هذا.

تحقق من إعدادات تسريع أجهزة Chrome (المعروضة) الحالة؟ ظهرت نفس المشكلة عندما أغلق هذه الخيارات على الكروم.
أتمنى أن يساعدك هذا.

هذا عمل لي. اضطررت إلى تشغيل تسريع الأجهزة

حتى أغرب بالنسبة لي. https://get.webgl.org/ يعمل. تعمل أمثلة PIXI v5 بشكل جيد ، حتى تلك التي تحتوي على أقنعة

ولكن عندما أحاول فتح لعبتي ، تظهر رسالة تفيد بأن WebGL غير مدعوم.

في حالة شخص آخر لديه هذه المشكلة. اضطررت إلى تمكين علامة " تجاوز قائمة عرض البرامج " يدويًا chrome: // flags

تفاصيل:
الكروم: 78.0.3904.97
OSX: 10.13.6

هذا عمل لي ، شكرا!

واجهت نفس المشكلة على Chrome Stable 80.0. + ، Ubuntu 18.04 باستخدام برنامج تشغيل X.Org X Server Nouveau مفتوح المصدر. لقد اجتزت اختبار WebGL واعتقدت أنه يجب أن يكون برنامج التشغيل ، لذا بعد تثبيت برنامج خاص (Nvidia) ، كل شيء يعمل بشكل جيد الآن.

اكتشاف عشوائي: ليس خطأ بيتا الكروم:

لسبب ما تم تعطيل تسريع الجهاز الخاص بي.

كذلك هنا. لقد تم تعطيل تسريع الأجهزة. لقد قمت بتعطيله مسبقًا لتسجيل المتصفح في OBS.

نفس المشكلة هنا مع Chrome 83 | macos 10.13.6 | نفيديا جيفورسي 210

أمثلة PixiJS تعمل بشكل جيد مع Firefox:
إخراج وحدة التحكم

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

ولكن مع Chrome ، يتراجع إلى Canvas:
وحدة الإخراج

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

أمثلة @ Fxlr8 تعمل بشكل جيد بسبب عودة الكروم إلى Canvas. افتح وحدة تحكم الويب وتحقق منها.

عملت معي!
image

هل يمكننا قفل هذا الخيط؟ لا يوجد شيء أكثر للمساهمة هنا ، كانت القضية هي التسريع.

إذا كنت لا تزال تواجه مشكلة ، فهذه مشكلة مختلفة ، لذا يجب عليك فتح مؤشر ترابط جديد بدلاً من نخر هذا الموضوع.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات