Google-এর ডিভাইস এবং পরিষেবা বিপণন (DSM) সংস্থা বিস্তৃত পণ্যগুলির জন্য বাজারে যাওয়ার কৌশলগুলি তত্ত্বাবধান করে: স্মার্ট ফোন, ঘড়ি, ইয়ারবাড, ট্যাবলেট, স্মার্ট হোম ডিভাইস এবং প্রাসঙ্গিক সাবস্ক্রিপশন, যার সবকটিই Google-এর মাধ্যমে উপলব্ধ। স্টোর এবং বিশ্বব্যাপী তৃতীয় পক্ষের বিক্রেতা। লোকেরা অনলাইনে এবং শারীরিক খুচরা দোকানে এই পণ্যগুলি সম্পর্কে শিখে।
এই টিমের জন্য একটি ধ্রুবক চ্যালেঞ্জ হল তাদের ভোক্তা এবং খুচরা বিক্রেতাদেরকে Google হার্ডওয়্যার ইকোসিস্টেম এবং উন্নত AI অভিজ্ঞতার ব্যবহার এবং সুবিধা সম্পর্কে শিক্ষিত করা। ভোক্তাদের পণ্য এবং কার্যকারিতা বুঝতে আরও ভালভাবে সাহায্য করার জন্য, DSM টিম এই চ্যালেঞ্জগুলির অনেকগুলিকে মোকাবেলা করার জন্য উন্নত ওয়েব প্রযুক্তি সহ একটি 3D ভার্চুয়াল স্থান তৈরি করেছে৷ এই কেস স্টাডিতে আপনি জানতে পারবেন কীভাবে দলটি গ্রাহকদের জন্য আরও নিমগ্ন অভিজ্ঞতা তৈরি করেছে, এই নতুন অভিজ্ঞতাগুলি চারগুণ দ্রুত এবং ঐতিহ্যগত ডিজিটাল সম্পদের অর্ধেক খরচে চালু করেছে।
চ্যালেঞ্জ: পণ্য শিক্ষা
আন্তঃঅপারেবিলিটি এবং এআই-এর মতো বৈশিষ্ট্যগুলির সুবিধার বিষয়ে Google হার্ডওয়্যার পণ্যগুলিতে নতুন যারা বিক্রয় সহযোগী এবং গ্রাহকদের শিক্ষিত করা ব্যয়বহুল এবং কঠিন। প্রথাগত পণ্য শিক্ষার কৌশলগুলি ডিজিটাল সামগ্রীর উপর নির্ভর করে যা শারীরিক পণ্য ব্যবহার করে তৈরি করা হয়, তারপরে ডিজিটাল লার্নিং প্ল্যাটফর্মে হোস্ট করা হয়। এই লার্নিং প্ল্যাটফর্মগুলি পণ্যের প্রযুক্তিগত বৈশিষ্ট্য, ছবি এবং ভিডিও সরবরাহ করে, তবে শারীরিক বা সংযুক্ত পণ্যগুলিতে অ্যাক্সেস নয়।
ভিডিওর মতো শেখার বিষয়বস্তু তৈরি করা ব্যয়বহুল, বিশ্বব্যাপী বাজারের জন্য স্থানীয়করণ করা জটিল এবং পণ্যগুলির মধ্যে পুনরায় ব্যবহার করা প্রায় অসম্ভব। প্রাথমিক সম্পদ তৈরি করতে কাস্টিং, ওয়ারড্রোব, লোকেশন স্কাউটিং, লোকেশন ফি, স্টুডিও ফি, ফিল্ম ক্রু এবং পোস্ট প্রোডাকশন কাজের জন্য বাজেট প্রয়োজন। উৎপাদন খরচ এবং বিতরণযোগ্য স্থানীয়করণের জন্যও হিসাব করতে হবে; সম্পদ, অবস্থান, পণ্য, অনুলিপি, এবং প্রতিভা পরিবর্তন করা বিশেষ করে প্রথাগত বিপণনের জন্য স্কেলে পরিচালনা করা চ্যালেঞ্জিং। এবং যখন আপনি বিবেচনা করেন যে সমর্থিত বেশিরভাগ পণ্যের বৈশিষ্ট্যগুলি প্রতি কয়েক মাসে কমে যায়, তখন এই সম্পদগুলি শেষ হওয়ার সময় ইতিমধ্যেই পুরানো হয়ে গেছে।
পণ্যের তথ্য শেয়ার করার আরও ভালো উপায় অন্বেষণ করা
পণ্যের তথ্য শেয়ার করার আরও ভালো উপায় খোঁজার চেষ্টা করে, DSM টিম একটি অ্যাপে VR/AR অভিজ্ঞতা নিয়ে পরীক্ষা-নিরীক্ষা করেছে। বিক্রয়ের পয়েন্টগুলিতে শক্তিশালী ব্যস্ততা এবং বাস্কেটের আকার বৃদ্ধি উভয়ের সাথে ফলাফলগুলি আশাব্যঞ্জক ছিল। যাইহোক, অ্যাপ ডাউনলোডগুলি বিক্রয় সহযোগী এবং গ্রাহক উভয়ের জন্য প্রবেশের ক্ষেত্রে একটি উল্লেখযোগ্য বাধা ছিল এবং একটি অ্যাপে অভিজ্ঞতা সীমিত করার অর্থ হল এটি store.google.com এর মতো অন্যান্য প্রথম বা তৃতীয় পক্ষের বৈশিষ্ট্যগুলিতে এম্বেডযোগ্য নয়৷
<model-viewer> সহ হালকা সমাধান
পণ্য শিক্ষার জন্য 3D পণ্য মডেলের সাফল্য দেখে, দলটি এই পদ্ধতিটি ওয়েবে আনার সিদ্ধান্ত নিয়েছে। এটি সম্পন্ন করার একটি উপায় হল পৃথক পণ্যগুলির সাথে 3D অভিজ্ঞতা তৈরি করতে <model-viewer> ব্যবহার করা।
<model-viewer> হল একটি ওয়েব কম্পোনেন্ট, যা আপনাকে একটি ওয়েব পৃষ্ঠায় ঘোষণামূলকভাবে একটি 3D মডেল যোগ করতে দেয়, আপনার নিজের সাইটে মডেলটি হোস্ট করার সময়। আপনি Google স্টোরের পিক্সেল ফোল্ড পৃষ্ঠায় এটি দেখতে পাবেন, যেখানে <model-viewer> ব্যবহারকারীদের বিভিন্ন ভাঁজ করা অবস্থান সহ যেকোনো কোণ থেকে পিক্সেল ফোল্ড দেখতে দেয়। ক্যামেরা অ্যাঙ্গেল এবং ইন্টারেক্টিভ কালার ভেরিয়েন্টের মাধ্যমে গল্প বলার বোতাম সহ বাকি HTML UX-এ 3D মডেলকে একীভূত করা সহজ ছিল। <model-viewer> এর মাধ্যমে, আপনি আপনার ব্যবহারকারীদের যে কোনো ধরনের অভিজ্ঞতা দিতে পারেন যা আপনি স্বপ্ন দেখতে পারেন।
3D মডেল তৈরি করা হচ্ছে
একটি 3D ভার্চুয়াল অভিজ্ঞতা বিকাশের প্রথম ধাপ হল 3D পণ্য মডেল তৈরি করা। DSM টিম তাদের 3D মডেল CAD এ তৈরি করেছে। পণ্য CAD উৎপাদনকারী ডিজাইনারদের সাথে ঘনিষ্ঠভাবে কাজ করে, DSM টিম কম পলি রেন্ডার রপ্তানি করতে সক্ষম হয়েছিল যা ওয়েবের জন্য অপ্টিমাইজ করা যেতে পারে। এটি অর্জনের জন্য তারা ব্যবহৃত কিছু সেরা অনুশীলনগুলি নিম্নলিখিত ক্ষেত্রগুলিতে ছিল৷
- জ্যামিতি:
- জ্যামিতি (আকৃতি এবং স্কেল) প্রতিটি কোণ থেকে নির্ভুল করার দিকে মনোনিবেশ করুন।
- বেভেলিং প্রান্তের জন্য সাধারণ মানচিত্র ব্যবহার করা এড়িয়ে চলুন।
- পৃথক জ্যামিতি হিসাবে decals তৈরি করুন.
- রং এবং উপকরণ:
- লক্ষ্য: দৈহিক বৈশিষ্ট্যের ধারাবাহিক চাক্ষুষ উপস্থাপনা।
- রিয়েল-টাইম আলোর গতিবিদ্যা বিবেচনা করুন।
- প্রতিটি জালের জন্য আলাদা টেক্সচার সেট এবং উপকরণ ব্যবহার করুন (অস্বচ্ছ, স্বচ্ছ, ডিকাল)।
- যদি আরও সামঞ্জস্যের প্রয়োজন হয় তবে মূল CAD ডিজাইনারদের সাথে ডিজাইনগুলিতে পুনরাবৃত্তি করুন।
- ফাইলের আকার:
- GLB ফরম্যাটে কম পলি মডেল হিসেবে রপ্তানি করুন যাতে মডেলটি
<model-viewer>ব্যবহার করতে পারে। - জ্যামিতিক জালগুলি ম্যানুয়ালি 3D ডিজাইনার দ্বারা, একটি বিক্রেতার সাথে বা DRACO (OS) এর মতো কম্প্রেশন সফ্টওয়্যারের মাধ্যমে সংকুচিত করুন।
- GLB ফরম্যাটে কম পলি মডেল হিসেবে রপ্তানি করুন যাতে মডেলটি
যেহেতু এই 3D মডেলগুলি প্রায়শই মোবাইল ফোনে ব্যবহার করা হত, সেগুলি পুরানো প্রজন্মের ডিভাইস এবং দুর্বল ইন্টারনেট সংযোগগুলিকে সমর্থন করার জন্য 2 MB এর টেক্সচার সহ সর্বাধিক ফাইল আকার সেট করে অপ্টিমাইজ করা হয়েছিল৷
<model-viewer>
DSM টিম তাদের ওয়েবপৃষ্ঠাগুলিতে নতুন তৈরি 3D মডেলগুলি এম্বেড করতে Google এর <model-viewer> ওপেন সোর্স ওয়েব উপাদান ব্যবহার করে। প্রথম ধাপে তৈরি মডেলগুলি <model-viewer> এর সাথে সামঞ্জস্যপূর্ণ হওয়ার জন্য, সম্পদগুলিকে একটি gITF বা GLB ফর্ম্যাটে (এক্সটেনশন .glb) হতে হবে। উভয় ফর্ম্যাটই কমপ্যাক্ট, সংকোচনযোগ্য এবং GPU-তে দ্রুত লোড হয়। <model-viewer> উপাদানটি সমস্ত প্রধান চিরহরিৎ ব্রাউজার দ্বারা সমর্থিত।
এই পদক্ষেপের সময়, DSM টিমের সবচেয়ে বড় চ্যালেঞ্জটি হল যে Google হার্ডওয়্যার রঙ প্যালেট সঠিকভাবে রেন্ডার করেনি। দলটি অবশেষে আবিষ্কার করে যে ACES টোন ম্যাপিং (একটি চলচ্চিত্র শিল্পের মান) হারিয়ে যাওয়া রঙের জন্য দায়ী। এটি সমাধানের জন্য, তারা লিনিয়ার টোন ম্যাপিংয়ের সাথে যুক্ত ব্লো-আউট হাইলাইট এবং হিউ শিফ্টগুলি এড়াতে, এই ঘাটতিগুলি দূর করতে এবং রঙগুলিকে স্ক্রিনে সঠিকভাবে উপস্থাপন করার জন্য বিশেষভাবে একটি নতুন ক্রোনোস পিবিআর নিউট্রাল টোন ম্যাপার তৈরি করেছে।
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
<model-viewer> সম্পর্কে আরও জানতে, modelviewer.dev দেখুন। আপনার 3D মডেল পরীক্ষা করতে এবং একটি সম্পূর্ণ স্টার্টার ওয়েবসাইট ডাউনলোড করতে, আমাদের সম্পাদক চেষ্টা করুন।
Three.js সহ হেভিওয়েট সমাধান
<model-viewer> একটি 3D মডেল প্রদর্শন এবং ইন্টারঅ্যাক্ট করার একটি দুর্দান্ত, কার্যকরী উপায়৷ যাইহোক, কখনও কখনও DSM টিমের <model-viewer> এর সাথে সম্ভবের চেয়ে আরও বেশি নিমগ্ন এবং আন্তঃসংযুক্ত ওয়েব অভিজ্ঞতার প্রয়োজন হয়। একটি উদাহরণ হল Nest Mini + C-এর লঞ্চ <model-viewer> সম্ভাব্য গ্রাহকদের ওয়েবে 3D তে একটি পণ্যের অভিজ্ঞতা দিতে পারে, কিন্তু অন্যান্য Google হার্ডওয়্যার পণ্য এবং AI বৈশিষ্ট্যগুলির সাথে মিলিত হলে এটি তার উপযোগিতা দেখাতে পারে না সহকারী
এই কাজের জন্য, দলটি <model-viewer> , three.js লাইব্রেরির দিকে ফিরেছে। Three.js হল একটি ওপেন সোর্স জাভাস্ক্রিপ্ট গেম ইঞ্জিন, এবং দলটি নেস্ট ইনডোর ক্যামেরা, লাইট এবং স্পিকার সমন্বিত একটি ভার্চুয়াল হোম পরিবেশের জন্য পুনরায় ব্যবহারযোগ্য সম্পদের একটি কাঠামো তৈরি করতে সক্ষম হয়েছে। এটি ডিভাইসগুলি একে অপরের সাথে কীভাবে ইন্টারঅ্যাক্ট করে সে সম্পর্কে রিয়েল টাইম প্রতিক্রিয়া প্রদান করার জন্য দলটিকে একটি ভিত্তি দিয়েছে।
ডায়ালগফ্লো
আন্তঃসংযুক্ত অভিজ্ঞতা তৈরির শেষ অংশ হল গুগল সহকারী যোগ করা। এর অর্থ ব্যবহারকারীরা আন্তঃসংযুক্ত ভার্চুয়াল অভিজ্ঞতার সাথে খাঁটি কমান্ড এবং রুটিন চেষ্টা করতে পারে। যাইহোক, ব্যবহারকারীর বিদ্যমান অ্যাকাউন্ট থেকে Google সহকারী ঢোকানো বেশ কয়েকটি সমস্যাযুক্ত গোপনীয়তা উদ্বেগকে উন্মুক্ত করবে। একটি গোপনীয়তা-ফরোয়ার্ড সমাধান তৈরি করতে DSM Google ক্লাউড ডায়ালগফ্লো পরিষেবার সাথে কাজ করেছে যাতে এই স্পেসে Google অ্যাসিস্ট্যান্টকে নকল করা যায়। নিম্নলিখিত উচ্চ স্তরের চিত্রটি দেখায় কিভাবে ওয়েব অ্যাপ ডায়ালগফ্লো-এর API ব্যবহার করেছে (ডায়ালগফ্লো বেসিক থেকে অভিযোজিত)। প্রতিটি কথোপকথনের মোড়ের জন্য, ওয়েব অ্যাপ ডায়ালগফ্লো-এর অভিপ্রায় শ্রেণীবিভাগ ব্যবহার করেছে এবং এপিআই অভিপ্রায়ের সাথে মেলে এমন পূর্বনির্ধারিত শেষ ব্যবহারকারীর অভিব্যক্তি ফিরিয়ে দিয়েছে।
ডায়ালগফ্লো সম্পর্কে আরও জানতে, Google ক্লাউড ডকুমেন্টেশন দেখুন।
শেষ ফলাফল: একটি এমবেডযোগ্য iFrame
শেষ ফলাফল হল সম্পদের একটি লাইব্রেরি যা <model-viewer> সহ একটি ওয়েব পৃষ্ঠায় এম্বেড করা যেতে পারে বা সম্পূর্ণ ভার্চুয়াল পরিবেশে ব্যবহার করা যেতে পারে যাতে গ্রাহকদের পৃথক পণ্য সম্পর্কে আরও জানতে এবং কীভাবে পণ্যগুলি আন্তঃসংযোগ করে। অভিজ্ঞতা উভয়ই খাঁটি, মাপযোগ্য এবং সাশ্রয়ী। এই প্রথম ভার্চুয়াল অভিজ্ঞতাটি 2021 সালের মে মাসে চালু হয়েছিল এবং এটি Google Store-এর ওয়েবসাইটে আর না থাকলেও আপনি এটি ব্যবহার করে দেখতে পারেন।
ফলাফলগুলো
Nest Mini +C লঞ্চের পর থেকে, DSM ক্রমবর্ধমান সাফল্যের সাথে পিক্সেল পোর্টফোলিও লঞ্চের বিগত দুই বছরের ফ্রেমওয়ার্ক পুনরায় ব্যবহার এবং প্রসারিত করতে সক্ষম হয়েছে। এই 3D সম্পদ এবং অভিজ্ঞতার পুনরাবৃত্তির মাধ্যমে, দলটি এখন পর্যন্ত ইন্টারেক্টিভ পণ্য শিক্ষার অভিজ্ঞতার সংখ্যা চারগুণ করতে সক্ষম হয়েছে এবং এই ওয়েব প্রযুক্তি থেকে উপকৃত পণ্যের সংখ্যা তিনগুণ করতে সক্ষম হয়েছে।
শেষ ফলাফল হল একটি ব্র্যান্ডেড, প্রামাণিক পণ্য শিক্ষা যা আগের কৌশলগুলির চেয়ে বেশি টেকসই, সমন্বিত এবং ইন্টারেক্টিভ স্কেলে ব্যবহারের ক্ষেত্রে ক্রমবর্ধমান পরিবর্তনের জন্য। এবং সামনের দিকে তাকিয়ে, DSM টিমের কাছে এখন একটি নিমগ্ন অভিজ্ঞতার উপাদানগুলির একটি শক্তিশালী পোর্টফোলিও রয়েছে যা তারা দ্রুত গতিশীল ব্যবসায়িক লক্ষ্যগুলির সাথে খাপ খাইয়ে নিতে পারে৷ এই উন্নতিগুলি DSM টিমকে তাদের আগের, আরও ঐতিহ্যবাহী প্রক্রিয়াগুলির তুলনায় চারগুণ দ্রুত এবং অর্ধেকেরও কম খরচে নতুন পণ্য শিক্ষা বিষয়বস্তু চালু করার অনুমতি দেয়।