হবিট অভিজ্ঞতা

মোবাইল WebGL-এর মাধ্যমে মধ্য-পৃথিবীকে প্রাণবন্ত করা

Daniel Isaksson

ঐতিহাসিকভাবে, মোবাইল এবং ট্যাবলেটগুলিতে ইন্টারেক্টিভ, ওয়েব-ভিত্তিক, মাল্টিমিডিয়া-ভারী অভিজ্ঞতা আনা একটি চ্যালেঞ্জ। প্রধান সীমাবদ্ধতাগুলি হল কর্মক্ষমতা, API প্রাপ্যতা, ডিভাইসগুলিতে HTML5 অডিওতে সীমাবদ্ধতা এবং বিরামহীন ইনলাইন ভিডিও প্লেব্যাকের অভাব।

এই বছরের শুরুর দিকে আমরা নতুন Hobbit সিনেমা, The Hobbit: The Desolation of Smaug- এর জন্য একটি মোবাইল-প্রথম ওয়েব অভিজ্ঞতা তৈরি করতে Google এবং Warner Bros. এর বন্ধুদের সাথে একটি প্রকল্প শুরু করেছি। একটি মাল্টিমিডিয়া-হেভি মোবাইল ক্রোম এক্সপেরিমেন্ট তৈরি করা সত্যিই একটি অনুপ্রেরণাদায়ক এবং চ্যালেঞ্জিং কাজ।

অভিজ্ঞতাটি নতুন Nexus ডিভাইসে Android-এর জন্য Chrome-এর জন্য অপ্টিমাইজ করা হয়েছে যেখানে আমরা এখন WebGL এবং Web Audio-তে অ্যাক্সেস পেয়েছি। তবে অভিজ্ঞতার একটি বড় অংশ নন-ওয়েবজিএল ডিভাইস এবং ব্রাউজারগুলিতে অ্যাক্সেসযোগ্য এবং সেইসাথে হার্ডওয়্যার-এক্সিলারেটেড কম্পোজিটিং এবং CSS অ্যানিমেশনের জন্য ধন্যবাদ।

পুরো অভিজ্ঞতাটি মধ্য-পৃথিবীর একটি মানচিত্র এবং হবিট চলচ্চিত্রের অবস্থান এবং চরিত্রগুলির উপর ভিত্তি করে। WebGL ব্যবহার করা আমাদের পক্ষে নাটকীয়তা এবং Hobbit ট্রিলজির সমৃদ্ধ বিশ্ব অন্বেষণ করা এবং ব্যবহারকারীদের অভিজ্ঞতা নিয়ন্ত্রণ করা সম্ভব করেছে।

মোবাইল ডিভাইসে WebGL-এর চ্যালেঞ্জ

প্রথমত, "মোবাইল ডিভাইস" শব্দটি খুবই বিস্তৃত। ডিভাইসের জন্য চশমা অনেক পরিবর্তিত হয়. তাই একজন বিকাশকারী হিসাবে আপনাকে সিদ্ধান্ত নিতে হবে যে আপনি কম জটিল অভিজ্ঞতা সহ আরও ডিভাইস সমর্থন করতে চান বা, যেমনটি আমরা এই ক্ষেত্রে করেছি, সমর্থিত ডিভাইসগুলিকে আরও বাস্তবসম্মত 3D বিশ্ব প্রদর্শন করতে সক্ষম তাদের মধ্যে সীমাবদ্ধ রাখুন। "Journey through Middle-earth"-এর জন্য আমরা Nexus ডিভাইস এবং পাঁচটি জনপ্রিয় অ্যান্ড্রয়েড স্মার্টফোনে ফোকাস করেছি।

পরীক্ষায়, আমরা তিন.js ব্যবহার করেছি যেমনটি আমরা আমাদের আগের কিছু WebGL প্রকল্পের জন্য করেছি। আমরা ট্রলশো গেমের একটি প্রাথমিক সংস্করণ তৈরি করে বাস্তবায়ন শুরু করেছি যা Nexus 10 ট্যাবলেটে ভাল চলবে। ডিভাইসে কিছু প্রাথমিক পরীক্ষার পর, আমাদের মনে অপ্টিমাইজেশানের একটি তালিকা ছিল যা দেখতে অনেকটা আমরা কম-স্পেকের ল্যাপটপের জন্য যা ব্যবহার করি তার মতো:

