Интерактивный глобус с CSS-шейдерами и Google Maps

Пол Айриш

Недавно я прочитал на Webmonkey новость о том, что предложение Adobe по CSS-шейдерам, которое принесет в Интернет высококачественные кинематографические эффекты с помощью некоторых новых инструментов CSS, было принято W3C. Если вы еще не видели, посмотрите видео.

В последней версии Google Chrome 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() предоставляет базовые функции для манипулирования цветом, таких как смешивание и альфа-компоновка во фрагментном шейдере.

Мы можем изменить радиус, ось, вращение шара прямо в CSS. В этом примере мы устанавливаем sphereRadius: 0.5 и это дает исходный размер сферы.

Наслаждайтесь демо!

Ниже видео эффекта. Если у вас включены шейдеры, вы можете поиграть с реальными вещами прямо ниже!

Если вы видите просто плоские карты Google выше, вы можете включить их, следуя инструкциям ниже.

Поддержка браузеров: CSS-шейдеры

В настоящее время это передовая технология, поэтому она доступна только в последних версиях Google Chrome Canary и WebKit каждую ночь. Чтобы насладиться всеми возможностями, вам придется повернуть несколько ручек.

Шаги Chrome Canary

  1. Введите about:flags на панели навигации браузера.
  2. Найдите «Включить CSS-шейдеры». Включите это
  3. Перезапустите браузер

Ночные шаги WebKit

  1. Загрузите и установите WebKit каждую ночь для Mac OSX.
  2. Откройте панель настроек браузера. Перейдите на вкладку «Дополнительно» и установите флажок, чтобы в строке меню отображалось меню «Разработка» > «Включить WebGL» .
  3. В строке меню браузера выберите «Разработать».