Driving shaders params via mouse interaction.
Use requestRender rather than updateConfig and you can set scene properties (e.g. uniforms) directly.
To interact with uniforms, declare them in the scene file then directly manipulate them from the scene object (not the config) in the JS api.
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- leaflet --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script> | |
| <!-- Main tangram library --> | |
| <script src="https://mapzen.com/tangram/0.8/tangram.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/quicksettings/latest/quicksettings.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css" /> | |
| <style> | |
| body { | |
| margin:0; | |
| position:fixed; | |
| top:0; | |
| right:0; | |
| bottom:0; | |
| left:0; | |
| } | |
| #map { | |
| height: 100%; | |
| width: 100%; | |
| position: absolute; | |
| z-index: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| var mapContainer = document.querySelector('#map'); | |
| var map = L.map('map') | |
| .setView([40.7201716,-74.0055515], 15);; | |
| var layer = Tangram.leafletLayer({ | |
| maxZoom: 16, | |
| minZoom: 14, | |
| scene: 'scene.yaml', | |
| attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | © OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>' | |
| }); | |
| layer.addTo(map); | |
| var scene = layer.scene; | |
| var requestRedraw = function() { | |
| window.requestAnimationFrame(function() { | |
| scene.requestRedraw(); | |
| }); | |
| } | |
| // Interaction callbacks | |
| layer.setSelectionEvents({ | |
| hover: function(selection) { | |
| if (selection.pixel && selection.leaflet_event.target) { | |
| var node = selection.leaflet_event.target._container; | |
| // WebGl Coordinate system starts in the middle and y grows upwards | |
| var x = selection.pixel.x - (node.clientWidth / 2); | |
| var y = -selection.pixel.y + (node.clientHeight / 2); | |
| scene.styles.buildings.shaders.uniforms.u_mouse_x = x; | |
| scene.styles.buildings.shaders.uniforms.u_mouse_y = y; | |
| requestRedraw(); | |
| } | |
| }, | |
| // click: function(selection) { | |
| // console.log('Click!', selection); | |
| // } | |
| }); | |
| // Scene warnings & errors. | |
| scene.subscribe({ | |
| error: function (e) { | |
| console.log('scene error:', e); | |
| }, | |
| warning: function (e) { | |
| console.log('scene warning:', e); | |
| }, | |
| load: function () { | |
| console.log('scene load complete'); | |
| } | |
| }); | |
| </script> | |
| </body> |
| cameras: | |
| camera1: | |
| type: isometric | |
| lights: | |
| directional: | |
| visible: true | |
| type: directional | |
| direction: [0, 1, -.5] | |
| diffuse: .9 | |
| ambient: .9 | |
| specular: .9 | |
| sources: | |
| osm: | |
| type: TopoJSON | |
| url: https://vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson?api_key=vector-tiles-jvpqPNW | |
| styles: | |
| buildings: | |
| base: polygons | |
| animated: true | |
| material: | |
| diffuse: | |
| texture: metallic-gold-texture-small.jpeg | |
| mapping: spheremap | |
| ambient: 0.5 | |
| specular: 0.5 | |
| shininess: 2.0 | |
| shaders: | |
| uniforms: | |
| u_mouse_x: 0 | |
| u_mouse_y: 0 | |
| blocks: | |
| global: | | |
| vec3 hsb2rgb( in float hue, in float sat, in float bri ){ | |
| vec3 rgb = clamp(abs(mod(hue*6.0+vec3(0.0,4.0,2.0), | |
| 6.0)-3.0)-1.0, | |
| 0.0, | |
| 1.0 ); | |
| rgb = rgb*rgb*(3.0-2.0*rgb); | |
| return bri * mix(vec3(1.0), rgb, sat); | |
| } | |
| position: | | |
| vec2 mousePos = vec2(u_mouse_x, u_mouse_y); | |
| // Positions are in meters, so divide by metres per pixel. | |
| vec2 vertexPos = position.xy / u_meters_per_pixel; | |
| float mouseDistance = abs(distance(mousePos, vertexPos)); | |
| float threshold = 100.; | |
| float maxHeight = 10.; | |
| float invDistance = 1. / (mouseDistance/threshold); | |
| if(position.z > 0.){ | |
| // there is probably a way to convert this if statement | |
| // to a math function. probably using step. | |
| position.z *= clamp(invDistance * maxHeight, 0., maxHeight); | |
| } | |
| color: | | |
| float height = worldPosition().z / u_meters_per_pixel; | |
| float brightness = height/10.; | |
| color *= vec4(hsb2rgb(0., 0., brightness), .4); | |
| layers: | |
| earth: | |
| data: { source: osm } | |
| draw: | |
| polygons: | |
| order: function() { return feature.sort_key; } | |
| color: '#555' | |
| landuse: | |
| visible: true | |
| data: { source: osm } | |
| draw: | |
| polygons: | |
| order: function() { return feature.sort_key; } | |
| color: '#555' | |
| water: | |
| data: { source: osm } | |
| draw: | |
| polygons: | |
| order: function() { return feature.sort_key; } | |
| color: '#96acba' | |
| # color: '#78a5c2' | |
| buildings: | |
| data: { source: osm } | |
| draw: | |
| buildings: | |
| order: function() { return feature.sort_key; } | |
| color: '#E7A431' | |
| extrude: true |
