Quả địa cầu tương tác với chương trình đổ bóng CSS và Google Maps

Paul Irish

Gần đây, tôi đã đọc tin tức trên Webmonkey rằng đề xuất về chương trình đổ bóng CSS của Adobe (sẽ mang hiệu ứng điện ảnh chất lượng cao đến web thông qua một số công cụ CSS mới) đã được W3C chấp nhận. Nếu bạn chưa xem, hãy xem video này.

Phiên bản Canary mới nhất của Google Chrome đã hỗ trợ thêm chương trình đổ bóng CSS, vì vậy, tôi quyết định thử nghiệm với các chương trình này.

Trong thử nghiệm này, tôi đã sử dụng chương trình đổ bóng đỉnh tuỳ chỉnh (spherify.vs) và chương trình đổ bóng mảnh (spherify.fs) để tạo một quả địa cầu bằng 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));
}

Ở đây, chúng ta sẽ áp dụng chương trình đổ bóng đỉnh (spherify.vs) sẽ hoạt động trên một lưới có 50 dòng và 50 cột (50 50 border-box). Bạn có thể đọc nguồn của chương trình đổ bóng đỉnh: spherify.vs. Chương trình này được viết bằng GLSL nhưng bạn có thể làm theo.

Hàm mix() cung cấp các chức năng cơ bản để thao tác với màu sắc như pha trộn và kết hợp alpha trên chương trình đổ bóng mảnh.

Chúng ta có thể thay đổi bán kính, trục, độ xoay của hình cầu ngay trong CSS. Trong ví dụ này, chúng ta đặt giá trị của sphereRadius: 0.5 và giá trị này sẽ cho kích thước hình cầu ban đầu.

Chúc bạn xem vui vẻ!

Dưới đây là video về hiệu ứng này. Nếu đã bật chương trình đổ bóng, bạn có thể chơi với phiên bản thực tế ngay bên dưới!

Nếu chỉ thấy bản đồ Google Maps phẳng ở trên, bạn có thể bật bản đồ đó theo hướng dẫn bên dưới

Hỗ trợ trình duyệt: Chương trình đổ bóng CSS

Đây là tính năng tiên tiến nên chỉ có trong Google Chrome Canary và WebKit phiên bản hằng đêm mới nhất. Để tận hưởng trải nghiệm đầy đủ, bạn cần xoay một vài núm.

Các bước trên Chrome Canary

  1. Nhập about:flags vào thanh điều hướng của trình duyệt
  2. Tìm mục "Bật chương trình đổ bóng CSS". Bật tính năng này
  3. Chạy lại trình duyệt

Các bước hằng đêm của WebKit

  1. Tải xuống và cài đặt WebKit nightly cho Mac OSX
  2. Mở bảng điều khiển lựa chọn ưu tiên của trình duyệt. Chuyển đến thẻ Advanced (Nâng cao) rồi đánh dấu vào mục này để hiển thị trình đơn Develop > Enable WebGL (Phát triển > Bật WebGL) trong thanh trình đơn.
  3. Trong thanh trình đơn của trình duyệt, hãy chọn Develop (Phát triển)