کره ی تعاملی با سایه بان های CSS و نقشه های گوگل

پل آیریش

اخیراً اخباری را در Webmonkey خوانده‌ام مبنی بر اینکه پیشنهاد Adobe CSS Shaders که جلوه‌های سینمایی با کیفیتی را از طریق برخی ابزارهای جدید CSS به وب می‌آورد، توسط W3C پذیرفته شده است. اگر هنوز آن را ندیده اید، ویدیو را تماشا کنید.

آخرین نسخه Canary گوگل کروم از سایه بان های CSS پشتیبانی می کند، بنابراین تصمیم گرفتم آنها را آزمایش کنم.

در این آزمایش، من از سایه‌زن رأس سفارشی ( spherify.vs ) و سایه‌زن قطعه ( spherify.fs ) برای ایجاد یک کره با Google Maps استفاده کردم.

<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() قابلیت های اساسی را برای دستکاری رنگ ها مانند ترکیب و ترکیب آلفا روی یک سایه بان قطعه ارائه می دهد.

ما می توانیم شعاع shere، محور، چرخش را درست در CSS تغییر دهیم. در این مثال مقدار sphereRadius: 0.5 تنظیم می کنیم و اندازه کره اصلی را می دهد.

از دمو لذت ببرید!

در زیر ویدیویی از این اثر وجود دارد. اگر سایه‌زن‌ها را فعال کرده‌اید، می‌توانید درست در زیر با چیز واقعی بازی کنید!

اگر فقط یک نقشه گوگل مسطح در بالا مشاهده کردید، می توانید آن را با دستورالعمل های زیر فعال کنید

پشتیبانی از مرورگرها: سایه زن های CSS

این در حال حاضر پیشرفته است، بنابراین فقط در آخرین Google Chrome Canary و WebKit شبانه در دسترس است. برای لذت بردن از تجربه کامل، باید چند دستگیره را بچرخانید.

مراحل کروم قناری

  1. about:flags در نوار پیمایش مرورگر تایپ کنید
  2. "Enable CSS Shaders" را پیدا کنید. فعالش کن
  3. مرورگر را دوباره راه اندازی کنید

مراحل شبانه WebKit

  1. WebKit را به صورت شبانه برای Mac OSX دانلود و نصب کنید
  2. پانل تنظیمات برگزیده مرورگر را باز کنید. به تب Advanced بروید و تیک بزنید تا Develop > Enable WebGL menu در نوار منو نشان داده شود.
  3. در نوار منوی مرورگر Develop را انتخاب کنید