Interaktiver Globus mit CSS-Shadern und Google Maps

Paul Irish

In letzter Zeit habe ich die Neuigkeiten zu Webmonkey gelesen, dass der Vorschlag von Adobe CSS Shaders, der mithilfe neuer CSS-Tools qualitativ hochwertige Kinoeffekte ins Web bringt, vom W3C akzeptiert wurde. Sehen Sie sich das Video an, falls Sie es noch nicht gesehen haben.

Da die neueste Canary-Version von Google Chrome Unterstützung für CSS-Shader hinzugefügt hat, habe ich beschlossen, mit ihnen zu experimentieren.

In diesem Experiment habe ich einen benutzerdefinierten Vertex-Shader (spherify.vs) und einen Fragment-Shader (spherify.fs) verwendet, um mit Google Maps einen Globus 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 Scheitelpunkt-Shader (spherify.vs) an, der auf einem Mesh-Netzwerk mit 50 Linien und 50 Spalten (50 50 border-box) ausgeführt wird. Sie können die Quelle des Scheitel-Shaders lesen: spherify.vs. Sie ist in GLSL geschrieben, aber Sie können wahrscheinlich mitmachen.

Die mix()-Funktion bietet grundlegende Funktionen zur Farbbearbeitung, z. B. für das Überblenden und die Alphazusammensetzung mit einem Fragment-Shader.

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

Viel Spaß mit der Demo!

Unten sehen Sie ein Video mit diesem Effekt. Wenn Sie Shader aktiviert haben, können Sie mit dem echten Objekt direkt darunter spielen!

Wenn Sie oben nur eine flache Karte sehen, können Sie sie wie unten beschrieben aktivieren.

Browserunterstützung: CSS-Shader

Dies ist derzeit eine hochmoderne Version, die nur in der aktuellen Version von Google Chrome Canary und WebKit verfügbar ist. Um das volle Erlebnis genießen zu können, musst du ein paar Drehknöpfe drehen.

Schritte für Chrome Canary

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

Nächtliche WebKit-Schritte

  1. WebKit nächtlich für Mac OS X herunterladen und installieren
  2. Öffnen Sie die Einstellungen des Browsers. Wechseln Sie zum Tab Advanced (Erweitert) und setzen Sie ein Häkchen, damit in der Menüleiste Develop > Enable WebGL (Entwickeln > WebGL aktivieren) angezeigt wird.
  3. Wählen Sie in der Menüleiste des Browsers Entwickeln aus.