Pixi.js: https://pixijs.github.io/bunny-mark/ بطيء

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

أعزائي مطوري PixiJS

أول الأشياء أولاً: شكرًا لـ PixiJS!

المشكلة:

على https://pixijs.github.io/bunny-mark/ ، عندما لا أفعل شيئًا سوى النقر على أحدث إصدار (4.5.1) ، أحصل على 18 إطارًا في الثانية فقط.

screenshot

هل المشكلة في كود BunnyMark المحدد هذا؟

أم أنه مصدر PixiJS؟

أم أن القيمة الافتراضية 100000 مفرطة في التفاؤل؟ جهازي سريع جدًا ، لذلك كنت آمل أن يطير 100000 أرنب بسلاسة / بمعدل 60 إطارًا في الثانية.

2.2 جيجاهرتز Intel Core i7 ، 16 جيجابايت 1600 ميجاهرتز DDR3 ، Intel Iris Pro 1536 ميجابايت.

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

أنا لا أتفق مع الغرض المفترض من علامة الأرنب هنا. الهدف ليس بالضرورة إظهار شيء يعمل بسرعة 60 إطارًا في الثانية. نستخدم هذا كوسيلة لمقارنة الأداء النسبي للإصدارات / التطوير وكاختبار دخان. إلى أن نحصل على طرق جيدة للقياس المعياري ، فهذه هي أفضل أداة لدينا الآن لقياس تأثيرات الأداء. كان 100000 أرنب مقصودًا حقًا دفع العارض إلى المكان الذي سيكافح فيه. إذا أردنا التباهي بمدى سرعة Pixi ، فهذا ليس الشيء الصحيح للوظيفة. كنت سأكتب شيئًا باستخدام ParticleCointainer ، كما اقترح إيفان مات.

نعلم أنه كان هناك أداء طفيف في v4.1 + وكان الكثير من هذا لأننا أعدنا كتابة قاعدة الشفرة في ES6 لجعلها أكثر قابلية للصيانة. شعر الفريق الأساسي أن الأداء الصغير الذي تحقق كان يستحق المفاضلة على المدى الطويل.

لدي بعض الاقتراحات حول كيفية معالجة هذا:

  • [] أنشئ إعلان أداء أكثر جاذبية وسهل الاستخدام لـ Pixi ، ويفضل أن يكون شيئًا في الأمثلة. قد تحتوي على عناصر تحكم دقيقة في الحبوب لتبديل الميزات. احتفظ بعلامة الأرنب كأداة اختبار داخلية فقط.
  • [] استمر في تحسين wiki للحصول على نصائح حول الأداء ، ومن المحتمل أن تقدم عروض توضيحية
  • [] تنفيذ اختبارات معيارية لـ Pixi ، وهو أمر متسق للقياس
  • [] تحقق من انخفاض الأداء في أحدث الإصدارات كما هو مذكور أعلاه

ال 24 كومينتر

كيف تقارن بالإصدارات السابقة؟

نعم ، إنه متفائل للغاية ، لقد رأيت مرة واحدة فقط سطح مكتب يتعامل مع 100 ألف من الأرانب متعددة القوام بسرعة 75 إطارًا في الثانية. لدي 18 أيضًا :)

حاول تشغيل إصدار بدون تركيب متعدد ، كان هناك زر.

تم تحسين PIXI للعبة "المتوسطة" ، ولكنها تحتوي على العديد من المعلمات ، ويمكنك حتى كتابة العارض المحسن للغاية الخاص بك فوق بنية pixi! لدينا 10000 بقرة متحركة (حوالي 16 كوادًا لكل منها) ، بمعدل 30 إطارًا في الثانية ثابتًا على بطاقات الفيديو القديمة و intel HD. مرحلة قصوى ، استخدام منخفض جدًا لوحدة المعالجة المركزية: https://www.youtube.com/watch؟ كلما زاد عدد الكائنات التي تغير أسلاكها ، زاد استخدام وحدة المعالجة المركزية ، ويمكنها التعامل مع الحالات التي يتحرك فيها كل إطار في إطار واحد في الثانية. آمل أن أفرج عن شوكة pixi هذه في شهر أو شهرين :)

