Pixi.js: वास्तविक एसवीजी समर्थन

आप मेरे द्वारा बनाई गई इस लाइब्रेरी को देखना चाहेंगे:
https://github.com/bigtimebuddy/pixi-svg
https://bigtimebuddy.github.io/pixi-svg/example/

Pixi में आरेखण की सीमाओं के कारण, सभी svg सुविधाएँ समर्थित नहीं हैं।

@trusktr क्या आप उपयोग का मामला दे सकते हैं? क्या आपका मतलब कंटेनर के रूप में समूह और स्प्राइट्स के रूप में प्राइमेटिव के सेट हैं?

क्योंकि यह कुछ ऐसा है जिसके बारे में मैं सोच रहा था। स्प्राइट्स का एक पदानुक्रम बनाने के लिए एक बनावट एटलस बनाना और एसवीजी से अनुवाद और घुमाव का उपयोग करना संभव हो सकता है।

एक समस्या जो मैं इस दृष्टिकोण के साथ देखता हूं वह है एंकर (यदि हम कुछ चेतन करना चाहते हैं)। उदाहरण के लिए इंकस्केप एंकर को कस्टम विशेषताओं के रूप में जोड़ता है लेकिन वे मानक 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>

हालांकि मैं आपके प्रयास की सराहना करता हूं पिक्सी में एसवीजी प्राइमेटिव प्रस्तुत करना एक अच्छा विचार है।

इसे भी देखें:
https://css-tricks.com/rendering-svg-paths-in-webgl/

मुझे लगता है कि यह वही करता है जो आप वेबपैक का उपयोग करना चाहते हैं।
https://github.com/blunt1337/pixi-svg-loader

@OSUblake कूल, यह वास्तव में वही करता है जो मेरा मतलब था। कोशिश करनी होगी। मैं

@bigtimebuddy धन्यवाद! मैंने वहां एक नया मुद्दा खोला। एक पूर्ण पिक्सी दृश्य ग्राफ होना बहुत अच्छा होगा।

@RanzQ

@trusktr क्या आप उपयोग का मामला दे सकते हैं? क्या आपका मतलब कंटेनर के रूप में समूह और स्प्राइट्स के रूप में प्राइमेटिव के सेट रखना है?

हाँ, लेकिन प्राइमेटिव स्प्राइट्स के बजाय Graphics ऑब्जेक्ट होंगे।

एक समस्या जो मैं इस दृष्टिकोण के साथ देखता हूं वह है एंकर (यदि हम कुछ चेतन करना चाहते हैं)। उदाहरण के लिए इंकस्केप एंकर को कस्टम विशेषताओं के रूप में जोड़ता है लेकिन वे मानक afaik में नहीं हैं। मेरा क्या मतलब है इसका एक उदाहरण:

मुझे गैर-मानक सामग्री का समर्थन नहीं करने में कोई फर्क नहीं पड़ता, मैं केवल मानकीकृत एपीआई के साथ रह सकता हूं। इंकस्केप-विशिष्ट सामग्री का समर्थन करने के लिए आसानी से एक प्लगइन हो सकता है।

हालांकि मैं आपके प्रयास की सराहना करता हूं पिक्सी में एसवीजी प्राइमेटिव प्रस्तुत करना एक अच्छा विचार है।

आप वास्तव में ऐसा क्यों सोचते हैं?

@OSUblake

मुझे लगता है कि यह वही करता है जो आप वेबपैक का उपयोग करना चाहते हैं।
https://github.com/blunt1337/pixi-svg-loader

यह बहुत अच्छा है, वेबपैक तक सीमित है, और टूल्ड वातावरण तक सीमित है, क्लाइंट पर नहीं चलता है। मैं एक एपीआई की तलाश में हूं जिसका उपयोग मैं रनटाइम पर पिक्सी.जेएस के साथ कर सकता हूं (समय का निर्माण नहीं)।

