Skia: सार, आर्किटेक्चर और Flutter ग्राफिक्स इंजन में भूमिका

Skia क्या है?

Skia एक क्रॉस-प्लेटफ़ॉर्म 2D ग्राफिक्स लाइब्रेरी है जिसे Google द्वारा विकसित किया गया है और BSD लाइसेंस के तहत उपलब्ध है। यह ज्यामितीय आकृतियों, टेक्स्ट, इमेज और छायाओं को चित्रित करने के लिए एक एकीकृत API प्रदान करती है, जो अंतर्निहित ग्राफिक्स बैकएंड से अमूर्त होती है। Skia C++ में लिखी गई है और मोबाइल फ़ोन से लेकर सर्वर तक उपकरणों की एक विस्तृत श्रृंखला पर काम करने के लिए अनुकूलित है।

Skia का इतिहास 2005 में Skia Inc. कंपनी की एक मालिकाना लाइब्रेरी के रूप में शुरू हुआ। 2007 में Google ने इसे खरीदा, स्रोत को खोला और अपने उत्पादों में इसका उपयोग शुरू किया। आज, Skia Google Chrome (Chrome OS सहित), Android (संस्करण 4.0 से) और निश्चित रूप से Flutter का प्राथमिक ग्राफिक्स इंजन है। लाइब्रेरी को Google टीम द्वारा बनाए रखा जाता है और लगातार सुधार किया जाता है: नए बैकएंड, प्रदर्शन अनुकूलन और आधुनिक ग्राफिक्स API के लिए समर्थन जोड़े जाते हैं।

Skia की मुख्य विशेषता यह है कि यह प्रिमिटिव चित्रित करने के लिए केवल फ़ंक्शन का सेट नहीं है। यह एक पूर्ण ग्राफिक्स पाइपलाइन है जिसमें कर्व रैस्टराइज़ेशन (पथ), एंटी-अलियासिंग, मास्क ओवरले, पारदर्शिता प्रबंधन और रंग सुधार शामिल है। Skia PNG, JPEG, WebP और GIF इमेज फ़ॉर्मेट का समर्थन करती है, और ग्लिफ़ शेपिंग के लिए HarfBuzz इंजन के माध्यम से टेक्स्ट रेंडर कर सकती है।

Skia बनाम अन्य ग्राफिक्स लाइब्रेरी

Cairo (GTK में प्रयुक्त) या Quartz 2D (macOS में प्रयुक्त) के विपरीत, Skia को मूल रूप से विभिन्न ग्राफिक्स API वाले कई प्लेटफ़ॉर्म पर काम करने के लिए डिज़ाइन किया गया था। यह इसे Flutter जैसे क्रॉस-प्लेटफ़ॉर्म फ्रेमवर्क में लाभ देता है। Cairo सॉफ्टवेयर रेंडरिंग पर केंद्रित है, जबकि Skia ने शुरू से ही GPU त्वरण का समर्थन किया है, जो इंटरफ़ेस एनिमेशन के लिए महत्वपूर्ण है।

Skia आर्किटेक्चर

Skia आर्किटेक्चर एक बहु-स्तरीय पाइपलाइन के रूप में बनाया गया है, जहाँ प्रत्येक स्तर ग्राफिक्स कमांड को पिक्सेल में बदलने के एक विशिष्ट चरण के लिए जिम्मेदार है। यह संरचना अंतर्निहित ग्राफिक्स API से स्वतंत्र रूप से ऊपरी स्तरों के पुन: उपयोग की अनुमति देती है।

शीर्ष स्तर — Canvas API — डेवलपर को चित्रित करने के लिए एक अमूर्तता प्रदान करता है। drawRect, drawCircle, drawPath, drawText विधियाँ ज्यामितीय पैरामीटर और शैलियाँ (रंग, पारदर्शिता, रूपांतरण) लेती हैं। Canvas इन कमांडों को संचालन के अनुक्रम में बदलता है जो Skia Pipeline को भेजे जाते हैं — एक आंतरिक कमांड ग्राफ जो निष्पादन से पहले अनुकूलित होता है।

मध्य स्तर — Surface और Device — लक्ष्य बफर का प्रबंधन करता है जिसमें रेंडरिंग होती है। Surface निर्दिष्ट आकार, रंग स्थान और बैकएंड प्रकार के साथ बनाया जाता है। Device एक विशिष्ट रेंडरिंग बैकएंड को लागू करता है: CPU रैस्टराइज़र (Raster), OpenGL (GL), Vulkan (Vk) या Metal (Mt)। Device में प्रत्येक ड्राइंग ऑपरेशन के लिए विशिष्ट बैकएंड के अनुकूलित कार्यान्वयन होते हैं।

