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

พอล ไอริช
Twitter หน้าแรก

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

Canary ล่าสุดของ Google Chrome เพิ่มการสนับสนุนสำหรับตัวปรับแสงเงา 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() มีฟังก์ชันการทำงานพื้นฐานสำหรับการปรับแต่งสี เช่น การผสมและการผสมอัลฟ่าในตัวปรับแสงเงาส่วนย่อย

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

ขอให้สนุกกับการสาธิต

โปรดดูวิดีโอเอฟเฟกต์ได้ที่ด้านล่าง หากคุณเปิดใช้เครื่องมือให้เฉดสีอยู่ คุณสามารถเล่นกับของจริงได้ที่ด้านล่าง!

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

การสนับสนุนเบราว์เซอร์: ตัวปรับแสงเงา CSS

ปัจจุบันนี้เทคโนโลยีขั้นสูงจึงมีให้ใช้งานใน Google Chrome Canary และ WebKit ล่าสุดในช่วงกลางคืนเท่านั้น หากต้องการสัมผัสประสบการณ์เต็มรูปแบบ คุณจะต้องปรับปุ่ม 2-3 ปุ่ม

ขั้นตอนของ Chrome Canary

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

จำนวนขั้นตอนตอนกลางคืนของ WebKit

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