From c38805821a97488b633aade16fc5acae6d598106 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Thu, 24 Feb 2022 16:17:38 +0800 Subject: [PATCH] Shihui (#981) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 增加 bloomPass1.0、修改渲染流程，让 multiPass 有正确的渲染顺序 * style: lint style * feat: 取消 bloom 在 postprocessor 中的多次渲染（没有明显优化） * feat: polygon extrude 模式支持配置固定高度 * style: lint style * feat: 优化后处理 bloom 的效果 * feat: 修改交替绘制 bloom 的写法 * style: lint style * feat: 完善 iconService 加载渲染和销毁 * style: lint style * feat: 补全 mapbox 模式下等面积点 * style: lint style * fix: 修复 pointLayer animate 模式 opacity 失效 * style: lint style * feat: 拆分 pointLayer 的 shader * style: lint sytle * feat: 拆分 lineLayer 的 linear 模式 * style: lint style * feat: 优化点击的拾取判断 * style: lint style * feat: 取消圆柱 shader 中的三元表达式、增强健壮性 * feat: 点图层圆柱体支持固定高度配置 heightfixed * feat: 点图层圆柱体支持拾取高亮颜色的光照计算 * style: lint style * style: lint style * feat: 拆分 lintLayer line 模式下的 dash line * style: lint style * feat: lineLayer simpleline 的 linear shader 代码拆分 * style: lint style * feat: 拆分 lineLayer arcLine linear shader 代码 * style: line style * feat: lineLayer arc line 在 shader 中移除 linear 部分计算 * feat: 拆分 lineLayer arc dash 虚线的 shader 代码 * style: lint style * feat: 拆分 lineLayer arc3d linear 部分的 shader 代码 * style: lint style * style: lint style * feat: 完善 isMiniAli 的判断，兼容 smallfish H5+ 的模式 * style: lint style * style: adjust mulpass demo * feat: 提供 getScale 方法 * style: lint style * feat: 修复支付宝小程序h5+开发模式下引入l7样式失效问题 * feat: 修改 l7hammerjs 的导入 * fix: 恢复原有的 picking shader 代码，解决移动端高亮存在冲突破面的情况 * feat: 重新设置 l7hammerjs 的导入方式 * fix: 修复 createTexture 的数据类型在 支付宝 环境中使用 Uint8ClampedArray 存在数据类型不兼容的现象 * style: lint style * feat: 兼容高德地图 2.x 在部分安卓手机上点击拾取失效的情况 * style: lint style * feat: 优化经典热力图显示效果 * style: lint style --- packages/layers/src/heatmap/models/heatmap.ts | 6 +- .../src/heatmap/shaders/heatmap_frag.glsl | 41 +++++++++++-- .../src/heatmap/shaders/heatmap_vert.glsl | 5 +- stories/Map/components/amap2demo_heatmap.tsx | 59 +++++++++++++------ 4 files changed, 85 insertions(+), 26 deletions(-) diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts index 0c72110c8a..7dd1ba3cdd 100644 --- a/packages/layers/src/heatmap/models/heatmap.ts +++ b/packages/layers/src/heatmap/models/heatmap.ts @@ -16,10 +16,14 @@ import { IHeatMapLayerStyleOptions } from '../../core/interface'; import { HeatmapTriangulation } from '../../core/triangulation'; import heatmap3DFrag from '../shaders/heatmap_3d_frag.glsl'; import heatmap3DVert from '../shaders/heatmap_3d_vert.glsl'; + +// 绘制平面热力的 shader import heatmapColorFrag from '../shaders/heatmap_frag.glsl'; +import heatmapColorVert from '../shaders/heatmap_vert.glsl'; + import heatmapFramebufferFrag from '../shaders/heatmap_framebuffer_frag.glsl'; import heatmapFramebufferVert from '../shaders/heatmap_framebuffer_vert.glsl'; -import heatmapColorVert from '../shaders/heatmap_vert.glsl'; + import { heatMap3DTriangulation } from '../triangulation'; @injectable() export default class HeatMapModel extends BaseModel { diff --git a/packages/layers/src/heatmap/shaders/heatmap_frag.glsl b/packages/layers/src/heatmap/shaders/heatmap_frag.glsl index 2d77301318..82f41ec2cd 100644 --- a/packages/layers/src/heatmap/shaders/heatmap_frag.glsl +++ b/packages/layers/src/heatmap/shaders/heatmap_frag.glsl @@ -1,12 +1,43 @@ -uniform sampler2D u_texture; -uniform sampler2D u_colorTexture; +uniform sampler2D u_texture; // 热力强度图 +uniform sampler2D u_colorTexture; // 根据强度分布的色带 uniform float u_opacity; varying vec2 v_texCoord; -varying float v_intensity; + +float getBlurIndusty() { + float h = 2.0/512.0; + vec2 vUv = v_texCoord; + float i11 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y + 1.0 * h) ).r; + float i12 = texture2D( u_texture, vec2( vUv.x - 0.0 * h, vUv.y + 1.0 * h) ).r; + float i13 = texture2D( u_texture, vec2( vUv.x + 1.0 * h, vUv.y + 1.0 * h) ).r; + + float i21 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y) ).r; + float i22 = texture2D( u_texture, vec2( vUv.x , vUv.y) ).r; + float i23 = texture2D( u_texture, vec2( vUv.x + 1.0 * h, vUv.y) ).r; + + float i31 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y-1.0*h) ).r; + float i32 = texture2D( u_texture, vec2( vUv.x - 0.0 * h, vUv.y-1.0*h) ).r; + float i33 = texture2D( u_texture, vec2( vUv.x + 1.0 * h, vUv.y-1.0*h) ).r; + + return( + i11 + + i12 + + i13 + + i21 + + i21 + + i22 + + i23 + + i31 + + i32 + + i33 + )/9.0; +} + void main(){ - float intensity = texture2D(u_texture, v_texCoord).r; - vec4 color = texture2D(u_colorTexture,vec2(intensity, 0)); + // float intensity = texture2D(u_texture, v_texCoord).r; + float intensity = getBlurIndusty(); + vec4 color = texture2D(u_colorTexture, vec2(intensity, 0.0)); + gl_FragColor =color; gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity; diff --git a/packages/layers/src/heatmap/shaders/heatmap_vert.glsl b/packages/layers/src/heatmap/shaders/heatmap_vert.glsl index fdc8a697e0..58a55e8610 100644 --- a/packages/layers/src/heatmap/shaders/heatmap_vert.glsl +++ b/packages/layers/src/heatmap/shaders/heatmap_vert.glsl @@ -1,11 +1,10 @@ precision highp float; attribute vec3 a_Position; attribute vec2 a_Uv; -uniform sampler2D u_texture; varying vec2 v_texCoord; -varying float v_intensity; + void main() { v_texCoord = a_Uv; - v_intensity = texture2D(u_texture, v_texCoord).r; + gl_Position = vec4(a_Position.xy, 0, 1.); } diff --git a/stories/Map/components/amap2demo_heatmap.tsx b/stories/Map/components/amap2demo_heatmap.tsx index 20c878bd16..3a8b162542 100644 --- a/stories/Map/components/amap2demo_heatmap.tsx +++ b/stories/Map/components/amap2demo_heatmap.tsx @@ -1,5 +1,5 @@ import { Scene, HeatmapLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_heatmap extends React.Component { @@ -13,38 +13,63 @@ export default class Amap2demo_heatmap extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Mapbox({ + // pitch: 0, + // center: [127.5671666579043, 7.445038892195569], + // zoom: 2.632456779444394, + style: 'dark', pitch: 0, - center: [127.5671666579043, 7.445038892195569], - zoom: 2.632456779444394, + center: [120, 30], + zoom: 4, }), }); this.scene = scene; scene.on('loaded', () => { + // fetch( + // 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', + // ) + // .then((res) => res.json()) + // .then((data) => { + // const layer = new HeatmapLayer({}) + // .source(data) + // .shape('heatmap') + // .size('mag', [0, 1.0]) // weight映射通道 + // .style({ + // intensity: 2, + // radius: 20, + // opacity: 1.0, + // rampColors: { + // colors: [ + // '#FF4818', + // '#F7B74A', + // '#FFF598', + // '#91EABC', + // '#2EA9A1', + // '#206C7C', + // ].reverse(), + // positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + // }, + // }); + // scene.addLayer(layer); + // }); + fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', + 'https://gw.alipayobjects.com/os/bmw-prod/95d5a2c3-f8fa-47f3-8664-ecb8459565ee.json', ) .then((res) => res.json()) .then((data) => { const layer = new HeatmapLayer({}) .source(data) .shape('heatmap') - .size('mag', [0, 1.0]) // weight映射通道 + .size('weight', [0, 1.0]) // weight映射通道 .style({ - intensity: 2, - radius: 20, + intensity: 3, + radius: 24, opacity: 1.0, rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + colors: ['#030EAB', '#0F41EB', '#40D785', '#F1D41A', '#FE0257'], + positions: [0, 0.25, 0.5, 0.75, 1.0], }, }); scene.addLayer(layer);