3D স্টোরিটেলিং কাস্টমাইজেশন

ভূমিকা

এই গাইড আপনাকে 3D স্টোরিটেলিং সলিউশন কাস্টমাইজ করার বিভিন্ন উপায়ের মাধ্যমে নিয়ে যাবে, যা আপনাকে আকর্ষণীয় জিওলোকেশন স্টোরি তৈরি করতে সাহায্য করবে।

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

দ্বিতীয়ত, অ্যাডমিন অ্যাপে GUI ব্যবহার করে আপনি প্রতিটি চ্যাপ্টারের জন্য ক্যামেরা সেটিংস ও ফোকাস বিকল্প ফাইন-টিউন করতে পারবেন। কনফিগারেশন নিয়ে সন্তুষ্ট হলে, ব্যবহারকারীরা জেনারেট করা JSON ফাইল ডাউনলোড করার বিকল্প পাবেন।

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

শুরু করা

চালু করুন

• Photorealistic 3D tiles API
• Places API

আপনার নিজের স্টোরি তৈরি করুন

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

কভার পৃষ্ঠা

আপনাকে প্রথমে আপনার সামগ্রিক গল্পের জন্য একটি কভার পৃষ্ঠা তৈরি করতে হবে। এটি আপনার স্টোরিতে ওভারভিউ, কভার ফটো ও বিবরণ যোগ করে।

Admin অ্যাপ ব্যবহার করুন

আপনার স্টোরির জন্য একটি কভার পৃষ্ঠা যোগ করে শুরু করুন। আপনি Admin অ্যাপ থেকে নিম্নলিখিত স্ক্রিন ব্যবহার করে এটি করতে পারবেন:

config.json ব্যবহার করুন

এছাড়াও, আপনার কাছে কনফিগ ফাইল থাকলে, আপনি সরাসরি এই বিভাগগুলি ফাইলে যোগ করতে পারেন:

• ১. imageUrl: সম্পূর্ণ স্টোরির জন্য মূল মিডিয়া ফাইলের (ছবি, gif বা ভিডিও) URL।

এটি সর্বজনীনভাবে অ্যাক্সেসযোগ্য যেকোনও URL হতে পারে যা কোনও ছবি, gif বা ভিডিও ফাইলকে নির্দেশ করে যা আপনি পুরো স্টোরির জন্য প্রধান মিডিয়া হিসাবে ব্যবহার করতে চান।

• ২. title: সম্পূর্ণ গল্পের শীর্ষক।
• ৩. date: স্টোরির সাথে সম্পর্কিত তারিখ বা টাইমফ্রেম।
• ৪. description: স্টোরির সংক্ষিপ্ত বিবরণ।
• ৫. createdBy: স্টোরির ক্রিয়েটর বা লেখক।
• ৬. imageCredit: মূল ছবির জন্য ক্রেডিট।
• ৭. cameraOptions: সম্পূর্ণ স্টোরির জন্য প্রাথমিক ক্যামেরা সেটিংস।

চ্যাপ্টার

গল্পটি অধ্যায়ে বিভক্ত, যার প্রতিটিতে নিজস্ব ভেরিয়েবল রয়েছে। আপনি যত খুশি চ্যাপ্টার তৈরি করতে পারবেন। আপনি কোনও ঠিকানা বেছে নিয়ে শুরু করেন এবং তারপর চ্যাপ্টারে নিম্নলিখিত বিবরণ যোগ করেন।

Admin অ্যাপ ব্যবহার করুন

লোকেশন সার্চ: আপনি যে লোকেশন দেখাতে চান তা খুঁজতে ইন্টিগ্রেটেড Google Maps Platform-এর অটোমেটিক সম্পূর্ণ হওয়া সার্চ বার ব্যবহার করুন।

লোকেশন যোগ করা হয়ে গেলে, লোকেশনের পাশে এডিট করুন বোতামে ক্লিক করে আপনি চ্যাপ্টারে বিবরণ যোগ করতে পারবেন:

লোকেশন সম্পর্কে বিবরণ যোগ করুন:

সামগ্রিক কনফিগারেশন আপনার পছন্দ হলে, json ফাইল ডাউনলোড করুন এবং আপনি এটি ডেমো অ্যাপে ব্যবহার করতে পারবেন।

config.json ব্যবহার করে কনফিগার করুন

প্রতিটি চ্যাপ্টার কাস্টমাইজ করতে, ডাউনলোড করা config.json ফাইলে আপনি সরাসরি নিম্নলিখিত ভেরিয়েবল এডিট করতে পারবেন:

