From b4fdc97b56929c372c1e2b2b5bfad1ffa483636b Mon Sep 17 00:00:00 2001 From: xiaoiver Date: Fri, 21 Jun 2019 17:20:06 +0800 Subject: [PATCH] =?UTF-8?q?fix(polygon-layer):=20=E4=BF=AE=E5=A4=8D=20demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demos/taxi.html | 18 +++++++++++++++++- src/geom/shader/polygon_frag.glsl | 2 +- src/layer/render/point/drawFill.js | 7 +++++-- src/layer/render/polygon/drawAnimate.js | 8 ++++++-- 4 files changed, 29 insertions(+), 6 deletions(-) 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);