Pixi.js: बहुत सारे पाठ को प्रदान करते हुए और अपनी स्थिति को अपडेट करते हुए उच्च एफपीएस कैसे प्राप्त करें?

क्या आप _sure_ हैं, आपको _all_ बार स्क्रीन पर 1500 की आवश्यकता है? ऑफ़स्क्रीन लेबल खींचने से प्रदर्शन में बहुत मदद मिलेगी। पिक्सी बॉक्स से बाहर किसी भी प्रकार का नहीं करता है, लेकिन कुछ सामुदायिक प्लगइन्स (जैसे, @pixi-essentials/cull @SukantPal द्वारा) हैं जो यहां आपकी सहायता कर सकते हैं।

क्या सभी 1500 लेबल अद्वितीय हैं? यदि कई डुप्लिकेट हैं, तो आप इसे रेंडरटेक्स्चर का उपयोग करके स्प्राइट में बदल सकते हैं और अधिक मेमोरी के महंगे पर संदर्भ साझा कर सकते हैं।

@ChristophWalter आपने जो उदाहरण दिखाया है, वह संभवतः @bigtimebuddy के रूप में उल्लेख करने से लाभ उठा सकता है। प्रस्तुत करने के लिए 112 अक्षरों के साथ 1500 लेबल _a lot_ है। ऐसे कारण हैं कि प्रासंगिक अनुकूलन का सुझाव देने के लिए आपके उदाहरण का उपयोग नहीं किया जा सकता है, उदाहरण के लिए पाठ ज्यादातर अतिव्यापी है। मुझे नहीं लगता कि आपका प्रोजेक्ट जंबल्ड टेक्स्ट प्रदर्शित करेगा जो इतना घना है कि इसे उपयोगकर्ता द्वारा पढ़ा नहीं जा सकता है।

MESH.BATCHABLE_SIZE को 200 जैसे उच्च मूल्य पर सेट करने से मदद मिल सकती है। मैं इस के माध्यम से परीक्षण नहीं किया था क्योंकि यह अभी भी मेरे iMac पर एक 6x CPU मंदी के बाद 45 FPS के माध्यम से शक्तियों।

मैंने बहुत ज्यादा उदाहरण नहीं दिए हैं। हालाँकि, यदि आप किसी व्यावसायिक परियोजना पर काम कर रहे हैं और यह GPU-पक्ष की अड़चन है, तो आप एक आउट-ऑफ-ऑर्डर पर विचार कर सकते हैं जो प्रत्येक अक्षर (सभी As, फिर सभी Bs, सभी Cs, आदि) को एक साथ प्रस्तुत करता है। बनावट स्थानीयता में सुधार करने के लिए, एक टाइल-इंजन विकसित करना और / या एक अलग-रे-ऑप्टिमाइज़ेशन ऑप्टिमाइज़ करना जो स्क्रीन के उस हिस्से को प्रस्तुत करता है जिसमें _changed_ है (यानी 1500 लेबलों में से 60 अपडेट के आधार पर)। यह सिर्फ विचार हैं और इन्हें ऐसे ही लिया जाना चाहिए।

आपके सहयोग के लिए धन्यवाद!

वास्तव में हम कुल्लिंग का उपयोग करेंगे और यह एक ही समय में कई लेबल प्रदर्शित करने की संभावना नहीं होगी। लेकिन बेंचमार्क कारणों से हमें गैर-वेब अनुप्रयोगों के खिलाफ प्रतिस्पर्धा करने की आवश्यकता है। हमने पहले ही इन आवश्यकताओं पर सवाल उठाया था, लेकिन यह बहुत मदद करेगा अगर हम दिखा सकते हैं कि वेबल इसे भी संभाल सकता है।

लेबल अनूठे होंगे। लेकिन वे अक्सर बदल नहीं सकते हैं। उदाहरण पाठ सामग्री को बिल्कुल नहीं बदलता है। इसलिए अनुकूलन करने की कुछ क्षमता हो सकती है। मैंने देखा कि अगर मैं पदों ( खेल के मैदान ) को अद्यतन नहीं करता तो भी एफपीएस एक समान रहता है। क्या केवल ग्रंथों को बदलने का एक तरीका है जब वे बदलते हैं?

MESH.BATCHABLE_SIZE सेट करने से मेरी ओर से कुछ भी नहीं बदला गया। मैं आपके अन्य विचारों पर एक नज़र डालूँगा या iMacs खरीदने की सिफारिश करूँगा at मैं प्रतिपादन में उतना नहीं हूँ, इसलिए ये विचार वास्तव में मेरी मदद करते हैं!

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

यह दो प्रमुख लाभ प्रदान करता है:

• यह बैच रेंडरर के बफरिंग चरण के ओवरहेड को समाप्त कर देगा।
• शीर्षकों की संख्या में 112x (4 / वर्ण के बजाय 4 / पाठ) की कटौती की जाएगी। यह सिर्फ 6K करने के लिए नीचे कोने लाता है।
• दृश्य में केवल एक DisplayObject।

तो मूल रूप से, इस प्रक्रिया की तरह दिखेगा:

1. BitmapText को एक RenderTexture में रेंडर करें
2. 1500 * 4 कोने के साथ एक मेष बनाएँ।
3. सीधे कोने चेतन। आपको सावधान रहना चाहिए क्योंकि प्रति उदाहरण चार आयतें हैं (यानी आयतें)। तो आप पहले शीर्ष के लिए स्थिति की गणना करेंगे। फिर अन्य तीन (x + चौड़ाई, ऊंचाई), (x + चौड़ाई, y + ऊंचाई), (x, y + ऊंचाई) होंगे।

