תודה שצפית ב-Google I/O! צפייה בתוכן על פי דרישה.

דף זה תורגם על ידי Cloud Translation API.

רינדור טקסט ב-WebVR

:https://with.in/ היא פלטפורמה לספר סיפורים מציאות מדומה. אז כשהצוות שמע על WebVR החל מ-2015, התחלנו מיד להתעניין בפוטנציאל שלו. היום, העניין הזה מתבטא בתת-דומיין ייחודי של פלטפורמת האינטרנט שלנו, https://vr.with.in/. כל מי שיש לו דפדפן שתומך ב-VR יכול לעבור לאתר, ללחוץ על לחצן ולהקים משקפי שמש כדי לטבול של סרטי VR.

ההגדרה הנוכחית כוללת, בין היתר, את Chrome ב-Daydream View. עבור מידע במכשיר ובמסך התושבת על הראש, https://webvr.info/.

בדומה לסביבות עיבוד אחרות שספציפיות למציאות מדומה, רשת האינטרנט מתבססת בעיקר על ייצוג תלת-ממדי של סצנה. הזה המצלמה, נקודת המבט שלכם וכל מספר של אובייקטים. כדי לעזור בניהול של הסצנה, המצלמה והאובייקטים שאנחנו משתמשים בהם בספרייה Three.js שמשתמש ברכיב <canvas> כדי לזרוק ורינדור ב-GPU של המחשב. יש הרבה תוספים שימושיים של Three.js ל- להפוך את הסצנה לניתנת לצפייה ב-WebVR. שתי הדרכים העיקריות הן THREE.VREffect ליצירת אזור תצוגה לכל עין THREE.VRControls לתרגום נקודת המבט (למשל, הסיבוב והמיקום של בגודל שמורכב על הראש) בצורה משכנעת בסצנה. יש הרבה דוגמאות איך ליישם את זה. כדאי לעיין דוגמאות ל-Three.js WebVR כדי להתחיל בעבודה בקלות.

ככל שהתקדמנו יותר לעומק הבדיקה של WebVR, נתקלנו בבעיה. אם אנחנו מסתכלים בתוכן של האינטרנט, הטקסט הוא חלק בלתי נפרד ממנו. אומנם הרוב של התוכן שלנו הוא מבוסס וידאו, אם בתוך האתר מופיע טקסט שמקיף את התוכן. ממשק המשתמש ומידע נוסף על סרט או סרטים קשורים שנוצרו באמצעות טקסט. בנוסף, כל הטקסט הזה נוצר ב-DOM. שלנו ניתוחי WebVR ו-https://vr.with.in/ זמינים <canvas>.

הטקסט שנעשה בו שימוש ב-WebVR עבור vr.with.in

מה האפשרויות שלי?

למרבה המזל, אנחנו משקיעים מאמצים כדי לאפשר את זה. למעשה במחקר שלנו מצאנו כמה דרכים אפקטיביות לעיבוד טקסט באופן בסביבה על רכיב <canvas>. הנה מטריצה של כמה שמצאנו: מסומנת ביתרונות וחסרונות לכל:

	רזולוציה עצמאית	תכונות טיפוגרפיות	ביצועים	קלות ההטמעה
טקסט על קנבס דו-ממדי		כן	כן	כן
טקסט וקטורי מטושטש	כן		כן
מורחב טקסט בתלת-ממד	כן
טקסט מפת סיביות של שדה מרחק חתום	כן	כן	כן

ההחלטה שלנו: גופן SDF ב-Bitmap

קנבס דו-ממדי עם ctx.fillText() יכול לאפשר גלישת טקסט, רווחים בין אותיות ושורות לגובה, אבל הגלישה נחתכת והטקסט יהיה מטושטש אם תגדילו את התצוגה רחוק. אפשר להגדיל את המרקם של הקנבס, אבל הוא עלול להגיע מגבלת גודל המרקם או הביצועים עלולה להיפגע אם המרקם גדול מדי.

טקסט תלת-ממדי מובלט דומה בעיקרו לטקסט וקטורי משולש, אבל עומק ולפעמים גם שיפוע, כך שהגיאומטריה שלו גדולה לפחות פי שניים. אחד מ- הם יכולים לפעול במנות קטנות עבור כותרות או סמלי לוגו, אבל הם לא יניבו תוצאות טובות יותר כמויות גדולות של טקסט, ואף אחד מהם לא כולל תכונות טיפוגרפיות.

תהליך העבודה של גופן למפת סיביות (bitmap) של SDF — תהליך עבודה של גופן למפת סיביות (bitmap) של SDF