هل سيتم دمج هذه الشوكة في المعلم لجعل pixi رائعة مرة أخرى؟

إيفان ما حققته باستخدام Pixi مثير للإعجاب للغاية. نتطلع إلى رؤية هذه الشوكة والتعلم منها. :)

@ jeebus3000 لا ، سيكون شوكة إنتاج ، سيتطلب معرفة عميقة بـ pixi و webgl.

سيكون عدد الإعدادات مرتفعًا:

  1. حدد كيفية تحويل تنسيق الرسوم المتحركة json الخاص بك إلى تنسيق ثنائي مناسب لوحدة معالجة الرسومات. محدد مسبقًا: مجرد ورقة متحركة ، فلاش للرسوم المتحركة ، عمود فقري. كل ذلك مع إعدادات مختلفة (عدد الطفو لكل مثيل ، عدد الطفو لكل رباعي)
  2. عرض pixi-display ++: بينما تحتوي pixi على حاوية ، سيكون هناك أيضًا Stage و Layer و Camera. يحتوي كل كائن DisplayObject على طريقة عرض تنتمي إلى طبقة ما ، وفي الحالات القصوى (gameofbombs.com) سيكون هناك عدد من المشاهدات لكل كائن.
  3. لا يُطلق على updateTransform () كل إطار ، وهناك تحديثات بطيئة أكثر من تلك الموجودة في vanilla pixi. لا نريد استدعاء 10 آلاف عنصر في JS عندما لا يتحركون عبر الخريطة.
  4. الأطالس الحقيقية والقوام المضغوط. عندما تطور لعبة ، عليك أن تنظر إلى ما يحدث في ذاكرة الفيديو وكيف تتشكل الأطالس. يتم إنشاء الأطلس بإعدادات خاصة في حزم النسيج قبل ضغطها بالتنسيق الناتج.

تضمين التغريدة

كيف تقارن بالإصدارات السابقة؟

عندما أنقر على "v3.0.8" أحصل على هذا:

screenshot

كما سبق لـ 3.0.9 ، 3.0.10.

ذكرت في # 4023.

مع 3.0.11 أحصل على 6 إطارات في الثانية.

مع 4.0.0 و 4.0.1 أحصل على 23-24 إطارًا في الثانية.

من هنا فصاعدًا ، هناك انحدار مستمر:

مع 4.1.0 و 4.1.1 أحصل على 20-22 إطارًا في الثانية.

مع 4.2.1 أحصل على 19-20 إطارًا في الثانية.

مع 4.4.4 و 4.5.1 أحصل على 16-18 إطارًا في الثانية.

آمل أن تصبح Pixi أسرع مرة أخرى.

هههههههههههههههههه

تضمين التغريدة لكني أحتاج إلى PixiJS ليكون سريعًا للغاية (وغالبًا ما تبدو حالات الاستخدام الخاصة بي مثل علامات الأرنب).

ربما يكون هناك اختبار (يتم تشغيله دائمًا) يتحقق مما إذا كان أحدث كود Pixi سريعًا (أو أسرع) مثل أسرع الإصدارات السابقة.

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

إذا كان العدد الافتراضي 100000 بعد كل هذا لا يزال متفائلاً للغاية ، فيجب تغييره إلى شيء أقل بكثير ، بحيث عندما يتم إرسال شخص ما إلى bunnymark PixiJS (ويتم تشغيله مع الإعدادات الافتراضية) ، فلن يجعل PixiJS تبدو سيئة. بدلاً من معدل الإطارات المنخفض الحالي ، يجب أن يرى الأشخاص 60 إطارًا في الثانية لطيفًا وسلسًا.