• title: চ্যাপ্টারের নাম।
• id: চ্যাপ্টারের জন্য অনন্য শনাক্তকারী।
• imageUrl: চ্যাপ্টারের ছবির URL।
• imageCredit: চ্যাপ্টারের ছবির জন্য ক্রেডিট।
• content: চ্যাপ্টারের টেক্সট কন্টেন্ট।
• dateTime: চ্যাপ্টারের জন্য নির্দিষ্ট তারিখ বা সময়সীমা।
• coords: চ্যাপ্টারের সাথে যুক্ত লোকেশনের কোঅর্ডিনেট।
  • lat: অক্ষাংশ।
  • lng: দ্রাঘিমাংশ।
• address: চ্যাপ্টার সম্পর্কিত ঠিকানা।

ক্যামেরা সেটিংস

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

(আপনার নিখুঁত দেখার অ্যাঙ্গেল পেতে ক্যামেরা প্যান,জুম, টিল্ট করুন)

Admin অ্যাপ ব্যবহার করা

ক্যামেরা: বেছে নেওয়া দেখার অভিজ্ঞতা তৈরি করতে ক্যামেরার মুভমেন্ট স্পিড ও অরবিট টাইপ অ্যাডজাস্ট করুন।

• লোকেশন মার্কার আপনাকে নির্দিষ্ট লোকেশনে পিন দেখানো বা লুকানোর মধ্যে টগল করতে দেয়।

• রেডিয়াস ফোকাস নির্দিষ্ট লোকেশন পিনপয়েন্ট না করে নির্দিষ্ট অংশের চারপাশে ভিনয়েট শ্যাডো তৈরি করে। এটি কোনও পাড়া বা সাধারণ এলাকা দেখানোর জন্য খুব ভাল।

এটি দেখায় যে কীভাবে ক্যামেরার ফোকাস পরিবর্তন করে নির্দিষ্ট পয়েন্টের পরিবর্তে কোনও এলাকা দেখানো যায়।

config.json ব্যবহার করুন

এছাড়াও, আপনি json কনফিগারেশন ফাইল ব্যবহার করে সরাসরি সব ক্যামেরা প্যারামিটার কাস্টমাইজ করতে পারবেন:

• cameraOptions: চ্যাপ্টারের জন্য ক্যামেরা সেটিংস। ক্যামেরা অ্যাঙ্গেল সম্পর্কে আরও জানুন)

  • position: পজিশন প্যারামিটার 3D এনভায়রনমেন্টে ক্যামেরার স্পেশিয়াল কোঅর্ডিনেট নির্ধারণ করে। এতে তিনটি ভ্যালু থাকে: x, y এবং z। প্রতিটি কোঅর্ডিনেট x, y ও z অক্ষের একটি পয়েন্টকে দেখায়, যা ক্যামেরার লোকেশন নির্ধারণ করে।

  • heading: হেডিং প্যারামিটার বলতে ক্যামেরা যে অনুভূমিক দিকে পয়েন্ট করা আছে সেটিকে বোঝায়। ভৌগোলিক পরিভাষায়, এটি ক্যামেরার ভিউ এবং উত্তর দিকের মধ্যেকার কোণকে বোঝায়। 0-এর হেডিং ইঙ্গিত করে যে ক্যামেরাটি উত্তর দিকে নির্দেশ করছে।

  • pitch: পিচ প্যারামিটার ক্যামেরার উল্লম্ব কোণ নির্ধারণ করে। এটি ক্যামেরার ভিউয়ের টিল্ট বা ইনক্লিনেশন বোঝায়। পজিটিভ পিচ নিচের দিকে এবং নেগেটিভ পিচ উপরের দিকে নির্দেশ করে।

  • roll: রোল প্যারামিটার ক্যামেরার অক্ষের চারপাশে ঘূর্ণন নির্ধারণ করে। এটি ক্যামেরার টুইস্টিং মোশনকে দেখায়। ০-এর রোল কোনও রোটেশন নির্দেশ করে না, যেখানে ধনাত্মক বা ঋণাত্মক মান যথাক্রমে ডান বা বাম দিকে রোটেশন নির্দেশ করে।

• focusOptions: নির্দিষ্ট পয়েন্টে ফোকাস করার বিকল্প।

• focusRadius: ফোকাসের জন্য ব্যাসার্ধ।

• showFocus: ফোকাস দেখাতে বা লুকাতে বুলিয়ান।

• showLocationMarker: লোকেশন মার্কার দেখানো বা লুকানোর জন্য বুলিয়ান।

আপনার কনফিগারেশন সেভ করুন

সবশেষে, আপনার ক্যামেরার পজিশন সেভ করতে ক্যামেরার পজিশন সেভ করুন বিকল্পে ক্লিক করুন, তারপর আপনার কাজ সেভ করতে এডিট মোড থেকে বেরিয়ে আসুন বিকল্পে ক্লিক করুন

এই অ্যাপ্লিকেশনটি একটি ব্যবহারকারী-বান্ধব ইন্টারফেস প্রদান করে যা আপনাকে 3D অভিজ্ঞতা কাস্টমাইজ করতে দেয়। এটি অ্যাডমিন অ্যাপ।

