From 26af005a1487474ef3bddde9d63150078f281d71 Mon Sep 17 00:00:00 2001
From: huyang <taiyuanhy@163.com>
Date: Mon, 11 Dec 2023 15:35:53 +0800
Subject: [PATCH] Chore citybuilding update engine (#2149)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: fillImage中uniform没对齐的bug

* chore: update citybuilding to Device Engine

---------

Co-authored-by: huyang <huyang@uinnova.com>
---
 dev-demos/features/citybuilding/amap1.tsx     | 127 +++++++++---------
 dev-demos/features/citybuilding/amap2.tsx     | 127 +++++++++---------
 dev-demos/features/citybuilding/mapbox.tsx    | 126 ++++++++---------
 .../layers/src/citybuliding/models/build.ts   |  39 ++++--
 .../src/citybuliding/shaders/build_frag.glsl  |  49 +++----
 .../src/citybuliding/shaders/build_vert.glsl  |  40 +++---
 6 files changed, 269 insertions(+), 239 deletions(-)

diff --git a/dev-demos/features/citybuilding/amap1.tsx b/dev-demos/features/citybuilding/amap1.tsx
index a3c1412848..99e0021865 100644
--- a/dev-demos/features/citybuilding/amap1.tsx
+++ b/dev-demos/features/citybuilding/amap1.tsx
@@ -1,5 +1,5 @@
 // @ts-ignore
-import { CityBuildingLayer, LineLayer, PolygonLayer, Scene } from '@antv/l7';
+import { Scene,CityBuildingLayer } from '@antv/l7';
 // @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
@@ -8,6 +8,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer:'device',
       map: new GaodeMap({
         style: 'dark',
         center: [120.145, 30.238915],
@@ -46,71 +47,71 @@ export default () => {
       scene.addLayer(pointLayer);
     });
 
-    fetch(
-      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
-    )
-      .then((data) => data.json())
-      .then(({ lakeBorderData, lakeData, landData }) => {
-        const lakeLayer = new PolygonLayer()
-          .source(lakeData)
-          .shape('fill')
-          .color('#1E90FF')
-          .style({
-            opacity: 0.4,
-            opacityLinear: {
-              enable: true,
-              dir: 'out', // in - out
-            },
-          });
-        const landLayer = new PolygonLayer()
-          .source(landData)
-          .shape('fill')
-          .color('#3CB371')
-          .style({
-            opacity: 0.4,
-            opacityLinear: {
-              enable: true,
-              dir: 'in', // in - out
-            },
-          });
+    // fetch(
+    //   'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
+    // )
+    //   .then((data) => data.json())
+    //   .then(({ lakeBorderData, lakeData, landData }) => {
+    //     const lakeLayer = new PolygonLayer()
+    //       .source(lakeData)
+    //       .shape('fill')
+    //       .color('#1E90FF')
+    //       .style({
+    //         opacity: 0.4,
+    //         opacityLinear: {
+    //           enable: true,
+    //           dir: 'out', // in - out
+    //         },
+    //       });
+    //     const landLayer = new PolygonLayer()
+    //       .source(landData)
+    //       .shape('fill')
+    //       .color('#3CB371')
+    //       .style({
+    //         opacity: 0.4,
+    //         opacityLinear: {
+    //           enable: true,
+    //           dir: 'in', // in - out
+    //         },
+    //       });
 
-        const lakeBorderLayer = new PolygonLayer()
-          .source(lakeBorderData)
-          .shape('fill')
-          .color('#ccc')
-          .style({
-            opacity: 0.5,
-            opacityLinear: {
-              enable: true,
-              dir: 'in', // in - out
-            },
-          });
+    //     const lakeBorderLayer = new PolygonLayer()
+    //       .source(lakeBorderData)
+    //       .shape('fill')
+    //       .color('#ccc')
+    //       .style({
+    //         opacity: 0.5,
+    //         opacityLinear: {
+    //           enable: true,
+    //           dir: 'in', // in - out
+    //         },
+    //       });
 
-        scene.addLayer(lakeLayer);
-        scene.addLayer(lakeBorderLayer);
-        scene.addLayer(landLayer);
-      });
+    //     scene.addLayer(lakeLayer);
+    //     scene.addLayer(lakeBorderLayer);
+    //     scene.addLayer(landLayer);
+    //   });
 
-    fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        const layer = new LineLayer({
-          zIndex: 0,
-          depth: true,
-        })
-          .source(data)
-          .size(1)
-          .shape('line')
-          .color('#1990FF')
-          .animate({
-            interval: 1, // 间隔
-            duration: 2, // 持续时间，延时
-            trailLength: 2, // 流线长度
-          });
-        scene.addLayer(layer);
-      });
+    // fetch(
+    //   'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+    // )
+    //   .then((res) => res.json())
+    //   .then((data) => {
+    //     const layer = new LineLayer({
+    //       zIndex: 0,
+    //       depth: true,
+    //     })
+    //       .source(data)
+    //       .size(1)
+    //       .shape('line')
+    //       .color('#1990FF')
+    //       .animate({
+    //         interval: 1, // 间隔
+    //         duration: 2, // 持续时间，延时
+    //         trailLength: 2, // 流线长度
+    //       });
+    //     scene.addLayer(layer);
+    //   });
   }, []);
   return (
     <div
diff --git a/dev-demos/features/citybuilding/amap2.tsx b/dev-demos/features/citybuilding/amap2.tsx
index a3c1412848..002a70b74f 100644
--- a/dev-demos/features/citybuilding/amap2.tsx
+++ b/dev-demos/features/citybuilding/amap2.tsx
@@ -1,5 +1,5 @@
 // @ts-ignore
-import { CityBuildingLayer, LineLayer, PolygonLayer, Scene } from '@antv/l7';
+import { CityBuildingLayer, Scene } from '@antv/l7';
 // @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
@@ -8,6 +8,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer:'device',
       map: new GaodeMap({
         style: 'dark',
         center: [120.145, 30.238915],
@@ -46,71 +47,71 @@ export default () => {
       scene.addLayer(pointLayer);
     });
 
-    fetch(
-      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
-    )
-      .then((data) => data.json())
-      .then(({ lakeBorderData, lakeData, landData }) => {
-        const lakeLayer = new PolygonLayer()
-          .source(lakeData)
-          .shape('fill')
-          .color('#1E90FF')
-          .style({
-            opacity: 0.4,
-            opacityLinear: {
-              enable: true,
-              dir: 'out', // in - out
-            },
-          });
-        const landLayer = new PolygonLayer()
-          .source(landData)
-          .shape('fill')
-          .color('#3CB371')
-          .style({
-            opacity: 0.4,
-            opacityLinear: {
-              enable: true,
-              dir: 'in', // in - out
-            },
-          });
+    // fetch(
+    //   'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
+    // )
+    //   .then((data) => data.json())
+    //   .then(({ lakeBorderData, lakeData, landData }) => {
+    //     const lakeLayer = new PolygonLayer()
+    //       .source(lakeData)
+    //       .shape('fill')
+    //       .color('#1E90FF')
+    //       .style({
+    //         opacity: 0.4,
+    //         opacityLinear: {
+    //           enable: true,
+    //           dir: 'out', // in - out
+    //         },
+    //       });
+    //     const landLayer = new PolygonLayer()
+    //       .source(landData)
+    //       .shape('fill')
+    //       .color('#3CB371')
+    //       .style({
+    //         opacity: 0.4,
+    //         opacityLinear: {
+    //           enable: true,
+    //           dir: 'in', // in - out
+    //         },
+    //       });
 
-        const lakeBorderLayer = new PolygonLayer()
-          .source(lakeBorderData)
-          .shape('fill')
-          .color('#ccc')
-          .style({
-            opacity: 0.5,
-            opacityLinear: {
-              enable: true,
-              dir: 'in', // in - out
-            },
-          });
+    //     const lakeBorderLayer = new PolygonLayer()
+    //       .source(lakeBorderData)
+    //       .shape('fill')
+    //       .color('#ccc')
+    //       .style({
+    //         opacity: 0.5,
+    //         opacityLinear: {
+    //           enable: true,
+    //           dir: 'in', // in - out
+    //         },
+    //       });
 
-        scene.addLayer(lakeLayer);
-        scene.addLayer(lakeBorderLayer);
-        scene.addLayer(landLayer);
-      });
+    //     scene.addLayer(lakeLayer);
+    //     scene.addLayer(lakeBorderLayer);
+    //     scene.addLayer(landLayer);
+    //   });
 
-    fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        const layer = new LineLayer({
-          zIndex: 0,
-          depth: true,
-        })
-          .source(data)
-          .size(1)
-          .shape('line')
-          .color('#1990FF')
-          .animate({
-            interval: 1, // 间隔
-            duration: 2, // 持续时间，延时
-            trailLength: 2, // 流线长度
-          });
-        scene.addLayer(layer);
-      });
+    // fetch(
+    //   'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+    // )
+    //   .then((res) => res.json())
+    //   .then((data) => {
+    //     const layer = new LineLayer({
+    //       zIndex: 0,
+    //       depth: true,
+    //     })
+    //       .source(data)
+    //       .size(1)
+    //       .shape('line')
+    //       .color('#1990FF')
+    //       .animate({
+    //         interval: 1, // 间隔
+    //         duration: 2, // 持续时间，延时
+    //         trailLength: 2, // 流线长度
+    //       });
+    //     scene.addLayer(layer);
+    //   });
   }, []);
   return (
     <div
diff --git a/dev-demos/features/citybuilding/mapbox.tsx b/dev-demos/features/citybuilding/mapbox.tsx
index 2f7dbe594d..80026a0065 100644
--- a/dev-demos/features/citybuilding/mapbox.tsx
+++ b/dev-demos/features/citybuilding/mapbox.tsx
@@ -1,5 +1,5 @@
 // @ts-ignore
-import { CityBuildingLayer, LineLayer, PolygonLayer, Scene } from '@antv/l7';
+import { CityBuildingLayer, Scene } from '@antv/l7';
 // @ts-ignore
 import { MapLibre } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
@@ -46,71 +46,71 @@ export default () => {
       scene.addLayer(pointLayer);
     });
 
