Pixi.js: دعم SVG الحقيقي

قد ترغب في التحقق من هذه المكتبة التي أنشأتها:
https://github.com/bigtimebuddy/pixi-svg
https://bigtimebuddy.github.io/pixi-svg/example/

نظرًا لقيود الرسم في Pixi ، لا يتم دعم جميع ميزات svg.

@ trusktr هل يمكنك إعطاء حالة استخدام؟ هل تقصد مثل وجود مجموعات مثل حاويات ومجموعات من الأوليات كعفاريت؟

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

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

يتم تعريف نقطة ارتساء تلك المجموعة المكونة من ثلاثة مسارات (أعلى يسار المستطيل الأزرق) على أنها inkscape:transform-center-x و inkscape:transform-center-y .

    <g
       id="g4512"
       inkscape:transform-center-x="-65.892627"
       inkscape:transform-center-y="43.567609"
       transform="rotate(-5.9407468,27.740957,88.735118)">
      <path
         inkscape:connector-curvature="0"
         id="rect4485"
         d="m 24.502618,78.898505 h 50.619309 c 3.986749,0 7.196297,3.209548 7.196297,7.196296 v 70.274069 c 0,3.98675 -3.209548,7.1963 -7.196297,7.1963 H 24.502618 c -3.986748,0 -7.196296,-3.20955 -7.196296,-7.1963 V 86.094801 c 0,-3.986748 3.209548,-7.196296 7.196296,-7.196296 z"
         style="opacity:1;fill:#005e92;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" />
      <path
         inkscape:connector-curvature="0"
         id="rect4485-4"
         d="m 66.160572,123.8869 h 50.619318 c 3.98675,0 7.1963,3.20955 7.1963,7.1963 v 70.27406 c 0,3.98675 -3.20955,7.19631 -7.1963,7.19631 H 66.160572 c -3.986734,0 -7.196284,-3.20956 -7.196284,-7.19631 V 131.0832 c 0,-3.98675 3.20955,-7.1963 7.196284,-7.1963 z"
         style="opacity:1;fill:#920000;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" />
      <path
         inkscape:connector-curvature="0"
         id="rect4485-3"
         d="m 106.60403,73.994048 h 50.61931 c 3.98675,0 7.1963,3.209548 7.1963,7.196296 v 70.274066 c 0,3.98675 -3.20955,7.19631 -7.1963,7.19631 h -50.61931 c -3.98675,0 -7.196288,-3.20956 -7.196288,-7.19631 V 81.190344 c 0,-3.986748 3.209538,-7.196296 7.196288,-7.196296 z"
         style="opacity:1;fill:#009228;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" />
    </g>

على الرغم من أنني أقدر جهودكbigtimebuddy ، إلا أنني لا أعتقد أنه من الجيد تقديم عناصر SVG الأولية في البكسي.

تحقق من هذا أيضًا:
https://css-tricks.com/rendering-svg-paths-in-webgl/

أعتقد أن هذا يفعل ما تريد باستخدام حزمة الويب.
https://github.com/blunt1337/pixi-svg-loader

OSUblake رائع ، يبدو بالفعل أنه يفعل ما قصدته. فلدي حاول ذلك. 👍

bigtimebuddy شكرا! لقد فتحت عددًا جديدًا هناك. سيكون من الرائع أن يكون لديك رسم بياني كامل لمشهد Pixi.

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

@ trusktr هل يمكنك إعطاء حالة استخدام؟ هل تقصد مثل وجود مجموعات مثل حاويات ومجموعات من الأوليات كعفاريت؟

نعم ، ولكن ستكون العناصر الأولية Graphics كائنات بدلاً من الكائنات المتحركة.

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

لا أمانع في عدم دعم الأشياء غير القياسية ، يمكنني العيش مع واجهات برمجة التطبيقات القياسية فقط. يمكن أن يكون هناك بسهولة مكون إضافي لدعم الأشياء الخاصة بـ inkscape.

