WebVR-এ পাঠ্য রেন্ডারিং

সাইট দেখুন

এর মধ্যে ( https://with.in/ ) হল ভার্চুয়াল বাস্তবতায় গল্প বলার জন্য একটি প্ল্যাটফর্ম৷ তাই যখন দলটি 2015 সালে WebVR সম্পর্কে শুনেছিল তখন আমরা তাৎক্ষণিকভাবে এর সম্ভাবনার প্রতি আগ্রহী হয়েছিলাম। আজ, সেই আগ্রহ আমাদের ওয়েব প্ল্যাটফর্ম, https://vr.with.in/- এর একটি অনন্য সাবডোমেনে প্রকাশ পেয়েছে। VR-সক্ষম ব্রাউজার সহ যে কেউ সাইটে যেতে পারেন, একটি বোতামে ক্লিক করতে পারেন এবং আমাদের VR ফিল্মগুলির পোর্টফোলিওতে নিমজ্জিত হতে একটি হেডসেট ছুঁড়তে পারেন৷

আজ যেটিতে Daydream View-এ Chrome অন্তর্ভুক্ত রয়েছে কিন্তু সীমাবদ্ধ নয়৷ আপনার ডিভাইস এবং হেড-মাউন্ট করা ডিসপ্লে সম্পর্কে তথ্যের জন্য https://webvr.info/ দেখুন।

অন্যান্য ভার্চুয়াল বাস্তবতা নির্দিষ্ট রেন্ডারিং পরিবেশের মতো, ওয়েব প্রধানত একটি দৃশ্যের ত্রিমাত্রিক উপস্থাপনার উপর নির্ভর করে। এই দৃশ্যে একটি ক্যামেরা, আপনার দৃষ্টিকোণ এবং যেকোনো সংখ্যক বস্তু রয়েছে। এই দৃশ্য, ক্যামেরা এবং অবজেক্টগুলি পরিচালনা করতে আমরা Three.js নামক একটি লাইব্রেরি ব্যবহার করি যা আপনার কম্পিউটারের GPU-তে রেন্ডারিং নিক্ষেপ করার জন্য <canvas> উপাদানটি ব্যবহার করে। ওয়েবভিআর-এ আপনার দৃশ্য দেখার জন্য অনেক দরকারী Three.js অ্যাড-অন রয়েছে৷ প্রধান দুটি হল THREE.VREffect প্রতিটি চোখের জন্য একটি ভিউপোর্ট তৈরি করার জন্য এবং THREE.VRCনিয়ন্ত্রণগুলি আপনার দৃশ্যে দৃঢ়ভাবে দৃষ্টিভঙ্গি (যেমন মাথা-মাউন্ট করা ডিসপ্লের ঘূর্ণন এবং অবস্থান) অনুবাদ করার জন্য৷ এটি কীভাবে বাস্তবায়ন করা যায় তার অনেক উদাহরণ রয়েছে। শুরু করার উপায়গুলির জন্য Three.js WebVR উদাহরণগুলি দেখুন৷

আমরা WebVR এর অন্বেষণে আরও এগিয়ে যাওয়ার সাথে সাথে আমরা একটি সমস্যায় পড়েছিলাম। আমরা যদি ওয়েবের বিষয়বস্তুর দিকে তাকাই, পাঠ্য এটির একটি অবিচ্ছেদ্য অংশ। যদিও আমাদের বেশিরভাগ বিষয়বস্তু ভিডিও ভিত্তিক, আপনি যদি সাইটে যান তাহলে বিষয়বস্তুর চারপাশে পাঠ্য; ইউজার ইন্টারফেস এবং ফিল্ম বা সম্পর্কিত ফিল্ম সম্পর্কে অতিরিক্ত তথ্য সবই টেক্সট দিয়ে তৈরি করা হয়। অধিকন্তু এই সমস্ত পাঠ্য DOM-এ তৈরি করা হয়েছে। আমাদের ওয়েবভিআর অনুসন্ধান এবং https://vr.with.in/ সবই <canvas> -এ রয়েছে।

vr.with.in- এর জন্য WebVR-এ ব্যবহৃত পাঠ্য

আমার বিকল্প কি?

ভাগ্যক্রমে, এটি সম্ভব করার জন্য কাজ করা হচ্ছে। আসলে আমাদের গবেষণায় আমরা একটি <canvas> উপাদানে ত্রি-মাত্রিক পরিবেশে পাঠ্য রেন্ডার করার জন্য বেশ কয়েকটি কার্যকর উপায় খুঁজে পেয়েছি। নীচে কয়েকটি ম্যাট্রিক্স রয়েছে যা আমরা প্রতিটির জন্য সুবিধা এবং অসুবিধা সহ চিহ্নিত পেয়েছি:

	রেজোলিউশন স্বাধীন	টাইপোগ্রাফিক বৈশিষ্ট্য	কর্মক্ষমতা	বাস্তবায়ন সহজ
2D ক্যানভাস পাঠ্য		হ্যাঁ	হ্যাঁ	হ্যাঁ
ত্রিভুজাকার ভেক্টর পাঠ্য	হ্যাঁ		হ্যাঁ
এক্সট্রুড 3D পাঠ্য	হ্যাঁ
স্বাক্ষরিত দূরত্ব ক্ষেত্রের বিটম্যাপ পাঠ্য	হ্যাঁ	হ্যাঁ	হ্যাঁ

আমাদের সিদ্ধান্ত: SDF বিটম্যাপ ফন্ট

ctx.fillText() সহ 2D ক্যানভাস টেক্সট র‌্যাপিং, অক্ষরের ব্যবধান এবং লাইনের উচ্চতা করতে পারে, কিন্তু ওভারফ্লো বন্ধ হয়ে যায় এবং আপনি যদি সত্যিই অনেক দূর জুম করেন তাহলে টেক্সট ঝাপসা হয়ে যাবে। আপনি ক্যানভাস টেক্সচারের আকার বাড়াতে পারেন, কিন্তু টেক্সচারের আকারে একটি ঊর্ধ্ব সীমা আঘাত করতে পারে বা টেক্সচারটি খুব বড় হলে কর্মক্ষমতা ক্ষতিগ্রস্ত হতে পারে।

এক্সট্রুডেড 3D টেক্সট মূলত ত্রিভুজাকার ভেক্টর টেক্সটের মতোই, কিন্তু গভীরতা এবং সম্ভবত একটি বেভেলের সাথে তাই এটিতে অন্তত দ্বিগুণ জ্যামিতি রয়েছে। এইগুলির যেকোন একটি শিরোনাম বা লোগোর জন্য ছোট মাত্রায় কাজ করতে পারে, কিন্তু প্রচুর পরিমাণে পাঠ্যের জন্য ভাল কাজ করবে না এবং টাইপোগ্রাফিক বৈশিষ্ট্যও নেই।

SDF বিটম্যাপ ওয়ার্কফ্লোতে ফন্ট

বিটম্যাপ ফন্টগুলি প্রতি অক্ষর প্রতি একটি চতুর্ভুজ (দুটি ত্রিভুজ) ব্যবহার করে, তাই তারা কম জ্যামিতি ব্যবহার করে এবং ত্রিভুজাকার ভেক্টরের চেয়ে ভাল কার্য সম্পাদন করে। তারা এখনও রাস্টার ভিত্তিক যেহেতু তারা একটি টেক্সচার ম্যাপ স্প্রাইট ব্যবহার করে, তবে একটি SDF শেডারের সাথে তারা মূলত রেজোলিউশন-স্বাধীন তাই তারা 2D ক্যানভাস টেক্সচারের চেয়ে সুন্দর দেখায়। Matt DesLauriers-এর থ্রি-বিএমফন্ট-টেক্সটে টেক্সট মোড়ানো, অক্ষর ব্যবধান, লাইনের উচ্চতা এবং সারিবদ্ধকরণের জন্য নির্ভরযোগ্য টাইপোগ্রাফিক বৈশিষ্ট্যও রয়েছে। ওভারফ্লো কেটে যায় না। হরফের আকার স্কেলের মাধ্যমে নিয়ন্ত্রণ করা হয়। আমরা এই রুটটি বেছে নিয়েছি কারণ এটি আমাদের পারফরম্যান্ট থাকার সময় ডিজাইনের জন্য সেরা বিকল্প দিয়েছে। দুর্ভাগ্যবশত, এটি বাস্তবায়ন করা ততটা সহজ ছিল না তাই আমরা WebVR-এ কাজ করা সহযোগী ডেভেলপারদের সাহায্য করার আশায় ধাপগুলো অতিক্রম করব।

1. একটি বিটম্যাপ ফন্ট তৈরি করুন (.png + .fnt)

হায়ারো ইন্টারফেস

Hiero আউটপুট (বিটম্যাপ PNG এবং .fnt ফাইল)

Hiero হল একটি বিটম্যাপ ফন্ট প্যাকিং টুল যা জাভা দিয়ে চলে। Hiero ডকুমেন্টেশন সত্যিই ব্যাখ্যা করে না কিভাবে একটি জটিল বিল্ড প্রক্রিয়ার মধ্য দিয়ে না গিয়ে এটি চালানো যায়। প্রথমে, জাভা ইনস্টল করুন যদি আপনি ইতিমধ্যে না থাকেন। তারপর, runnable-hiero.jar-এ ডাবল-ক্লিক করলে Hiero না খুললে, কনসোলে এই কমান্ড দিয়ে এটি চালানোর চেষ্টা করুন:

java -jar runnable-hiero.jar

একবার Hiero চালু হলে, একটি .ttf বা .otf ডেস্কটপ ফন্ট খুলুন, আপনি যে অতিরিক্ত অক্ষরগুলি অন্তর্ভুক্ত করতে চান তা লিখুন, প্রভাবগুলি সক্ষম করতে জাভাতে রেন্ডারিং পরিবর্তন করুন, আকার বাড়ান যাতে আপনার অক্ষরগুলি সম্পূর্ণ গ্লাইফ ক্যাশে স্কোয়ার পূরণ করে, একটি দূরত্ব ক্ষেত্র যোগ করুন প্রভাব, দূরত্ব ক্ষেত্রের স্কেল এবং বিস্তার সামঞ্জস্য করুন। স্কেল মান একটি রেজোলিউশন মত. এটি যত বেশি হবে, তত কম ঝাপসা হবে, কিন্তু প্রিভিউ রেন্ডার করতে Hiero-এর জন্য তত বেশি সময় লাগবে। তারপর আপনার বিটম্যাপ ফন্ট সংরক্ষণ করুন. এটি একটি .png ইমেজ এবং একটি AngelCode .fnt ফন্ট বর্ণনা ফাইল সমন্বিত একটি বিটম্যাপ ফন্ট তৈরি করে।

2. AngelCode কে JSON এ রূপান্তর করুন

এখন যেহেতু বিটম্যাপ ফন্ট তৈরি হয়েছে, আমাদের এটিকে আমাদের জাভাস্ক্রিপ্ট অ্যাপে ম্যাট ডেসলরিয়ার্সের লোড-বিএমফন্ট এনপিএম প্যাকেজ দিয়ে লোড করতে হবে।

আমরা load-bmfont ব্রাউজার করতে পারতাম এবং সামনের প্রান্তে ব্যবহার করতে পারতাম, কিন্তু পরিবর্তে আমরা Hiero এর AngelCode .fnt কে একটি .json ফাইলে রূপান্তর এবং সংরক্ষণ করতে নোডের সাথে load-bmfont.js চালাতে যাচ্ছি:

npm install
node load-bmfont.js

আউটপুট JSON এর উদাহরণ

এখন আমরা লোড-বিএমফন্ট বাইপাস করতে পারি এবং .json ফন্ট ফাইলে শুধুমাত্র একটি XHR (XMLHttpRequest) অনুরোধ করতে পারি।

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-text.js-কে ব্যবহারযোগ্য তিন-bmfont-text-bundle.js- এ ব্রাউজার করতে যাচ্ছি।

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

4. SDF শেডার

স্বাক্ষরিত দূরত্ব ক্ষেত্র শেডারের প্রভাব দেখতে vr.with.in/archive/text-sdf-bitmap/- এ afwidth এবং থ্রেশহোল্ড স্লাইডারগুলি সামঞ্জস্য করুন৷

5. ব্যবহার

সুবিধার জন্য, আমি ব্রাউজারকৃত থ্রি-বিএমফন্ট-টেক্সটের জন্য একটি টেক্সটবিটম্যাপ র্যাপার ক্লাস তৈরি করেছি।

টেক্সট-এসডিএফ-বিটম্যাপ কাজ করছে

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

.json ফন্ট ফাইলের জন্য একটি XHR অনুরোধ তৈরি করুন এবং কলব্যাকে একটি পাঠ্য বস্তু তৈরি করুন:

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 টেক্সট-bitmap.js-এ THREE.TextureLoader দিয়ে লোড করা হয়েছে

টেক্সটবিটম্যাপে একটি মাউস, ক্যামেরা বা হ্যান্ড ট্র্যাক করা মোশন কন্ট্রোলার যেমন ওকুলাস টাচ বা ভিভ কন্ট্রোলারের মাধ্যমে three.js রেকাস্ট ইন্টারঅ্যাকশনের জন্য একটি অদৃশ্য হিটবক্স অন্তর্ভুক্ত রয়েছে। আপনি যখন পাঠ্য বিকল্পগুলি পরিবর্তন করেন তখন হিটবক্সের আকার স্বয়ংক্রিয়ভাবে আপডেট হয়৷

Bmtext.group three.js দৃশ্যে যোগ করা হয়েছে। আপনি যদি বাচ্চাদের / অবজেক্ট3ডি-তে অ্যাক্সেস করতে চান তবে পাঠ্যটির দৃশ্যের গ্রাফটি এরকম দেখায়:

6. json Unminify করুন এবং xoffsets পরিবর্তন করুন

যদি আপনার কার্নিং বন্ধ হয়ে যায়, তাহলে আপনাকে json-এ xoffsets সম্পাদনা করতে হতে পারে। ফাইলের একটি আনমিনিফাইড সংস্করণ পেতে Jsbeautifier.org- এ json পেস্ট করুন।

xoffset মূলত একটি অক্ষরের জন্য বিশ্বব্যাপী কার্নিং। কার্নিং দুটি নির্দিষ্ট অক্ষরের জন্য যা একে অপরের পাশে প্রদর্শিত হয়। কার্নিং অ্যারেতে ডিফল্ট মানগুলি আসলে কোনও পার্থক্য করে না এবং এটি সম্পাদনা করা খুব ক্লান্তিকর হবে, তাই আপনি json এর ফাইলের আকার হ্রাস করতে সেই অ্যারেটি খালি করতে পারেন। তারপর কার্নিংয়ের জন্য xoffsets সম্পাদনা করুন।

প্রথমে আপনাকে বের করতে হবে কোন অক্ষরগুলি json-এ কোন char ID দিয়ে যায়। তিন-bmfont-text-bundle.js- এ, 240 লাইনের পরে console.log সন্নিবেশ করুন:

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

তারপর https://vr.with.in/archive/text-sdf-bitmap/- এ dat.gui টেক্সট ফিল্ডে টাইপ করুন এবং একটি অক্ষরের সংশ্লিষ্ট আইডি খুঁজে পেতে কনসোল চেক করুন।

উদাহরণস্বরূপ, আমাদের বিটম্যাপ ফন্টে, "j" ধারাবাহিকভাবে ডানদিকে অনেক দূরে। এর char ID হল 106। সুতরাং json-এ "id": 106 খুঁজুন এবং এর xoffset -1 থেকে -10 এ পরিবর্তন করুন।

7. লেআউট

আপনার যদি একাধিক ব্লকের টেক্সট থাকে এবং আপনি এটিকে এইচটিএমএল-এর মতো উপরে থেকে নীচে প্রবাহিত করতে চান, তাহলে সবকিছুকে ম্যানুয়ালি অবস্থান করতে হবে, সিএসএসের সাথে প্রতিটি ডোম উপাদানের পরম অবস্থানের অনুরূপ। আপনি CSS এ এটি করার কল্পনা করতে পারেন?

    * { position: absolute; }

3D-এ টেক্সট লেআউট এমনই। বিশদ দৃশ্যে: শিরোনাম, লেখক, বর্ণনা এবং সময়কাল প্রতিটি তাদের নিজস্ব শৈলী, রঙ, স্কেল ইত্যাদি সহ একটি নতুন টেক্সটবিটম্যাপ অবজেক্ট।

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;

এটি অনুমান করে যে প্রতিটি টেক্সটবিটম্যাপ গ্রুপের স্থানীয় উত্সটি টেক্সটবিটম্যাপ জালের শীর্ষের সাথে উল্লম্বভাবে সারিবদ্ধ ( টেক্সট-bitmap.js আপডেটে কেন্দ্রীভূত দেখুন)। আপনি যদি পরবর্তীতে এই বস্তুগুলির যেকোনোটির জন্য পাঠ্য পরিবর্তন করেন এবং সেই বস্তুর উচ্চতা পরিবর্তিত হয়, তাহলে আপনাকে সেই অবস্থানগুলি পুনরায় গণনা করতে হবে। এখানে, শুধুমাত্র পাঠ্যের y-অবস্থান পরিবর্তন করা হয়েছে, তবে 3D-তে কাজ করার একটি সুযোগ হল আমরা টেক্সটটিকে z-দিক দিয়ে ঠেলে দিতে এবং টানতে পারি, সেইসাথে x, y এবং z অক্ষের চারপাশে ঘোরাতে পারি।

উপসংহার

WebVR-এ টেক্সট এবং লেআউটকে এইচটিএমএল এবং সিএসএসের মতো সহজ এবং ব্যাপকভাবে ব্যবহার করার আগে অনেক দূর যেতে হবে। কিন্তু কাজের সমাধান বিদ্যমান এবং আপনি একটি ঐতিহ্যবাহী HTML ওয়েব পৃষ্ঠার চেয়ে WebVR-এ অনেক বেশি করতে পারেন। WebVR আজ বিদ্যমান। আগামীকাল সম্ভবত আরও ভাল সরঞ্জাম থাকবে। ততক্ষণ পর্যন্ত, এটি চেষ্টা করে দেখুন এবং পরীক্ষা করুন। একটি সর্বব্যাপী ফ্রেমওয়ার্ক ছাড়া বিকাশ করা আরও অনন্য প্রকল্পের দিকে নিয়ে যায় এবং এটি উত্তেজনাপূর্ণ।