عرض النص في WebVR

الاطّلاع على الموقع الإلكتروني

ضمن (https://with.in/) منصة لسرد القصص في الواقع الافتراضي. لذلك عندما سمع الفريق عن WebVR في عام 2015، انتبهنا إلى إمكاناتها على الفور. وفي الوقت الحالي، يظهر هذا الاهتمام في نطاق فرعي فريد لمنصّة الويب الخاصة بنا، وهو https://vr.with.in/. يمكن لأي شخص لديه متصفح يدعم الواقع الافتراضي الانتقال إلى الموقع، والنقر على زر ووضع سماعة رأس من أجل انغماس في ملفنا الشخصي من أفلام الواقع الافتراضي.

ويشمل ذلك على سبيل المثال لا الحصر Chrome على Daydream View. للحصول على معلومات عن جهازك والشاشة المثبّتة على الرأس، يُرجى الاطّلاع على https://webvr.info/.

مثل بيئات العرض الخاصة الأخرى بالواقع الافتراضي، تعتمد شبكة الويب في المقام الأول على التمثيل الثلاثي الأبعاد للمشهد. يحتوي هذا المشهد على كاميرا ومنظورك وأي عدد من الأشياء. للمساعدة في إدارة هذا المشهد والكاميرا والكائنات، نستخدم مكتبة تُسمى Three.js والتي تستفيد من العنصر <canvas> في العرض على وحدة معالجة الرسومات في جهاز الكمبيوتر. هناك العديد من إضافات 3.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() تنفيذ التفاف النص، وتباعد الأحرف، وارتفاع الأسطر، ولكن يتم اقتطاع تجاوز السعة، وسيكون النص معتمًا في حال التكبير بشكل بعيد جدًا. يمكنك زيادة حجم زخرفة لوحة الرسم، ولكن قد تصل إلى الحد الأقصى لحجم الزخرفة أو قد يتأثر الأداء إذا كان الزخرفة كبيرًا جدًا.

يتشابه النص الثلاثي الأبعاد المنبثق بشكل أساسي مع النص المتجه المثلثي الشكل، ولكن مع عمقه وقد يكون مائلًا بحيث يحتوي على ضعف حجم الهندسة على الأقل. يمكن أن يعمل أي منهما بجرعات صغيرة للعناوين أو الشعارات، لكن لا يعمل بشكل جيد مع الكميات الكبيرة من النص ولا يحتوي أي منهما على ميزات مطبعية.

سير عمل الصورة النقطية للخط إلى SDF

تستخدم خطوط الصور النقطية رباعية واحدة (مثلّثَين) لكل حرف، لذا فهي تستخدم هندسة أقل وأفضل من المتجهات المثلثة. لا تزال هذه الصور نقطية لأنها تستخدم نقوشًا متحركة للخريطة الزخرفية، ولكن مع تظليل SDF تكون مستقلة عن درجة الدقة في الأساس بحيث تبدو أكثر أجمل من زخرفة لوحة ثنائية الأبعاد. يتضمّن نص مات DesLauriers 3-bmfont-text أيضًا ميزات مطبعية موثوقة لإحاطة النص وتباعد الأحرف وارتفاع الأسطر والمحاذاة. لا يتم اقتطاع التدفق الزائد. ويتم التحكم في حجم الخط من خلال المقياس. اخترنا هذا الطريق لأنه أعطانا أفضل خيارات للتصميم مع الحفاظ على الأداء. ولسوء الحظ، لم يكن تنفيذ هذا الأمر سهلاً، لذا سنتابع هذه الخطوات على أمل مساعدة زملائك من المطورين الذين يعملون في WebVR.

1- إنشاء خط صورة نقطية (.png + .fnt)

واجهة Hiero

مخرجات Hiero (ملف Bitmap PNG و .fnt)

تُعد Hiero أداة لتعبئة الخطوط النقطية تعمل باستخدام Java. لا تشرح وثائق Hiero حقًا كيفية تشغيلها دون المرور بعملية إنشاء معقدة. أولاً، قم بتثبيت Java إذا لم تكن قد قمت بذلك بالفعل. بعد ذلك، إذا لم يؤدي النقر مرّتين على ملف runnable-hiero.jar إلى فتح Hiero، جرِّب تشغيله باستخدام الأمر التالي في وحدة التحكم:

java -jar runnable-hiero.jar

بعد تشغيل Hiero، افتح خط سطح المكتب بالامتداد .ttf أو .otf، وأدخِل أي أحرف إضافية تريد تضمينها، وغيِّر العرض إلى لغة Java لتفعيل التأثيرات، وزِد الحجم حتى تملأ أحرفك مربّع ذاكرة التخزين المؤقت بالكامل بالأحرف الرسومية، وأضِف تأثيراً لحقل المسافة، واضبط مقياس حقل المسافة ونطاقه. تكون قيمة المقياس مثل الدقة. وكلما زاد ارتفاعه، قل وضوحه، ولكن سيستغرق الأمر وقتًا أطول لعرض المعاينة على Hiero. ثم احفظ خط الصورة النقطية. يقوم بإنشاء خط صورة نقطية يتكون من صورة .png وملف وصف خط AngelCode .fnt.

2. تحويل AngelCode إلى JSON

الآن وبعد إنشاء خط الصورة النقطية، علينا تحميلها في تطبيق JavaScript باستخدام حزمة تحميل-bmfont npm من قِبل "مات DesLauriers".

يمكننا إجراء المتصفح upload-bmfont واستخدام ذلك في الواجهة الأمامية، ولكن بدلاً من ذلك سنقوم بتشغيل load-bmfont.js باستخدام Node لتحويل وحفظ AngelCode .fnt من Hiero إلى ملف json.:

npm install
node load-bmfont.js

مثال على إخراج JSON

يمكننا الآن تجاوز upload-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. نص خط ثلاثة bmfont في المتصفِّح

وبمجرد أن يتم تحميل الخط، سيعتني مات باستخدام نص 3bmfont ببقية النص. ولأنّنا لا نستخدم أداة 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. أداة تظليل SDF

عدِّل شريط تمرير afwidth وthreshold على vr.with.in/archive/text-sdf-bitmap/ للاطّلاع على تأثير أداة تظليل حقل المسافة الموقَّعة.

5. الاستخدام

ولتسهيل الأمر، أنشأتُ فئة برنامج تضمين TextBitmap لنص المكوّن من ثلاثة bmfont في المتصفّح.

التطبيق العملي لملف 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 أيضًا مربع نتائج غير مرئي لتفاعل three.js raycast من خلال الماوس أو الكاميرا أو وحدات التحكُّم في الحركة التي يتم تتبُّعها يدويًا مثل Oculus Touch أو وحدات تحكّم Vive. يتم تحديث حجم مربع النتائج تلقائيًا عند تغيير خيارات النص.

تتم إضافة Bmtext.group إلى مشهد three.js. وإذا كنت بحاجة إلى الوصول إلى العناصر الثانوية / Object3D، فإن الرسم البياني للمشهد للنص يبدو كما يلي:

6. تصغير ملف json وتعديل xoffsets

إذا اختلطت القرنين، قد تحتاج إلى تعديل xoffsets في تنسيق json. ألصِق ملف json في Jsbeautifier.org للحصول على نسخة غير مصغَّرة من الملف.

xoffset هو في الأساس تقنين عالمي لحرف واحد. التقبيل هو حرفين محددين يظهران بجوار بعضهما البعض. ولا تُحدث القيم التلقائية في صفيفة kerning أي فرق في الواقع، وسيكون التعديل مملًا للغاية، لذا يمكنك إفراغ هذا الصفيف لتقليل حجم ملف 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/ وتحقَّق من وحدة التحكّم للعثور على المعرّف المقابل لأحد الأحرف.

فعلى سبيل المثال، في خط الصورة النقطية، يكون "j" دائمًا بعيدًا جدًا عن اليمين. معرف الأحرف الخاص بها هو 106. لذلك ابحث عن "id": 106 في json وغيّر xoffset من -1 إلى -10.

7. التنسيق

إذا كانت لديك عدة قوالب نصية وتريد أن تتدفق من الأعلى إلى الأسفل مثل HTML، يجب تحديد موضع كل شيء يدويًا، على غرار تحديد الموضع المطلق لكل عنصر dom بنفسك باستخدام 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). إذا غيرت النص لأي من هذه الكائنات لاحقًا، وتغير ارتفاع هذا الكائن، فستحتاج أيضًا إلى إعادة حساب تلك المواضع. هنا، يتم تعديل الموضع ص للنص فقط، ولكن إحدى فرص العمل في العرض الثلاثي الأبعاد هي أنه يمكننا دفع النص وسحبه في الاتجاه z، بالإضافة إلى تدوير حول المحاور س وص وع.

الخاتمة

أمام النص والتنسيق في WebVR شوط طويل قبل أن تصبح سهلة وواسعة الاستخدام مثل HTML وCSS. بالرغم من ذلك، تتوفّر حلول للعمل ويمكنك إنجاز ما هو أكثر بكثير في WebVR مما يمكنك إنجازه باستخدام صفحة ويب تقليدية بتنسيق HTML. يتوفّر WebVR اليوم. من المحتمل أن تكون هناك أدوات أفضل غدًا. حتى ذلك الحين، جربها. يؤدي التطوير بدون إطار عمل واسع الانتشار إلى المزيد من المشروعات الفريدة، وهذا أمر مثير.