عرض النص في WebVR

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

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

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

ومثل بيئات العرض الأخرى الخاصة بالواقع الافتراضي، يوفر الويب يعتمد بشكل أساسي على تمثيل ثلاثي الأبعاد للمشهد. هذا النمط يحتوي المشهد على كاميرا ومنظورك وأي عدد من الأشياء. للمساعدة في إدارة هذا المشهد والكاميرا والعناصر التي نستخدمها، وهي مكتبة تسمى Three.js الذي يستفيد من العنصر <canvas> لطرح العرض على وحدة معالجة الرسومات في الكمبيوتر. هناك العديد من إضافات Three.js المفيدة يمكنك جعل المشهد قابلاً للعرض في WebVR. الطريقتان الرئيسيتان هما THREE.VREffect لإنشاء إطار عرض لكل عين THREE.VRControls لترجمة المنظور (مثل دوران وموضع تثبيت على الرأس) بشكل مقنع داخل المشهد. هناك العديد من الأمثلة على وكيفية تنفيذه. ننصحك بالاطّلاع على أمثلة على WebVR في Three.js عن طرق للبدء.

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

ما هي الخيارات المتوفّرة لي؟

لحسن الحظ، يتم العمل حاليًا على تحقيق ذلك. في الواقع، في بحثنا توصلنا إلى عدد من الطرق الفعالة لعرض النص في شكل ثلاثي الأبعاد البيئة على عنصر <canvas>. وفيما يلي مصفوفة من بعض النتائج التي وجدناها مع تمييز بالإيجابيات والسلبيات لكل منهما:

قرارنا: خط صور SDF النقطية

لوحة الرسم الثنائية الأبعاد التي تستخدم ctx.fillText() يمكنها التفاف النص وتباعد الأسطر وتباعد الأسطر. بسهولة، ولكن يتم اقتطاع تجاوز القيمة، وسيكون النص ضبابيًا في حالة التكبير حقًا بعيد. ويمكنك زيادة حجم زخرفة اللوحة، ولكن قد تصل إلى جزء يمكن أن يتأثر الحد في حجم الهيئة أو الأداء إذا كان الهيئة كبيرًا جدًا.

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

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

1. إنشاء خط صورة نقطية (.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 يستخدم "مات ديلاوريرز" حزمة load-bmfont npm.

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

npm install
node load-bmfont.js

يمكننا الآن تجاوز 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

بمجرد تحميل الخط، سيعتني "مات" بتنسيق النص باستخدام الخط Bmfont أَرْتَاح ونظرًا لأننا لا نستخدم Node لتطبيقنا الخاص، فسننتقل إلى متصفّح متوافق 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 عند استخدام النص بتنسيق ثلاثة أخطاء

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

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

6- إلغاء تقليل json وتعديل مجموعات xoffset

إذا كان البحث عن القطع غير مفعَّل، قد تحتاج إلى تعديل 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/ وفحص وحدة التحكم للعثور على المعرف المقابل للحرف.

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

7. التنسيق

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

الخاتمة

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