* 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
This commit is contained in:
YiQianYao 2022-02-14 16:55:34 +08:00 committed by GitHub
parent 240ba04862
commit f722c36163
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 235 additions and 144 deletions

View File

@ -196,6 +196,17 @@ vec2 project_pixel(vec2 pixel) {
}
return pixel * -1.;
}
vec3 project_pixel(vec3 pixel) {
if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
// P20 坐标系下,为了和 Web 墨卡托坐标系统一zoom 默认减1
return pixel * pow(2.0, (19.0 - u_Zoom));
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
// P20_2 坐标系下,为了和 Web 墨卡托坐标系统一zoom 默认减3
return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom));
}
return pixel * -1.;
}
vec4 project_common_position_to_clipspace(vec4 position, mat4 viewProjectionMatrix, vec4 center) {
if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||

View File

@ -55,13 +55,25 @@ export interface IPointLayerStyleOptions {
fontFamily?: string;
textAllowOverlap?: boolean;
// cylinder
pickLight?: boolean;
depth?: boolean;
sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
opacityLinear?: {
enable: boolean;
dir: string;
};
lightEnable: boolean;
heightfixed?: boolean; // 圆柱体高度是否固定(不随 zoom 发生变化)
offsets?: styleOffset;
blend?: string;
unit?: string;
mask?: boolean;
maskInside?: boolean;
animateOption?: IAnimateOption;
animateOption: IAnimateOption;
}
export interface IPolygonLayerStyleOptions {

View File

@ -15,6 +15,9 @@ import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineTriangulation } from '../../core/triangulation';
// dash line shader
import line_dash_frag from '../shaders/dash/line_dash_frag.glsl';
import line_dash_vert from '../shaders/dash/line_dash_vert.glsl';
// other function shaders
import linear_line_frag from '../shaders/frag/linear_frag.glsl';
// basic line shader
@ -166,7 +169,18 @@ export default class LineModel extends BaseModel {
const {
sourceColor,
targetColor,
lineType,
dashArray,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (lineType === 'dash' && dashArray) {
return {
frag: line_dash_frag,
vert: line_dash_vert,
type: 'dash',
};
}
if (sourceColor && targetColor) {
// 分离 linear 功能
return {

View File

@ -0,0 +1,31 @@
#define LineTypeSolid 0.0
uniform float u_opacity : 1.0;
varying vec4 v_color;
// dash
varying vec4 v_dash_array;
#pragma include "picking"
uniform float u_time;
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; // 控制运动
varying mat4 styleMappingMat;
// [animate, duration, interval, trailLength],
void main() {
float opacity = styleMappingMat[0][0];
float d_distance_ratio = styleMappingMat[3].r; // 当前点位距离占线总长的比例
gl_FragColor = v_color;
gl_FragColor.a *= opacity; // 全局透明度
// dash line
float flag = 0.;
float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength < v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
flag = 1.;
}
gl_FragColor.a *=flag;
gl_FragColor = filterColor(gl_FragColor);
}

View File

@ -0,0 +1,93 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
attribute float a_Miter;
attribute vec4 a_Color;
attribute vec2 a_Size;
attribute vec3 a_Normal;
attribute vec3 a_Position;
attribute vec2 a_iconMapUV;
// dash line
attribute float a_Total_Distance;
attribute float a_Distance;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
uniform vec4 u_dash_array: [10.0, 5., 0, 0];
uniform float u_vertexScale: 1.0;
#pragma include "projection"
#pragma include "picking"
varying vec4 v_color;
varying vec4 v_dash_array;
uniform float u_opacity: 1.0;
varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
#pragma include "styleMapping"
#pragma include "styleMappingCalOpacity"
void main() {
// cal style mapping - 数据纹理映射部分的计算
styleMappingMat = mat4(
0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
0.0, 0.0, 0.0, 0.0 // distance_ratio/distance/pixelLen/texV
);
float rowCount = u_cellTypeLayout[0][0]; // 当前的数据纹理有几行
float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
float columnWidth = 1.0/columnCount; // 列宽
float rowHeight = 1.0/rowCount; // 行高
float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
float id = a_vertexId; // 第n个顶点
float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
// cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ...
// 按顺序从 cell 中取值、若没有则自动往下取值
float textureOffset = 0.0; // 在 cell 中取值的偏移量
vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
styleMappingMat[0][0] = opacityAndOffset.r;
textureOffset = opacityAndOffset.g;
// cal style mapping - 数据纹理映射部分的计算
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
v_color = a_Color;
vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
vec2 offset = project_pixel(size.xy);
// 设置数据集的参数
styleMappingMat[3][0] = a_Distance / a_Total_Distance; // 当前点位距离占线总长的比例
styleMappingMat[3][1] = a_Distance; // 当前顶点的距离
vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0));
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * (vec4(project_pos.xy + offset, project_pixel(a_Size.y), 1.0));
} else {
float lineHeight = a_Size.y;
// #define COORDINATE_SYSTEM_P20 5.0
// #define COORDINATE_SYSTEM_P20_OFFSET 6.0
// amap1.x
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
// 保持高度相对不变
lineHeight *= pow(2.0, 20.0 - u_Zoom);
}
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight, 1.0));
}
setPickingColor(a_PickingColor);
}

