בחודש שעבר, הצגנו את סוגי היישומים החדשים שניתן לבנות על גבי React Native WebGPU, הדגשנו כיצד WebGPU נתן השראה לשורה של שיפורים ב-React Native Skia, ו- שיתף הצצה קטנה של Skia Graphite ב-React Native.
ריאקט נייטיב סקי ביססה את עצמה כפתרון המועדף לגרפיקה דו-ממדית ב-React Native. ואנחנו רואים משתמשים רבים שדוחפים את גבולות מה שניתן לעשות עם הספרייה.
למה WebGPU משנה הכל
החיפוש שלנו לשיפור מתמיד הוביל אותנו ל-Skia Graphite, שרת אחורי חדש של Skia עבור ממשקי API של GPU מודרניים התומך שחר, יישום WebGPU בקוד פתוח של גוגל. היתרונות של גישה זו הם אדירים:
-
ארכיטקטורת Backend מאוחדת
סוף סוף נוכל להימלט ממורכבות ה-backend שלנו. נכון לעכשיו, אנו מתחזקים שתי יישומים נפרדים לחלוטין: OpenGL עבור אנדרואיד ו-Metal עבור iOS. בכל פעם שאנחנו רוצים לבנות פיצ'ר חדש הקשור ל-backend, אנחנו צריכים לבנות אותו פעמיים, וזה הזמן שבו הדברים יכולים להסתבך במהירות. -
סימטריה של מערכת האקולוגיה של האינטרנט
אנחנו אוהבים את האינטרנט. ב-React Native, מעקב אחר סימטריה עם האינטרנט בהחלטות הטכניות והארכיטקטוניות שלנו תמיד היה מתגמל. על ידי הבאת Dawn ו-Skia ל-React Native, אנו מספקים מחסנית גרפית סימטרית ל-Google Chrome. משמעות הדבר היא שאנחנו יכולים למנף ענקיות של מערכת האקולוגית של האינטרנט כמו Three.js ללא פשרות. -
מחשוב GPU למטרות כלליות
מעבר לגרפיקה, WebGPU מביא חישובי GPU למטרות כלליות ל-React Native. זה שימושי במיוחד להפעלת מודלים וספריות של למידת מכונה כמו TensorFlow.js.
הבאת Three.js ו-React Three Fiber ל-Native
Three.js חוללה מהפכה בגרפיקה תלת-ממדית עבור האינטרנט, ואפשרה למיליוני מפתחים לבנות חוויות תלת-ממד מדהימות. וקהילת Three.js פעילה מאוד בבניית תמיכה מהשורה הראשונה עבור WebGPU בספרייה.
דוגמאות Three.js אלו פועלות לחלוטין ישירות מהקופסה על React Native WebGPU. מאחורי הקלעים, הם משתמשים ב-Metal ב-iOS וב-Vulkan באנדרואיד. הם גם תומכים ב-Reanimated. בנוסף, ספריית עזר מאפשר לך להריץ סצנות Three.js על גבי שרשורים ייעודיים שעברו אנימציה מחדש.
גלובוס בלאק פריידי של שופיפיי: תצוגה של אפשרויות
חלק מרכזי נוסף במערכת האקולוגית Three.js הוא תגובה שלושה סיבים, המיישר של React עבור three.jsדוגמה מרשימה לאפליקציית React Three Fiber היא אפליקציית Black Friday Globe Mothership, שהוצגה על ידי דניאל ביוקמפ והצוות ב Shopify.
כל קשת מייצגת הזמנה אמיתית של בלאק פריידי. משתמשים יכולים להגדיל את התצוגה כדי לצפות בהזמנות בודדות, לשנות את צבעי הקשת והחלקיקים, לקיים אינטראקציה עם שופי, ראש הבובה (כולל פיזיקה), ואפילו לעבור בין מקורות נתונים שונים כדי לראות איך Shopify הניעו את המסחר במהלך יום הקניות הגדול ביותר של השנה.
הגלובוס של השנה שעברה נבנה עם React Three Fiber תוך שימוש ב-WebGL2 מתחת למכסה המנוע, מה שאומר שכל השיידרים נכתבו ב-GLSL (שפת הצללה OpenGL). כדי לתמוך ב-WebGPU, באופן מסורתי הם היו צריכים לכתוב מחדש את השיידרים שלהם ב-WGSL (שפת הצללה WebGPU) ולתחזק שני בסיסי קוד נפרדים - נקודת כאב משמעותית.
זה איפה TSL (שפת הצללה Three.js) נכנס לתמונה. TSL מאפשר למפתחים לכתוב שיידרים פעם אחת ולכוון אוטומטית הן לשרתים האחוריים של WebGPU והן לשרתים האחוריים של WebGL מסורתיים. זוהי שפת הצללה מאוחדת שמפשטת את ההבדלים בין GLSL ל-WGSL, כלומר אותו קוד שיידר יכול לרוץ על שני שרתים האחוריים של הרינדור ללא שינוי.
מה שהופך את זה למרגש במיוחד עבור React Native הוא שעם התמיכה שלנו ב-WebGPU, אותם שיידרים של TSL שמפעילים את גרסת האינטרנט יכולים לפעול באופן טבעי באפליקציות React Native ללא צורך בקוד נוסף. Shopify, שם כל אפליקציות המובייל נכתבות ב-React Nativeצוות המובייל שלנו יכול לכתוב פעם אחת ולהפעיל בקלות את הגלובוס שלהם ישירות בתוך אפליקציות המובייל שלו. הצוות כבר יצר אבות טיפוס שמריצים כמה משיידרים של הגלובוסים של השנה שעברה בתוך WebGPU על React Native - התוצאה זהה לגרסת האינטרנט, אך כעת פועלת באופן טבעי על מובייל עם ממשקי API של GPU מודרניים כמו Vulkan ו-Metal.
למי שמעוניין ללמוד עוד על איך גלובוס בלאק פריידי של Shopify נבנהיש מדריך אינטראקטיבי מדהים מאת דייגו מקאריו בלו שאנחנו בהחלט ממליצים לבדוק.
ComputeToys: לוקחים את אמנות השיידר לשלב הבא
משתמשי React Native Skia אוהבים את ShaderToy זה מכבר, שם אמנים דיגיטליים יוצרים סצנות הדגמה מדהימות באמצעות שיידרים של מקטעי WebGL. רוב השיידרים הללו יכולים לרוץ על React Native Skia עם שינויים מינימליים, מה שמביא אמנות פרוצדורלית יפהפייה לאפליקציות מובייל.
צעצועי מחשב הוא כלי דומה אך מכוון לקהילת WebGPU. במקום shaders של fragment, הוא משתמש ב-compute shaders, המאפשרים לאמנים לכתוב ערכי פיקסלים ל-buffers שונים. משמעות הדבר היא שבמקום שכל thread ישפיע רק על צבע הפיקסל שהוקצה לו, threads יכולים לכתוב ערכים למערכים שמשפיעים על צבעים לאורך כל הפריים.
למידת מכונה ו-TensorFlow.js
עומסי עבודה של למידת מכונה הם מועמדים מושלמים להאצת GPU, ו-WebGPU הופך זאת לנגיש למפתחי React Native. TensorFlow.js פועל לחלוטין ישר מהקופסה ב-React Native באמצעות ה-backend של React Native WebGPU, ומביא יכולות למידת מכונה עוצמתיות ליישומים ניידים.
הדגמות אלו אפילו לא משתמשות בקנבס אלא מחשבות שיידרים לחישוב GPU למטרות כלליות. זה פותח אפשרויות להסקה על המכשיר, עיבוד תמונה בזמן אמת ומשימות למידה חישובית אחרות.
שיפורים ב-React Native Skia
בזמן שעבדנו על WebGPU, היה לנו פרויקט חדש שבו יכולנו לבחון רעיונות ארכיטקטוניים חדשים. לאחר שאומתו, שלחנו את השיפורים הללו בחזרה ל-React Native Skia.
ביצועים משופרים באמצעות ארכיטקטורה טובה יותר
ביצענו שיפורים משמעותיים במודל ה-reconciler ובגרף הסצנות שלנו. בעבר, השתמשנו בגרף סצנות הניתן לשינוי מלא בשם SkiaDOM, שנכתב ב-C++ למען מהירות. עם זאת, היה בו פגם עיצובי חמור: התייחסנו לעדכונים הן משלב ה-JavaScript והן משלב ה-UI באופן שווה, מה שיצר צווארי בקבוק בביצועים בזמן האנימציה.
עברנו ממתאם הנייר (ניתן לשינוי מלא) למתאם הבד (בלתי ניתן לשינוי). שינוי זה ביטל בעיות בו-זמניות בזמן האנימציה ואפשר לנו ליישם מה שהיא בעצם רשימת תצוגה בלתי ניתנת לשינוי עם תמיכה בערכי אנימציה.
שיפורים אדריכליים אלה הביאו לשיפורים דרמטיים בביצועים:
- ביצועי זמן אנימציהמהיר יותר עד 50% ב-iOS, מהיר יותר כמעט 200% באנדרואיד
- זמן לפריים הראשון של האנימציהשיפור של כמעט 200% בשתי הפלטפורמות
- יעילות בסיס הקודהפחתה של 13% בקוד תוך הוספת פונקציונליות
- יציבותתוקנו 98% מקריסות אנדרואיד שדווחו
תמיכה מורחבת בפלטפורמה
React Native Skia פועל כעת על שלוש פלטפורמות חדשות: MacOS, tvOS, ו Node.js לרינדור ללא ראש. הרחבה זו אפשרה מקרי שימוש מרגשים:
- MacOSתמיכה מלאה בשולחן העבודה עבור יישומי React Native
- tvOSמביאים את העוצמה של Skia לחוויית הסלון
- Node.jsרינדור בצד השרת ויצירת גרפיקה ללא חיבור ראש
חברות כמו סווש משתמשים בתמיכה של Node.js ללא כותרת כדי ליצור באופן דינמי תצוגות מקדימות של Open Graph באמצעות אותו קוד React Native Skia בו הם משתמשים באפליקציות המובייל שלהם. גישת "כתיבה פעם אחת, עיבוד בכל מקום" זו משתרעת אפילו על שירותי backend.
הצצה קטנה לגרפיט של סקי
Skia Graphite הוא backend חדש של Skia עבור ממשקי API של GPU מודרניים התומך ב-WebGPU. למרות שהוא עדיין לא מוכן לשיא, הוא כבר ניתן לבדיקה. באמצעות דגל ניסיוני ב-React Native Skia.
השחלה אוטומטית
הודות ל-WebGPU, קנבסים של React Native Skia יכולים לרוץ על thread ייעודי לגמרי ישר מהקופסה.
קומפוזיציה דו-ממדית/תלת-ממדית חלקה
בעזרת Skia Graphite, אנו יכולים להביא את הפרימיטיבים הדו-ממדיים הטובים מסוגם של Skia לסצנות תלת-ממדיות ללא עלות. בהדגמות שלנו, אנו מציגים סצנות תלת-ממדיות הפועלות על WebGPU המשתמשות בטקסטורות WebGPU עבור אנימציות נתיב ופריסת טקסט, אך אלמנטים אלה מעובדים באמצעות Skia. אנו יכולים גם ללכת בכיוון השני: רישומי Skia יכולים להשתמש בטקסטורות WebGPU ישירות. בהדגמה זו, תוכלו לראות רישום Skia המשתמש ב-Compute Shader של ComputeToys להצללה. יכולת קומפוזיציה דו-כיוונית זו בין פרימיטיבים דו-ממדיים ותלת-ממדיים פותחת אפשרויות יצירתיות חדשות לחלוטין.
הדרך קדימה
הכרזות כאלה הן תמיד הזדמנויות חשובות עבורנו להודות מקרב לב לקהילת React Native. כל העבודה הזו לא הייתה אפשרית ללא התמיכה המדהימה שלכם, התרומות, דיווחי הבאגים הקפדניים והדיונים המעמיקים שלכם. המעורבות והמשוב שלכם היו יקרי ערך בעיצוב הספריות הללו למה שהן היום.
חלק מהעבודה שהצגנו עדיין ניסיונית למדי, אך אנו נרגשים מאוד מהמינוף שאנו מקבלים עם WebGPU ו-Skia הרצים מעליה.
פריצה נעימה.
