globe-warp.yaml

cameras:
    perspective:
        type: perspective
        vanishing_point: [0, 0]
        fov: .00001 # perspective correction
styles:
    stereo:
        lighting: false
        base: polygons
        animated: true
        shaders:
            defines:
                EARTH_RADIUS: 6378137.0 //radius of ellipsoid, WGS84
                HALF_CIRC: 20037508.5 //half-circumference of earth
                PI: 3.14159265358979323846
                HALF_PI: 1.570796327
                QUARTER_PI: .785398163
                deg2rad(d): (d)*PI/180.0
                rad2deg(d): (d)*180.0/PI
            blocks:
                global: |
                    // http://wiki.openstreetmap.org/wiki/Mercator
                    float y2lat_m (float y) { return rad2deg(2.0*atan(exp((y/EARTH_RADIUS)))-HALF_PI); }
                    float x2lon_m (float x) { return rad2deg(x/EARTH_RADIUS); }

                    float lat2y_m (float lat) { return EARTH_RADIUS*log(tan(QUARTER_PI+ deg2rad(lat)/2.0)); }
                    float lon2x_m (float lon) { return deg2rad(lon)*EARTH_RADIUS; }

                    // rotation matrix transformations
                    mat3 rotateX3D(float phi){
                        return mat3(
                            vec3(1.,0.,0.),
                            vec3(0.,cos(phi),-sin(phi)),
                            vec3(0.,sin(phi),cos(phi))
                            );
                    }
                    mat3 rotateY3D(float theta){
                        return mat3(
                            vec3(cos(theta),0.,-sin(theta)),
                            vec3(0.,1.,0.),
                            vec3(sin(theta),0.,cos(theta)));
                    }
                    mat3 rotateZ3D(float psi){
                        return mat3(
                            vec3(cos(psi),-sin(psi),0.),
                            vec3(sin(psi),cos(psi),0.),
                            vec3(0.,0.,1.)
                            );
                    }

                    // convert the positions from a lat, lon to a position on a sphere.
                    vec3 latLongToVector3(float lat, float lon, float centerlat, float centerlon, float radius) {
                        // convert lat/long degrees to radians
                        float phi = (lat)*PI/180.0;
                        float theta = (lon)*PI/180.0;
                        
                        float x = radius * cos(phi) * cos(theta);
                        float y = radius * cos(phi) * sin(theta);
                        float z = radius * sin(phi);
                        // u_map_position.z;
                        return vec3(x,z,y);
                    }
                    
                position: |
                    // handle low-zoom longitude-repetition
                    if (position.x > HALF_CIRC) position.x = HALF_CIRC;
                    if (position.x < -HALF_CIRC) position.x = -HALF_CIRC;

                    // mercator position of the current vertex, u_map_position = center of screen,
                    // position.xy = vertex screen position in meters from the center of the screen
                    vec2 mercator = u_map_position.xy + position.xy;
                    float lat = y2lat_m(mercator.y);
                    float lon = x2lon_m(mercator.x);

                    // Latitude_Of_Origin
                    float centerlat = y2lat_m(u_map_position.y);
                    // Central_Meridian
                    float centerlon = x2lon_m(u_map_position.x);

                    // bend map into globe
                    vec3 globe = latLongToVector3(lat, lon, centerlat, centerlon, 2.) * EARTH_RADIUS;
                    
                    // rotate globe with map navigation
                    globe *= rotateY3D((-centerlon - 90.) * PI/180.0);
                    globe *= rotateX3D((centerlat) * -PI/180.0);

                    position.xyz = mix(globe, position.xyz, sin(u_time/2.)/2. + .5);

    stereolines:
        base: lines
        mix: stereo
sources:
    osm:
        type: TopoJSONTiles
        url:  //vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson?api_key=vector-tiles-_vxMzew
layers:
    earth:
        data: { source: osm }
        draw:
            stereolines:
                order: 1
                color: purple
                width: 3px
    water:
        data: { source: osm }
        draw:
            stereolines:
                order: 2
                color: pink
                width: 1px
    boundaries:
        data: { source: osm }
        draw:
            stereolines:
                order: 3
                color: cyan
                width: 1px
    roads:
        data: { source: osm }
        draw:
            stereolines:
                order: 4
                color: white
                width: 1px
    buildings:
        data: { source: osm }
        draw:
            stereolines:
                order: 4
                color: pink
                width: 1px