diff --git a/demos/taxi.html b/demos/taxi.html
index dc2edc621e..8b89708488 100644
--- a/demos/taxi.html
+++ b/demos/taxi.html
@@ -55,7 +55,23 @@ scene.on('loaded', () => {
        baseColor:'rgb(16,16,16)',
        windowColor:'rgb(30,60,89)',
        //brightColor:'rgb(155,217,255)'
-       brightColor:'rgb(255,176,38)'
+       brightColor:'rgb(255,176,38)',
+       lights: [
+        {
+          type: 'directional',
+          direction: [ 1, 10.5, 12 ],
+          ambient: [ 0.2, 0.2, 0.2 ],
+          diffuse: 'red',
+          specular: [ 0.1, 0.1, 0.1 ]
+        },
+        {
+          type: 'directional',
+          direction: [ 1, -10.5, 12 ],
+          ambient: [ 0.2, 0.2, 0.2 ],
+          diffuse: 'green',
+          specular: [ 0.1, 0.1, 0.1 ]
+        },
+      ]
      })
     .render();
     
diff --git a/src/geom/shader/polygon_frag.glsl b/src/geom/shader/polygon_frag.glsl
index 0bc49f7142..8f1780ce9a 100644
--- a/src/geom/shader/polygon_frag.glsl
+++ b/src/geom/shader/polygon_frag.glsl
@@ -100,7 +100,7 @@ void main() {
         // if(head ==1.0) { // 顶部亮线
         //     color = brightColor;
         // }
-        color = v_color.rgb;
+        color = color * v_color.rgb;
 
         vec3 foggedColor = fog(color,fogColor,depth);
          
diff --git a/src/layer/render/point/drawFill.js b/src/layer/render/point/drawFill.js
index a6ec26dc49..cc2fcf741e 100644
--- a/src/layer/render/point/drawFill.js
+++ b/src/layer/render/point/drawFill.js
@@ -9,6 +9,7 @@ import * as THREE from '../../../core/three';
 import * as PointBuffer from '../../../geom/buffer/point/index';
 import DrawStroke from './drawStroke';
 import PolygonMaterial from '../../../geom/material/polygonMaterial';
+import { generateLightingUniforms } from '../../../util/shaderModule';
 export default function DrawFill(layerData, layer) {
   const style = layer.get('styleOptions');
   const activeOption = layer.get('activedOptions');
@@ -34,9 +35,11 @@ export default function DrawFill(layerData, layer) {
   const material = new PolygonMaterial({
     u_opacity: style.opacity,
     u_activeColor: activeOption.fill,
-    u_zoom: layer.scene.getZoom()
+    u_zoom: layer.scene.getZoom(),
+    ...generateLightingUniforms(style.lights)
   }, {
-    SHAPE: true
+    SHAPE: true,
+    LIGHTING: true
   });
   material.setDefinesvalue('SHAPE', true);
   material.depthTest = false;
diff --git a/src/layer/render/polygon/drawAnimate.js b/src/layer/render/polygon/drawAnimate.js
index b8eed2ab34..beae138076 100644
--- a/src/layer/render/polygon/drawAnimate.js
+++ b/src/layer/render/polygon/drawAnimate.js
@@ -1,6 +1,8 @@
 import * as THREE from '../../../core/three';
 import PolygonBuffer from '../../../geom/buffer/polygon';
 import PolygonMaterial from '../../../geom/material/polygonMaterial';
+import { generateLightingUniforms } from '../../../util/shaderModule';
+
 export default function DrawAnimate(layerData, layer) {
   const style = layer.get('styleOptions');
   const { near, far } = layer.map.getCameraState();
@@ -9,7 +11,7 @@ export default function DrawAnimate(layerData, layer) {
     shape: 'extrude',
     layerData
   });
-  const { opacity, baseColor, brightColor, windowColor } = style;
+  const { opacity, baseColor, brightColor, windowColor, lights } = style;
   const geometry = new THREE.BufferGeometry();
   geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
   geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
@@ -23,9 +25,11 @@ export default function DrawAnimate(layerData, layer) {
     u_brightColor: brightColor,
     u_windowColor: windowColor,
     u_near: near,
-    u_far: far
+    u_far: far,
+    ...generateLightingUniforms(lights)
   }, {
     SHAPE: false,
+    LIGHTING: true,
     ANIMATE: true
   });
   const fillPolygonMesh = new THREE.Mesh(geometry, material);