निचला स्तर — Ganesha (GPU बैकएंड) — हार्डवेयर-त्वरित रेंडरिंग लागू करता है। Ganesha पथ रैस्टराइज़ेशन, ग्रेडिएंट भरण और प्रभाव ओवरले के लिए GPU का उपयोग करता है। यह कमांडों को बैचों में एकत्र करता है और GPU स्थिति स्विचिंग को कम करता है। प्रत्येक ग्राफिक्स API का अपना Ganesha कार्यान्वयन होता है: Skia GL OpenGL के लिए, Skia Vulkan Vulkan के लिए, Skia Metal Metal के लिए।

मध्यवर्ती प्रतिनिधित्व — SkSL

Skia प्रभावों का वर्णन करने के लिए अपनी स्वयं की शेडर भाषा SkSL (Skia Shading Language) का उपयोग करती है। SkSL कोड SPIR-V (मध्यवर्ती प्रतिनिधित्व) में संकलित होता है, जो फिर बैकएंड-विशिष्ट शेडर फ़ॉर्मेट (GLSL, HLSL, MSL) में अनुवादित होता है। यह प्लेटफ़ॉर्म की परवाह किए बिना ग्राफिक्स प्रभावों का वर्णन करने का एक एकीकृत तरीका प्रदान करता है।

Flutter में Skia कैसे काम करता है

Flutter सभी प्लेटफ़ॉर्मों पर प्राथमिक रेंडरिंग इंजन के रूप में Skia का उपयोग करता है: Android, iOS, Web, Windows, macOS और Linux। जब कोई Flutter ऐप एक फ़्रेम रेंडर करता है, तो विजेट्स RenderObject ट्री में बदल जाते हैं, जो फिर Engine स्तर (C++ में) को भेजा जाता है, और Engine अंतिम रेंडरिंग के लिए Skia का उपयोग करता है।

फ़्रेम रेंडरिंग प्रक्रिया में कई चरण शामिल हैं। पहले, Flutter Engine एक Display List बनाता है — Canvas API कॉल का एक अनुक्रम जो वर्णन करता है कि क्या और कैसे चित्रित करना है। फिर यह सूची Skia को भेजी जाती है, जो संचालनों को विभाजनों (स्क्रीन क्षेत्रों) में विभाजित करती है, उन्हें गहराई के अनुसार क्रमबद्ध करती है और संबंधित रेंडरिंग बैकएंड को भेजती है। GPU त्वरण स्वचालित रूप से सक्षम होता है यदि Skia को कोई उपलब्ध ग्राफिक्स API मिलता है।

Flutter में Skia के प्रमुख लाभों में से एक Flutter Impeller Preview है — शेडर्स का पूर्वावलोकन करने की क्षमता। Skia पहले उपयोग के समय शेडर्स को संकलित करता है, जो देरी (shader jank) का कारण बन सकता है। इस समस्या को हल करने के लिए, Flutter Impeller — एक नए रेंडरिंग इंजन में संक्रमण कर रहा है, लेकिन Skia स्थिर Flutter संस्करणों के लिए मुख्य विकल्प बनी हुई है।

Layer Tree और Paint

Flutter Layer Tree की अवधारणा का उपयोग करता है — परतों का एक पेड़, जिनमें से प्रत्येक UI का एक हिस्सा दर्शाती है। Skia प्रत्येक परत के लिए ड्राइंग कमांड प्राप्त करता है और निर्धारित करता है कि क्या कई परतों को एक रेंडरिंग पास में जोड़ा जा सकता है। लेयर कम्पोज़िटिंग एक जटिल कार्य है, क्योंकि प्रत्येक पिक्सेल के लिए पारदर्शिता और ब्लेंड मोड को ध्यान में रखना होता है, जिसे Skia GPU शेडर्स के माध्यम से लागू करता है।

Skia के माध्यम से टेक्स्ट रेंडरिंग

Skia HarfBuzz (शेपिंग) और ICU (यूनिकोड) लाइब्रेरीज़ के साथ एकीकरण के माध्यम से टेक्स्ट रेंडर करता है। Flutter में, प्रत्येक टेक्स्ट विजेट एक Paragraph ऑब्जेक्ट बनाता है जो टेक्स्ट को ग्लिफ़ चित्रित करने के लिए Skia कमांड की एक श्रृंखला में बदलता है। Skia सबपिक्सल एंटी-अलियासिंग, फ़ॉन्ट हिंटिंग और SkUnicode लाइब्रेरी के माध्यम से इमोजी के साथ काम करने का समर्थन करती है।

Skia प्रदर्शन