-    fetch(
-      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
-    )
-      .then((data) => data.json())
-      .then(({ lakeBorderData, lakeData, landData }) => {
-        const lakeLayer = new PolygonLayer()
-          .source(lakeData)
-          .shape('fill')
-          .color('#1E90FF')
-          .style({
-            opacity: 0.4,
-            opacityLinear: {
-              enable: true,
-              dir: 'out', // in - out
-            },
-          });
-        const landLayer = new PolygonLayer()
-          .source(landData)
-          .shape('fill')
-          .color('#3CB371')
-          .style({
-            opacity: 0.4,
-            opacityLinear: {
-              enable: true,
-              dir: 'in', // in - out
-            },
-          });
+    // fetch(
+    //   'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
+    // )
+    //   .then((data) => data.json())
+    //   .then(({ lakeBorderData, lakeData, landData }) => {
+    //     const lakeLayer = new PolygonLayer()
+    //       .source(lakeData)
+    //       .shape('fill')
+    //       .color('#1E90FF')
+    //       .style({
+    //         opacity: 0.4,
+    //         opacityLinear: {
+    //           enable: true,
+    //           dir: 'out', // in - out
+    //         },
+    //       });
+    //     const landLayer = new PolygonLayer()
+    //       .source(landData)
+    //       .shape('fill')
+    //       .color('#3CB371')
+    //       .style({
+    //         opacity: 0.4,
+    //         opacityLinear: {
+    //           enable: true,
+    //           dir: 'in', // in - out
+    //         },
+    //       });
 
-        const lakeBorderLayer = new PolygonLayer()
-          .source(lakeBorderData)
-          .shape('fill')
-          .color('#ccc')
-          .style({
-            opacity: 0.5,
-            opacityLinear: {
-              enable: true,
-              dir: 'in', // in - out
-            },
-          });
+    //     const lakeBorderLayer = new PolygonLayer()
+    //       .source(lakeBorderData)
+    //       .shape('fill')
+    //       .color('#ccc')
+    //       .style({
+    //         opacity: 0.5,
+    //         opacityLinear: {
+    //           enable: true,
+    //           dir: 'in', // in - out
+    //         },
+    //       });
 
-        scene.addLayer(lakeLayer);
-        scene.addLayer(lakeBorderLayer);
-        scene.addLayer(landLayer);
-      });
+    //     scene.addLayer(lakeLayer);
+    //     scene.addLayer(lakeBorderLayer);
+    //     scene.addLayer(landLayer);
+    //   });
 