मैं जो चाहता हूं (मुझे लगता है, लेकिन मैं सबसे अधिक विशेषज्ञ Pixi.js उपयोगकर्ता नहीं हूं, इसलिए सलाह दें कि क्या कुछ और बेहतर है जैसे कि स्प्राइट्स का उपयोग करना) एक डिस्प्लेऑब्जेक्ट दृश्य ग्राफ होना चाहिए जो कि एसवीजी डोम के समान संरचना है उत्पन्न करने के लिए पिक्सी पेड़ से. यह, मेरे लिए, हेरफेर और एनीमेशन के लिए शक्तिशाली है, पूरे एसवीजी को हर फ्रेम को फिर से प्रस्तुत किए बिना केवल एक आदिम (संभवतः सैकड़ों या हजारों में से) को चेतन करने के लिए।

मुझे लगता है कि मैं क्या करूँगा, अगर कुछ खुला स्रोत अभी तक मौजूद नहीं है, तो @bigtimebuddy की -एसवीजी या @saschagehlich की -एसवीजी-ग्राफिक्स लेना है , और उन्हें संशोधित करना है (या समान अवधारणाओं का उपयोग करना) एक बनाने के लिए Pixi Graphics केवल एक Graphics ऑब्जेक्ट पर ड्रा करने के बजाय SVG ट्री को प्रतिबिम्बित करने वाला ट्री।

@trusktr मैं देख रहा हूँ, आदिम आधारित एनिमेशन के लिए उसे बनाने के लिए उपयोगी हो सकता है Graphics के बजाय वस्तुओं Sprites । लेकिन मुझे लगता है समाधान दोनों का समर्थन कर सकता है, Graphics सरल SVGs के लिए और Sprites अधिक जटिल लोगों के लिए।

जिस कारण से मैंने सोचा कि यह एक अच्छा विचार नहीं है, वह यह है कि कस्टम एसवीजी रेंडरर्स बनाने के लिए कई प्रयास किए गए हैं और मेरे अनुभव में वे हमेशा असमर्थित सामान के इस TODO को समाप्त करते हैं।

यह एक कलाकार के लिए एक समस्या होगी क्योंकि किसी को यह जानना होगा कि किन विशेषताओं का उपयोग किया जा सकता है और क्या नहीं। हमारे पास पहले से ही एक अच्छा SVG रेंडरर, ब्राउज़र है। लेकिन अगर एसवीजी में बिना किसी प्रभाव के साधारण प्राइमेटिव होते हैं, तो शायद इसे Graphics ऑब्जेक्ट्स के रूप में पार्स करना ठीक है।

एक उदाहरण जहां स्प्राइट बेहतर काम करेगा , नक्शा बहुत खस्ता दिखता है (शायद सिर्फ एंटीएलियासिंग गायब है) और खराब प्रदर्शन करता है क्योंकि पथ जटिल हैं।

कैनवास 2d और Path2D api का उपयोग करके SVG से टेक्सचर बनाना बहुत आसान है।

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

पाथ मॉर्फिंग डेमो
https://codepen.io/osublake/pen/oWzVvb

मैं एक बेहतर पॉलीफिल पर काम करने जा रहा था क्योंकि Google से जटिल एसवीजी पथों को पार्स करने में परेशानी होती है।
https://github.com/google/canvas-5-polyfill

@RanzQ

हमारे पास पहले से ही एक अच्छा SVG रेंडरर, ब्राउज़र है।

लेकिन यह बहुत स्लो है। क्या यह GPU या CPU में रेंडर करता है? मेरे लिए जो प्रदर्शन मैं अनुभव करता हूं वह Pixi.js के साथ खींची गई समान चीजों की गति से तुलना नहीं करता है, उदाहरण के लिए। मुझे लगता है कि देशी एसवीजी इंजन बहुत अधिक काम कर रहा है।

यहां तक ​​कि कैनवास 2डी भी वेबजीएल की तुलना में धीमा है। यहां वेबजीएल और कैनवास के बीच अंतर की तुलना करें: http://pixijs.github.io/pixi-particles-editor/ (वेबजीएल और कैनवास प्रतिपादन के बीच टॉगल करने के लिए नीचे स्क्रॉल करें)। कैनवास विशेष रूप से धीमा है।

मैं केवल एसवीजी बनाना चाहता हूं और इसे यथासंभव तेज करना चाहता हूं। अब तक, वैचारिक रूप से कम से कम, ऐसा लगता है कि Pixi.js या Two.js जैसे WebGL API के साथ SVG बनाना सबसे तेज़ तरीका है। इस समय केवल नकारात्मक पक्ष यह है कि सभी SVG सुविधाएँ पूरी तरह से समर्थित नहीं हैं।