على الرغم من أنني أقدر جهودكbigtimebuddy ، إلا أنني لا أعتقد أنه من الجيد تقديم عناصر SVG الأولية في البكسي.

لماذا بالضبط تعتقد ذلك؟

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

أعتقد أن هذا يفعل ما تريد باستخدام حزمة الويب.
https://github.com/blunt1337/pixi-svg-loader

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

ما أريده (أعتقد ، لكنني لست مستخدم Pixi.js الأكثر خبرة ، لذا ننصح إذا كان هناك شيء آخر أفضل مثل استخدام النقوش المتحركة) هو أن يكون لديك رسم بياني لمشهد DisplayObject هو نفس البنية التي استخدمها SVG DOM لإنشاء شجرة بيكسي من. هذا ، بالنسبة لي ، قوي للتلاعب والرسوم المتحركة ، دون الحاجة إلى إعادة عرض SVG بالكامل كل إطار فقط لتحريك واحد بدائي (ربما من المئات أو الآلاف).

ما أعتقد أنني سوف تفعل، إذا لا شيء مفتوح المصدر جود لها حتى الآن، هو أن تأخذbigtimebuddy الصورة بيكسي-SVG أوsaschagehlich الصورة الرسومات بيكسي، SVG ، وتعديلها (أو استخدام مفاهيم مماثلة) لإنشاء شجرة Pixi Graphics تعكس شجرة SVG بدلاً من الرسم على كائن Graphics .

trusktr أرى ، بالنسبة إلى الرسوم المتحركة القائمة على البدائية ، قد يكون من المفيد إنشاء كائنات Graphics بدلاً من Sprites . لكنني أعتقد أن الحل يمكن أن يدعم كلاً من Graphics لـ SVGs البسيطة و Sprites للحلقات الأكثر تعقيدًا.

السبب في أنني اعتقدت أنها ليست فكرة جيدة هو حقيقة أن هناك العديد من الجهود لإنشاء عارضين SVG مخصصين وفي تجربتي ينتهي بهم الأمر دائمًا بالحصول على TODO من الأشياء غير المدعومة.

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

مثال حيث تعمل النقوش المتحركة بشكل أفضل ، تبدو الخريطة مقرمشة للغاية (ربما تفتقد فقط إلى الحواف) وتؤدي بشكل سيئ لأن المسارات معقدة.

من السهل جدًا إنشاء مواد من SVG باستخدام canvas 2d وواجهة برمجة

var path = new Path2D("M10 10 h 80 v 80 h -80 Z");
context.fill(path);

مسار يتحول التجريبي
https://codepen.io/osublake/pen/oWzVvb

كنت سأعمل على polyfill أفضل لأن ذلك من Google يواجه مشكلة في تحليل مسارات SVG المعقدة.
https://github.com/google/canvas-5-polyfill

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

لدينا بالفعل عارض SVG جيد ، المتصفح.

لكن الأمر شديد السوء. هل يتم عرضها في وحدة معالجة الرسومات أو وحدة المعالجة المركزية؟ بالنسبة لي ، لا يقارن الأداء الذي أختبره بسرعة الأشياء المماثلة المرسومة باستخدام Pixi.js ، على سبيل المثال. يبدو لي أن محرك SVG الأصلي يقوم بالكثير من العمل.

حتى اللوحة القماشية ثنائية الأبعاد بطيئة مقارنةً بـ WebGL. قارن هنا الفرق بين WebGL و Canvas: http://pixijs.github.io/pixi-particles-editor/ (قم بالتمرير لأسفل للتبديل بين عرض WebGL و Canvas). قماش أبطأ بشكل ملحوظ.

أريد فقط رسم SVG وجعله أسرع ما يمكن. حتى الآن ، من الناحية المفاهيمية على الأقل ، يبدو أن رسم SVGs باستخدام واجهة برمجة تطبيقات WebGL مثل Pixi.js أو Two.js هو أسرع طريقة للذهاب. الجانب السلبي الوحيد في الوقت الحالي هو أنه ليست كل ميزات SVG مدعومة بالكامل.

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