גופנים של מפת סיביות (bitmap) משתמשים בארבעה משולשים (שני משולשים) לכל תו, ולכן הם משתמשים פחות והם בעלי ביצועים טובים יותר וקטורים מכווצים. הם עדיין מבוססים על רסטר כי הם משתמשים ב-Sprite של מפת טקסטורה, אבל עם SDF הם בעצם תלויי רזולוציה, כך שהם נראים יפים יותר מתמונה דו-ממדית טקסטורה של קנבס. Matt DesLauriers' שלושה-bmfont-text גם כוללים תכונות טיפוגרפיות אמינות לגלישת טקסט, ריווח בין אותיות, גובה שורה ויישור. אפשרויות הגלישה לא נחתכות. גופן הגודל נשלט באמצעות קנה מידה. בחרנו במסלול הזה כי הוא נתן לנו האפשרויות הטובות ביותר לעיצוב תוך שמירה על ביצועים טובים. למרבה הצער, לא קל ליישם, לכן נבצע את השלבים בתקווה לעזור לאחרים מפתחים שעובדים ב-WebVR.

1. יצירת גופן מפת סיביות (.png + .fnt)

פלט Hiero (קובץ Bitmap PNG ו- .fnt) — פלט Hiero (קובץ GIF בפורמט Bitmap ו- .fnt)

Hiero היא חבילת גופנים של מפת סיביות (bitmap) בכלי שפועל עם Java. במסמכי התיעוד של Hiero לא באמת מוסבר איך להריץ אותה בלי לעבור תהליך build מורכב. קודם כול, מתקינים Java אם עדיין לא עשית זאת. לאחר מכן, אם לחיצה כפולה על ה-runnable-hiero.jar לא פותחים את Hiero, מנסים להריץ אותו באמצעות הפקודה הבאה במסוף:

java -jar runnable-hiero.jar

אחרי ההפעלה של Hiero, פותחים גופן .ttf או .otf ומזינים את הפרטים הנוספים תווים שברצונכם לכלול, שנו את העיבוד ל-Java כדי להפעיל אפקטים, להגדיל את הגודל כך שהתווים ימלאו את כל הריבוע של מטמון הגליף, להוסיף אפקט של שדה מרחק, לכוונן את קנה המידה של שדה המרחק ולהתפרס. ערך קנה מידה כמו רזולוציה. ככל שהתמונה גבוהה יותר, כך היא מטושטשת פחות. אבל ככל שייקח ל-Hiero לעבד את התצוגה המקדימה. לאחר מכן שומרים את הגופן של מפת סיביות (bitmap). הוא יוצר גופן מפת סיביות (bitmap) שמורכב מתמונת .png קובץ תיאור של גופן AngelCode .fnt.

2. המרת ראשי תיבות ל-JSON

עכשיו, לאחר שנוצר הגופן של מפת סיביות (bitmap), צריך לטעון אותו אפליקציית JavaScript עם Matt DesLauriers load-bmfont npm.

אפשר לעבד את הפקודה load-bmfont ולהשתמש בה בקצה הקדמי, אבל במקום זאת עומד לרוץ load-bmfont.js עם צומת כדי להמיר ולשמור את Anhcode .fnt של Hiero ב- קובץ.json:

npm install
node load-bmfont.js

עכשיו אנחנו יכולים לעקוף את load-bmfont ולבצע בקשת XHR (XMLHttpRequest) קובץ גופן מסוג json.

var r = new XMLHttpRequest();
r.open('GET', 'fonts/roboto/bitmap/roboto-bold.json');

r.onreadystatechange = function() {
    if (r.readyState === 4 && r.status === 200) {
    setup(JSON.parse(r.responseText));
    }
};

r.send();

function setup(font) {
    // pass font into TextBitmap object
}

3. טקסט דפדפן שלושה bmfonts

אחרי שטוענים את הגופן, הטקסט בן שלושה bmfont של מאט יטפל מנוחה. מכיוון שאנחנו לא משתמשים ב-Node לאפליקציה שלנו, browserify three-bmfont-text.js בקובץ three-bmfont-text-bundle.js שניתן להשתמש בו

npm install -g browserify
browserify three-bmfont-text.js -o three-bmfont-text-bundle.js

4. תוכנת הצללה (shader) של SDF

מפעילים את פס ההזזה של רוחב הפס והסף vr.with.in/archive/text-sdf-bitmap/ כדי לראות את ההשפעה של תוכנת ההצללה של שדה המרחק החתום.

5. שימוש

לנוחיותכם, יצרתי סיווג wrapper של TextBitmap לטקסט שלושה bmfonts בדפדפן.

טקסט-sdf-bitmap בפעולה — Text-sdf-bitmap בפעולה

<script src="three-bmfont-text-bundle.js"></script>
<script src="sdf-shader.js"></script>
<script src="text-bitmap.js"></script>

