scene.yaml

# by @meetar based on tilt-gotham by @patriciogv - 2015

cameras:
    perspective:
        type: perspective
lights:
    directional1:
        type: directional
        direction: [-1.,-.5.,-0.5]
        ambient: [.3, .3, .7]
        diffuse: [1, 1, .1]
    point1:
        type: point
        position: [1000, -4000, 3000]
        origin: ground
        diffuse: 1
scene:
    background:
        color: [0, 0, 0, 0]
styles:
    tilt:
        base: polygons
        shaders:
            uniforms:
                u_bend: 1.3
                u_rotate: .51
                u_yoffset: 100.

                u_frequency: 5.
                u_windowColor: [1., 1., .9]
                u_buildingColor: [.8, .8, .7]
                u_roofColor: [.5, .4, .5]

            blocks:
                global: |
                    // rotation matrix operations
                    mat3 rotateX3D(float phi){
                        return mat3(
                            vec3(1.,0.,0.),
                            vec3(0.,cos(phi),-sin(phi)),
                            vec3(0.,sin(phi),cos(phi))
                            );
                    }
                    mat3 rotateZ3D(float psi){
                        return mat3(
                            vec3(cos(psi),-sin(psi),0.),
                            vec3(sin(psi),cos(psi),0.),
                            vec3(0.,0.,1.)
                            );
                    }

                color: |
                    // windows shader
                    color.rgb *= vec3(min((worldPosition().z*.0005 + .65),1.));

                    vec3 vPos = worldPosition().xyz / u_frequency;
                    vec3 mask = mix(vec3(0.0), vec3(1.0), step(fract(mod(vPos, .9)), vec3(.4, .4, .6)));

                    if (mask.x + mask.y + mask.z > .5) {
                        color.rgb = u_buildingColor;
                        color.rgb -= vec3(vPos.z * .01); // height factor
                    } else {
                        color.rgb = u_windowColor;
                    }
                    if (v_normal.z > .6 || v_normal.z < -.6) {
                        color.rgb = u_roofColor;
                        color.rgb -= vec3(vPos.z * .01); // height factor
                    }

                position: |
                    float meter_pixels = u_meters_per_pixel / u_device_pixel_ratio;
                    vec2 rez = u_resolution * meter_pixels;

                    // twist map in z (manhattan angle happens to be almost exactly half a radian)
                    position.xyz *= rotateZ3D(u_rotate);

                    // rotate map in x so it's nearly flat
                    vec3 new = rotateX3D(u_bend) * position.xyz;

                    // adjust height
                    new.y -= u_yoffset;
                     
                    // mix between vertical and horizontal maps, based on position.y
                    position.xyz = mix(position.xyz, new.xyz, (-position.y + rez.y/2.)/rez.y);
                    
    roads:
        animated: false
        texcoords: true
        base: lines
        mix: tilt
    flat:
        base: polygons
        lighting: false
        shaders:
            blocks:
                filter: |
                    color.rgb = mix(vec3(0.), vec3(.2), ((gl_FragCoord.y+u_resolution.y/2.)-u_resolution.y*.9)/u_resolution.y*4.);


sources:
    mapzen:
        type: TopoJSON
        url: https://meetar.github.io/mapzen-tiles/vector/v1/256/all/{z}/{x}/{y}.topojson
        max_zoom: 15

layers:
    boundaries:
        data: { source: mapzen }
        draw:
            roads:
                order: function() { return feature.sort_rank || 0; }
                width: 3px
                color: '#353535'

    water:
        data: { source: mapzen }
        draw:
            flat:
                order: function() { return feature.sort_rank || 0; }
                color: '#222'
    earth:
        data: { source: mapzen }
        draw:
            flat:
                order: function() { return feature.sort_rank || 0; }
                color: '#222'
    roads:
        data: { source: mapzen }
        filter: { not: { kind_detail: service, kind: rail } }
        draw:
            roads:
                order: function() { return feature.sort_rank || 0; }
                color: [1, .95, .8]
                width: 15
    buildings:
        data: { source: mapzen }
        draw:
            tilt:
                order: function() { return feature.sort_rank || 0; }
                extrude: true