fix(polygon-layer): 修复 demo

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();
     

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);
          

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;

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);