Skia का प्रदर्शन वर्षों के अनुकूलन और कई तकनीकों के संयोजन का परिणाम है: कमांड बैचिंग, टेक्सचर कैशिंग और GPU संदर्भ स्विचिंग को कम करना। Flutter के लिए यह महत्वपूर्ण है, क्योंकि प्रत्येक फ़्रेम को 16 ms (60 FPS) या 8 ms (120 FPS) में रेंडर किया जाना चाहिए।

Flutter टीम के बेंचमार्क के अनुसार, मिड-रेंज डिवाइसों (Qualcomm Snapdragon 700 series) पर GPU त्वरण के साथ Skia का उपयोग स्क्रीन पर 30+ विजेट्स वाले जटिल इंटरफ़ेस को रेंडर करते समय स्थिर 60 FPS प्रदान करता है। सॉफ्टवेयर रेंडरिंग (CPU) के साथ, प्रदर्शन 40–60% गिर जाता है, लेकिन सरल स्क्रीन के लिए स्वीकार्य रहता है।

Shader Jank — Skia की मुख्य समस्या

Flutter में Skia की मुख्य प्रदर्शन समस्या shader jank (शेडर लैग) है। जब स्क्रीन पर प्रभावों के पहले से अज्ञात संयोजन वाला एक नया दृश्य तत्व दिखाई देता है, तो Skia तुरंत एक नया शेडर संकलित करता है। संकलन में 50–200 ms लग सकते हैं, जिस दौरान ऐप फ़्रेम छोड़ता है। यह कस्टम सजावट वाली लंबी सूचियों को स्क्रॉल करते समय विशेष रूप से ध्यान देने योग्य है। Google इस समस्या को Impeller में हल कर रहा है, एक नया रेंडरिंग इंजन जो शेडर्स को पहले से संकलित करता है।

विभिन्न प्लेटफ़ॉर्म पर Skia

Skia प्लेटफ़ॉर्मों की एक विस्तृत श्रृंखला का समर्थन करती है, प्रत्येक अपने स्वयं के रेंडरिंग बैकएंड का उपयोग करता है। बैकएंड का चयन लक्ष्य प्लेटफ़ॉर्म और उपलब्ध ग्राफिक्स API के आधार पर Flutter Engine बिल्ड के दौरान निर्धारित किया जाता है।

Android

Android पर, Skia OpenGL ES (सभी उपकरणों पर) और Vulkan (Android 7.0+ Vulkan समर्थन वाले उपकरणों पर) के माध्यम से काम करता है। बैकएंड का चयन स्वचालित रूप से होता है: Vulkan को प्राथमिकता दी जाती है क्योंकि यह कम ड्राइवर विलंबता प्रदान करता है। Android HWUI (Hardware Accelerated UI) के माध्यम से सिस्टम UI रेंडरिंग के लिए भी Skia का उपयोग करता है, जो Skia को केवल Flutter का हिस्सा नहीं बल्कि ऑपरेटिंग सिस्टम का हिस्सा बनाता है।

iOS

iOS पर, Skia Metal का उपयोग करता है — Apple का मालिकाना ग्राफिक्स API। Metal न्यूनतम ओवरहेड के साथ GPU तक निम्न-स्तरीय पहुँच प्रदान करता है। Metal (2014) की शुरुआत से पहले, iOS पर Skia OpenGL ES का उपयोग करता था, लेकिन वर्तमान Flutter संस्करणों में Metal iOS के लिए एकमात्र GPU बैकएंड है, जो OpenGL की तुलना में 30% तक प्रदर्शन सुधार प्रदान करता है।

डेस्कटॉप (Windows, macOS, Linux)

डेस्कटॉप पर, Skia OpenGL (macOS, Linux) और Direct3D 12 (Windows) का उपयोग करता है। Direct3D 12 के लिए समर्थन Windows के लिए Flutter 3.13 में जोड़ा गया था और Windows पर OpenGL की तुलना में महत्वपूर्ण प्रदर्शन सुधार प्रदान करता है। Skia पुराने ग्राफिक्स ड्राइवरों के साथ पिछड़ी संगतता के लिए Windows पर ANGLE (Direct3D के ऊपर OpenGL) के माध्यम से सॉफ्टवेयर रेंडरिंग का भी समर्थन करती है।

Web

Flutter for Web में, Skia WebAssembly (Emscripten के माध्यम से) में संकलित होता है और WebGL के माध्यम से रेंडर करता है। इस मोड में, Skia पूरी तरह से ब्राउज़र में काम करता है बिना नेटिव कोड का उपयोग किए। Skia के WebGL संस्करण का प्रदर्शन नेटिव बैकएंड से कम है, लेकिन अधिकांश वेब अनुप्रयोगों के लिए आधुनिक ब्राउज़रों पर WebGL हार्डवेयर त्वरण के साथ 60 FPS प्राप्त होता है।