Interaktiver Globus mit CSS-Shadern und Google Maps

Paul Irish

Vor Kurzem habe ich in Webmonkey gelesen, dass der Vorschlag von Adobe für CSS-Shader, der durch einige neue CSS-Tools hochwertige Kinoeffekte ins Web bringen soll, vom W3C akzeptiert wurde. Sehen Sie sich das Video an, falls Sie es noch nicht gesehen haben.

In der neuesten Canary-Version von Google Chrome wurde die Unterstützung für CSS-Shader hinzugefügt. Ich habe beschlossen, damit zu experimentieren.

In diesem Test habe ich einen benutzerdefinierten Vertex-Shader (spherify.vs) und einen Fragment-Shader (spherify.fs) verwendet, um einen Globus mit Google Maps zu erstellen.

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

Hier wenden wir einen Vertex-Shader (spherify.vs) auf ein Mesh mit 50 Zeilen und 50 Spalten (50 50 border-box) an. Sie können sich die Quelle des Vertex-Shaders ansehen: spherify.vs. Er ist in GLSL geschrieben, aber Sie können ihm wahrscheinlich folgen.

Die Funktion mix() bietet grundlegende Funktionen für die Farbmanipulation wie das Mischen und Alpha-Compositing in einem Fragment-Shader.

Wir können den Radius, die Achse und die Drehung der Kugel direkt im CSS ändern. In diesem Beispiel legen wir den Wert von sphereRadius: 0.5 fest und erhalten die ursprüngliche Kugelgröße.

Viel Spaß mit der Demo!

Unten siehst du ein Video mit dem Effekt. Wenn Sie Shader aktiviert haben, können Sie direkt unten mit dem Original spielen.

Wenn Sie nur eine flache Google Maps-Ansicht sehen, können Sie sie mit der Anleitung unten aktivieren.

Browserunterstützung: CSS-Shader

Diese Funktion ist derzeit noch in der Entwicklungsphase und daher nur in der neuesten Version von Google Chrome Canary und in der WebKit-Nachtversion verfügbar. Damit Sie alle Funktionen nutzen können, müssen Sie einige Einstellungen vornehmen.

Schritte für Chrome Canary

  1. Geben Sie about:flags in die Navigationsleiste des Browsers ein.
  2. Suchen Sie nach „CSS-Shader aktivieren“. Aktivieren
  3. Browser neu starten

WebKit-Schritte pro Nacht

  1. WebKit nightly für Mac OS X herunterladen und installieren
  2. Öffnen Sie das Einstellungsfeld des Browsers. Gehen Sie zum Tab Erweitert und setzen Sie ein Häkchen, damit das Menü Entwickeln > WebGL aktivieren in der Menüleiste angezeigt wird.
  3. Wählen Sie in der Menüleiste des Browsers Entwickeln aus.