tobireif لديك إعداد واحد فقط: عدد الملمس في spriterenderer. اصنع أطلسًا كبيرًا بدقة 4k x 4k أو 8k x 8k وسيكون أفضل بكثير من الملمس المتعدد.

يجب عليك اختبار إعدادات webgl التي يمتلكها المستخدمون لديك ، ولا يمكن إجراء التحسينات بدون هذه المعلومات. على سبيل المثال ، نعلم أن 99٪ يحتوي على زخارف 4k ومكوِّن إضافي للنسيج العائم ، ونستخدمه كثيرًا ، بينما لا يستخدم برنامج Vanilla pixi Renderer.

في حالتي ، يشبه pixi نموذجًا معياريًا لعارضين أفضل مناسبين لمهام محددة.

تضمين التغريدة

عدد الملمس في spriterenderer. اصنع أطلسًا كبيرًا بدقة 4k x 4k أو 8k x 8k وسيكون أفضل بكثير من الملمس المتعدد.

إذا كان هذا يساعد على الأداء مما يجب أن يتم تنفيذه في PixiJS bunnymark ، أليس كذلك؟

من الإصدار 4.0.1 إلى 4.5.1 ، أصبح PixiJS أبطأ - انتقل معدل إطارات bunnymark من 23-24 إطارًا في الثانية إلى 16-18 إطارًا في الثانية. يجب إصلاح هذه المشكلة ، ومن ثم يجب منع حدوث الانحدار في الأداء في المستقبل (على سبيل المثال ، باستخدام اختبار CI).

في حالتي ، يشبه pixi نموذجًا معياريًا لعارضين أفضل مناسبين لمهام محددة.

أحتاج إلى "vanilla PixiJS" لكي أكون عالي الأداء ، وأظن أن مستخدمي Pixi JS الآخرين يفعلون ذلك أيضًا.

نعم ، نحتاج إلى حقل نصي آخر في الإعداد ، مثل "عدد النسيج:". بالنسبة إلى 4.0.1-4.5.1 ، أعتقد أننا يجب أن نفهم أولاً ما إذا كانت وحدة المعالجة المركزية (CPU) أو وحدة معالجة الرسومات (GPU) الخاصة بها قد قمنا بتعديلها.

tobireif ، هذه نقطة جيدة! ربما يجب أن نبدأ بشيء أقل بكثير - ربما 1000؟ هل هذا تعديل سهلbigtimebuddy؟

فيما يتعلق بالأداء ، فإننا نتداول بشكل أساسي بمزيد من المرونة للحصول على القوة. هناك القليل من التحيز في المحتوى الثابت في الإصدار الحالي من pixi أيضًا (حيث لا تميل معظم الأشياء إلى التحرك!)

يعمل Bunnymark بشكل أسرع إذا كنت تستخدم حاوية جزيئات :)

لكنها صيحة جيدة ، فأنا أعمل حاليًا على الإصدار الخامس ، وسأرى ما إذا كان بإمكاننا استعادة معدل الإطارات في الثانية!

ivanpopelyshev عدت إلى الطريقة القديمة 4.0.0 طريقة ربط النسيج في

تضمين التغريدة عمل الربط الذكي للنسيج فقط في شيء أحادي الملمس ، وكان كل استخدام متعدد الملمس مؤلمًا معه.

مرحبًا يا شباب ، ما الإصدار الذي قمنا بتحويله إلى es6؟ أنا أعلم أن هذا ضرب الكمال قليلاً!

تضمين التغريدة

