CSS 셰이더와 Google 지도가 있는 대화형 지구본

Paul Irish

최근 Webmonkey의 뉴스에서 새로운 CSS 도구를 통해 웹에 고화질 시네마틱 효과를 제공할 Adobe의 CSS 셰이더 제안서가 W3C에서 승인되었다는 내용을 읽었습니다. 아직 보지 못하신 경우 동영상을 시청하세요.

Google Chrome의 최신 Canary에 CSS 셰이더 지원이 추가되어 실험해 보기로 했습니다.

이 실험에서는 맞춤 버텍스 셰이더 (spherify.vs)와 프래그먼트 셰이더 (spherify.fs)를 사용하여 Google 지도로 지구본을 만들었습니다.

<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));
}

여기서는 50개의 행과 50개의 열 (50 50 border-box)이 있는 메시에서 작동하는 정점 셰이더 (spherify.vs)를 적용합니다. 정점 셰이더의 소스인 spherify.vs를 자유롭게 읽어보세요. GLSL로 작성되었지만 따라할 수 있습니다.

mix() 함수는 프래그먼트 셰이더에서 블렌딩 및 알파 합성과 같은 색상 조작을 위한 기본 기능을 제공합니다.

CSS에서 바로 시어의 반경, 축, 회전을 변경할 수 있습니다. 이 예에서는 sphereRadius: 0.5 값을 설정하고 원래 구체 크기를 제공합니다.

데모를 즐기세요.

다음은 이 효과를 보여주는 동영상입니다. 셰이더를 사용 설정한 경우 바로 아래에서 실제 모델을 플레이할 수 있습니다.

위에 평면 Google 지도가 표시되는 경우 아래 안내에 따라 사용 설정할 수 있습니다.

브라우저 지원: CSS 셰이더

이 기능은 현재 최신 Google Chrome Canary 및 WebKit nightly에서만 사용할 수 있습니다. 전체 환경을 이용하려면 몇 가지 설정을 변경해야 합니다.

Chrome Canary 단계

  1. 브라우저의 탐색 메뉴에 about:flags를 입력합니다.
  2. 'CSS 셰이더 사용 설정'을 찾습니다. 사용 설정
  3. 브라우저 다시 실행

WebKit Nightly 단계

  1. Mac OSX용 WebKit nightly 다운로드 및 설치
  2. 브라우저의 환경설정 패널을 엽니다. 고급 탭으로 이동하여 메뉴 바에 Develop > Enable WebGL 메뉴를 표시하려면 체크합니다.
  3. 브라우저의 메뉴 바에서 Develop를 선택합니다.