View File

@ -1,22 +0,0 @@
uniform float u_blur : 0.9;
uniform float u_opacity : 1.0;
uniform float u_dash_offset : 0.0;
uniform float u_dash_ratio : 0.1;
varying vec4 v_color;
varying vec2 v_normal;
uniform float u_time;
uniform vec3 u_aimate: [ 0, 2., 1.0, 0.2 ];
varying float v_distance_ratio;
varying vec2 v_dash_array;
void main() {
gl_FragColor = v_color;
// gl_FragColor.a = v_distance_ratio;
// anti-alias
// float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)) * u_opacity;
// gl_FragColor.a *= blur * ceil(mod(v_distance_ratio, v_dash_array.x) - v_dash_array.y);
gl_FragColor.a *= u_opacity * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
}

View File

@ -1,36 +0,0 @@
attribute float a_Miter;
attribute vec4 a_Color;
attribute float a_Size;
attribute vec3 a_Normal;
attribute float a_Total_Distance;
attribute vec3 a_Position;
attribute float a_Distance;
uniform mat4 u_ModelMatrix;
uniform vec2 u_dash_array: [10.0, 5.];
uniform float u_line_type: 0.0;
uniform float u_dash_offset: 0;
varying vec4 v_color;
varying vec2 v_dash_array;
varying vec2 v_normal;
varying float v_distance_ratio;
#pragma include "projection"
void main() {
v_distance_ratio = a_Distance / a_Total_Distance;
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));
v_color = a_Color;
vec3 size = a_Miter * setPickingSize(a_Size) * reverse_offset_normal(a_Normal); //v_normal * vec3(1., -1., 1.0);
vec2 offset = project_pixel(size.xy);
vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0, 1.0));
}

View File