بونيمارك شيء واحد. من المهم أن يكون سريعًا ، لأنه من المفترض أن يُظهر أن Pixi سريع. ولأنه مثال ممتاز (قد يدرس مصدره الأشخاص ويعيدون صياغته) ، يجب أن يعرض جميع التحسينات الممكنة والمعقولة من جانب المستخدم. ويجب أن يظل عدد الأرانب رقمًا مثيرًا للإعجاب ، على سبيل المثال 40000 أو 50000 (على سبيل المثال ، أعلى عدد يحقق 60 إطارًا في الثانية مع التحسينات المذكورة في هذه التذكرة ومع الإصدار 5 من Pixi على جهازي / جهاز Ivan مثلاً).

ولكن بغض النظر عن رمز bunnymark ، يجب أن تكون Pixi نفسها سريعة للغاية ، كما نتفق جميعًا.

أتمنى لكم جميعًا أن تحققوا أداءً رائعًا وتحافظوا عليه!

هناك القليل من التحيز في المحتوى الثابت في الإصدار الحالي من pixi أيضًا (حيث لا تميل معظم الأشياء إلى التحرك!)

كلما استخدمت Pixi ، تتحرك معظم الأشياء 😀

يعمل Bunnymark بشكل أسرع إذا كنت تستخدم حاوية جزيئات :)

وبالتالي يجب أن يستخدم رمز bunnymark حاوية جسيمات ، أليس كذلك؟

أنا أعمل حاليًا على الإصدار الخامس ، وسأرى ما إذا كان بإمكاننا الحصول على نسخة احتياطية من الإطارات في الثانية!

رائعة! 👍

أنا لا أتفق مع الغرض المفترض من علامة الأرنب هنا. الهدف ليس بالضرورة إظهار شيء يعمل بسرعة 60 إطارًا في الثانية. نستخدم هذا كوسيلة لمقارنة الأداء النسبي للإصدارات / التطوير وكاختبار دخان. إلى أن نحصل على طرق جيدة للقياس المعياري ، فهذه هي أفضل أداة لدينا الآن لقياس تأثيرات الأداء. كان 100000 أرنب مقصودًا حقًا دفع العارض إلى المكان الذي سيكافح فيه. إذا أردنا التباهي بمدى سرعة Pixi ، فهذا ليس الشيء الصحيح للوظيفة. كنت سأكتب شيئًا باستخدام ParticleCointainer ، كما اقترح إيفان مات.

نعلم أنه كان هناك أداء طفيف في v4.1 + وكان الكثير من هذا لأننا أعدنا كتابة قاعدة الشفرة في ES6 لجعلها أكثر قابلية للصيانة. شعر الفريق الأساسي أن الأداء الصغير الذي تحقق كان يستحق المفاضلة على المدى الطويل.

لدي بعض الاقتراحات حول كيفية معالجة هذا:

  • [] أنشئ إعلان أداء أكثر جاذبية وسهل الاستخدام لـ Pixi ، ويفضل أن يكون شيئًا في الأمثلة. قد تحتوي على عناصر تحكم دقيقة في الحبوب لتبديل الميزات. احتفظ بعلامة الأرنب كأداة اختبار داخلية فقط.
  • [] استمر في تحسين wiki للحصول على نصائح حول الأداء ، ومن المحتمل أن تقدم عروض توضيحية
  • [] تنفيذ اختبارات معيارية لـ Pixi ، وهو أمر متسق للقياس
  • [] تحقق من انخفاض الأداء في أحدث الإصدارات كما هو مذكور أعلاه

يجب إصلاح هذه المشكلة ، ومن ثم يجب منع حدوث الانحدار في الأداء في المستقبل

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

ماذا عنك ياtobireif؟ هل لديك خبرة في هذه المجالات؟ الكثير من الفرص للتحسين. مرحبًا بالعلاقات العامة أو الجهود هنا للملف الشخصي ، لإنشاء اختبارات أفضل ، لإيجاد حلول لإجراء CI (Travis) باستخدام webgl ، لإجراء عمليات بحث ثنائية في سجل الالتزام بحثًا عن مساهمات الأداء السلبي.

