diff --git a/dev-demos/features/point/demos/circlemeter.tsx b/dev-demos/features/point/demos/circlemeter.tsx index 5f9020e0d4..e2df53ebd5 100644 --- a/dev-demos/features/point/demos/circlemeter.tsx +++ b/dev-demos/features/point/demos/circlemeter.tsx @@ -7,6 +7,7 @@ export default () => { useEffect( () => { const scene = new Scene({ id: "map", + renderer: 'device', map: new GaodeMap({ style: "light", center: [120.099658370018, 30.263445807542666], @@ -18,12 +19,12 @@ scene.on("loaded", () => { const circle = turf.circle([120.099658370018, 30.263445807542666],size/1000,{ steps: 60, units: 'kilometers' }); -const player = new PolygonLayer().source(turf.featureCollection([circle])) -.shape('fill') -.color('blue') -.style({ - opacity:0.5 -}) +// const player = new PolygonLayer().source(turf.featureCollection([circle])) +// .shape('fill') +// .color('blue') +// .style({ +// opacity:0.5 +// }) const pointLayer = new PointLayer({ autoFit: false }) @@ -39,18 +40,19 @@ const player = new PolygonLayer().source(turf.featureCollection([circle])) } } ] - }) - .shape("triangle") - .size(size) + }) + .shape("circle") + .size(100) .color("#ff0000") - .active(true) + // .animate(true) + // .active(true) .style({ opacity: 1, strokeWidth: 1, - rotation: 30, - unit:'meter' + // rotation: 30, + // unit:'meter' }); - scene.addLayer(player); + // scene.addLayer(player); scene.addLayer(pointLayer); }); }, []); diff --git a/dev-demos/features/point/demos/normal-device.tsx b/dev-demos/features/point/demos/normal-device.tsx index 93c10852a2..88ef2c6da6 100644 --- a/dev-demos/features/point/demos/normal-device.tsx +++ b/dev-demos/features/point/demos/normal-device.tsx @@ -10,34 +10,41 @@ export default () => { id: 'map', renderer: 'device', map: new GaodeMap({ - style: 'dark', - center: [121.417463, 31.215175], + style: 'blank', + center: [120.099658370018, 30.263445807542666], pitch: 0, zoom: 11, }), }); scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt', - ) - .then((res) => res.text()) - .then((data) => { + // fetch( + // 'https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt', + // ) + // .then((res) => res.text()) + // .then((data) => { const pointLayer = new PointLayer({ blend: 'additive' }) - .source(data, { - parser: { - type: 'csv', - y: 'lat', - x: 'lng', - }, + .source({ + type: "FeatureCollection", + features: [ + { + type: "Feature", + properties: {}, + geometry: { + type: "Point", + coordinates: [120.099658370018, 30.263445807542666] + } + } + ] }) - .size(0.5) - .color('#080298') + .size(40) + .shape('dot') + .color('#f00') .style({ opacity: 1, }); scene.addLayer(pointLayer); - }); + // }); }); }, []); return ( diff --git a/packages/core/src/shaders/picking.frag.glsl b/packages/core/src/shaders/picking.frag.glsl index 7afade6481..dd771525c1 100644 --- a/packages/core/src/shaders/picking.frag.glsl +++ b/packages/core/src/shaders/picking.frag.glsl @@ -1,10 +1,18 @@ -varying vec4 v_PickingResult; -uniform vec4 u_HighlightColor : [0, 0, 0, 0]; -uniform vec4 u_SelectColor : [0, 0, 0, 0]; -uniform float u_PickingStage : 0.0; -uniform float u_shaderPick; -uniform float u_activeMix: 0; +in vec4 v_PickingResult; + +layout(std140) uniform PickingUniforms { + vec4 u_HighlightColor; + vec4 u_SelectColor; + vec3 u_PickingColor; + float u_PickingStage; + vec3 u_CurrentSelectedId; + float u_PickingThreshold; + float u_PickingBuffer; + float u_shaderPick; + float u_EnableSelect; + float u_activeMix; +}; #define PICKING_NONE 0.0 #define PICKING_ENCODE 1.0 diff --git a/packages/core/src/shaders/picking.vert.glsl b/packages/core/src/shaders/picking.vert.glsl index 575fdb146c..c1753b6a10 100644 --- a/packages/core/src/shaders/picking.vert.glsl +++ b/packages/core/src/shaders/picking.vert.glsl @@ -1,15 +1,19 @@ -attribute vec3 a_PickingColor; -varying vec4 v_PickingResult; +layout(location = 2) in vec3 a_PickingColor; +out vec4 v_PickingResult; -uniform vec3 u_PickingColor : [0, 0, 0]; -uniform vec3 u_CurrentSelectedId : [0, 0, 0]; -uniform vec4 u_HighlightColor : [0, 0, 0, 0]; -uniform vec4 u_SelectColor : [0, 0, 0, 0]; -uniform float u_PickingStage : 0.0; -uniform float u_PickingThreshold : 1.0; -uniform float u_PickingBuffer: 0.0; -uniform float u_shaderPick; -uniform float u_EnableSelect: 0.0; + +layout(std140) uniform PickingUniforms { + vec4 u_HighlightColor; + vec4 u_SelectColor; + vec3 u_PickingColor; + float u_PickingStage; + vec3 u_CurrentSelectedId; + float u_PickingThreshold; + float u_PickingBuffer; + float u_shaderPick; + float u_EnableSelect; + float u_activeMix; +}; #define PICKING_NONE 0.0 #define PICKING_ENCODE 1.0 diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index 6488754ebe..80332f7356 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -250,14 +250,15 @@ export default class BaseModel // a_PickingColor = 2 const uniforms: string[] = []; + // 支持数据映射的类型 this.layer.enableShaderEncodeStyles.forEach((key: string) => { - if (encodeStyleAttribute[key]) { + if (encodeStyleAttribute[key]) { // 配置了数据映射的类型 str += `#define USE_ATTRIBUTE_${key.toUpperCase()} 0.0; \n\n`; } else { uniforms.push(` ${DefaultUniformStyleType[key]} u_${key};`); } str += ` - #ifdef USE_ATTRIBUTE_${key.toUpperCase()} + #ifdef USE_ATTRIBUTE_${key.toUpperCase()} layout(location = ${shaderLocationMap[key]}) in ${ DefaultUniformStyleType[key] } a_${key.charAt(0).toUpperCase() + key.slice(1)}; diff --git a/packages/layers/src/core/CommonStyleAttribute.ts b/packages/layers/src/core/CommonStyleAttribute.ts index f0a4224120..5231da7414 100644 --- a/packages/layers/src/core/CommonStyleAttribute.ts +++ b/packages/layers/src/core/CommonStyleAttribute.ts @@ -15,6 +15,9 @@ export enum ShaderLocation { OFFSETS, ROTATION, EXTRUSION_BASE, + SIZE, + SHAPE, + EXTRUDE, MAX, } diff --git a/packages/layers/src/plugins/PixelPickingPlugin.ts b/packages/layers/src/plugins/PixelPickingPlugin.ts index b17cf247a0..72b8718dd7 100644 --- a/packages/layers/src/plugins/PixelPickingPlugin.ts +++ b/packages/layers/src/plugins/PixelPickingPlugin.ts @@ -60,7 +60,7 @@ export default class PixelPickingPlugin implements ILayerPlugin { ]), isUBO: true, }); - rendererService.uniformBuffers[1] = uniformBuffer; + // rendererService.uniformBuffers[1] = uniformBuffer; // u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0, // // Tip: 当前地图是否在拖动 // u_shaderPick: Number(layer.getShaderPickStat()), @@ -92,6 +92,12 @@ export default class PixelPickingPlugin implements ILayerPlugin { layer.hooks.beforePickingEncode.tap('PixelPickingPlugin', () => { const { enablePicking } = layer.getLayerConfig(); if (enablePicking && layer.isVisible()) { + // rendererService.uniformBuffers[1].subData({ + // offset: 11, + // data: new Uint8Array(new Float32Array([ + // PickingStage.ENCODE + // ])), + // }) layer.models.forEach((model) => model.addUniforms({ u_PickingStage: PickingStage.ENCODE, @@ -104,6 +110,12 @@ export default class PixelPickingPlugin implements ILayerPlugin { const { enablePicking } = layer.getLayerConfig(); // 区分选中高亮 和滑过高亮 if (enablePicking && layer.isVisible()) { + // rendererService.uniformBuffers[1].subData({ + // offset: 11, + // data: new Uint8Array(new Float32Array([ + // PickingStage.HIGHLIGHT + // ])), + // }) layer.models.forEach((model) => model.addUniforms({ u_PickingStage: PickingStage.HIGHLIGHT, @@ -125,6 +137,12 @@ export default class PixelPickingPlugin implements ILayerPlugin { layer.updateLayerConfig({ pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor)), }); + // rendererService.uniformBuffers[1].subData({ + // offset: 11, + // data: new Uint8Array(new Float32Array([ + // PickingStage.HIGHLIGHT + // ])), + // }) layer.models.forEach((model) => model.addUniforms({ u_PickingStage: PickingStage.HIGHLIGHT, diff --git a/packages/layers/src/plugins/ShaderUniformPlugin.ts b/packages/layers/src/plugins/ShaderUniformPlugin.ts index 8b16d2cd88..c5d0a88002 100644 --- a/packages/layers/src/plugins/ShaderUniformPlugin.ts +++ b/packages/layers/src/plugins/ShaderUniformPlugin.ts @@ -85,7 +85,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin { data, }); } - // For WebGL1. + // For WebGL1. regl layer.models.forEach((model) => { model.addUniforms({ ...uniforms, diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index 64a7dd597a..168d1dc5e0 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -11,6 +11,7 @@ import { } from '@antv/l7-core'; import { PointFillTriangulation } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; +import { ShaderLocation } from '../../core/CommonStyleAttribute'; import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface'; // animate pointLayer shader - support animate import waveFillFrag from '../shaders/animate/wave_frag.glsl'; @@ -29,7 +30,8 @@ export default class FillModel extends BaseModel { heightfixed = false, unit = 'pixel', } = this.layer.getLayerConfig() as IPointLayerStyleOptions; - return { + + const commonIniform = { u_blur_height_fixed: [blur, Number(raisingHeight), Number(heightfixed)], u_additive: blend === 'additive' ? 1.0 : 0.0, u_stroke_opacity: strokeOpacity, @@ -37,6 +39,35 @@ export default class FillModel extends BaseModel { u_size_unit: SizeUnitType[unit] as SizeUnitType, ...this.getStyleAttribute(), }; + + const attributes = this.getStyleAttribute(); + console.log('attributes',attributes,commonIniform) + this.uniformBuffers[0].subData({ + offset:0, + data: new Uint8Array( + new Float32Array([ + ...attributes.u_stroke, + ...attributes.u_offsets, + attributes.u_opacity, + attributes.u_rotation, + ]).buffer, + ), + }); + + this.uniformBuffers[1].subData({ + offset:0, + data: new Uint8Array( + new Float32Array([ + ...commonIniform.u_blur_height_fixed, + commonIniform.u_stroke_width, + commonIniform.u_stroke_opacity, + commonIniform.u_additive, + commonIniform.u_size_unit, + ]).buffer, + ), + }) + return commonIniform; + } public getAnimateUniforms(): IModelUniform { const { animateOption = { enable: false } } = @@ -70,6 +101,18 @@ export default class FillModel extends BaseModel { >; const { frag, vert, type } = this.getShaders(animateOption); this.layer.triangulation = PointFillTriangulation; + const attributeUniformBuffer = this.rendererService.createBuffer({ + data: new Float32Array(4 + 2 + 1 + 1), + isUBO: true, + }); + + const commonUniforms = this.rendererService.createBuffer({ + data: new Float32Array(3 + 4), + isUBO: true, + }); + + + this.uniformBuffers.push(attributeUniformBuffer,commonUniforms); const model = await this.layer.buildLayerModel({ moduleName: type, vertexShader: vert, @@ -127,6 +170,7 @@ export default class FillModel extends BaseModel { type: AttributeType.Attribute, descriptor: { name: 'a_Extrude', + shaderLocation: ShaderLocation.EXTRUDE, buffer: { // give the WebGL driver a hint that this buffer may change usage: gl.DYNAMIC_DRAW, @@ -157,6 +201,7 @@ export default class FillModel extends BaseModel { type: AttributeType.Attribute, descriptor: { name: 'a_Size', + shaderLocation: ShaderLocation.MAX, buffer: { // give the WebGL driver a hint that this buffer may change usage: gl.DYNAMIC_DRAW, @@ -177,6 +222,7 @@ export default class FillModel extends BaseModel { 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, diff --git a/packages/layers/src/point/models/normal.ts b/packages/layers/src/point/models/normal.ts index 400dd88088..cfb4a73282 100644 --- a/packages/layers/src/point/models/normal.ts +++ b/packages/layers/src/point/models/normal.ts @@ -27,9 +27,6 @@ export default class NormalModel extends BaseModel { }; } public getUninforms(): IModelUniform { - const { opacity = 1 } = - this.layer.getLayerConfig() as IPointLayerStyleOptions; - const attributes = this.getStyleAttribute(); // FIXME: No need to update each frame @@ -62,7 +59,6 @@ export default class NormalModel extends BaseModel { isUBO: true, }); this.uniformBuffers.push(uniformBuffer); - const model = await this.layer.buildLayerModel({ moduleName: 'pointNormal', vertexShader: normalVert, diff --git a/packages/layers/src/point/shaders/fill_frag.glsl b/packages/layers/src/point/shaders/fill_frag.glsl index 8a5e0ec075..b465f61595 100644 --- a/packages/layers/src/point/shaders/fill_frag.glsl +++ b/packages/layers/src/point/shaders/fill_frag.glsl @@ -1,77 +1,5 @@ -uniform float u_additive; -uniform float u_stroke_opacity : 1; -uniform float u_stroke_width : 2; - -varying vec4 v_data; -varying vec4 v_color; -varying float v_radius; -varying vec4 v_stroke; - - -#pragma include "sdf_2d" -#pragma include "picking" - - +in vec4 v_color; +out vec4 outputColor; void main() { - int shape = int(floor(v_data.w + 0.5)); - lowp float antialiasblur = v_data.z; - float r = v_radius / (v_radius + u_stroke_width); - - float outer_df; - float inner_df; - // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica' - if (shape == 0) { - outer_df = sdCircle(v_data.xy, 1.0); - inner_df = sdCircle(v_data.xy, r); - } else if (shape == 1) { - outer_df = sdEquilateralTriangle(1.1 * v_data.xy); - inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy); - } else if (shape == 2) { - outer_df = sdBox(v_data.xy, vec2(1.)); - inner_df = sdBox(v_data.xy, vec2(r)); - } else if (shape == 3) { - outer_df = sdPentagon(v_data.xy, 0.8); - inner_df = sdPentagon(v_data.xy, r * 0.8); - } else if (shape == 4) { - outer_df = sdHexagon(v_data.xy, 0.8); - inner_df = sdHexagon(v_data.xy, r * 0.8); - } else if (shape == 5) { - outer_df = sdOctogon(v_data.xy, 1.0); - inner_df = sdOctogon(v_data.xy, r); - } else if (shape == 6) { - outer_df = sdHexagram(v_data.xy, 0.52); - inner_df = sdHexagram(v_data.xy, r * 0.52); - } else if (shape == 7) { - outer_df = sdRhombus(v_data.xy, vec2(1.0)); - inner_df = sdRhombus(v_data.xy, vec2(r)); - } else if (shape == 8) { - outer_df = sdVesica(v_data.xy, 1.1, 0.8); - inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8); - } - - float opacity_t = smoothstep(0.0, antialiasblur, outer_df); - - float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep( - antialiasblur, - 0.0, - inner_df - ); - - if(u_stroke_width < 0.01) { - gl_FragColor = v_color; - } else { - gl_FragColor = mix(v_color, v_stroke * u_stroke_opacity, color_t); - } - - if(u_additive > 0.0) { - gl_FragColor *= opacity_t; - gl_FragColor = filterColorAlpha(gl_FragColor, gl_FragColor.a); - } else { - gl_FragColor.a *= opacity_t; - gl_FragColor = filterColor(gl_FragColor); - } - // 作为 mask 模板时需要丢弃透明的像素 - if(gl_FragColor.a < 0.01) { - discard; - } -} + outputColor = v_color; +} \ No newline at end of file diff --git a/packages/layers/src/point/shaders/fill_vert.glsl b/packages/layers/src/point/shaders/fill_vert.glsl index 74dd1ff08c..1ff3a957e1 100644 --- a/packages/layers/src/point/shaders/fill_vert.glsl +++ b/packages/layers/src/point/shaders/fill_vert.glsl @@ -1,22 +1,23 @@ -attribute vec4 a_Color; -attribute vec3 a_Position; -attribute vec3 a_Extrude; -attribute float a_Size; -attribute float a_Shape; -uniform mat4 u_ModelMatrix; - -uniform int u_size_unit; - -varying vec4 v_data; -varying vec4 v_color; -varying float v_radius; -varying vec4 v_stroke; -uniform float u_stroke_width: 2; -uniform vec3 u_blur_height_fixed: [0, 0, 0]; - +layout(location = 0) in vec3 a_Position; +layout(location = 1) in vec4 a_Color; +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 { + vec3 u_blur_height_fixed; + float u_stroke_width; + float u_stroke_opacity; + float u_additive; + float u_size_unit; +}; + +out vec4 v_color; +out float v_radius; +out vec4 v_stroke; +out vec4 v_data; #pragma include "projection" -#pragma include "picking" #pragma include "rotation_2d" @@ -29,7 +30,9 @@ void main() { * setPickingSize 设置拾取大小 * u_meter2coord 在等面积大小的时候设置单位 */ - float newSize = setPickingSize(a_Size); + // float newSize = setPickingSize(a_Size); + float newSize = a_Size; + // float newSize = setPickingSize(a_Size) * 0.00001038445708445579; @@ -37,7 +40,7 @@ void main() { // unpack color(vec2) v_color = vec4(a_Color.xyz, a_Color.w * opacity); - if(u_size_unit == 1) { + if(u_size_unit == 1.0) { newSize = newSize * u_PixelsPerMeter.z; } @@ -74,5 +77,5 @@ void main() { gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, raisingHeight, 1.0)); - setPickingColor(a_PickingColor); + // setPickingColor(a_PickingColor); } diff --git a/packages/layers/src/point/shaders/normal_vert.glsl b/packages/layers/src/point/shaders/normal_vert.glsl index 0619371f40..00876cb30a 100644 --- a/packages/layers/src/point/shaders/normal_vert.glsl +++ b/packages/layers/src/point/shaders/normal_vert.glsl @@ -1,6 +1,6 @@ layout(location = 0) in vec3 a_Position; layout(location = 1) in vec4 a_Color; -layout(location = 9) in float a_Size; +layout(location = 12) in float a_Size; out vec4 v_color;