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

Paul Ireland
Twitter Trang chủ

Gần đây, tôi đọc tin tức trên Webmonkey rằng đề xuất CSS Shaders của Adobe, với đề xuất mang hiệu ứng điện ảnh chất lượng cao lê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.

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

Trong thử nghiệm này, tôi đã sử dụng chương trình đổ bóng đỉnh chóp tuỳ chỉnh (spherify.vs) và chương trình đổ bóng mảnh (spherify.fs) để tạo hình ảnh đị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). Vui lòng đọc nguồn của chương trình đổ bóng đỉnh: spherify.vs. Mã 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 màu sắc như phối 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 shere ngay trong CSS. Trong ví dụ này, chúng ta đặt giá trị của sphereRadius: 0.5 và giá trị này cung cấp kích thước hình cầu ban đầu.

Hãy tận hưởng bản minh hoạ!

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

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

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

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

Các bước dùng 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
  3. Chạy lại trình duyệt

Các bước hằng đêm dành cho WEB

  1. Tải xuống và cài đặt Tin nhắn hàng đêm cho Mac OSX
  2. Mở bảng lựa chọn ưu tiên của trình duyệt. Chuyển đến thẻ Advanced (Nâng cao) rồi chọn để hiển thị trình đơn Develop (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 Phát triển