@ -1,9 +1,6 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
#define LineTexture 1.0
uniform float u_blur : 0.99;
uniform float u_line_type: 0.0;
uniform float u_opacity : 1.0;
uniform float u_textureBlend;
@ -16,11 +13,6 @@ uniform float u_line_texture;
uniform sampler2D u_texture;
uniform vec2 u_textSize;
// dash
uniform float u_dash_offset : 0.0;
uniform float u_dash_ratio : 0.1;
varying vec4 v_dash_array;
varying vec2 v_iconMapUV;
#pragma include "picking"
@ -45,17 +37,8 @@ void main() {
alpha = smoothstep(0., 1., alpha);
gl_FragColor.a *= alpha;
}
// dash line
if(u_line_type == LineTypeDash) {
float flag = 0.;
float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength < v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
flag = 1.;
}
gl_FragColor.a *=flag;
}
if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
if(u_line_texture == LineTexture) { // while load texture
float aDistance = styleMappingMat[3].g; // 当前顶点的距离
float d_texPixelLen = styleMappingMat[3].b; // 贴图的像素长度,根据地图层级缩放
float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);
@ -80,28 +63,28 @@ void main() {
}
}
float v = styleMappingMat[3].a;
float borderWidth = min(0.5, u_borderWidth);
// 绘制 border
if(borderWidth > 0.01) {
float borderOuterWidth = borderWidth/2.0;
float v = styleMappingMat[3].a;
float borderWidth = min(0.5, u_borderWidth);
// 绘制 border
if(borderWidth > 0.01) {
float borderOuterWidth = borderWidth/2.0;
if(v >= 1.0 - borderWidth || v <= borderWidth) {
if(v > borderWidth) {
float linear = smoothstep(0.0, 1.0, (v - (1.0 - borderWidth))/borderWidth);
gl_FragColor.rgb = mix(gl_FragColor.rgb, u_borderColor.rgb, linear);
} else if(v <= borderWidth) {
float linear = smoothstep(0.0, 1.0, v/borderWidth);
gl_FragColor.rgb = mix(u_borderColor.rgb, gl_FragColor.rgb, linear);
}
}
if(v < borderOuterWidth) {
gl_FragColor.a = mix(0.0, gl_FragColor.a, v/borderOuterWidth);
} else if(v > 1.0 - borderOuterWidth) {
gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - borderOuterWidth))/borderOuterWidth);
if(v >= 1.0 - borderWidth || v <= borderWidth) {
if(v > borderWidth) {
float linear = smoothstep(0.0, 1.0, (v - (1.0 - borderWidth))/borderWidth);
gl_FragColor.rgb = mix(gl_FragColor.rgb, u_borderColor.rgb, linear);
} else if(v <= borderWidth) {
float linear = smoothstep(0.0, 1.0, v/borderWidth);
gl_FragColor.rgb = mix(u_borderColor.rgb, gl_FragColor.rgb, linear);
}
}
gl_FragColor = filterColor(gl_FragColor);
if(v < borderOuterWidth) {
gl_FragColor.a = mix(0.0, gl_FragColor.a, v/borderOuterWidth);
} else if(v > 1.0 - borderOuterWidth) {
gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - borderOuterWidth))/borderOuterWidth);
}
}
gl_FragColor = filterColor(gl_FragColor);
}

View File

