From 1156c4caa05ce5cc5adcf43660e4a7a213de8ffa Mon Sep 17 00:00:00 2001 From: lzxue <120635640@qq.com> Date: Wed, 27 Dec 2023 20:30:25 +0800 Subject: [PATCH 1/2] fix: encode update --- dev-demos/features/point/pointEarthfill.md | 11 +-- examples/demos/bugfix/index.ts | 3 +- examples/demos/bugfix/size.ts | 62 +++++++++++++ examples/demos/line/normal.ts | 7 +- package.json | 2 +- packages/layers/src/line/models/line.ts | 92 ++++++++++++++++--- .../src/line/shaders/line/line_vert.glsl | 25 ++--- packages/layers/src/point/models/fill.ts | 33 +++++-- packages/layers/src/point/models/radar.ts | 30 ++++-- packages/layers/src/point/models/text.ts | 31 ++++++- .../point/shaders/extrude/extrude_frag.glsl | 2 +- .../src/point/shaders/fill/fill_vert.glsl | 7 +- .../src/point/shaders/radar/radar_vert.glsl | 14 +-- .../src/point/shaders/text/text_vert.glsl | 7 +- 14 files changed, 261 insertions(+), 65 deletions(-) create mode 100644 examples/demos/bugfix/size.ts diff --git a/dev-demos/features/point/pointEarthfill.md b/dev-demos/features/point/pointEarthfill.md index f239153575..d04d0514f8 100644 --- a/dev-demos/features/point/pointEarthfill.md +++ b/dev-demos/features/point/pointEarthfill.md @@ -90,14 +90,11 @@ export default () => { y: 'latitude', }, }) - .shape('name', [ - 'cylinder', - 'triangleColumn', - 'hexagonColumn', - 'squareColumn', - ]) + .shape('squareColumn') .active(true) - .size([1,1,5]) + .size('unit_price', (h) => { + return [6, 6, 100]; + }) .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F']) .style({ opacity:1, diff --git a/examples/demos/bugfix/index.ts b/examples/demos/bugfix/index.ts index b746549fe4..0159b87ba8 100644 --- a/examples/demos/bugfix/index.ts +++ b/examples/demos/bugfix/index.ts @@ -1 +1,2 @@ -export { MapRender as color } from './color'; \ No newline at end of file +export { MapRender as color } from './color'; +export { MapRender as size } from './size'; \ No newline at end of file diff --git a/examples/demos/bugfix/size.ts b/examples/demos/bugfix/size.ts new file mode 100644 index 0000000000..d22732aa6f --- /dev/null +++ b/examples/demos/bugfix/size.ts @@ -0,0 +1,62 @@ +import { Scene, PointLayer } from '@antv/l7'; +import * as allMap from '@antv/l7-maps'; + +export function MapRender(option:{ + map:string + renderer:string +}) { + const scene = new Scene({ + id: 'map', + renderer: option.renderer === 'device'? 'device' : 'regl', + map: new allMap[option.map || 'Map']({ + style: 'light', + center: [121.435159, 31.256971], + zoom: 14.89, + minZoom: 10 + }) + }); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' + ) + .then(res => res.json()) + .then(data => { + const pointLayer = new PointLayer({}) + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('name', [ + 'circle', + 'triangle', + 'square', + 'pentagon', + 'hexagon', + 'octogon', + 'hexagram', + 'rhombus', + 'vesica' + ]) + .size('unit_price', [10, 25]) + .active(true) + .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452']) + .style({ + opacity: 1, + strokeWidth: 2 + }); + + scene.addLayer(pointLayer); + setTimeout(() => { + console.log('start update') + pointLayer.size(30) + scene.render() + console.log('update') + + }, 1000); + }); + }); + +} diff --git a/examples/demos/line/normal.ts b/examples/demos/line/normal.ts index 303ccd5e29..1a0efae544 100644 --- a/examples/demos/line/normal.ts +++ b/examples/demos/line/normal.ts @@ -70,7 +70,7 @@ export function MapRender(option: { const source = new Source(geoData); const layer = new LineLayer({ blend: 'normal',autoFit: true}) .source(source) - .size(10) + .size(1) .shape('line') .color('#f00') .style({ @@ -81,4 +81,9 @@ export function MapRender(option: { scene.addLayer(layer); }); + setTimeout(() => { + layer.size(20) + scene.render() + },2000) + } diff --git a/package.json b/package.json index c709735014..3deeb208dc 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "scripts": { "dev": "vite dev", "dev_build": "vite build", - "dev-dumo": "export NODE_OPTIONS=--openssl-legacy-provider && dumi dev", + "dev-dumi": "export NODE_OPTIONS=--openssl-legacy-provider && dumi dev", "dev-device": "export NODE_OPTIONS=--openssl-legacy-provider renderer=device && dumi dev renderer=device", "dev_windows": "dumi dev", "dumi-build": "export NODE_OPTIONS=--openssl-legacy-provider && dumi build", diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index 43f7c1e5f1..5d953abda2 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -152,44 +152,89 @@ export default class LineModel extends BaseModel { } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ - name: 'sizeDistanceAndTotalDistance', + name: 'distanceAndIndex', type: AttributeType.Attribute, descriptor: { - name: 'a_SizeDistanceAndTotalDistance', - shaderLocation: ShaderLocation.SIZE, + name: 'a_DistanceAndIndex', + shaderLocation: 10, + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.STATIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 2, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + normal: number[], + vertexIndex?: number, + ) => { + return vertexIndex === undefined + ? [vertex[3], 10] + : [vertex[3], vertexIndex]; + }, + }, + }); + this.styleAttributeService.registerStyleAttribute({ + name: 'total_distance', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Total_Distance', + shaderLocation: 11, buffer: { + // give the WebGL driver a hint that this buffer may change usage: gl.STATIC_DRAW, data: [], type: gl.FLOAT, }, - size: 4, + size: 1, update: ( feature: IEncodeFeature, featureIdx: number, vertex: number[], ) => { + return [vertex[5]]; + }, + }, + }); + + this.styleAttributeService.registerStyleAttribute({ + name: 'size', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Size', + shaderLocation: ShaderLocation.SIZE, + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 2, + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; - const a_Size = Array.isArray(size) - ? [size[0], size[1]] - : [size as number, 0]; - return [a_Size[0], a_Size[1], vertex[3], vertex[5]]; + return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0]; }, }, }); // point layer size; this.styleAttributeService.registerStyleAttribute({ - name: 'normalAndMiter', + name: 'normal', type: AttributeType.Attribute, descriptor: { - name: 'a_NormalAndMiter', + name: 'a_Normal', shaderLocation: ShaderLocation.NORMAL, buffer: { + // give the WebGL driver a hint that this buffer may change usage: gl.STATIC_DRAW, data: [], type: gl.FLOAT, }, - size: 4, + size: 3, update: ( feature: IEncodeFeature, featureIdx: number, @@ -197,11 +242,34 @@ export default class LineModel extends BaseModel { attributeIdx: number, normal: number[], ) => { - return [...normal, vertex[4]]; + return normal; }, }, }); + this.styleAttributeService.registerStyleAttribute({ + name: 'miter', + type: AttributeType.Attribute, + descriptor: { + shaderLocation: 15, + name: 'a_Miter', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.STATIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + ) => { + return [vertex[4]]; + }, + }, + }); + this.styleAttributeService.registerStyleAttribute({ name: 'uv', type: AttributeType.Attribute, diff --git a/packages/layers/src/line/shaders/line/line_vert.glsl b/packages/layers/src/line/shaders/line/line_vert.glsl index f3edd6e662..71317f3e36 100644 --- a/packages/layers/src/line/shaders/line/line_vert.glsl +++ b/packages/layers/src/line/shaders/line/line_vert.glsl @@ -3,8 +3,11 @@ layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; -layout(location = 9) in vec4 a_SizeDistanceAndTotalDistance; -layout(location = 13) in vec4 a_NormalAndMiter; +layout(location = 10) in vec2 a_DistanceAndIndex; +layout(location = 9) in vec2 a_Size; +layout(location = 11) in float a_Total_Distance; +layout(location = 13) in vec3 a_Normal; +layout(location = 15) in float a_Miter; layout(location = 14) in vec2 a_iconMapUV; layout(std140) uniform commonUniorm { @@ -40,8 +43,8 @@ out vec4 v_texture_data; void main() { //dash输出 - v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_SizeDistanceAndTotalDistance.a; - v_d_distance_ratio = a_SizeDistanceAndTotalDistance.b / a_SizeDistanceAndTotalDistance.a; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance; + v_d_distance_ratio = a_DistanceAndIndex.x / a_Total_Distance; // cal style mapping - 数据纹理映射部分的计算 float d_texPixelLen; // 贴图的像素长度，根据地图层级缩放 @@ -55,16 +58,16 @@ void main() { v_color.a *= opacity; v_stroke = stroke; - vec3 size = a_NormalAndMiter.w * setPickingSize(a_SizeDistanceAndTotalDistance.x) * reverse_offset_normal(a_NormalAndMiter.xyz); + vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal); vec2 offset = project_pixel(size.xy); - float lineDistance = a_SizeDistanceAndTotalDistance.b; - float currentLinePointRatio = lineDistance / a_SizeDistanceAndTotalDistance.a; + float lineDistance = a_DistanceAndIndex.x; + float currentLinePointRatio = lineDistance / a_Total_Distance; - float lineOffsetWidth = length(offset + offset * sign(a_NormalAndMiter.w)); // 线横向偏移的距离（向两侧偏移的和） - float linePixelSize = project_pixel(a_SizeDistanceAndTotalDistance.x) * 2.0; // 定点位置偏移，按地图等级缩放后的距离 单侧 * 2 + float lineOffsetWidth = length(offset + offset * sign(a_Miter)); // 线横向偏移的距离（向两侧偏移的和） + float linePixelSize = project_pixel(a_Size.x) * 2.0; // 定点位置偏移，按地图等级缩放后的距离 单侧 * 2 float texV = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值 v_texture_data = vec4(currentLinePointRatio, lineDistance, d_texPixelLen, texV); @@ -75,13 +78,13 @@ void main() { // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0)); float h = float(a_Position.z) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况 vertex height - float lineHeight = a_SizeDistanceAndTotalDistance.y; // size 第二个参数代表的高度 [linewidth, lineheight] + float lineHeight = a_Size.y; // size 第二个参数代表的高度 [linewidth, lineheight] if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x lineHeight *= 0.2; // 保持和 amap/mapbox 一致的效果 h *= 0.2; if(u_heightfixed < 1.0) { - lineHeight = project_pixel(a_SizeDistanceAndTotalDistance.y); + lineHeight = project_pixel(a_Size.y); } gl_Position = u_Mvp * (vec4(project_pos.xy + offset, lineHeight + h + u_raisingHeight, 1.0)); } else { diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index 08baa0daac..d438fe5a95 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -149,12 +149,12 @@ export default class FillModel extends BaseModel { }, }); - // point layer size; - this.styleAttributeService.registerStyleAttribute({ - name: 'sizeAndShape', + // point layer size; + this.styleAttributeService.registerStyleAttribute({ + name: 'size', type: AttributeType.Attribute, descriptor: { - name: 'a_SizeAndShape', + name: 'a_Size', shaderLocation: ShaderLocation.SIZE, buffer: { // give the WebGL driver a hint that this buffer may change @@ -162,13 +162,32 @@ export default class FillModel extends BaseModel { data: [], type: gl.FLOAT, }, - size: 2, + size: 1, update: (feature: IEncodeFeature) => { const { size = 5 } = feature; + return Array.isArray(size) ? [size[0]] : [size]; + }, + }, + }); + + // point layer shape; + this.styleAttributeService.registerStyleAttribute({ + name: 'shape', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Shape', + shaderLocation: ShaderLocation.SHAPE, + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: (feature: IEncodeFeature) => { const { shape = 2 } = feature; const shapeIndex = shape2d.indexOf(shape as string); - const a_Size = Array.isArray(size) ? size[0] : size; - return [a_Size,shapeIndex] + return [shapeIndex]; }, }, }); diff --git a/packages/layers/src/point/models/radar.ts b/packages/layers/src/point/models/radar.ts index c94f087224..b9627240ac 100644 --- a/packages/layers/src/point/models/radar.ts +++ b/packages/layers/src/point/models/radar.ts @@ -75,10 +75,10 @@ export default class RadarModel extends BaseModel { } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ - name: 'extrudeAndSize', + name: 'extrude', type: AttributeType.Attribute, descriptor: { - name: 'a_ExtrudeAndSize', + name: 'a_Extrude', shaderLocation: ShaderLocation.EXTRUDE, buffer: { // give the WebGL driver a hint that this buffer may change @@ -86,7 +86,7 @@ export default class RadarModel extends BaseModel { data: [], type: gl.FLOAT, }, - size: 4, + size: 3, update: ( feature: IEncodeFeature, featureIdx: number, @@ -95,16 +95,34 @@ export default class RadarModel extends BaseModel { ) => { const extrude = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0]; const extrudeIndex = (attributeIdx % 4) * 3; - const { size = 5 } = feature; - const a_Size = Array.isArray(size) ? size[0] : size as number; return [ extrude[extrudeIndex], extrude[extrudeIndex + 1], extrude[extrudeIndex + 2], - a_Size ]; }, }, }); + + // point layer size; + this.styleAttributeService.registerStyleAttribute({ + name: 'size', + type: AttributeType.Attribute, + descriptor: { + shaderLocation: ShaderLocation.SIZE, + name: 'a_Size', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: (feature: IEncodeFeature) => { + const { size = 5 } = feature; + return Array.isArray(size) ? [size[0]] : [size as number]; + }, + }, + }); } } diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index dfacd90f7e..dedc338649 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -228,24 +228,45 @@ export default class TextModel extends BaseModel { protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ - name: 'textUvAndOffsets', + name: 'textOffsets', type: AttributeType.Attribute, descriptor: { - name: 'a_textUvAndOffsets', // 文字偏移量 - shaderLocation:ShaderLocation.UV, + shaderLocation:10, + name: 'a_textOffsets', // 文字偏移量 buffer: { // give the WebGL driver a hint that this buffer may change usage: gl.STATIC_DRAW, data: [], type: gl.FLOAT, }, - size: 4, + size: 2, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + ) => { + return [vertex[5], vertex[6]]; + }, + }, + }); + this.styleAttributeService.registerStyleAttribute({ + name: 'textUv', + type: AttributeType.Attribute, + descriptor: { + name: 'a_tex', + shaderLocation:ShaderLocation.UV, + buffer: { + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 2, update: ( feature: IEncodeFeature, featureIdx: number, vertex: number[], ) => { - return [vertex[3], vertex[4],vertex[5], vertex[6]]; + return [vertex[3], vertex[4]]; }, }, }); diff --git a/packages/layers/src/point/shaders/extrude/extrude_frag.glsl b/packages/layers/src/point/shaders/extrude/extrude_frag.glsl index b634fe21b8..497b475dd6 100644 --- a/packages/layers/src/point/shaders/extrude/extrude_frag.glsl +++ b/packages/layers/src/point/shaders/extrude/extrude_frag.glsl @@ -1,8 +1,8 @@ + in vec4 v_color; in float v_lightWeight; out vec4 outputColor; - layout(std140) uniform commonUniforms { float u_pickLight; float u_heightfixed; diff --git a/packages/layers/src/point/shaders/fill/fill_vert.glsl b/packages/layers/src/point/shaders/fill/fill_vert.glsl index e9110ef645..2c2bb37bc4 100644 --- a/packages/layers/src/point/shaders/fill/fill_vert.glsl +++ b/packages/layers/src/point/shaders/fill/fill_vert.glsl @@ -1,6 +1,7 @@ layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; -layout(location = 9) in vec2 a_SizeAndShape; +layout(location = 9) in float a_Size; +layout(location = 10) in float a_Shape; layout(location = 11) in vec3 a_Extrude; layout(std140) uniform commonUniforms { @@ -26,12 +27,12 @@ void main() { // 透明度计算 v_stroke = stroke; vec3 extrude = a_Extrude; - float shape_type = a_SizeAndShape.y; + float shape_type = a_Shape; /* * setPickingSize 设置拾取大小 * u_meter2coord 在等面积大小的时候设置单位 */ - float newSize = setPickingSize(a_SizeAndShape.x); + float newSize = setPickingSize(a_Size); // float newSize = setPickingSize(a_Size) * 0.00001038445708445579; diff --git a/packages/layers/src/point/shaders/radar/radar_vert.glsl b/packages/layers/src/point/shaders/radar/radar_vert.glsl index 1b29162c0b..3c9ab56e49 100644 --- a/packages/layers/src/point/shaders/radar/radar_vert.glsl +++ b/packages/layers/src/point/shaders/radar/radar_vert.glsl @@ -1,6 +1,7 @@ layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; -layout(location = 11) in vec4 a_ExtrudeAndSize; +layout(location = 9) in float a_Size; +layout(location = 11) in vec3 a_Extrude; layout(std140) uniform commonUniorm { float u_additive; @@ -18,33 +19,32 @@ out vec2 v_extrude; #pragma include "picking" void main() { - vec3 extrude = a_ExtrudeAndSize.xyz; - float newSize = setPickingSize(a_ExtrudeAndSize.w); + float newSize = setPickingSize(a_Size); float time = u_time * u_speed; mat2 rotateMatrix = mat2( cos(time), sin(time), -sin(time), cos(time) ); - v_extrude = rotateMatrix * a_ExtrudeAndSize.xy; + v_extrude = rotateMatrix * a_Extrude.xy; v_color = a_Color; v_color.a *= opacity; float blur = 0.0; - float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_ExtrudeAndSize.w, blur); + float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, blur); if(u_size_unit == 1.) { newSize = newSize * u_PixelsPerMeter.z; } v_radius = newSize; - vec2 offset = (extrude.xy * (newSize)); + vec2 offset = (a_Extrude.xy * (newSize)); vec3 aPosition = a_Position; offset = project_pixel(offset); - v_data = vec4(extrude.x, extrude.y, antialiasblur, -1.0); + v_data = vec4(a_Extrude.x, a_Extrude.y, antialiasblur, -1.0); vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0)); gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0)); diff --git a/packages/layers/src/point/shaders/text/text_vert.glsl b/packages/layers/src/point/shaders/text/text_vert.glsl index a1cd96c011..dc109ead17 100644 --- a/packages/layers/src/point/shaders/text/text_vert.glsl +++ b/packages/layers/src/point/shaders/text/text_vert.glsl @@ -5,7 +5,8 @@ layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; layout(location = 9) in float a_Size; -layout(location = 14) in vec4 a_textUvAndOffsets; +layout(location = 10) in vec2 a_textOffsets; +layout(location = 14) in vec2 a_tex; layout(std140) uniform commonUniforms { vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0]; @@ -31,7 +32,7 @@ out float v_fontScale; void main() { // cal style mapping - 数据纹理映射部分的计算 - v_uv = a_textUvAndOffsets.xy / u_sdf_map_size; + v_uv = a_tex / u_sdf_map_size; @@ -45,7 +46,7 @@ void main() { vec4 project_pos = project_position(vec4(a_Position, 1.0)); // vec4 projected_position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0)); - vec2 offset = rotate_matrix(a_textUvAndOffsets.zw,rotation); + vec2 offset = rotate_matrix(a_textOffsets,rotation); // gl_Position = vec4(projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0); From 1d32ad1f0474dde8a57f5b8c39faebe1f896c142 Mon Sep 17 00:00:00 2001 From: lzxue <120635640@qq.com> Date: Wed, 27 Dec 2023 20:30:25 +0800 Subject: [PATCH 2/2] fix: encode update --- dev-demos/features/point/pointEarthfill.md | 11 +-- examples/demos/bugfix/index.ts | 3 +- examples/demos/bugfix/size.ts | 62 +++++++++++++ examples/demos/line/normal.ts | 7 +- package.json | 2 +- packages/layers/src/line/models/line.ts | 92 ++++++++++++++++--- .../src/line/shaders/line/line_vert.glsl | 25 ++--- packages/layers/src/point/models/fill.ts | 33 +++++-- packages/layers/src/point/models/radar.ts | 30 ++++-- packages/layers/src/point/models/text.ts | 31 ++++++- .../point/shaders/extrude/extrude_frag.glsl | 2 +- .../src/point/shaders/fill/fill_vert.glsl | 7 +- .../src/point/shaders/radar/radar_vert.glsl | 14 +-- .../src/point/shaders/text/text_vert.glsl | 7 +- 14 files changed, 261 insertions(+), 65 deletions(-) create mode 100644 examples/demos/bugfix/size.ts diff --git a/dev-demos/features/point/pointEarthfill.md b/dev-demos/features/point/pointEarthfill.md index f239153575..d04d0514f8 100644 --- a/dev-demos/features/point/pointEarthfill.md +++ b/dev-demos/features/point/pointEarthfill.md @@ -90,14 +90,11 @@ export default () => { y: 'latitude', }, }) - .shape('name', [ - 'cylinder', - 'triangleColumn', - 'hexagonColumn', - 'squareColumn', - ]) + .shape('squareColumn') .active(true) - .size([1,1,5]) + .size('unit_price', (h) => { + return [6, 6, 100]; + }) .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F']) .style({ opacity:1, diff --git a/examples/demos/bugfix/index.ts b/examples/demos/bugfix/index.ts index b746549fe4..0159b87ba8 100644 --- a/examples/demos/bugfix/index.ts +++ b/examples/demos/bugfix/index.ts @@ -1 +1,2 @@ -export { MapRender as color } from './color'; \ No newline at end of file +export { MapRender as color } from './color'; +export { MapRender as size } from './size'; \ No newline at end of file diff --git a/examples/demos/bugfix/size.ts b/examples/demos/bugfix/size.ts new file mode 100644 index 0000000000..d22732aa6f --- /dev/null +++ b/examples/demos/bugfix/size.ts @@ -0,0 +1,62 @@ +import { Scene, PointLayer } from '@antv/l7'; +import * as allMap from '@antv/l7-maps'; + +export function MapRender(option:{ + map:string + renderer:string +}) { + const scene = new Scene({ + id: 'map', + renderer: option.renderer === 'device'? 'device' : 'regl', + map: new allMap[option.map || 'Map']({ + style: 'light', + center: [121.435159, 31.256971], + zoom: 14.89, + minZoom: 10 + }) + }); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' + ) + .then(res => res.json()) + .then(data => { + const pointLayer = new PointLayer({}) + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude' + } + }) + .shape('name', [ + 'circle', + 'triangle', + 'square', + 'pentagon', + 'hexagon', + 'octogon', + 'hexagram', + 'rhombus', + 'vesica' + ]) + .size('unit_price', [10, 25]) + .active(true) + .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452']) + .style({ + opacity: 1, + strokeWidth: 2 + }); + + scene.addLayer(pointLayer); + setTimeout(() => { + console.log('start update') + pointLayer.size(30) + scene.render() + console.log('update') + + }, 1000); + }); + }); + +} diff --git a/examples/demos/line/normal.ts b/examples/demos/line/normal.ts index 303ccd5e29..1a0efae544 100644 --- a/examples/demos/line/normal.ts +++ b/examples/demos/line/normal.ts @@ -70,7 +70,7 @@ export function MapRender(option: { const source = new Source(geoData); const layer = new LineLayer({ blend: 'normal',autoFit: true}) .source(source) - .size(10) + .size(1) .shape('line') .color('#f00') .style({ @@ -81,4 +81,9 @@ export function MapRender(option: { scene.addLayer(layer); }); + setTimeout(() => { + layer.size(20) + scene.render() + },2000) + } diff --git a/package.json b/package.json index c709735014..3deeb208dc 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "scripts": { "dev": "vite dev", "dev_build": "vite build", - "dev-dumo": "export NODE_OPTIONS=--openssl-legacy-provider && dumi dev", + "dev-dumi": "export NODE_OPTIONS=--openssl-legacy-provider && dumi dev", "dev-device": "export NODE_OPTIONS=--openssl-legacy-provider renderer=device && dumi dev renderer=device", "dev_windows": "dumi dev", "dumi-build": "export NODE_OPTIONS=--openssl-legacy-provider && dumi build", diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index 43f7c1e5f1..5d953abda2 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -152,44 +152,89 @@ export default class LineModel extends BaseModel { } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ - name: 'sizeDistanceAndTotalDistance', + name: 'distanceAndIndex', type: AttributeType.Attribute, descriptor: { - name: 'a_SizeDistanceAndTotalDistance', - shaderLocation: ShaderLocation.SIZE, + name: 'a_DistanceAndIndex', + shaderLocation: 10, + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.STATIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 2, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + normal: number[], + vertexIndex?: number, + ) => { + return vertexIndex === undefined + ? [vertex[3], 10] + : [vertex[3], vertexIndex]; + }, + }, + }); + this.styleAttributeService.registerStyleAttribute({ + name: 'total_distance', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Total_Distance', + shaderLocation: 11, buffer: { + // give the WebGL driver a hint that this buffer may change usage: gl.STATIC_DRAW, data: [], type: gl.FLOAT, }, - size: 4, + size: 1, update: ( feature: IEncodeFeature, featureIdx: number, vertex: number[], ) => { + return [vertex[5]]; + }, + }, + }); + + this.styleAttributeService.registerStyleAttribute({ + name: 'size', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Size', + shaderLocation: ShaderLocation.SIZE, + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 2, + update: (feature: IEncodeFeature) => { const { size = 1 } = feature; - const a_Size = Array.isArray(size) - ? [size[0], size[1]] - : [size as number, 0]; - return [a_Size[0], a_Size[1], vertex[3], vertex[5]]; + return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0]; }, }, }); // point layer size; this.styleAttributeService.registerStyleAttribute({ - name: 'normalAndMiter', + name: 'normal', type: AttributeType.Attribute, descriptor: { - name: 'a_NormalAndMiter', + name: 'a_Normal', shaderLocation: ShaderLocation.NORMAL, buffer: { + // give the WebGL driver a hint that this buffer may change usage: gl.STATIC_DRAW, data: [], type: gl.FLOAT, }, - size: 4, + size: 3, update: ( feature: IEncodeFeature, featureIdx: number, @@ -197,11 +242,34 @@ export default class LineModel extends BaseModel { attributeIdx: number, normal: number[], ) => { - return [...normal, vertex[4]]; + return normal; }, }, }); + this.styleAttributeService.registerStyleAttribute({ + name: 'miter', + type: AttributeType.Attribute, + descriptor: { + shaderLocation: 15, + name: 'a_Miter', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.STATIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + ) => { + return [vertex[4]]; + }, + }, + }); + this.styleAttributeService.registerStyleAttribute({ name: 'uv', type: AttributeType.Attribute, diff --git a/packages/layers/src/line/shaders/line/line_vert.glsl b/packages/layers/src/line/shaders/line/line_vert.glsl index f3edd6e662..71317f3e36 100644 --- a/packages/layers/src/line/shaders/line/line_vert.glsl +++ b/packages/layers/src/line/shaders/line/line_vert.glsl @@ -3,8 +3,11 @@ layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; -layout(location = 9) in vec4 a_SizeDistanceAndTotalDistance; -layout(location = 13) in vec4 a_NormalAndMiter; +layout(location = 10) in vec2 a_DistanceAndIndex; +layout(location = 9) in vec2 a_Size; +layout(location = 11) in float a_Total_Distance; +layout(location = 13) in vec3 a_Normal; +layout(location = 15) in float a_Miter; layout(location = 14) in vec2 a_iconMapUV; layout(std140) uniform commonUniorm { @@ -40,8 +43,8 @@ out vec4 v_texture_data; void main() { //dash输出 - v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_SizeDistanceAndTotalDistance.a; - v_d_distance_ratio = a_SizeDistanceAndTotalDistance.b / a_SizeDistanceAndTotalDistance.a; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance; + v_d_distance_ratio = a_DistanceAndIndex.x / a_Total_Distance; // cal style mapping - 数据纹理映射部分的计算 float d_texPixelLen; // 贴图的像素长度，根据地图层级缩放 @@ -55,16 +58,16 @@ void main() { v_color.a *= opacity; v_stroke = stroke; - vec3 size = a_NormalAndMiter.w * setPickingSize(a_SizeDistanceAndTotalDistance.x) * reverse_offset_normal(a_NormalAndMiter.xyz); + vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal); vec2 offset = project_pixel(size.xy); - float lineDistance = a_SizeDistanceAndTotalDistance.b; - float currentLinePointRatio = lineDistance / a_SizeDistanceAndTotalDistance.a; + float lineDistance = a_DistanceAndIndex.x; + float currentLinePointRatio = lineDistance / a_Total_Distance; - float lineOffsetWidth = length(offset + offset * sign(a_NormalAndMiter.w)); // 线横向偏移的距离（向两侧偏移的和） - float linePixelSize = project_pixel(a_SizeDistanceAndTotalDistance.x) * 2.0; // 定点位置偏移，按地图等级缩放后的距离 单侧 * 2 + float lineOffsetWidth = length(offset + offset * sign(a_Miter)); // 线横向偏移的距离（向两侧偏移的和） + float linePixelSize = project_pixel(a_Size.x) * 2.0; // 定点位置偏移，按地图等级缩放后的距离 单侧 * 2 float texV = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值 v_texture_data = vec4(currentLinePointRatio, lineDistance, d_texPixelLen, texV); @@ -75,13 +78,13 @@ void main() { // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0)); float h = float(a_Position.z) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况 vertex height - float lineHeight = a_SizeDistanceAndTotalDistance.y; // size 第二个参数代表的高度 [linewidth, lineheight] + float lineHeight = a_Size.y; // size 第二个参数代表的高度 [linewidth, lineheight] if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x lineHeight *= 0.2; // 保持和 amap/mapbox 一致的效果 h *= 0.2; if(u_heightfixed < 1.0) { - lineHeight = project_pixel(a_SizeDistanceAndTotalDistance.y); + lineHeight = project_pixel(a_Size.y); } gl_Position = u_Mvp * (vec4(project_pos.xy + offset, lineHeight + h + u_raisingHeight, 1.0)); } else { diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index 08baa0daac..d438fe5a95 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -149,12 +149,12 @@ export default class FillModel extends BaseModel { }, }); - // point layer size; - this.styleAttributeService.registerStyleAttribute({ - name: 'sizeAndShape', + // point layer size; + this.styleAttributeService.registerStyleAttribute({ + name: 'size', type: AttributeType.Attribute, descriptor: { - name: 'a_SizeAndShape', + name: 'a_Size', shaderLocation: ShaderLocation.SIZE, buffer: { // give the WebGL driver a hint that this buffer may change @@ -162,13 +162,32 @@ export default class FillModel extends BaseModel { data: [], type: gl.FLOAT, }, - size: 2, + size: 1, update: (feature: IEncodeFeature) => { const { size = 5 } = feature; + return Array.isArray(size) ? [size[0]] : [size]; + }, + }, + }); + + // point layer shape; + this.styleAttributeService.registerStyleAttribute({ + name: 'shape', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Shape', + shaderLocation: ShaderLocation.SHAPE, + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: (feature: IEncodeFeature) => { const { shape = 2 } = feature; const shapeIndex = shape2d.indexOf(shape as string); - const a_Size = Array.isArray(size) ? size[0] : size; - return [a_Size,shapeIndex] + return [shapeIndex]; }, }, }); diff --git a/packages/layers/src/point/models/radar.ts b/packages/layers/src/point/models/radar.ts index c94f087224..b9627240ac 100644 --- a/packages/layers/src/point/models/radar.ts +++ b/packages/layers/src/point/models/radar.ts @@ -75,10 +75,10 @@ export default class RadarModel extends BaseModel { } protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ - name: 'extrudeAndSize', + name: 'extrude', type: AttributeType.Attribute, descriptor: { - name: 'a_ExtrudeAndSize', + name: 'a_Extrude', shaderLocation: ShaderLocation.EXTRUDE, buffer: { // give the WebGL driver a hint that this buffer may change @@ -86,7 +86,7 @@ export default class RadarModel extends BaseModel { data: [], type: gl.FLOAT, }, - size: 4, + size: 3, update: ( feature: IEncodeFeature, featureIdx: number, @@ -95,16 +95,34 @@ export default class RadarModel extends BaseModel { ) => { const extrude = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0]; const extrudeIndex = (attributeIdx % 4) * 3; - const { size = 5 } = feature; - const a_Size = Array.isArray(size) ? size[0] : size as number; return [ extrude[extrudeIndex], extrude[extrudeIndex + 1], extrude[extrudeIndex + 2], - a_Size ]; }, }, }); + + // point layer size; + this.styleAttributeService.registerStyleAttribute({ + name: 'size', + type: AttributeType.Attribute, + descriptor: { + shaderLocation: ShaderLocation.SIZE, + name: 'a_Size', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: (feature: IEncodeFeature) => { + const { size = 5 } = feature; + return Array.isArray(size) ? [size[0]] : [size as number]; + }, + }, + }); } } diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index dfacd90f7e..dedc338649 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -228,24 +228,45 @@ export default class TextModel extends BaseModel { protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ - name: 'textUvAndOffsets', + name: 'textOffsets', type: AttributeType.Attribute, descriptor: { - name: 'a_textUvAndOffsets', // 文字偏移量 - shaderLocation:ShaderLocation.UV, + shaderLocation:10, + name: 'a_textOffsets', // 文字偏移量 buffer: { // give the WebGL driver a hint that this buffer may change usage: gl.STATIC_DRAW, data: [], type: gl.FLOAT, }, - size: 4, + size: 2, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + ) => { + return [vertex[5], vertex[6]]; + }, + }, + }); + this.styleAttributeService.registerStyleAttribute({ + name: 'textUv', + type: AttributeType.Attribute, + descriptor: { + name: 'a_tex', + shaderLocation:ShaderLocation.UV, + buffer: { + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 2, update: ( feature: IEncodeFeature, featureIdx: number, vertex: number[], ) => { - return [vertex[3], vertex[4],vertex[5], vertex[6]]; + return [vertex[3], vertex[4]]; }, }, }); diff --git a/packages/layers/src/point/shaders/extrude/extrude_frag.glsl b/packages/layers/src/point/shaders/extrude/extrude_frag.glsl index b634fe21b8..497b475dd6 100644 --- a/packages/layers/src/point/shaders/extrude/extrude_frag.glsl +++ b/packages/layers/src/point/shaders/extrude/extrude_frag.glsl @@ -1,8 +1,8 @@ + in vec4 v_color; in float v_lightWeight; out vec4 outputColor; - layout(std140) uniform commonUniforms { float u_pickLight; float u_heightfixed; diff --git a/packages/layers/src/point/shaders/fill/fill_vert.glsl b/packages/layers/src/point/shaders/fill/fill_vert.glsl index e9110ef645..2c2bb37bc4 100644 --- a/packages/layers/src/point/shaders/fill/fill_vert.glsl +++ b/packages/layers/src/point/shaders/fill/fill_vert.glsl @@ -1,6 +1,7 @@ layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; -layout(location = 9) in vec2 a_SizeAndShape; +layout(location = 9) in float a_Size; +layout(location = 10) in float a_Shape; layout(location = 11) in vec3 a_Extrude; layout(std140) uniform commonUniforms { @@ -26,12 +27,12 @@ void main() { // 透明度计算 v_stroke = stroke; vec3 extrude = a_Extrude; - float shape_type = a_SizeAndShape.y; + float shape_type = a_Shape; /* * setPickingSize 设置拾取大小 * u_meter2coord 在等面积大小的时候设置单位 */ - float newSize = setPickingSize(a_SizeAndShape.x); + float newSize = setPickingSize(a_Size); // float newSize = setPickingSize(a_Size) * 0.00001038445708445579; diff --git a/packages/layers/src/point/shaders/radar/radar_vert.glsl b/packages/layers/src/point/shaders/radar/radar_vert.glsl index 1b29162c0b..3c9ab56e49 100644 --- a/packages/layers/src/point/shaders/radar/radar_vert.glsl +++ b/packages/layers/src/point/shaders/radar/radar_vert.glsl @@ -1,6 +1,7 @@ layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; -layout(location = 11) in vec4 a_ExtrudeAndSize; +layout(location = 9) in float a_Size; +layout(location = 11) in vec3 a_Extrude; layout(std140) uniform commonUniorm { float u_additive; @@ -18,33 +19,32 @@ out vec2 v_extrude; #pragma include "picking" void main() { - vec3 extrude = a_ExtrudeAndSize.xyz; - float newSize = setPickingSize(a_ExtrudeAndSize.w); + float newSize = setPickingSize(a_Size); float time = u_time * u_speed; mat2 rotateMatrix = mat2( cos(time), sin(time), -sin(time), cos(time) ); - v_extrude = rotateMatrix * a_ExtrudeAndSize.xy; + v_extrude = rotateMatrix * a_Extrude.xy; v_color = a_Color; v_color.a *= opacity; float blur = 0.0; - float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_ExtrudeAndSize.w, blur); + float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, blur); if(u_size_unit == 1.) { newSize = newSize * u_PixelsPerMeter.z; } v_radius = newSize; - vec2 offset = (extrude.xy * (newSize)); + vec2 offset = (a_Extrude.xy * (newSize)); vec3 aPosition = a_Position; offset = project_pixel(offset); - v_data = vec4(extrude.x, extrude.y, antialiasblur, -1.0); + v_data = vec4(a_Extrude.x, a_Extrude.y, antialiasblur, -1.0); vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0)); gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0)); diff --git a/packages/layers/src/point/shaders/text/text_vert.glsl b/packages/layers/src/point/shaders/text/text_vert.glsl index a1cd96c011..dc109ead17 100644 --- a/packages/layers/src/point/shaders/text/text_vert.glsl +++ b/packages/layers/src/point/shaders/text/text_vert.glsl @@ -5,7 +5,8 @@ layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; layout(location = 9) in float a_Size; -layout(location = 14) in vec4 a_textUvAndOffsets; +layout(location = 10) in vec2 a_textOffsets; +layout(location = 14) in vec2 a_tex; layout(std140) uniform commonUniforms { vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0]; @@ -31,7 +32,7 @@ out float v_fontScale; void main() { // cal style mapping - 数据纹理映射部分的计算 - v_uv = a_textUvAndOffsets.xy / u_sdf_map_size; + v_uv = a_tex / u_sdf_map_size; @@ -45,7 +46,7 @@ void main() { vec4 project_pos = project_position(vec4(a_Position, 1.0)); // vec4 projected_position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0)); - vec2 offset = rotate_matrix(a_textUvAndOffsets.zw,rotation); + vec2 offset = rotate_matrix(a_textOffsets,rotation); // gl_Position = vec4(projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);