أيضًا ، أود أن أذكر أن bunnymark موجود في إصدارات متعددة ، لكن قبل بضعة أشهر طلبت من bigtimebuddy المساعدة في ذلك ، أنا فظيع في إنشاء واجهات :) لقد نفذ بالفعل عددًا من الميزات الإضافية فيه ، أنا أنا سعيد على ما هو عليه.

أعتقد أن عدد القوام هو المهمة الوحيدة الحاسمة بالنسبة للمعايير.

تضمين التغريدة

شكرا على السؤال. لدي خبرة في تحسين الأداء ، لكن لسوء الحظ لن أتمكن من إيجاد الوقت للعمل مباشرة على Pixi في المستقبل المنظور. آمل أن تظل مساهماتي في شكل هذا التقرير (وغيره) موضع تقدير (فهي تستغرق وقتًا أيضًا ...)

أفهم الآن أن "pixijs.github.io/bunny-mark" مخصص لاختبار الأداء الداخلي للمطور.

لذا ، إذا كنت أريد أن أظهر لشخص ما الأداء الرائع لـ PixiJS (على سبيل المثال عند التوصية بـ Pixi لمشروع معين) ، فسأربط هذا http://www.goodboydigital.com/pixijs/bunnymark/ ؟
(بدلاً من https://pixijs.github.io/bunny-mark/)
(على الرغم من أنه قد يكون هناك عروض توضيحية إضافية للأداء في المستقبل ، إلا أنني أحب لعبة bunnymark ، وهي تؤدي المهمة بشكل مثير للإعجاب.)

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

راجع للشغل ، http://www.goodboydigital.com/pixijs/bunnymark/ يستخدم ParticleContainer ، لكن إصدار Pixi أقدم.

مرة أخرى لكم جميعًا:

شكرا ل PixiJS!

تضمين التغريدة

أنا أعمل حاليًا على الإصدار الخامس ، وسأرى ما إذا كان بإمكاننا الحصول على نسخة احتياطية من الإطارات في الثانية!

يبدو عظيما! نتطلع إليها 😀

ربما يمكن أن يكون هناك v5 bunnymark (واحد لعرض أداء Pixi ، مثل v3 bunnymark الحالي http://www.goodboydigital.com/pixijs/bunnymark_v3/).

أهلا! إغلاق هذه القضية في الوقت الحالي بسبب عدم نشاطها. لا تتردد في إرسال كزة إلينا إذا كنت ترغب في إعادة فتح هذه المشكلة. شكرا 👍

لا مشكلة 😀

ولكن سيظل رائعًا إذا كان هناك دائمًا bunnymark للإصدار الأخير المعني ، لغرض وحيد هو عرض أداء الرسوم المتحركة المذهل لـ PixiJS (شيء مختلف عن اختبار الدخان الذي يستخدمه مطورو PixiJS-lib) . يعد ربط عرض رسوم متحركة مثير للإعجاب مثل bunnymark مفيدًا عند الترويج لـ PixiJS ، على سبيل المثال في التغريدات. (لا ينبغي أن تكون علامة bunnymark الأخيرة أبطأ من سابقتها / يجب أن تدعم على الأقل نفس المقدار من الأرانب بمعدل 60 إطارًا في الثانية مثل علامات الأرنب السابقة. من المحتمل أن تستخدم ParticleCointainer.)

إذا كان هذا في نطاق مشروع PixiJS ، فيرجى إعادة الفتح (أو يمكننا لصق ما ورد أعلاه في بطاقة جديدة).

هناك أيضًا العديد من الأسطر المهمة في هذه التذكرة ، على سبيل المثال "تنفيذ اختبارات قياس الأداء لـ Pixi ، وهو أمر متسق للقياس" بقلم Matt Karl.

تم قفل سلسلة الرسائل هذه تلقائيًا نظرًا لعدم وجود أي نشاط حديث بعد إغلاقه. الرجاء فتح قضية جديدة للأخطاء ذات الصلة.

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