Создать шар с Google Maps

В новостях о Webmonkey пишут, что Adobe’s CSS Shaders принесет высококачественные кинематографические эффекты в интернет с помощью новых инструментов CSS, и это было одобрено W3C. Если вы его еще не видели, смотреть видео ниже:


В браузер Google Chrome, добавлена ​​поддержка шейдеров CSS , поэкспериментируем с ними.

В этом эксперименте использованы пользовательские vertex shader  spherify.vs и фрагмент шейдеров spherify.fs , чтобы создать шар с помощью Google Maps.



<iframe class="globe"
  src=
http://pixelcom.crimea.ua/"http://maps.google.com/?ie=UTF8&amp;ll=14.597042,-15.625&amp;spn=158.47027,316.054688&amp;t=h&amp;z=2&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));
}


Здесь применяется vertex shader spherify.vs , который будет работать в таблице, в ней 50 строк и 50 колонок  50 50 border-box . Если не понятно прочтите источник vertex shader: spherify.vs. Он написан на GLSL.

Функция mix() обеспечивает базовую функциональность для манипуляций с цветом, как смешивание и альфа-композиции на фрагменте шейдеров.

Мы можем изменить радиус shere’s, в оси вращения, прямо в CSS. В этом примере мы установили значение  sphereRadius: 0,5  , и это делает оригинальный размер сферы.

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

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

Поддержка браузерами: CSS Shaders

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

В Chrome Canary:

  • В адресной строке браузера Chrome набираем about:flags
  • Ищем Включить CSS Shaders и включаем его
  • Перезапустите браузер

WebKit nightly

  • Скачать и установить WebKit nightly для Mac OSX
  • Откройте панели настроек браузера.  Расширенные  вкладки и поставьте галочку, чтобы показать  Разработка => Включить WebGL меню в строке меню.
  • В меню браузера выберите:  Разработка

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>