-    fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        const layer = new LineLayer({
-          zIndex: 0,
-          depth: true,
-        })
-          .source(data)
-          .size(1)
-          .shape('line')
-          .color('#1990FF')
-          .animate({
-            interval: 1, // 间隔
-            duration: 2, // 持续时间，延时
-            trailLength: 2, // 流线长度
-          });
-        scene.addLayer(layer);
-      });
+    // fetch(
+    //   'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+    // )
+    //   .then((res) => res.json())
+    //   .then((data) => {
+    //     const layer = new LineLayer({
+    //       zIndex: 0,
+    //       depth: true,
+    //     })
+    //       .source(data)
+    //       .size(1)
+    //       .shape('line')
+    //       .color('#1990FF')
+    //       .animate({
+    //         interval: 1, // 间隔
+    //         duration: 2, // 持续时间，延时
+    //         trailLength: 2, // 流线长度
+    //       });
+    //     scene.addLayer(layer);
+    //   });
   }, []);
   return (
     <div
diff --git a/packages/layers/src/citybuliding/models/build.ts b/packages/layers/src/citybuliding/models/build.ts
index 6436f3bdb6..49ca9fbe91 100644
--- a/packages/layers/src/citybuliding/models/build.ts
+++ b/packages/layers/src/citybuliding/models/build.ts
@@ -1,15 +1,24 @@
-import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
+import { AttributeType, gl, IEncodeFeature, IModel, IModelUniform } from '@antv/l7-core';
 import { rgb2arr } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { ICityBuildLayerStyleOptions } from '../../core/interface';
 import { PolygonExtrudeTriangulation } from '../../core/triangulation';
 import buildFrag from '../shaders/build_frag.glsl';
 import buildVert from '../shaders/build_vert.glsl';
+import { ShaderLocation } from '../../core/CommonStyleAttribute';
 export default class CityBuildModel extends BaseModel {
   private cityCenter: [number, number];
   private cityMinSize: number;
-
-  public getUninforms() {
+  public getUninforms(): IModelUniform {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return {
+      ...commoninfo.uniformsOption,
+      ...attributeInfo.uniformsOption
+    }
+  }
+  protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption:{[key: string]: any}  } {
     const {
       opacity = 1,
       baseColor = 'rgb(16,16,16)',
@@ -24,19 +33,23 @@ export default class CityBuildModel extends BaseModel {
         sweepCenter: this.cityCenter,
       },
     } = this.layer.getLayerConfig() as ICityBuildLayerStyleOptions;
-    return {
-      u_cityCenter: sweep.sweepCenter || this.cityCenter,
-      u_cityMinSize: this.cityMinSize * sweep.sweepRadius,
-      u_circleSweep: sweep.enable ? 1.0 : 0.0,
-      u_circleSweepColor: rgb2arr(sweep.sweepColor).slice(0, 3),
-      u_circleSweepSpeed: sweep.sweepSpeed,
 
-      u_opacity: opacity,
+    const commonOptions = {
       u_baseColor: rgb2arr(baseColor),
       u_brightColor: rgb2arr(brightColor),
       u_windowColor: rgb2arr(windowColor),
+      u_circleSweepColor: [...rgb2arr(sweep.sweepColor).slice(0, 3),1.0],
+      u_cityCenter: sweep.sweepCenter || this.cityCenter,
+      u_circleSweep: sweep.enable ? 1.0 : 0.0,
+      u_cityMinSize: this.cityMinSize * sweep.sweepRadius,
+      u_circleSweepSpeed: sweep.sweepSpeed,
+      u_opacity: opacity,
+      u_near : 0,
+      u_far : 1,
       u_time: this.layer.getLayerAnimateTime() || time,
     };
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
   }
 
   public calCityGeo() {
@@ -64,7 +77,7 @@ export default class CityBuildModel extends BaseModel {
 
   public async initModels(): Promise<IModel[]> {
     this.calCityGeo();
-
+    this.initUniformsBuffer();
     this.startModelAnimate();
 
     return this.buildModels();
@@ -77,6 +90,7 @@ export default class CityBuildModel extends BaseModel {
       fragmentShader: buildFrag,
       triangulation: PolygonExtrudeTriangulation,
       depth: { enable: true },
+      inject:this.getInject(),
       cull: {
         enable: true,
         face: gl.BACK,
@@ -92,6 +106,7 @@ export default class CityBuildModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Normal',
+        shaderLocation:ShaderLocation.NORMAL,
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.STATIC_DRAW,
@@ -116,6 +131,7 @@ export default class CityBuildModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Size',
+        shaderLocation:ShaderLocation.SIZE,
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.DYNAMIC_DRAW,
@@ -134,6 +150,7 @@ export default class CityBuildModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Uv',
+        shaderLocation:ShaderLocation.UV,
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.DYNAMIC_DRAW,
diff --git a/packages/layers/src/citybuliding/shaders/build_frag.glsl b/packages/layers/src/citybuliding/shaders/build_frag.glsl
index f643a89019..669b88e9eb 100644
--- a/packages/layers/src/citybuliding/shaders/build_frag.glsl
+++ b/packages/layers/src/citybuliding/shaders/build_frag.glsl
@@ -1,22 +1,25 @@
-uniform float u_opacity: 1.0;
-uniform vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ];
-uniform vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ];
-uniform vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ];
-uniform float u_near : 0;
-uniform float u_far : 1;
-varying vec4 v_Color;
-varying vec2 v_texCoord;
-uniform float u_Zoom : 1;
-uniform float u_time;
-
-uniform float u_circleSweep;
-uniform float u_cityMinSize;
-uniform vec3 u_circleSweepColor;
-uniform float u_circleSweepSpeed;
-
-varying float v_worldDis;
+precision highp float;
+layout(std140) uniform commonUniforms {
+  vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_circleSweepColor;
+  vec2 u_cityCenter;
+  float u_circleSweep;
+  float u_cityMinSize;
+  float u_circleSweepSpeed;
+  float u_opacity: 1.0;
+  float u_near : 0;
+  float u_far : 1;
+  float u_time;
+};
+in vec4 v_Color;
+in vec2 v_texCoord;
+in float v_worldDis;
+out vec4 outputColor;
 
 #pragma include "picking"
+#pragma include "scene_uniforms"
 
 vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {
     float s = step(hot, n);
@@ -48,7 +51,7 @@ float sdRect(vec2 p, vec2 sz) {
 }
 
 void main() {
-  gl_FragColor = v_Color;
+  outputColor = v_Color;
   vec3 baseColor = u_baseColor.xyz;
   vec3 brightColor = u_brightColor.xyz;
   vec3 windowColor = u_windowColor.xyz;
@@ -57,7 +60,7 @@ void main() {
   vec3 fogColor = vec3(23.0/255.0,31.0/255.0,51.0/255.0);
   if(v_texCoord.x < 0.) { //顶部颜色
        vec3 foggedColor = fog(baseColor.xyz + vec3(0.12*0.9,0.2*0.9,0.3*0.9),fogColor,depth);
-       gl_FragColor = vec4( foggedColor, v_Color.w);
+       outputColor = vec4( foggedColor, v_Color.w);
   }else { // 侧面颜色
         vec2 st = v_texCoord;
         vec2  UvScale = v_texCoord;
@@ -103,15 +106,15 @@ void main() {
 
         vec3 foggedColor = fog(color,fogColor,depth);
 
-        gl_FragColor = vec4(foggedColor,1.0);
+        outputColor = vec4(foggedColor,1.0);
   }
 
 
   if(u_circleSweep > 0.0 && v_worldDis < u_cityMinSize) {
     float r = fract(((v_worldDis/u_cityMinSize) - u_time * u_circleSweepSpeed) * 2.0);
-    gl_FragColor.rgb += r * r * u_circleSweepColor;
+    outputColor.rgb += r * r * u_circleSweepColor.rgb;
   }
    
-  gl_FragColor.a *= u_opacity;
-  gl_FragColor = filterColor(gl_FragColor);
+  outputColor.a *= u_opacity;
+  outputColor = filterColor(outputColor);
 }
diff --git a/packages/layers/src/citybuliding/shaders/build_vert.glsl b/packages/layers/src/citybuliding/shaders/build_vert.glsl
index ae091a8534..54118f530e 100644
--- a/packages/layers/src/citybuliding/shaders/build_vert.glsl
+++ b/packages/layers/src/citybuliding/shaders/build_vert.glsl
@@ -4,22 +4,30 @@ precision highp float;
 #define diffuseRatio 0.3
 #define specularRatio 0.2
 
-attribute vec4 a_Color;
-attribute vec3 a_Position;
-attribute vec3 a_Normal;
-attribute float a_Size;
-uniform mat4 u_ModelMatrix;
-
-attribute vec2 a_Uv;
-varying vec2 v_texCoord;
-
-varying vec4 v_Color;
-
-uniform float u_circleSweep;
-uniform vec2 u_cityCenter;
-
-varying float v_worldDis;
-
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 9) in float a_Size;
+layout(location = 13) in vec3 a_Normal;
+layout(location = 14) in vec2 a_Uv;
+
+out vec2 v_texCoord;
+out vec4 v_Color;
+out float v_worldDis;
+
+layout(std140) uniform commonUniforms {
+  vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_circleSweepColor;
+  vec2 u_cityCenter;
+  float u_circleSweep;
+  float u_cityMinSize;
+  float u_circleSweepSpeed;
+  float u_opacity: 1.0;
+  float u_near : 0;
+  float u_far : 1;
+  float u_time;
+};
 #pragma include "projection"
 #pragma include "light"
 #pragma include "picking"