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

폴 아이리시

최근 Webmonkey에 대한 뉴스에서 몇 가지 새로운 CSS 도구를 통해 웹에 고품질 영화 효과를 제공할 Adobe의 CSS Shaders 제안이 W3C에서 승인되었다는 소식을 읽었습니다. 아직 시청하지 않았다면 동영상을 시청하세요.

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

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

데모를 마음껏 즐겨 보세요.

아래는 이 효과의 동영상입니다. 셰이더를 활성화했다면 바로 아래에서 실제 셰이더로 플레이할 수 있습니다.

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

브라우저 지원: CSS 셰이더

현재는 최첨단 기능이므로 최신 Chrome Canary 및 WebKit Nightly에서만 사용할 수 있습니다. 전체 기능을 즐기려면 몇 가지 노브를 돌려야 합니다.

Chrome Canary 단계

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

WebKit 야간 걸음 수

  1. Mac OSX용 WebKitnightly 다운로드 및 설치
  2. 브라우저의 환경설정 패널을 엽니다. 고급 탭으로 이동하여 메뉴 바에서 개발 > WebGL 사용 설정 메뉴를 선택합니다.
  3. 브라우저의 메뉴 바에서 개발을 선택합니다.