יוצרים בקשת XHR לקובץ הגופן .json ויוצרים אובייקט טקסט קריאה חוזרת:

var bmtext = new TextBitmap({ options });

כדי לשנות את הטקסט:

bmtext.text = 'The quick brown fox jumps over the lazy dog.';

scene.add( bmtext.group );
hitBoxes.push( bmtext.hitBox );

קובץ ה- .png של הגופן במפת סיביות נטען עם THREE.TextureLoader ב-text-bitmap.js

TextBitmap כולל גם תיבת היט בלתי נראית לאינטראקציה של שלושה.js קרניים באמצעות עכבר, מצלמה או בקרי תנועה שנמצאים במעקב באופן ידני כמו Oculus Touch או לבקרים של Vive. הגודל של תיבת ההיט מתעדכן באופן אוטומטי כשמשנים את הטקסט אפשרויות.

הוספנו את Bmtext.group לסצינה של שלושה.js. אם צריך לגשת לילדים / Object3D's, תרשים הסצנות של הטקסט נראה כך:

6. הקטנת הקובץ של JSON ושינוי xoffsets

אם קישור ה-kerning שלך כבוי, ייתכן שיהיה עליך לערוך את ה-xoffsets ב-json. הדבקה את ה-json ל-Jsbeautifier.org כדי לקבל גרסה לא מקוצרת של הקובץ.

ה-xoffset הוא בעצם קישור גלובלי לתו אחד. הקרינה מיועדת לשניים תווים ספציפיים שמופיעים זה לצד זה. ערכי ברירת המחדל בעמודה מערך גרפי לא באמת גורם לשינוי, והוא יהיה מסובך מדי כך שאפשר לרוקן את המערך כדי להקטין את הקובץ של ה-json. לאחר מכן לערוך את שמות ה-xoffsets לצורך קישור.

קודם כל צריך להבין אילו תווים מתאימים לכל מזהה תווים JSON. ב-three-bmfont-text-bundle.js, יש להוסיף console.log אחרי שורה 240:

    var id = text.charCodeAt(i)
    // console.log(id);

לאחר מכן מקלידים בשדה הטקסט dat.gui מופעל https://vr.with.in/archive/text-sdf-bitmap/ ובודקים במסוף כדי למצוא את המזהה התואם של דמות.

לדוגמה, בגופן מפת סיביות (bitmap) שלנו, "j" הוא נמצא רחוק מדי מימין. שלו מזהה התווים הוא 106. לכן, אפשר למצוא את "id": 106 ב-json ולשנות את xoffset מ-1- עד -10.

7. פריסה

אם יש מספר בלוקים של טקסט ואתם רוצים לזרום מלמעלה למטה, למשל ב-HTML, יש למקם הכל באופן ידני, בדומה למיקום המוחלט כל אלמנט של domd בעצמך באמצעות CSS. היית יכולה לדמיין את האפשרות הזו ב-CSS?

    * { position: absolute; }

כך נראית פריסת טקסט בתלת-ממד. בתצוגת הפרטים: כותרת, מחבר, התיאור ומשך הזמן הם כל אובייקט חדש של TextBitmap עם סגנונות, צבע, קנה מידה וכו':

author.group.position.y = title.group.position.y - title.height - padding;
description.group.position.y = author.group.position.y - author.height - padding;
duration.group.position.y = description.group.position.y - description.height - padding;

ההנחה היא שהמקור המקומי של כל קבוצת TextBitmap הוא אנכי מיושר לחלק העליון של רשת TextBitmap (ראו במרכז text-bitmap.js עדכון). אם משנים את הטקסט של אחד מהאובייקטים האלה מאוחר יותר, ואת הגובה שבו אובייקט מסוים ישתנה, תצטרכו לחשב מחדש את המיקומים האלו. כאן, רק המיקום y של הטקסט השתנה, אבל הזדמנות אחת תלת-ממד הוא שאנחנו יכולים לדחוף ולמשוך את הטקסט בכיוון ה-z, וגם לסובב סביב הצירים x, y ו-z.

סיכום

טקסט ופריסה ב-WebVR עוברים כברת דרך לפני שהם הופכים לקלים נפוצים כ-HTML ו-CSS. אבל יש פתרונות אפשריים, ואפשר לעשות הרבה יותר ב-WebVR בהשוואה לדף אינטרנט מסורתי בפורמט HTML. WebVR קיים היום. סביר להניח שיהיו כלים טובים יותר מחר. עד אז, אפשר לנסות אותו ניסוי. התפתחות ללא מסגרת שנמצאה בכל מקום, מובילה ליצירת שיטות ייחודיות יותר פרויקטים, וזה מרגש.