من السهل جدًا إنشاء مواد من SVG باستخدام canvas 2d وواجهة برمجة تطبيقات Path2D.

لا يزال Canvas 2D أبطأ بشكل ملحوظ من WebGL ، انظر العرض التوضيحي الذي ربطت به فقرتين فقط.

مسار يتحول التجريبي
https://codepen.io/osublake/pen/oWzVvb

عرض رائع! في هذه الحالة ، تقوم بتحريك مسار بسيط في PathProxy. هذا سريع بما يكفي لحالة الاستخدام على الأرجح. لكن تخيل أنك ترسم مجموعة من الأشياء في SVG ، مثل 100 عقدة ، وتحريكها جميعًا ، ثم تريد أن تلتف هذه الأشياء برمتها كنسيج يلتف حول كرة.

أو تخيل الجسيمات في هذا العرض التوضيحي يتم إجراؤه باستخدام SVG وتحريك عُقد SVG DOM ، ثم أخذ العرض كملمس مع drawImage في لوحة قماشية ووضعه أخيرًا على رباعي تطبيق webgl ثلاثي الأبعاد. سيكون بطيئا جدا!

العرض التوضيحي الخاص بك سريع لأن الرسوم المتحركة للجسيمات موجودة في WebGL عبر Pixi.

إذا كان عرض SVGs مع Pixi عبارة عن ميزة مدعومة ، وتم إنشاء التسلسل الهرمي الذي يعكس تسلسل SVG الهرمي ، فسيكون من الممكن تعيين التغييرات إلى عنصر display:none <svg> ( display:none بحيث نأمل أن يمنع محرك SVG الخاص بالمتصفح من القيام بعمل لأنه لا يحتاج إلى عرض أي شيء) في التغييرات على شجرة Pixi.js.

أعتقد أن هذه ستكون أسرع طريقة لرسم SVGs لأن Pixi أسرع ، مع توفير راحة DOM التي يمكن معالجتها بواسطة React و Angular وما إلى ذلك. أريد أن يكون لدي شجرة SVG DOM يمكنني معالجتها ، ومن يقوم بالتقديم سوف تكون أسرع من محرك SVG البطيء في المتصفح. ربما أطلب الكثير. يبدو أنه مع تقنية اليوم ، يكون عرض SVG بطيئًا جدًا وفقًا للمعايير الشائعة (نريد سرعات محرك الألعاب).

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

لكن الأمر شديد السوء.

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

أعتقد أن هذا مثال على ما تبحث عنه :

المهمة ليست بسيطة وهذه الرسوم المتحركة على سبيل المثال معقدة بما يكفي للعب ببطء على هاتفي القديم الذي يعمل بنظام Android والذي يلعب مشاهد Pixi المبنية على العفريت بشكل جيد. لا أرى أي اختلاف في إصدار SVG و Pixi. قد تكون مجرد مسألة تحسين بالرغم من ذلك.

تحقق من ذلك أيضًا: https://www.gatherdigital.co.uk/community/post/high-performance-webgl/78

لذا في رأيي ، هناك نوعان مختلفان من الاحتياجات لـ SVG. أحدهما يحتوي على ميزات أقل من SVG ، مقسم إلى عناصر أولية ، والآخر يحتوي على أطلس تم تقديمه بواسطة المتصفح ، والعفاريت هي العقد <g> على سبيل المثال.

قد يكون الأسلوب الآخر هو العثور على تنسيق أو أدوات قابلة للتشغيل البيني أفضل للرسومات المتجهة من SVG. إذا كنت تريد شيئًا قابلاً للتطوير ، فإن SVG لها حدودها في PixiJS لأسباب تم توضيحها بالفعل من RanzQ . هناك العديد من الميزات غير المدعومة في إمكانات رسم Pixi المتوفرة في SVG بحيث تكون أي ترجمة أولية للرسم من الدرجة الثانية.