@ -1,5 +1,4 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
attribute float a_Miter;
@ -16,8 +15,6 @@ attribute float a_Distance;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
uniform float u_line_type: 0.0;
uniform vec4 u_dash_array: [10.0, 5., 0, 0];
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
uniform float u_icon_step: 100;
@ -27,7 +24,6 @@ uniform float u_vertexScale: 1.0;
#pragma include "picking"
varying vec4 v_color;
varying vec4 v_dash_array;
// texV 线图层 - 贴图部分的 v 坐标(线的宽度方向)
varying vec2 v_iconMapUV;
@ -68,7 +64,6 @@ void main() {
textureOffset = opacityAndOffset.g;
// cal style mapping - 数据纹理映射部分的计算
float d_distance_ratio; // 当前点位距离占线总长的比例
float d_texPixelLen; // 贴图的像素长度,根据地图层级缩放
v_iconMapUV = a_iconMapUV;
@ -77,13 +72,6 @@ void main() {
d_texPixelLen *= 10.0;
}
if(u_line_type == LineTypeDash) {
d_distance_ratio = a_Distance / a_Total_Distance;
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
}
if(u_aimate.x == Animate || u_linearColor == 1.0) {
d_distance_ratio = a_Distance / a_Total_Distance;
}
v_color = a_Color;
vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
@ -95,7 +83,7 @@ void main() {
float texV = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
// 设置数据集的参数
styleMappingMat[3][0] = d_distance_ratio; // 当前点位距离占线总长的比例
styleMappingMat[3][0] = a_Distance / a_Total_Distance;; // 当前点位距离占线总长的比例
styleMappingMat[3][1] = a_Distance; // 当前顶点的距离
styleMappingMat[3][2] = d_texPixelLen; // 贴图的像素长度,根据地图层级缩放
styleMappingMat[3][3] = texV; // 线图层贴图部分的 v 坐标值

View File

@ -1,33 +1,14 @@
import {
AttributeType,
gl,
IAnimateOption,
IEncodeFeature,
IModel,
} from '@antv/l7-core';
import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isBoolean, isNumber } from 'lodash';
import BaseModel, { styleOffset, styleSingle } from '../../core/BaseModel';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import { PointExtrudeTriangulation } from '../../core/triangulation';
import { lglt2xyz } from '../../earth/utils';
import { calculateCentroid } from '../../utils/geo';
import pointExtrudeFrag from '../shaders/extrude_frag.glsl';
import pointExtrudeVert from '../shaders/extrude_vert.glsl';
interface IPointLayerStyleOptions {
animateOption: IAnimateOption;
depth: boolean;
opacity: styleSingle;
offsets: styleOffset;
import pointExtrudeFrag from '../shaders/extrude/extrude_frag.glsl';
import pointExtrudeVert from '../shaders/extrude/extrude_vert.glsl';
sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
opacityLinear?: {
enable: boolean;
dir: string;
};
lightEnable: boolean;
}
export default class ExtrudeModel extends BaseModel {
private raiseCount: number = 0;
private raiserepeat: number = 0;
@ -43,6 +24,9 @@ export default class ExtrudeModel extends BaseModel {
sourceColor,
targetColor,
pickLight = false,
heightfixed = false,
opacityLinear = {
enable: false,
dir: 'up',
@ -113,6 +97,11 @@ export default class ExtrudeModel extends BaseModel {
}
return {
// 圆柱体的拾取高亮是否要计算光照
u_pickLight: Number(pickLight),
// 圆柱体是否固定高度
u_heightfixed: Number(heightfixed),
u_r: animateOption.enable && this.raiserepeat > 0 ? this.raiseCount : 1.0,
// TODO: 判断当前的点图层的模型是普通地图模式还是地球模式
u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0,

View File

@ -3,6 +3,7 @@ uniform float u_opacity: 1.0;
varying float v_z;
varying float v_lightWeight;
uniform float u_pickLight: 0.0;
#pragma include "picking"
@ -35,5 +36,9 @@ void main() {
}
// picking
gl_FragColor = filterColor(gl_FragColor);
if(u_pickLight > 0.0) {
gl_FragColor = filterColorWithLight(gl_FragColor, v_lightWeight);
} else {
gl_FragColor = filterColor(gl_FragColor);
}
}

View File

@ -11,6 +11,7 @@ attribute vec4 a_Color;
attribute vec3 a_Size;
attribute vec3 a_Normal;
uniform float u_heightfixed: 0.0; // 默认不固定
uniform float u_globel;
uniform float u_r;
uniform mat4 u_ModelMatrix;
@ -80,15 +81,30 @@ void main() {
// a_Position.z 是在构建网格的时候传入的标准值 0 - 1在插值器插值可以获取 01 线性渐变的值
v_z = a_Position.z;
vec2 offset = project_pixel(size.xy);
// vec2 offset = project_pixel(size.xy);
// vec2 offset = (size.xy);
vec3 offset = size; // 控制圆柱体的大小 - 从标准单位圆柱体进行偏移
if(u_heightfixed < 1.0) { // 圆柱体不固定高度
offset = project_pixel(offset);
}
vec4 project_pos = project_position(vec4(a_Pos.xy, 0., 1.0));
vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z) * u_r, 1.0);
// vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z) * u_r, 1.0);
// u_r 控制圆柱的生长
vec4 pos = vec4(project_pos.xy + offset.xy, offset.z * u_r, 1.0);
// 圆柱光照效果
float lightWeight = u_lightEnable > 0.0 ? calc_lighting(pos): 1.0;
// float lightWeight = u_lightEnable > 0.0 ? calc_lighting(pos): 1.0;
float lightWeight = 1.0;
if(u_lightEnable > 0.0) { // 取消三元表达式,增强健壮性
lightWeight = calc_lighting(pos);
}
v_lightWeight = lightWeight;
v_color =vec4(a_Color.rgb * lightWeight, a_Color.w);
// gl_Position = project_common_position_to_clipspace(pos);

View File

@ -35,6 +35,7 @@ export default class Amap2demo_lineDash extends React.Component {
.size(1.5)
.shape('line')
.color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16'])
.active(true)
.style({
lineType: 'dash',
dashArray: [5, 5],

View File

@ -103,20 +103,26 @@ export default class GaodeMapComponent extends React.Component {
},
},
)
.shape('circle')
// .shape('circle')
.shape('cylinder')
// .color('#0f9')
// .color('#4169E1')
.color('#4cfd47')
// .size([10, 10, 100])
.size(100)
// .size([100, 100, 1000])
.size([100, 100, 1000])
// .size(100)
// .animate({
// // enable: true,
// enable: false,
// // type: 'www'
// })
.animate(true)
// .animate(true)
.active({ color: '#00f' })
.style({
heightfixed: true,
// pickLight: false,
pickLight: true,
// lightEnable: true,
// opacity: 0.5,
stroke: '#f00',
// strokeWidth: 10,