@OSUblake

कैनवास 2d और Path2D एपीआई का उपयोग करके एसवीजी से बनावट बनाना बहुत आसान है।

कैनवास 2डी अभी भी वेबजीएल की तुलना में काफी धीमी है, उस डेमो को देखें जिसे मैंने अभी दो पैराग्राफ ऊपर लिंक किए हैं।

पाथ मॉर्फिंग डेमो
https://codepen.io/osublake/pen/oWzVvb

कूल डेमो! इस स्थिति में, आप PathProxy में एक सरल पथ को एनिमेट कर रहे हैं। यह शायद उपयोग के मामले के लिए पर्याप्त तेज़ है। लेकिन एक एसवीजी में चीजों का एक गुच्छा खींचने की कल्पना करें, जैसे 100 नोड्स, और उन सभी को एनिमेट करना, फिर उस पूरी चीज को एक क्षेत्र के चारों ओर लपेटने के लिए बनावट के रूप में चाहते हैं।

या, कल्पना करें कि उस डेमो में कण एसवीजी के साथ किए जा रहे हैं और एसवीजी डोम नोड्स को एनिमेट कर रहे हैं, फिर एक कैनवास में drawImage साथ एक बनावट के रूप में प्रतिपादन लेते हैं और अंत में इसे एक 3 डी वेबजीएल ऐप के क्वाड पर डालते हैं। यह बहुत धीमा होगा!

आपका डेमो तेज़ है क्योंकि वह कण एनीमेशन वेबजीएल में पिक्सी के माध्यम से है।

