CSS shaders এবং Google Maps সহ ইন্টারেক্টিভ গ্লোব

পল আইরিশ

সম্প্রতি, আমি Webmonkey-এ খবর পড়েছি যে Adobe-এর CSS Shaders প্রস্তাব, যা কিছু নতুন CSS টুলের মাধ্যমে ওয়েবে উচ্চ-মানের সিনেমাটিক প্রভাব আনবে, W3C দ্বারা গৃহীত হয়েছে। এখনো না দেখে থাকলে ভিডিওটি দেখুন।

গুগল ক্রোমের সর্বশেষ ক্যানারি CSS শেডারগুলির জন্য সমর্থন যোগ করেছে, তাই আমি তাদের সাথে পরীক্ষা করার সিদ্ধান্ত নিয়েছি।

এই পরীক্ষায়, আমি Google মানচিত্রের সাথে একটি গ্লোব তৈরি করতে কাস্টম ভার্টেক্স শেডার ( spherify.vs ) এবং ফ্র্যাগমেন্ট শেডার ( spherify.fs ) ব্যবহার করেছি।

<iframe
  class="globe"
  src="https://maps.google.com/?ie=UTF8&amp;amp;ll=14.597042,-15.625&amp;amp;spn=158.47027,316.054688&amp;amp;t=h&amp;amp;z=2&amp;amp;output=embed"
  scrolling="no"></iframe>

.globe {
  width: 550px;
  height: 550px;
  border: 0;
  -webkit-filter: contrast(1.4) custom(url(shaders/spherify.vs) mix(url(shaders/spherify.fs) multiply source-atop),
    50 50 border-box,
    amount 1,
    sphereRadius 0.5,
    sphereAxis -0.41 1 0.19,
    sphereRotation 43.5,
    ambientLight 0.15,
    lightPosition 1 0.87 0.25,
    lightColor 1 1 1 1,
    transform perspective(500));
}

এখানে, আমরা একটি ভার্টেক্স শেডার ( spherify.vs ) প্রয়োগ করছি যা 50 লাইন এবং 50টি কলাম ( 50 50 border-box ) বিশিষ্ট একটি জালের উপর কাজ করবে। ভার্টেক্স শেডারের উত্স পড়তে নির্দ্বিধায়: spherify.vs । এটি GLSL এ লেখা কিন্তু আপনি সম্ভবত অনুসরণ করতে পারেন।

mix() ফাংশন একটি ফ্র্যাগমেন্ট শেডারে ব্লেন্ডিং এবং আলফা কম্পোজিংয়ের মতো রঙের ম্যানিপুলেশনের জন্য মৌলিক কার্যকারিতা প্রদান করে।

আমরা সিএসএস-এ শেয়ারের ব্যাসার্ধ, অক্ষ, ঘূর্ণন পরিবর্তন করতে পারি। এই উদাহরণে আমরা sphereRadius: 0.5 এবং এটি মূল গোলকের আকার দেয়।

ডেমো উপভোগ করুন!

নীচে প্রভাব একটি ভিডিও. আপনি যদি শেডারগুলি সক্ষম করে থাকেন তবে আপনি নীচের আসল জিনিসটির সাথে খেলতে পারেন!

আপনি যদি উপরে একটি সমতল google মানচিত্র দেখতে পান, তাহলে আপনি নীচের নির্দেশাবলী দিয়ে এটি সক্ষম করতে পারেন৷

ব্রাউজার সমর্থন: CSS shaders

এটি বর্তমানে অত্যাধুনিক, তাই এটি শুধুমাত্র সর্বশেষ Google Chrome Canary এবং WebKit-এ রাত্রিকালীন উপলব্ধ৷ সম্পূর্ণ অভিজ্ঞতা উপভোগ করতে আপনাকে কয়েকটি নব চালু করতে হবে।

ক্রোম ক্যানারি পদক্ষেপ

  1. ব্রাউজারের নেভিগেশন বারে about:flags টাইপ করুন
  2. "CSS Shaders সক্ষম করুন" খুঁজুন। এটি সক্রিয় করুন
  3. ব্রাউজারটি পুনরায় চালু করুন

WebKit রাত্রিকালীন পদক্ষেপ

  1. Mac OSX এর জন্য রাতের বেলা ওয়েবকিট ডাউনলোড এবং ইনস্টল করুন
  2. ব্রাউজারের পছন্দ প্যানেল খুলুন। অ্যাডভান্স ট্যাবে যান এবং মেনু বারে বিকাশ > ওয়েবজিএল মেনু সক্ষম করতে টিক দিন।
  3. ব্রাউজারের মেনু বারে বিকাশ নির্বাচন করুন