• কম পলি মডেল ব্যবহার করুন
• কম রেজোলিউশন টেক্সচার ব্যবহার করুন
• জ্যামিতি একত্রিত করে যতটা সম্ভব ড্রকলের সংখ্যা কমিয়ে দিন
• উপকরণ এবং আলো সরলীকরণ
• পোস্টের প্রভাবগুলি সরান এবং অ্যান্টিলিয়াসিং বন্ধ করুন
• জাভাস্ক্রিপ্ট কর্মক্ষমতা অপ্টিমাইজ করুন
• WebGL ক্যানভাসকে অর্ধেক আকারে রেন্ডার করুন এবং CSS দিয়ে স্কেল করুন

আমাদের গেমের প্রথম রুক্ষ সংস্করণে এই অপ্টিমাইজেশনগুলি প্রয়োগ করার পরে, আমাদের 30FPS এর একটি স্থির ফ্রেম রেট ছিল যা আমরা খুশি ছিলাম৷ সেই সময়ে আমাদের লক্ষ্য ছিল ফ্রেমের হারকে নেতিবাচকভাবে প্রভাবিত না করে ভিজ্যুয়াল উন্নত করা। আমরা অনেক কৌশল চেষ্টা করেছি: কিছু কার্যক্ষমতার উপর সত্যিই প্রভাব ফেলেছে; আমরা আশা করতে চাই যে কিছু হিসাবে বড় প্রভাব ছিল না.

কম পলি মডেল ব্যবহার করুন

মডেল দিয়ে শুরু করা যাক। লো-পলি মডেল ব্যবহার করা অবশ্যই ডাউনলোডের সময়কে সাহায্য করে, সেইসাথে দৃশ্যটি শুরু করতে যে সময় লাগে। আমরা দেখেছি যে আমরা কার্যক্ষমতাকে বেশি প্রভাবিত না করে জটিলতাকে অনেক বেশি বাড়িয়ে দিতে পারি। এই গেমটিতে আমরা যে ট্রল মডেলগুলি ব্যবহার করি তা প্রায় 5K মুখ এবং দৃশ্যটি প্রায় 40K মুখ এবং এটি ভাল কাজ করে।

অভিজ্ঞতায় অন্য (এখনও প্রকাশিত হয়নি) অবস্থানের জন্য আমরা বহুভুজ হ্রাস করার কার্যক্ষমতার উপর আরও প্রভাব দেখেছি। সেই ক্ষেত্রে আমরা ডেস্কটপের জন্য লোড করা বস্তুর চেয়ে মোবাইল ডিভাইসের জন্য নিম্ন-বহুভুজ বস্তু লোড করেছি। 3D মডেলের বিভিন্ন সেট তৈরি করার জন্য কিছু অতিরিক্ত কাজের প্রয়োজন এবং সবসময় প্রয়োজন হয় না। এটি আসলেই নির্ভর করে আপনার মডেলগুলি শুরু করতে কতটা জটিল তার উপর।

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

কম রেজোলিউশন টেক্সচার ব্যবহার করুন

মোবাইল ডিভাইসে লোডের সময় কমাতে, আমরা ডেস্কটপের টেক্সচারের অর্ধেক আকারের বিভিন্ন টেক্সচার লোড করতে বেছে নিয়েছি। দেখা যাচ্ছে যে সমস্ত ডিভাইস 2048x2048px পর্যন্ত টেক্সচারের আকার পরিচালনা করতে পারে এবং বেশিরভাগ 4096x4096px পরিচালনা করতে পারে। জিপিইউতে আপলোড হয়ে গেলে স্বতন্ত্র টেক্সচারে টেক্সচার লুকআপ কোনো সমস্যা বলে মনে হয় না। টেক্সচারের মোট আকার অবশ্যই GPU মেমরিতে ফিট করা উচিত যাতে টেক্সচারগুলি ক্রমাগত আপ- এবং ডাউনলোড না হয়, তবে এটি সম্ভবত বেশিরভাগ ওয়েব-অভিজ্ঞতার জন্য একটি বড় সমস্যা নয়। যাইহোক, ড্রকলের সংখ্যা কমাতে যতটা সম্ভব কম স্প্রিটশিটে টেক্সচার একত্রিত করা গুরুত্বপূর্ণ - এটি এমন কিছু যা মোবাইল ডিভাইসে কর্মক্ষমতার উপর একটি বড় প্রভাব ফেলে।