চূড়ান্ত config.json

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

শুরু করতে,Admin অ্যাপ থেকে config.json ফাইল ডাউনলোড করুন অথবা একেবারে শুরু থেকে নতুন একটি তৈরি করুন। তারপর, টেক্সট এডিটরে ফাইলটি খুলুন এবং ভ্যালু এডিট করা শুরু করুন। আপনার দর্শকদের জন্য অনন্য এবং ইমারসিভ অভিজ্ঞতা তৈরি করতে আপনি টেক্সট, ছবি এবং এমনকি ক্যামেরা সেটিংস পরিবর্তন করতে পারেন।

স্টোরি ওভারভিউ JSON ফাইলটি এইরকম দেখতে হতে পারে:

{
  "properties": {
    "imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/317-300x160.jpg",
    "title": "Title",
    "date": "1967",
    "description": ""his is where you put descriptions",
    "createdBy": "Add author",
    "imageCredit": "Add image credit",
    "cameraOptions": {
      "position": {
        "x": -2708127.031960028,
        "y": -4260747.583520751,
        "z": 3886346.825328216
      },
      "heading": -1.5708,
      "pitch": -0.785398,
      "roll": 0
    }
  }

এবং কোনও নির্দিষ্ট চ্যাপ্টার দেখতে এমন হতে পারে। চ্যাপ্টার হল একটি অ্যারে এবং অ্যারের মধ্যে অনেকগুলি আলাদা আলাদা চ্যাপ্টার থাকতে পারে।

"chapters": [
    {
      "title": "The Jimmy Hendrix Experience",
      "id": 4,
      "imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/401-300x160.jpg",
      "imageCredit": "Hunter",
      "content": "XYZZZ",
      "dateTime": "Aug 10-12 1967",
      "coords": {
        "lat": 37.7749,
        "lng": -122.4194
      },
      "address": "The Filmore | 1805 Geary Blvd",
      "cameraOptions": {
        "position": {
          "x": -2706472.5713478313,
          "y": -4261528.277488908,
          "z": 3885143.750529967
        },
        "heading": 0,
        "pitch": 0,
        "roll": 0
      },
      "focusOptions": {
        "focusRadius": 3000,
        "showFocus": false,
        "showLocationMarker": true
      }
    },

উন্নত কাস্টমাইজেশন

আপনি কোডটি আরও ভালভাবে বুঝতে পারবেন এবং আরও অনেক কাস্টমাইজেশন করতে পারবেন:

অন্য লোকেশন থেকে কনফিগ ফাইল লোড করুন

এই সমাধানটি স্থানীয় ফাইল থেকে স্টোরিটেলিং কনফিগারেশন লোড করে। তবে, config.js-এ এটি সহজেই পরিবর্তন করা যেতে পারে:

export async function loadConfig(configUrl) {
  try {
    // Fetch the configuration data from the specified URL.
    const configResponse = await fetch(configUrl);

ক্যামেরা কনফিগারেশন

/utils/cesium.js ফাইল থেকে ক্যামেরা আরও কাস্টমাইজ করা যাবে। এটি বেশ কিছু গুরুত্বপূর্ণ ভেরিয়েবেল সংজ্ঞায়িত করে, যেমন:

• RADIUS
• BASE_PITCH_RADIANS
• BASE_HEADING_RADIANS
• BASE_ROLL_RADIANS
• DEFAULT_HIGHLIGHT_RADIUS

বিভিন্ন ক্যামেরা অ্যাঙ্গেল ও অভিজ্ঞতা পেতে এইসব ভেরিয়েবল নির্দ্বিধায় পরিবর্তন করুন।

উপসংহার

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

এখন আপনি 3D স্টোরিটেলিং অ্যাপ্লিকেশন কাস্টমাইজ করার পদ্ধতি শিখে গেছেন, তাই নিজের গল্প তৈরি করা শুরু করতে পারেন। শুরু করার জন্য এখানে কয়েকটি আইডিয়া দেওয়া হল:

• আপনার নিজের শহর বা আপনি ঘুরে এসেছেন এমন কোনও জায়গা সম্পর্কে একটি গল্প তৈরি করুন।
• কোনও ঐতিহাসিক ঘটনা বা আপনাকে অনুপ্রাণিত করেছেন এমন কোনও ব্যক্তির সম্পর্কে একটি গল্প লিখুন।
• একটি কাল্পনিক জগৎ বা আপনার দেখা কোনও স্বপ্ন সম্পর্কে একটি গল্প তৈরি করুন।

সম্ভাবনা সীমাহীন! তাই আপনার কল্পনাশক্তিকে কাজে লাগান এবং সত্যিই বিশেষ কিছু তৈরি করুন।