यह एक सीधी प्रक्रिया होनी चाहिए। कृपया हमें बताएं कि यह कैसे जाता है!

अरे, मैंने आपके सुझाव पर अमल करने की कोशिश की। बिटमैपटैक्स्ट को टेक्सचर में बदलना काम करने लगता था। लेकिन मैं वर्तमान में एक जाल में बनावट प्रदर्शित करने की कोशिश कर रहा हूँ। मैंने PIXI.Mesh और PIXI.SimpleMesh का उपयोग करने का प्रयास किया। क्या मुझे अपना स्वयं का शेड बनाने की आवश्यकता है या क्या मैं PIXI.MeshMaterial का उपयोग कर सकता हूं?

const bitmapFontText = new PIXI.BitmapText(
    'Lorem ipsum dolor\nsit amet consetetur\nsadipscing elitr sed', 
    { font: '55px Desyrel', align: 'left' }
);

const texture =  PIXI.RenderTexture.create({ width: 800, height: 600 });
app.renderer.render(bitmapFontText, texture);

const vertices = [
    -0.5, -0.5,
    0.5, -0.5,
    0.5, 0.5,
    -0.5, 0.5
];
const uvs = [
    0, 0,
    1, 0,
    1, 1,
    0, 1,
];
const indices = [0, 1, 2, 0, 2, 3];
const geometry = new PIXI.MeshGeometry(vertices, uvs, indices);
const shader = new PIXI.MeshMaterial(texture);

const mesh = new PIXI.Mesh(geometry, shader);
app.stage.addChild(mesh);

https://www.pixiplayground.com/#/edit/7RHqFti0tdSzw -6iOtylk

-
_Edit_: इसे ठीक किया। कोने को पिक्सेल निर्देशांक का प्रतिनिधित्व करने की आवश्यकता होती है। _Next step_: मेष में एक से अधिक बनावट का उपयोग करें।

const vertices = [
    0, 0,
    500, 0,
    500, 500,
    0, 500
];

-
_Edit 2_: यह केवल तभी काम करेगा जब सभी लेबलों के लिए एक बनावट का उपयोग किया जाए? मैंने खुद को गलत बताया हो सकता है। लेबल अद्वितीय होंगे, लेकिन सामग्री हर फ्रेम में नहीं बदलेगी।

मैंने देखा कि अगर मैं पदों ( खेल के मैदान ) को अद्यतन नहीं करता तो भी एफपीएस एक समान रहता है। क्या केवल ग्रंथों को बदलने का एक तरीका है जब वे बदलते हैं?

क्या इससे PIXI.Mesh मदद करेगा? क्या आप किसी भी संसाधन को जानते हैं जहाँ मैं PixiJS की प्रतिपादन प्रक्रिया के बारे में पढ़ सकता हूँ?

@ChristophWalter आप एक रेंडरर खुद बना सकते हैं (एक एप्लिकेशन का उपयोग करने के बजाय), एक टिकर लूप सेटअप करें जो आपके दृश्य को बदलने पर Renderer.render _only_ कॉल करे।

आप एप्लिकेशन विकल्पों में autoStart: false भी पास कर सकते हैं और फिर कुछ परिवर्तन होने पर app.render() कॉल कर सकते हैं। एक ही तरह का।

धन्यवाद, यह किसी भी तरह पाठ से एक बनावट पैदा कर रहा है और इसे स्प्राइट पर उपयोग कर रहा है। लेकिन वर्तमान में मुझे समझ नहीं आ रहा है कि मैं इसे खेल के मैदान में क्यों नहीं पेश कर सकता। 😄

हालाँकि एप्लिकेशन अब 60FPS के साथ हर फ्रेम में सभी 1500 लेबल पदों को अपडेट करता है। इसके अलावा हर दूसरे पाठ की सामग्री अपडेट हो जाती है। इसके चलते हर सेकंड में थोड़ी ठंड पड़ती है। तो अगला कदम अतुल्यकालिक, जैसे कि एक वेब कार्यकर्ता में उन पाठ अपडेट को प्रस्तुत करना होगा। मैं वर्तमान में ImageBitmap और OffscreenCanvas के बारे में पढ़ रहा हूं। यह दूसरों के लिए दिलचस्प हो सकता है, इसलिए मैं अपनी प्रगति साझा करूंगा।

लघु अद्यतन जैसा कि मैंने कुछ सप्ताह पहले जांच बंद कर दिया था
मैंने एक वेब कार्यकर्ता में पाठ का प्रतिपादन किया जो वास्तव में काफी सीधे आगे काम करता था:

// render-text-worker.js
onmessage = function(event) {
    const textLines = event.data.text.split(/\n/);
    const index = event.data.index;
    const offscreen = new OffscreenCanvas(150,45);
    const ctx = offscreen.getContext("2d");
    ctx.font = "15px monospace";
    textLines.forEach((text, index) => {
        ctx.fillText(text, 0, 15 + index * 15)
    })
    const imageBitmap = offscreen.transferToImageBitmap();
    postMessage({imageBitmap, index});
};

// index.js
const worker = new Worker("render-text-worker.js");
const callbacks ={}
function getLabelTexture(index, text, callback) {
  callbacks[index] = callback
  worker.postMessage({ index, text });
}
worker.onmessage = function({ data }) {
  const callback = callbacks[data.index]
  callback(PIXI.Texture.from(data.imageBitmap));
}

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

हमारे विशिष्ट उपयोग के मामले में हम प्रदर्शन आवश्यकताओं को प्राप्त करने के लिए प्रत्येक लेबल की पाठ लंबाई को कम करने की सलाह देते हैं।