উপকরণ এবং আলো সরলীকরণ

উপকরণের পছন্দও কার্যক্ষমতাকে ব্যাপকভাবে প্রভাবিত করতে পারে এবং মোবাইলে বুদ্ধিমানের সাথে পরিচালনা করতে হবে। MeshLambertMaterial (প্রতি টেক্সেল লাইট ক্যালকুলেশন) এর পরিবর্তে three.js-এ MeshPhongMaterial (প্রতি ভার্টেক্স লাইট ক্যালকুলেশন) ব্যবহার করা একটি জিনিস যা আমরা পারফরম্যান্সকে অপ্টিমাইজ করতে ব্যবহার করি। মূলত আমরা যতটা সম্ভব কম আলোর গণনা সহ সাধারণ শেডার হিসাবে ব্যবহার করার চেষ্টা করেছি।

আপনি যে উপকরণগুলি ব্যবহার করেন তা একটি দৃশ্যের কর্মক্ষমতাকে কীভাবে প্রভাবিত করে তা দেখতে, আপনি একটি MeshBasicMaterial দিয়ে দৃশ্যের উপকরণগুলিকে ওভাররাইড করতে পারেন৷ এটি আপনাকে একটি ভাল তুলনা দেবে।

scene.overrideMaterial = new THREE.MeshBasicMaterial({color:0x333333, wireframe:true});

জাভাস্ক্রিপ্ট কর্মক্ষমতা অপ্টিমাইজ করুন

মোবাইলের জন্য গেম তৈরি করার সময়, GPU সর্বদা সবচেয়ে বড় বাধা নয়। সিপিইউ, বিশেষ করে পদার্থবিদ্যা এবং কঙ্কাল অ্যানিমেশনে প্রচুর সময় ব্যয় করা হয়। একটি কৌশল যা কখনও কখনও সাহায্য করে, সিমুলেশনের উপর নির্ভর করে, শুধুমাত্র প্রতিটি ফ্রেমে এই ব্যয়বহুল গণনাগুলি চালানো। অবজেক্ট পুলিং, আবর্জনা সংগ্রহ এবং অবজেক্ট তৈরি করার ক্ষেত্রে আপনি উপলব্ধ জাভাস্ক্রিপ্ট অপ্টিমাইজেশান কৌশলগুলিও ব্যবহার করতে পারেন।

গেমের সময় আবর্জনা সংগ্রহের "হেঁচকি" এড়াতে নতুন অবজেক্ট তৈরি করার পরিবর্তে লুপগুলিতে পূর্ব-বরাদ্দ করা বস্তু আপডেট করা একটি গুরুত্বপূর্ণ পদক্ষেপ।

উদাহরণস্বরূপ, এই মত কোড বিবেচনা করুন:

var currentPos = new THREE.Vector3();

function gameLoop() {
  currentPos = new THREE.Vector3(0+offsetX,100,0);
}

এই লুপের একটি উন্নত সংস্করণ নতুন বস্তু তৈরি করা এড়িয়ে যায় যা অবশ্যই আবর্জনা সংগ্রহ করতে হবে:

var originPos = new THREE.Vector3(0,100,0);
var currentPos = new THREE.Vector3();
function gameLoop() {
  currentPos.copy(originPos).x += offsetX;
  //or
  currentPos.set(originPos.x+offsetX,originPos.y,originPos.z);
}

যতটা সম্ভব, ইভেন্ট হ্যান্ডলারদের শুধুমাত্র বৈশিষ্ট্যগুলি আপডেট করা উচিত এবং requestAnimationFrame রেন্ডার-লুপ হ্যান্ডেলকে পর্যায় আপডেট করতে দিন।

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

WebGL ক্যানভাসকে অর্ধেক আকারে রেন্ডার করুন এবং CSS দিয়ে স্কেল করুন