طريقة أخرى أوصي بها هي PixiAnimate (https://github.com/jiborobot/pixi-animate-extension) وهي امتداد أصلي (إخلاء المسؤولية ، لقد قمت بتأليف هذا) لبرنامج Adobe Animate الذي يقوم بعمل جيد في تصدير رسومات دقيقة. بالإضافة إلى أنه يمكنك إنشاء أي تسلسل هرمي تريده باستخدام الرموز والطبقات المتداخلة أو الحركة.

bigtimebuddy هل هناك سير عمل لإنشاء أطالس نسيج من رسومات متجهة باستخدام Animate؟ لقد كنت أبحث عن مثل هذا سير العمل حيث يمكن إنشاء مشهد Pixi بمساعدة واجهة المستخدم.

يبدو أنه من الممكن إنشاء أطالس في الإصدار الجديد من Animate ولكن هل جربت التمديد لهذا: http://blogs.adobe.com/contentcorner/2017/07/03/create-a-texture-atlas-with -Animate-cc- لمحركات الألعاب المفضلة لديك /

RanzQ ، نعم يمكن لـ PixiAnimate تصدير صور منفصلة أو أوراق نقوش بصيغة أطالس TexturePackers. ومع ذلك ، لا يتم تحويل الأشكال المتجهة تلقائيًا إلى أنسجة. تحتاج إلى استخدام "التحويل إلى صورة نقطية" للقيام بذلك في Animate.

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

العرض التوضيحي الخاص بك سريع لأن الرسوم المتحركة للجسيمات موجودة في WebGL عبر Pixi.

بالضبط. لم أكن أقترح استخدام Canvas كعارض رئيسي. فقط لتوليد القوام / النقوش المتحركة عندما تتغير الهندسة. يجب أن تكون سريعة بما يكفي لمعظم حالات الاستخدام. أعتقد أن هذه هي الطريقة التي يقوم بها Two.js بعرض المسار في WebGL.

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

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

بالضبط. لم أكن أقترح استخدام Canvas كعارض رئيسي. فقط لتوليد القوام / النقوش المتحركة عندما تتغير الهندسة. يجب أن تكون سريعة بما يكفي لمعظم حالات الاستخدام. أعتقد أن هذه هي الطريقة التي يقوم بها Two.js بعرض المسار في WebGL.

نعم ، هذا يبدو وكأنه نهج جيد. على سبيل المثال ، إذا كانت السمات الوحيدة التي يتم تعديلها على عنصر <circle> هي cx و cy ، فهذا يعني أن التحسين سيكون لترجمة شبكة موجودة أو كائن بدون إنشاء واحد جديد.

فيما يلي مقارنة بين Pixi و Two و SVG الأصلي:

• https://jsbin.com/nohovowupa/edit؟js ، الإخراج (Two.js ، 10000 دائرة ، الأسرع)
• https://jsbin.com/vizuwemibe/1/edit؟js ، الإخراج (Pixi.js ، 2000 دائرة ، أبطأ)
• https://jsbin.com/xocarayepi/edit؟js ، الإخراج (متصفح SVG أصلي ، 1000 دائرة ، أبطأ)

لماذا Pixi أبطأ بشكل ملحوظ؟ هل لأنه يعيد الحساب (يعيد الفسيفساء أو يعيد التنقيط) بناءً على أوامر الرسم في كل إطار؟

باستخدام Two.js ، تكون الدائرة كائنًا بخصائص x و y ونصف القطر. من الواضح باستخدام واجهة برمجة التطبيقات تلك أن الدائرة لا تحتاج إلى إعادة تقييم / تنقيط إذا تم تعديل x و y فقط.

ليس من الواضح كيف سيتم إجراء هذا التحسين باستخدام أسلوب أوامر الرسم في Pixi.

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

لماذا Pixi أبطأ بشكل ملحوظ؟ هل لأنه يعيد الحساب (يعيد الفسيفساء أو يعيد التنقيط) بناءً على أوامر الرسم في كل إطار؟

لا ، إنها فقط تخلق الكثير من المثلثات ، والتي تقتل أداء وحدة معالجة الرسومات. يمكنك أن ترى الفرق إذا قمت برسم مستطيل بدون نمط خط. ستجعلها بمثابة كائن ، لذلك سيكون الأداء أفضل بكثير. 10000 مستعمرة.
https://codepen.io/osublake/pen/PjrbWq/

هل بحثت في استخدام حقول المسافة للتنقيط؟ أعلم أنه يعمل بشكل جيد مع الخطوط إذا لم تقم بالتكبير كثيرًا. أتساءل عما إذا كان يمكن استخدامه لتحريك بيانات المسار.
https://github.com/Tw1ddle/WebGL-Distance-Fields/tree/master/sdf

https://www.shadertoy.com/view/ltXSDB

كانت الأمثلة السابقة غير دقيقة تمامًا لأنني لم أدرك أن JSBin كان يخرج من حلقات for مبكرًا ، لذلك على جهاز Macbook Pro الخاص بي ، كان يعرض 500 دائرة فقط (حتى إذا قمت بتعيين n لـ 10000 ). لقد قمت بتحديث الأمثلة ، لذا فهم جميعًا يعرضون 2000 دائرة بدون كسر حلقة JSBin:

• https://jsbin.com/gukutebava/1/edit؟js ، الإخراج (Two.js)
• https://jsbin.com/cocuhivomu/edit؟js ، الإخراج (Pixi.js)
• https://jsbin.com/puzetodira/edit؟js ، الإخراج (SVG)

لا يزال مثال SVG أبطأ عند تحريك مواضع الدائرة فقط (وليس نصف القطر).

في ما يلي Two.js و SVG أيضًا تحريك نصف القطر:

• https://jsbin.com/xicowaheto/1/edit؟js ، الإخراج (Two.js)
• https://jsbin.com/kolejamogo/1/edit؟js ، الإخراج (SVG)

لم أقم بتضمين إصدار Pixi.js لأنني لم أكن متأكدًا من كيفية تعديل إصدار الرسوم المتحركة بدون نصف القطر. كيف يمكنك تحديث إصدار الرسوم المتحركة بدون نصف قطر باستخدام Pixi.js لتضمين الرسوم المتحركة نصف القطر؟

كيف يمكنك تحديث إصدار الرسوم المتحركة بدون نصف قطر باستخدام Pixi.js لتضمين الرسوم المتحركة نصف القطر؟

قد يبدأ الأداء حقًا في الغوص هنا. يجب عليك مسح الكائن الرسومي ، والذي يعيد تعيين كل شيء.
https://codepen.io/osublake/pen/8217810e590672c5a5327596e33c4b1a؟

انظر الآن إلى هذا العرض التوضيحي باستخدام Canvas 2d لإنشاء الزخارف. 3000 دائرة تعمل بسرعة 60 إطارًا في الثانية على جهازي.
https://codepen.io/osublake/full/MoMeMg/

حسنًا ، على أي حال ، أعتقد أن هناك حالة استخدام جيدة لهذا ، كما يوضح المثال: يمكن أن يكون أسرع بكثير في WebGL في بعض الحالات.

OSUblake عفوًا ، لقد أجبت على

قد يبدأ الأداء حقًا في الغوص هنا. يجب عليك مسح الكائن الرسومي ، والذي يعيد تعيين كل شيء.
https://codepen.io/osublake/pen/8217810e590672c5a5327596e33c4b1a؟

هذا ما كنت أخشاه ، وهو ليس مثاليًا. يبدأ في الاقتراب من بطء SVG الأصلي.

انظر الآن إلى هذا العرض التوضيحي باستخدام Canvas 2d لإنشاء الزخارف. 3000 دائرة تعمل بسرعة 60 إطارًا في الثانية على جهازي.
https://codepen.io/osublake/full/MoMeMg/

القرف المقدس ، واو! تمام! لذا ، ها نحن ذا ، هذه أفضل طريقة حاليًا للقيام بذلك (ومع 3000 <canvas> حتى)!

لماذا هذا أسرع بكثير؟ ربما يمكن لمنفذي SVG الأصليين التعلم من هذا (بالإضافة إلى Pixi.js و Two.js)؟

ربما يتطلب استخدام هذا الأسلوب في Pixi.js تغييرات في الاصطدام / الانتقاء؟ سيكون هناك نسيج مستطيل بدلاً من شبكة.

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

يمكنك القيام بأشياء مماثلة باستخدام واجهة برمجة تطبيقات الرسم من Pixi عن طريق تخزين كائنات الرسومات مؤقتًا ( cacheAsBitmap ). بهذه الطريقة يمكنك رسم الأوليات مرة واحدة وإعادة رسمها سريعًا من ذاكرة التخزين المؤقت.

في هذا المثال ، يوجد نسيج منفصل تم إنشاؤه لكل نصف قطر مقرب إلى خطوات 4 بكسل (إذا فهمت ذلك بشكل صحيح 😄)

إنه تقريب في الواقع إلى 0.25 زيادة. ما مقدار دقة البكسل الفرعي التي يمكنك رؤيتها بالفعل؟

إذا كان هذا مضحكًا ، فتحقق من كيفية عمل CanvasTinter من Pixi's. أو كيف تعمل الرسوم المتحركة على ورقة الرموز. أنت تضحي ببعض الذاكرة في مقابل الأداء ، ويمكن أن تنجح مع إستراتيجية تخزين مؤقت جيدة.

يمكنك القيام بأشياء مماثلة باستخدام واجهة برمجة تطبيقات الرسم الخاصة بـ Pixi عن طريق تخزين كائنات الرسومات مؤقتًا (cacheAsBitmap). بهذه الطريقة يمكنك رسم الأوليات مرة واحدة وإعادة رسمها سريعًا من ذاكرة التخزين المؤقت.

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

يمكنك القيام بأشياء مماثلة باستخدام واجهة برمجة تطبيقات الرسم الخاصة بـ Pixi عن طريق تخزين كائنات الرسومات مؤقتًا (cacheAsBitmap).

للحصول على رسومات مضادة للتحيز ، تحتاج إلى استخدام createCanvasTexture

باستخدام أي من هذين الخيارين ، هل يمكنني تحريك نصف القطر كما في المثال الخاص بك OSUblake ؟

(بالمناسبة ، شكرًا يا رفاق ، فتح عيني على تقنيات التقديم التي لم أتخيلها من قبل).

trusktr نعم ، عليك فقط إنشاء العديد من كائنات الرسومات بنصف قطر مختلف وإنشاء خريطة cacheAsBitmap يمكنك تعيين عناصر الرسومات بدلاً من الزخارف ولكن لن يكون لديك تشويش مثل

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

لكنني أوافق ، يحتوي Canvas على واجهة برمجة تطبيقات رسم أفضل ، لذا سأستخدمها. وبالنسبة إلى SVG ، يمكن تقسيم التسلسل الهرمي إلى أطلس ، مثل pixi-svg-loader (أعتقد ذلك؟). أو إذا كنت تريد ورقة الرموز المتحركة مثل الرسوم المتحركة ، فهذا ممكن أيضًا عن طريق رسم حالات الرسوم المتحركة على القماش.

ربما يتطلب استخدام هذا الأسلوب في Pixi.js تغييرات في الاصطدام / الانتقاء؟ سيكون هناك نسيج مستطيل بدلاً من شبكة.

على الرغم من أنها ليست سريعة مثل المضلع ، إلا أن اللوحة القماشية لديها طريقة للقيام باختبار الضرب على المسار ، isPointInPath . شاهده يعمل على هذه الخريطة.
https://codepen.io/osublake/pen/dzYzab/؟editors=0010

يبدو أن هناك أداة تحميل svgloader في three.js ، ربما شيء يمكن تعيينه على pixi.js
https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/SVGLoader.js

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

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