यदि पिक्सी के साथ एसवीजी को प्रस्तुत करना एक समर्थित विशेषता थी, और एसवीजी पदानुक्रम को प्रतिबिंबित करने वाला एक पदानुक्रम बनाया गया था, तो display:none <svg> तत्व ( display:none परिवर्तनों को मैप करना संभव होगा।

मुझे लगता है कि यह एसवीजी को आकर्षित करने का सबसे तेज़ तरीका होगा क्योंकि पिक्सी तेज है, जबकि एक डोम की सुविधा को दर्ज करते हुए जिसे रिएक्ट, एंगुलर, आदि द्वारा हेरफेर किया जा सकता है। मैं एक एसवीजी डोम ट्री रखना चाहता हूं जिसे मैं हेरफेर कर सकता हूं, जो प्रतिपादन करेगा ब्राउज़र के धीमे SVG इंजन से तेज़ हो। शायद मैं बहुत ज्यादा पूछ रहा हूँ। ऐसा लगता है कि आज की तकनीक के साथ, एसवीजी प्रतिपादन सामान्य मानकों से बहुत धीमा है (हम गेमिंग इंजन की गति चाहते हैं)।

@trusktr

लेकिन यह बहुत स्लो है।

इससे मेरा मतलब था कि हम ब्राउज़र का उपयोग करके एसवीजी बनावट बना सकते हैं, यह धीमा है लेकिन सभी सुविधाओं का समर्थन करता है। आप निश्चित रूप से उस तरह के एनिमेशन नहीं करेंगे। आप एक बनावट एटलस बना सकते हैं और बाद में स्प्राइट्स को चेतन कर सकते हैं। यदि आप उदाहरण के लिए 2डी स्पाइनल कैरेक्टर बनाना चाहते हैं, तो यही रास्ता होगा।

मुझे लगता है कि यह एक उदाहरण है कि आप क्या चाहते हैं: https://github.com/bodymovin/bodymovin/issues/184

कार्य सरल नहीं है और उदाहरण के लिए वह एनीमेशन मेरे पुराने एंड्रॉइड फोन पर धीरे-धीरे खेलने के लिए काफी जटिल है जो स्प्राइट आधारित पिक्सी दृश्यों को ठीक से चलाता है। मुझे एसवीजी और पिक्सी संस्करण में कोई अंतर नहीं दिख रहा है। हालांकि सिर्फ एक अनुकूलन मुद्दा हो सकता है।

इसे भी देखें: https://www.gatherdigital.co.uk/community/post/high-performance-webgl/78

तो मेरी राय में, एसवीजी के लिए दो अलग-अलग तरह की जरूरतें हैं। एक कम एसवीजी सुविधाओं के साथ, आदिम में विभाजित, दूसरा ब्राउज़र द्वारा प्रदान किए गए एटलस के साथ, उदाहरण के लिए <g> नोड्स होने के कारण स्प्राइट्स।

एक और तरीका यह हो सकता है कि एसवीजी की तुलना में वेक्टर ग्राफिक्स के लिए बेहतर इंटरऑपरेबल प्रारूप या टूलिंग की तलाश की जाए। यदि आप कुछ स्केलेबल चाहते हैं, तो एसवीजी की पिक्सीजेएस में इसकी सीमाएं हैं क्योंकि @RanzQ पहले से ही स्पष्ट है। एसवीजी में उपलब्ध पिक्सी की ड्राइंग क्षमताओं में असमर्थित इतनी सारी विशेषताएं हैं कि कोई भी आदिम ड्राइंग अनुवाद दूसरे दर्जे का होने वाला है।

एक और तरीका जो मैं सुझाऊंगा वह है PixiAnimate (https://github.com/jiborobot/pixi-animate-extension) यह Adobe Animate के लिए एक मूल एक्सटेंशन (अस्वीकरण, मैंने इसे लिखा है) है जो सटीक ग्राफिक्स का निर्यात करने के लिए एक अच्छा काम करता है। साथ ही आप नेस्टेड प्रतीकों और परतों या चेतन का उपयोग करके जो भी पदानुक्रम चाहते हैं, बना सकते हैं।

@bigtimebuddy क्या चेतन का उपयोग करके वेक्टर ग्राफिक्स से बनावट एटलस बनाने के लिए कोई कार्यप्रवाह है? मैं ऐसे वर्कफ़्लो की तलाश में हूँ जहाँ पिक्सी सीन को UI असिस्टेड बनाया जा सके।

एनिमेट की ताज़ा रिलीज़ में एटलस बनाना संभव लगता है, लेकिन क्या आपने इसके लिए अपने एक्सटेंशन की कोशिश की है: http://blogs.adobe.com/contentcorner/2017/07/03/create-a-texture-atlas-with -चेतन-सीसी-के लिए-आपके-पसंदीदा-खेल-इंजन/

@RanzQ , हाँ PixiAnimate TexturePackers atlases के प्रारूप में अलग-अलग इमेज या स्प्राइटशीट निर्यात कर सकता है। हालांकि, वेक्टर आकार स्वचालित रूप से बनावट में परिवर्तित नहीं होते हैं। एनिमेट में ऐसा करने के लिए आपको "कन्वर्ट टू बिटमैप" का उपयोग करना होगा।

@trusktr

आपका डेमो तेज़ है क्योंकि वह कण एनीमेशन वेबजीएल में पिक्सी के माध्यम से है।

बिल्कुल। मैं मुख्य रेंडरर के रूप में कैनवास का उपयोग करने का सुझाव नहीं दे रहा था। ज्यामिति में परिवर्तन होने पर केवल बनावट/स्प्राइट उत्पन्न करने के लिए। यह अधिकांश उपयोग के मामलों के लिए पर्याप्त तेज़ होना चाहिए। मुझे लगता है कि इसी तरह Two.js WebGL में पाथ रेंडरिंग करता है।

और Path2D ऑब्जेक्ट का उपयोग करने से कैनवास के प्रदर्शन में सुधार हो सकता है क्योंकि ब्राउज़र पथ के लिए वैक्टर को कैश करेगा। यह आपको एक ही पथ ऑब्जेक्ट का एक से अधिक बार उपयोग करने की अनुमति देता है, यहां तक ​​कि विभिन्न कैनवास संदर्भों और संकल्पों के साथ भी।

@OSUblake

बिल्कुल। मैं मुख्य रेंडरर के रूप में कैनवास का उपयोग करने का सुझाव नहीं दे रहा था। ज्यामिति में परिवर्तन होने पर केवल बनावट/स्प्राइट उत्पन्न करने के लिए। यह अधिकांश उपयोग के मामलों के लिए पर्याप्त तेज़ होना चाहिए। मुझे लगता है कि इसी तरह Two.js WebGL में पाथ रेंडरिंग करता है।

हाँ, यह एक अच्छा तरीका लगता है। उदाहरण के लिए, यदि केवल <circle> तत्व पर संशोधित की जा रही विशेषताएँ cx और cy , तो इसका मतलब है कि एक अनुकूलन मौजूदा जाल या स्प्राइट को बिना बनाए अनुवाद करना होगा नया वाला।

यहां पिक्सी, टू और नेटिव एसवीजी के बीच तुलना की गई है:

• https://jsbin.com/nohovowupa/edit?js ,आउटपुट (दो.जेएस, 10,000 सर्कल, सबसे तेज)
• https://jsbin.com/vizuwemibe/1/edit?js ,आउटपुट (Pixi.js, 2,000 मंडलियां, धीमी)
• https://jsbin.com/xocareepi/edit?js ,आउटपुट (ब्राउज़र नेटिव SVG, 1,000 सर्कल, सबसे धीमा)

पिक्सी काफ़ी धीमी क्यों है? क्या ऐसा इसलिए है क्योंकि यह ड्रॉ के आधार पर प्रत्येक फ्रेम को फिर से गणना करता है (पुनः टेस्लेट या री-रास्टराइज करता है)?

Two.js के साथ, एक वृत्त x, y और त्रिज्या गुणों वाली एक वस्तु है। उस एपीआई के साथ यह स्पष्ट है कि केवल x और y को संशोधित करने पर सर्कल को पुन: व्यवस्थित/पुन: व्यवस्थित करने की आवश्यकता नहीं है।

यह स्पष्ट नहीं है कि पिक्सी की ड्राइंग-कमांड-शैली के साथ यह अनुकूलन कैसे किया जाएगा।

@trusktr

पिक्सी काफ़ी धीमी क्यों है? क्या ऐसा इसलिए है क्योंकि यह ड्रॉ के आधार पर प्रत्येक फ्रेम को फिर से गणना करता है (पुनः टेस्लेट या री-रास्टराइज करता है)?

नहीं, यह बहुत सारे त्रिकोण बना रहा है, जो GPU प्रदर्शन को मार रहा है। यदि आप एक रेखा शैली के बिना एक आयत बनाते हैं तो आप अंतर देख सकते हैं। यह इसे एक स्प्राइट के रूप में प्रस्तुत करेगा, इसलिए प्रदर्शन काफी बेहतर होगा। 10,000 रेक्ट्स।
https://codepen.io/osublake/pen/PjrbWq/

क्या आपने रास्टरराइजेशन के लिए दूरस्थ क्षेत्रों का उपयोग करने पर ध्यान दिया है? मुझे पता है कि यदि आप बहुत अधिक ज़ूम इन नहीं करते हैं तो यह फोंट के साथ अच्छा काम करता है। मैं सोच रहा था कि क्या इसका उपयोग पथ डेटा को एनिमेट करने के लिए किया जा सकता है।
https://github.com/Tw1ddle/WebGL-Distance-fields/tree/master/sdf

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

मेरे पिछले उदाहरण पूरी तरह से गलत थे क्योंकि मुझे नहीं पता था कि JSBin for लूप से जल्दी बाहर निकल रहा था, इसलिए मेरे मैकबुक प्रो पर यह केवल 500 सर्कल प्रदान कर रहा था (भले ही मैंने n को सेट किया हो 10000 )। मैंने उदाहरणों को अपडेट किया है, इसलिए वे सभी JSBin के लूप-ब्रेकिंग के बिना 2000 मंडलियां प्रस्तुत करते हैं:

• https://jsbin.com/gukutebava/1/edit?js ,आउटपुट (दो.जेएस)
• https://jsbin.com/cocuhivomu/edit?js ,आउटपुट (Pixi.js)
• https://jsbin.com/puzetodira/edit?js , आउटपुट (एसवीजी)

एसवीजी उदाहरण अभी भी सबसे धीमा है जब केवल सर्कल पोजीशन (त्रिज्या नहीं) को एनिमेट किया जाता है।

यहाँ Two.js और SVG भी रेडी को एनिमेट कर रहे हैं:

• https://jsbin.com/xicowaheto/1/edit?js ,आउटपुट (दो.जेएस)
• https://jsbin.com/kolejamogo/1/edit?js , आउटपुट (एसवीजी)

मैंने Pixi.js संस्करण शामिल नहीं किया क्योंकि मुझे नहीं पता था कि गैर-त्रिज्या-एनीमेशन संस्करण को कैसे संशोधित किया जाए। आप रेडियस एनिमेशन को शामिल करने के लिए उपयोग करके नो-रेडियस-एनीमेशन संस्करण को कैसे अपडेट करेंगे?

आप रेडियस एनिमेशन को शामिल करने के लिए Pixi.js का उपयोग करके नो-रेडियस-एनीमेशन संस्करण को कैसे अपडेट करेंगे?

प्रदर्शन वास्तव में यहां नाक में दम करना शुरू कर सकता है। आपको ग्राफ़िक्स ऑब्जेक्ट को साफ़ करना होगा, जो सब कुछ रीसेट करता है।
https://codepen.io/osublake/pen/8217810e590672c5a5327596e33c4b1a?editors=0010

अब बनावट बनाने के लिए कैनवास 2d का उपयोग करके इस डेमो को देखें। मेरी मशीन पर ठोस 60fps पर चलने वाले 3,000 सर्कल।
https://codepen.io/osublake/full/MoMeMg/

खैर, वैसे भी, मुझे लगता है कि इसके लिए एक अच्छा उपयोग मामला है, जैसा कि उदाहरण दिखाता है: यह कुछ मामलों में वेबजीएल में बहुत तेज हो सकता है।

@OSUblake ओह, मैंने आपके नए उत्तर को देखने से पहले आखिरी बार जवाब दिया।

प्रदर्शन वास्तव में यहां नाक में दम करना शुरू कर सकता है। आपको ग्राफ़िक्स ऑब्जेक्ट को साफ़ करना होगा, जो सब कुछ रीसेट करता है।
https://codepen.io/osublake/pen/8217810e590672c5a5327596e33c4b1a?editors=0010

मुझे यही डर था, जो आदर्श नहीं है। यह देशी एसवीजी धीमेपन के करीब पहुंचना शुरू कर देता है।

अब बनावट बनाने के लिए कैनवास 2d का उपयोग करके इस डेमो को देखें। मेरी मशीन पर ठोस 60fps पर चलने वाले 3,000 सर्कल।
https://codepen.io/osublake/full/MoMeMg/

पवित्र बकवास, वाह! ठीक! तो, हम वहाँ जाते हैं, यह वर्तमान में इसे करने का सबसे अच्छा तरीका है (और 3000 <canvas> भी)!

यह इतना तेज क्यों है? हो सकता है कि मूल SVG कार्यान्वयनकर्ता इससे (साथ ही Pixi.js और Two.js) सीख सकें?

हो सकता है कि Pixi.js में इस दृष्टिकोण का उपयोग करने के लिए टकराव/चुनने में बदलाव की आवश्यकता होगी? जाल के बजाय एक आयताकार बनावट होगी।

@trusktr कारण जो तेज़ है वह यह है कि आप एक बार कैनवास पर ड्रा करते हैं, फिर इसे GPU पर बनावट के रूप में अपलोड करते हैं। उस उदाहरण में प्रत्येक त्रिज्या के लिए 4px चरणों के लिए एक अलग बनावट उत्पन्न होती है (यदि मैं इसे ठीक से समझता हूं )। एनीमेशन काफी तेज है इसलिए आपको टेक्सचर स्वैप नहीं दिखाई देगा।

आप ग्राफिक्स ऑब्जेक्ट्स ( cacheAsBitmap ) को कैशिंग करके पिक्सी के ड्राइंग एपीआई के साथ समान चीजें कर सकते हैं। इस तरह आप अपने प्राइमेटिव को एक बार ड्रा कर सकते हैं और उन्हें कैश से तेजी से फिर से ड्रा कर सकते हैं।

उस उदाहरण में प्रत्येक त्रिज्या के लिए 4px चरणों के लिए एक अलग बनावट उत्पन्न होती है (यदि मैं इसे ठीक से समझता हूं )

यह वास्तव में 0.25 वेतन वृद्धि के आसपास है। आप वास्तव में कितनी उप-पिक्सेल सटीकता देख सकते हैं?

अगर यह मज़ेदार है, तो देखें कि पिक्सी का कैनवास टिंटर कैसे काम करता है। या स्प्राइट शीट एनिमेशन कैसे काम करते हैं। आप प्रदर्शन के बदले कुछ स्मृति का त्याग करते हैं, और एक अच्छी कैशिंग रणनीति के साथ यह काम कर सकता है।

आप ग्राफिक्स ऑब्जेक्ट्स (cacheAsBitmap) को कैश करके पिक्सी के ड्राइंग एपीआई के साथ समान चीजें कर सकते हैं। इस तरह आप अपने प्राइमेटिव को एक बार ड्रा कर सकते हैं और उन्हें कैश से तेजी से फिर से ड्रा कर सकते हैं।

cacheAsBitmap का उपयोग करना शायद अच्छा न लगे क्योंकि ग्राफ़िक्स में अलियासिंग होगा। एंटीअलाइज्ड ग्राफिक्स प्राप्त करने के लिए आपको GenerateCanvasTexture का उपयोग करना होगा। तो किसी भी तरह से आप कैनवास के साथ समाप्त होते हैं, लेकिन पिक्सी के ग्राफिक्स एपीआई का उपयोग करके आप स्ट्रोक के लाइन डैश को बदलने जैसे साधारण चीजें नहीं कर सकते हैं।

आप ग्राफिक्स ऑब्जेक्ट्स (cacheAsBitmap) को कैश करके पिक्सी के ड्राइंग एपीआई के साथ समान चीजें कर सकते हैं।

एंटीएलियाज्ड ग्राफिक्स प्राप्त करने के लिए आपको GenerateCanvasTexture . का उपयोग करना होगा

उन दो विकल्पों में से किसी के साथ, क्या मैं आपके उदाहरण @OSUblake की तरह त्रिज्या को चेतन कर सकता हूं?

(वैसे, धन्यवाद दोस्तों, मेरी आंखें उन तकनीकों को प्रस्तुत करने के लिए खोल रहा हूं जिनकी मैंने पहले कल्पना नहीं की थी)।

@trusktr हाँ, आपको बस अलग-अलग त्रिज्या के साथ कई ग्राफिक्स ऑब्जेक्ट बनाने होंगे और जेनरेट किए गए बनावट का नक्शा बनाना होगा (ताकि आप प्रत्येक त्रिज्या के लिए कैश्ड बनावट का उपयोग कर सकें)। cacheAsBitmap आप बनावट के बजाय ग्राफिक्स ऑब्जेक्ट्स को मैप करेंगे लेकिन आपके पास एंटीअलाइजिंग नहीं होगा जैसे

इस तरह का एनिमेशन स्प्राइट शीट एनिमेशन है। जब आप ट्रांसफ़ॉर्म का उपयोग करके चेतन कर सकते हैं तो बनावट कैशिंग की आवश्यकता नहीं है। जैसे अगर आपको परवाह नहीं है कि मंडलियों का स्ट्रोक भी स्केल करता है, तो एक साधारण स्केल एनीमेशन इसे करेगा।

लेकिन मैं मानता हूं, कैनवास में एक बेहतर ड्राइंग एपीआई है इसलिए मैं इसका इस्तेमाल करूंगा। और एसवीजी के लिए, पदानुक्रम को एटलस में विभाजित किया जा सकता है, जैसे pixi-svg-loader करता है (मुझे लगता है?)। या यदि आप एनीमेशन की तरह स्प्राइट शीट चाहते हैं, तो वह भी कैनवास पर एनीमेशन राज्यों को चित्रित करके संभव है।

हो सकता है कि Pixi.js में इस दृष्टिकोण का उपयोग करने के लिए टकराव/चुनने में बदलाव की आवश्यकता होगी? जाल के बजाय एक आयताकार बनावट होगी।

जबकि बहुभुज जितना तेज़ नहीं है, कैनवास में पथ पर हिट परीक्षण करने की विधि है, isPointInPath । इसे इस मानचित्र पर काम करते हुए देखें।
https://codepen.io/osublake/pen/dzYzab/?editors=0010

ऐसा लगता है कि तीन.जेएस में एक svgloader है, शायद कुछ ऐसा जिसे pixi.js पर मैप किया जा सकता है
https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/SVGLoader.js

इस समस्या को स्वचालित रूप से पुराने के रूप में चिह्नित कर दिया गया है क्योंकि इसमें हाल की गतिविधि नहीं है। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।

इस थ्रेड को स्वचालित रूप से लॉक कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।