WebGL ক্যানভাসের আকার সম্ভবত একক সবচেয়ে কার্যকরী প্যারামিটার যা আপনি পারফরম্যান্স অপ্টিমাইজ করতে টুইক করতে পারেন। আপনার 3D দৃশ্য আঁকতে আপনি যত বড় ক্যানভাস ব্যবহার করবেন, প্রতিটি ফ্রেমে তত বেশি পিক্সেল আঁকতে হবে। এটি অবশ্যই পারফরম্যান্সকে প্রভাবিত করে৷ Nexus 10 এর উচ্চ-ঘনত্ব 2560x1600 পিক্সেল ডিসপ্লে কম-ঘনত্বের ট্যাবলেট হিসাবে পিক্সেলের সংখ্যার 4 গুণ পুশ করতে হবে৷ মোবাইলের জন্য এটি অপ্টিমাইজ করার জন্য আমরা একটি কৌশল ব্যবহার করি যেখানে আমরা ক্যানভাসকে অর্ধেক আকারে (50%) সেট করি এবং তারপরে হার্ডওয়্যার-অ্যাক্সিলারেটেড CSS 3D ট্রান্সফর্মের সাথে এটিকে তার ইচ্ছাকৃত আকার (100%) পর্যন্ত স্কেল করি। এর নেতিবাচক দিক হল একটি পিক্সেলেড ইমেজ যেখানে পাতলা রেখাগুলি একটি সমস্যা হয়ে উঠতে পারে কিন্তু একটি উচ্চ-রেজোলের স্ক্রিনে প্রভাবটি খারাপ নয়। এটা একেবারে অতিরিক্ত কর্মক্ষমতা মূল্য.

বিল্ডিং ব্লক হিসাবে অবজেক্ট

ডল গুলদুর দুর্গের বড় গোলকধাঁধা এবং রিভেনডেলের কখনও শেষ না হওয়া উপত্যকা তৈরি করতে সক্ষম হওয়ার জন্য আমরা বিল্ডিং ব্লক 3D মডেলের একটি সেট তৈরি করেছি যা আমরা পুনরায় ব্যবহার করি। বস্তুর পুনঃব্যবহার আমাদের নিশ্চিত করতে দেয় যে অবজেক্টগুলি তাৎক্ষণিক এবং আপলোড করা হয়েছে অভিজ্ঞতার শুরুতে, এবং এর মাঝখানে নয়।

রিভেনডেল-এ আমাদের অনেকগুলি গ্রাউন্ড সেকশন আছে যেগুলিকে আমরা ক্রমাগত Z-গভীরতায় স্থানান্তর করি যখন ব্যবহারকারীর যাত্রা অগ্রসর হয়। ব্যবহারকারী বিভাগগুলি পাস করার সাথে সাথে, এইগুলি অনেক দূরত্বে পুনঃস্থাপন করা হয়।

দোল গুলদুর দুর্গের জন্য আমরা চেয়েছিলাম প্রতিটি খেলার জন্য গোলকধাঁধাটি পুনরুত্থিত হোক। এটি করার জন্য আমরা একটি স্ক্রিপ্ট তৈরি করেছি যা গোলকধাঁধাটিকে পুনরায় তৈরি করে।

শুরু থেকে পুরো কাঠামোটিকে একটি বড় জালের মধ্যে একত্রিত করার ফলে একটি খুব বড় দৃশ্য এবং খারাপ পারফরম্যান্স দেখা দেয়। এটি মোকাবেলা করার জন্য, আমরা বিল্ডিং ব্লকগুলি দৃশ্যমান কিনা তার উপর নির্ভর করে লুকিয়ে রাখার এবং দেখানোর সিদ্ধান্ত নিয়েছি। শুরু থেকেই, 2D রেকাস্টার স্ক্রিপ্ট ব্যবহার করার বিষয়ে আমাদের ধারণা ছিল কিন্তু শেষ পর্যন্ত আমরা বিল্ট-ইন three.js frustrum culling ব্যবহার করেছি। প্লেয়ার যে "বিপদ" এর মুখোমুখি হচ্ছে তার উপর জুম ইন করতে আমরা রেকাস্টার স্ক্রিপ্টটি পুনরায় ব্যবহার করেছি।

হ্যান্ডেল করার জন্য পরবর্তী বড় জিনিস হল ব্যবহারকারীর মিথস্ক্রিয়া। ডেস্কটপে আপনার মাউস এবং কীবোর্ড ইনপুট আছে; মোবাইল ডিভাইসে আপনার ব্যবহারকারীরা স্পর্শ, সোয়াইপ, চিমটি, ডিভাইস অভিযোজন ইত্যাদির সাথে যোগাযোগ করে।

মোবাইল ওয়েব অভিজ্ঞতায় স্পর্শ মিথস্ক্রিয়া ব্যবহার করে

