โลกเชิงโต้ตอบพร้อมด้วยตัวปรับแสงเงา CSS และ Google Maps

Paul Irish

เมื่อเร็วๆ นี้ เราอ่านข่าวใน Webmonkey ว่า W3C ยอมรับข้อเสนอ CSS Shaders ของ Adobe ซึ่งจะนำเอฟเฟกต์ภาพระดับภาพยนตร์คุณภาพสูงมาสู่เว็บผ่านเครื่องมือ CSS ใหม่บางรายการ หากยังไม่ได้ดู โปรดดูวิดีโอ

Canary เวอร์ชันล่าสุดของ Google Chrome รองรับ CSS Shader แล้ว เราจึงตัดสินใจลองใช้

ในการทดสอบนี้ เราใช้ Vertex Shader (spherify.vs) และ Fragment Shader (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() มีฟังก์ชันการทำงานพื้นฐานสำหรับการจัดการสี เช่น การผสมและการจัดเรียงอัลฟาในโปรแกรมเปลี่ยนรูปแบบเศษส่วน

เราเปลี่ยนรัศมี แกน การหมุนของลูกโลกได้ใน CSS ในตัวอย่างนี้ เรากําหนดค่าของ sphereRadius: 0.5 และค่านี้จะเป็นขนาดทรงกลมเดิม

ลองใช้เดโมได้เลย

ด้านล่างนี้คือวิดีโอของเอฟเฟกต์ หากเปิดใช้ชิเดอร์ คุณจะเล่นกับภาพจริงได้ที่ด้านล่าง

หากเห็น Google Maps แบบ 2 มิติด้านบน ให้เปิดใช้โดยทำตามวิธีการด้านล่าง

เบราว์เซอร์ที่รองรับ: ชิดเดอร์ CSS

ฟีเจอร์นี้เป็นฟีเจอร์ใหม่ล่าสุด จึงพร้อมให้บริการใน Google Chrome Canary และ WebKit Nightly เวอร์ชันล่าสุดเท่านั้น หากต้องการเพลิดเพลินกับประสบการณ์การใช้งานเต็มรูปแบบ คุณจะต้องปรับการตั้งค่าบางอย่าง

ขั้นตอนใน Chrome Canary

  1. พิมพ์ about:flags ในแถบนำทางของเบราว์เซอร์
  2. ค้นหา "เปิดใช้ CSS Shaders" เปิดใช้
  3. เปิดเบราว์เซอร์อีกครั้ง

ขั้นตอนของ WebKit เวอร์ชันรายคืน

  1. ดาวน์โหลดและติดตั้ง WebKit Nightly สำหรับ Mac OSX
  2. เปิดแผงค่ากำหนดของเบราว์เซอร์ ไปที่แท็บขั้นสูง แล้วเลือกช่องทำเครื่องหมายเพื่อแสดงเมนูพัฒนา > เปิดใช้ WebGL ในแถบเมนู
  3. เลือกพัฒนาในแถบเมนูของเบราว์เซอร์