Interactieve wereldbol met CSS-shaders en Google Maps

Onlangs heb ik op Webmonkey nieuws gelezen dat Adobe's CSS Shaders-voorstel, dat filmische effecten van hoge kwaliteit op het web zal brengen via een aantal nieuwe CSS-tools, door het W3C is geaccepteerd. Als je het nog niet hebt gezien, bekijk dan de video.

De nieuwste Canary van Google Chrome heeft ondersteuning voor CSS-shaders toegevoegd, dus besloot ik ermee te experimenteren.

In dit experiment heb ik aangepaste vertex-shader ( spherify.vs ) en fragment-shader ( spherify.fs ) gebruikt om een ​​wereldbol te maken met Google Maps.

<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 passen we een hoekpuntshader toe ( spherify.vs ) die werkt op een mesh met 50 lijnen en 50 kolommen ( 50 50 border-box ). Voel je vrij om de bron van de vertex-shader te lezen: spherify.vs . Het is geschreven in GLSL , maar je kunt het waarschijnlijk wel volgen.

De functie mix() biedt basisfunctionaliteiten voor kleurmanipulatie zoals overvloeien en alfacompositie op een fragmentarcering.

We kunnen de straal, as en rotatie van de sher rechtstreeks in de CSS wijzigen. In dit voorbeeld stellen we de waarde van de sphereRadius: 0.5 en dit geeft de oorspronkelijke bolgrootte.

Geniet van de demo!

Hieronder een video van het effect. Als je shaders hebt ingeschakeld, kun je hieronder met het echte werk spelen!

Als u hierboven alleen een platte Google Maps ziet, kunt u deze inschakelen met de onderstaande instructies

Browsers ondersteunen: CSS-shaders

Dit is momenteel geavanceerd, dus het is elke avond alleen beschikbaar in de nieuwste Google Chrome Canary en WebKit. Om van de volledige ervaring te genieten, moet je aan een paar knoppen draaien.

Chrome Canarische stappen

  1. Typ about:flags in de navigatiebalk van de browser
  2. Ga naar "CSS-shaders inschakelen". Het mogelijk maken
  3. Start de browser opnieuw

WebKit nachtelijke stappen

  1. Download en installeer WebKit Nightly voor Mac OSX
  2. Open het voorkeurenpaneel van de browser. Ga naar het tabblad Geavanceerd en vink aan om het menu Ontwikkelen > WebGL inschakelen in de menubalk weer te geven.
  3. Selecteer Ontwikkelen in de menubalk van de browser