update taxi demo

demos/taxi.html

@@ -48,19 +48,6 @@ const scene = new L7.Scene({
   maxZoom: 18
 });
 scene.on('loaded', () => {
-  $.get('./data/cityPoint.json', data => {
-    scene.PointLayer({
-      zIndex: 10
-    })
-    .source(data)
-    .shape('2d:warn')
-    .size(90)
-    .color('#F00')
-    .style({
-      shape:'warn'
-    })
-    .render();
-  });
   $.get('./data/road.json', data => {
     scene.LineLayer({
       zIndex: 2
@@ -81,7 +68,7 @@ scene.on('loaded', () => {
      .animate({enable:true})
      .style({
        opacity:1.0,
-       baseColor:'rgb(25,25,165)',
+       baseColor:'rgb(16,16,16)',
        windowColor:'rgb(30,60,89)',
        brightColor:'rgb(155,217,255)',
 

src/geom/material/polygonMaterial.js

@@ -10,7 +10,9 @@ export default function PolygonMaterial(options) {
       u_zoom: { value: options.u_zoom || 0 },
       u_baseColor: { value: options.u_baseColor || [ 1.0, 0, 0, 1.0 ] },
       u_brightColor: { value: options.u_brightColor || [ 1.0, 0, 0, 1.0 ] },
-      u_windowColor: { value: options.u_windowColor || [ 1.0, 0, 0, 1.0 ] }
+      u_windowColor: { value: options.u_windowColor || [ 1.0, 0, 0, 1.0 ] },
+      u_near: { value: options.u_near || 0.0 },
+      u_far: { value: options.u_far || 1.0 }
     },
     vertexShader: polygon_vert,
     fragmentShader: polygon_frag,

src/geom/shader/line_frag.glsl

@@ -9,7 +9,7 @@
         if (vTime > 1.0 || vTime < 0.0) {
             discard;
       } 
-      color.a= color.a * vTime;
+      color.a= color.a * vTime * 1.5;
       #endif
       gl_FragColor = color;
       gl_FragColor.a =color.a*u_opacity;

src/geom/shader/line_vert.glsl

@@ -8,7 +8,7 @@
       mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
       v_color = a_color;
       #ifdef ANIMATE 
-        vTime = 1.0- (mod(u_time*100.,3600.)- position.z) / 100.;
+        vTime = 1.0- (mod(u_time*50.,3600.)- position.z) / 100.;
       #endif
       gl_Position = matModelViewProjection * vec4(position.xy,0., 1.0);
     }

src/geom/shader/polygon_frag.glsl

@@ -4,20 +4,45 @@ uniform sampler2D u_texture;
 uniform vec4 u_baseColor;
 uniform vec4 u_brightColor;
 uniform vec4 u_windowColor;
+uniform float u_zoom;
 uniform float u_time;
+uniform float u_near;
+uniform float u_far;
 varying vec2 v_texCoord;
 varying  vec4 v_color;
 varying float v_lightWeight;
 varying float v_size;
+
 vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {
     float s = step(hot, n);
-    return mix(darkColor, brightColor, s);
+    //vec3 color = mix(brightColor,brightColor - vec3(0.4,0.4,0.4),n);
+    vec3 color = mix(brightColor,vec3(1.0,1.0,1.0),n);
+    return mix(darkColor, color, s);
 }
 float random (vec2 st) {
-    return fract(sin(dot(st.xy,
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
-                         vec2(12.9898,78.233)))*
-        43758.5453123);
 }
+
+float LinearizeDepth() 
+{
+    float z = gl_FragCoord.z * 2.0 - 1.0;  
+    return (2.0 * u_near * u_far) / (u_far + u_near - z * (u_far - u_near));	
+}
+
+vec3 fog(vec3 color, vec3 fogColor, float depth){
+    float fogFactor=clamp(depth,0.0,1.0);
+    vec3 output_color=mix(fogColor,color,fogFactor);
+    return output_color;
+}
+
+float sdRect(vec2 p, vec2 sz) {  
+  vec2 d = abs(p) - sz;
+  float outside = length(max(d, 0.));
+  float inside = min(max(d.x, d.y), 0.);
+  return outside + inside;
+}
+
+
 void main() {
    if(v_color.w == 0.0) {
      discard;
@@ -27,17 +52,17 @@ void main() {
     vec3 brightColor = u_brightColor.xyz;
     vec3 windowColor = u_windowColor.xyz;
     float targetColId = 5.;
+    float depth = 1.0 - LinearizeDepth() / u_far * u_zoom;  
+    vec3 fogColor = vec3(23.0/255.0,31.0/255.0,51.0/255.0); 
    #ifdef ANIMATE 
      if(v_texCoord.x < 0.) { //顶部颜色
-       //gl_FragColor = vec4(1.0,0.,0.,1.0);  // v_color.w * u_opacity
+       vec3 foggedColor = fog(baseColor.xyz + vec3(0.12*0.9,0.2*0.9,0.3*0.9),fogColor,depth);
-       gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);
+       gl_FragColor = vec4( foggedColor, v_color.w * u_opacity);
      }else { // 侧面颜色
-        //vec4 color = texture2D(u_texture,v_texCoord) * v_color;
         vec2 st = v_texCoord; 
-        // st.y = st.y / (3000.0 - v_size) *3000.;
         vec2  UvScale = v_texCoord;
-        float tStep = 0.01;
+        float tStep = min(0.08,max(0.05* (18.0-u_zoom),0.02));
-        float tStart = 0.1 * tStep;
+        float tStart = 0.25 * tStep;
         float tEnd = 0.75 * tStep;
         float u = mod(UvScale.x, tStep);
         float v = mod(UvScale.y, tStep);
@@ -50,6 +75,8 @@ void main() {
         // 将窗户颜色和墙面颜色区别开来
         float sU = step(tStart, u) - step(tEnd, u);
         float sV = step(tStart, v) - step(tEnd, v);
+        vec2 windowSize = vec2(abs(tEnd-tStart),abs(tEnd-tStart));
+        float dist = sdRect(vec2(u,v), windowSize);
         float s = sU * sV;
    
         float curColId = floor(UvScale.x / tStep);
@@ -60,17 +87,23 @@ void main() {
         if(ux == targetColId){
             n =0.;
         }
-    
+        float timeP = min(0.95, abs ( sin(u_time/6.0) ) );
-        vec3 color = mix(baseColor, getWindowColor(n,0.8,brightColor,windowColor), s);
+        float hot = smoothstep(1.0,0.0,timeP);
+        vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), s);
+        //vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), 1.0);
         float sFinal = s * sCol * sRow;
-        color += mix(baseColor, brightColor, sFinal);
+        color += mix(baseColor, brightColor, sFinal*n);
         // if (st.y<0.01){
         // color = baseColor;
         //  }
         // if(head ==1.0) { // 顶部亮线
         //     color = brightColor;
         // }
-        gl_FragColor = vec4(color * v_lightWeight,1.0); 
+        color = color * v_lightWeight;
+
+        vec3 foggedColor = fog(color,fogColor,depth);
+         
+        gl_FragColor = vec4(foggedColor,1.0); 
      }
    #else
        gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);

src/layer/polygonLayer.js

@@ -62,11 +62,14 @@ export default class PolygonLayer extends Layer {
   _renderPolygon() {
     const animateOptions = this.get('animateOptions');
     const { opacity, baseColor, brightColor, windowColor } = this.get('styleOptions');
+    const camera = this.map.getCameraState();
     const material = new PolygonMaterial({
       u_opacity: opacity,
       u_baseColor: baseColor,
       u_brightColor: brightColor,
-      u_windowColor: windowColor
+      u_windowColor: windowColor,
+      u_near: camera.near,
+      u_far: camera.far
     });
 
     const { attributes } = this._buffer;