স্পর্শ সমর্থন যোগ করা কঠিন নয়। বিষয় সম্পর্কে পড়ার জন্য মহান নিবন্ধ আছে. কিন্তু কিছু ছোট জিনিস আছে যা এটিকে আরও জটিল করে তুলতে পারে।

আপনি স্পর্শ এবং মাউস উভয় থাকতে পারে. Chromebook পিক্সেল এবং অন্যান্য স্পর্শ সক্ষম ল্যাপটপে মাউস এবং স্পর্শ উভয়ই সমর্থন রয়েছে৷ একটি সাধারণ ভুল হল ডিভাইসটি স্পর্শ সক্ষম কিনা তা পরীক্ষা করা এবং তারপর শুধুমাত্র স্পর্শ ইভেন্ট শ্রোতাদের যোগ করুন এবং মাউসের জন্য কিছুই নয়।

ইভেন্ট শ্রোতাদের মধ্যে রেন্ডারিং আপডেট করবেন না। পরিবর্তে ভেরিয়েবলে স্পর্শ ইভেন্টগুলি সংরক্ষণ করুন এবং অনুরোধ অ্যানিমেশনফ্রেম রেন্ডার লুপে তাদের প্রতিক্রিয়া দিন। এটি কর্মক্ষমতা উন্নত করে এবং বিরোধপূর্ণ ঘটনাগুলিকে একত্রিত করে। নিশ্চিত করুন যে আপনি ইভেন্ট শ্রোতাদের মধ্যে নতুন অবজেক্ট তৈরি করার পরিবর্তে বস্তুগুলি পুনরায় ব্যবহার করছেন৷

মনে রাখবেন এটি মাল্টিটাচ: event.touches হল সমস্ত টাচের একটি অ্যারে। কিছু কিছু ক্ষেত্রে এর পরিবর্তে event.targetTouches বা event.changedTouches দেখতে আরও আকর্ষণীয় এবং শুধুমাত্র আপনার আগ্রহের স্পর্শগুলিতে প্রতিক্রিয়া দেখায়৷ সোয়াইপগুলি থেকে ট্যাপগুলিকে আলাদা করতে আমরা স্পর্শটি সরানো হয়েছে কিনা তা পরীক্ষা করার আগে আমরা একটি বিলম্ব ব্যবহার করি (সোয়াইপ) বা কিনা৷ এটা এখনও (ট্যাপ) একটি চিমটি পেতে আমরা দুটি প্রাথমিক স্পর্শের মধ্যে দূরত্ব পরিমাপ করি এবং সময়ের সাথে সাথে এটি কীভাবে পরিবর্তিত হয়।

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

ছোট স্ক্রীন এবং টাচস্ক্রিনগুলির সাথে কাজ করার সময় আপনি দেখতে পাবেন যে ব্যবহারকারীর আঙ্গুল এবং UI মিথস্ক্রিয়া গ্রাফিক্স প্রায়শই আপনি যা দেখাতে চান তার পথে থাকে৷ এটি এমন কিছু যা আমরা নেটিভ অ্যাপ ডিজাইন করার সময় অভ্যস্ত কিন্তু ওয়েব অভিজ্ঞতার সাথে আগে চিন্তা করতে হয়নি। এটি ডিজাইনার এবং ইউএক্স ডিজাইনারদের জন্য একটি বাস্তব চ্যালেঞ্জ।

সারসংক্ষেপ

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

মোবাইল ডিভাইসগুলিকে টার্গেট করার মানে হল যে আপনাকে স্পর্শ মিথস্ক্রিয়া সম্পর্কে চিন্তা করতে অভ্যস্ত হতে হবে এবং এটি শুধুমাত্র পিক্সেলের আকার সম্পর্কে নয় - এটি স্ক্রিনের শারীরিক আকারও। কিছু কিছু ক্ষেত্রে আসলে কী ঘটছে তা দেখার জন্য আমাদের 3D ক্যামেরাকে আরও কাছে নিয়ে যেতে হয়েছিল।

পরীক্ষাটি চালু হয়েছে এবং এটি একটি দুর্দান্ত যাত্রা হয়েছে। আপনি এটা উপভোগ করেন!

এটা চেষ্টা করে দেখতে চান? মধ্য-পৃথিবীতে আপনার নিজস্ব যাত্রা নিন।