Chore Regl 图层高亮问题

dev-demos/features/point/circle.md

@@ -1,2 +1,8 @@
+---
+group:
+  title: 点
+  order: 1
+---
+
 ### point - circle 等面积
 <code src="./demos/circlemeter.tsx"></code>

dev-demos/features/point/demos/circlemeter.tsx

@@ -33,12 +33,22 @@ scene.on("loaded", () => {
       ]
     })  
     .shape("circle")
-    .size(100)
+    .size(1000)
     .color("#ff0000")
+    .active(true)
+    // .animate({ enable: true })
     .style({
       opacity: 1,
       strokeWidth: 1,
+      unit: 'meter',
     });
+  setTimeout(() => {
+    pointLayer.style({
+      opacity: 0.5,
+    })
+    scene.render();
+
+  }, 1000);
   scene.addLayer(pointLayer);
 });
 }, []);

dev-demos/features/point/pointCircleWebGPU.md

@@ -1,3 +1,9 @@
+---
+group:
+  title: 点
+  order: 1
+---
+
 ### point - circle - WebGPU
 
 <code src="./demos/circle-webgpu.tsx"></code>

dev-demos/features/point/pointNormalDevice.md

@@ -1,3 +1,9 @@
+---
+group:
+  title: 点
+  order: 1
+---
+
 ### Point - normal - Device API
 
 <code src="./demos/normal-device.tsx"></code>

package.json

@@ -87,7 +87,6 @@
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^6.0.0",
     "@turf/turf": "^6.5.0",
-    "@types/bmapgl": "^0.0.7",
     "@types/dat.gui": "^0.7.1",
     "@types/gl": "^6.0.4",
     "@types/jest": "^29.5.1",
@@ -127,7 +126,6 @@
     "geojson2svg": "^1.3.3",
     "geotiff": "^2.0.1",
     "gh-pages": "^2.1.1",
-    "gl": "^6.0.2",
     "glsl-minifier": "^0.0.13",
     "html-webpack-plugin": "^4.3.0",
     "http-server": "^14.1.1",
@@ -172,7 +170,6 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.3.2",
     "svg-inline-loader": "^0.8.0",
-    "tmap-types-temporary": "0.1.4",
     "tokml": "^0.4.0",
     "topojson": "^3.0.2",
     "ts-jest": "^29.1.1",

packages/core/src/services/renderer/IModel.ts

@@ -251,8 +251,6 @@ export interface IModelDrawOptions {
   };
   elements?: IElements;
 
-  uniformBuffers?: IBuffer[];
-
   blend?: Partial<IBlendOptions>;
 
   stencil?: Partial<IStencilOptions>;

packages/core/src/services/shader/ShaderModuleService.ts

@@ -7,6 +7,8 @@ const { uniq } = lodashUtil;
 
 import common from '../../shaders/common.glsl';
 import decode from '../../shaders/decode.glsl';
+import scene_uniforms from '../../shaders/scene_uniforms.glsl';
+import picking_uniforms from '../../shaders/picking_uniforms.glsl';
 import light from '../../shaders/light2.glsl';
 import lighting from '../../shaders/lighting.glsl';
 import pickingFrag from '../../shaders/picking.frag.glsl';
@@ -30,6 +32,15 @@ export default class ShaderModuleService implements IShaderModuleService {
     this.destroy();
     this.registerModule('common', { vs: common, fs: common });
     this.registerModule('decode', { vs: decode, fs: '' });
+    this.registerModule('scene_uniforms', {
+      vs: scene_uniforms,
+      fs: scene_uniforms,
+    });
+    this.registerModule('picking_uniforms', {
+      vs: picking_uniforms,
+      fs: picking_uniforms,
+    });
+
     this.registerModule('projection', { vs: projection, fs: projection });
     this.registerModule('project', { vs: project, fs: '' });
     this.registerModule('sdf_2d', { vs: '', fs: sdf2d });

packages/core/src/shaders/picking.frag.glsl

@@ -1,18 +1,7 @@
 
 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;
-};
+#pragma include "picking_uniforms"
 
 #define PICKING_NONE 0.0
 #define PICKING_ENCODE 1.0

packages/core/src/shaders/picking.vert.glsl

@@ -1,19 +1,7 @@
 layout(location = 2) in vec3 a_PickingColor;
 out 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;
-};
+#pragma include "picking_uniforms"
 
 #define PICKING_NONE 0.0
 #define PICKING_ENCODE 1.0
@@ -25,18 +13,12 @@ layout(std140) uniform PickingUniforms {
 #define SELECT 2.0
 
 bool isVertexPicked(vec3 vertexColor) {
-  return
-    abs(vertexColor.r - u_PickingColor.r) < u_PickingThreshold &&
-    abs(vertexColor.g - u_PickingColor.g) < u_PickingThreshold &&
-    abs(vertexColor.b - u_PickingColor.b) < u_PickingThreshold;
+  return distance(vertexColor,u_PickingColor.rgb) < 0.01;
 }
 
 // 判断当前点是否已经被 select 选中
 bool isVertexSelected(vec3 vertexColor) {
-  return
-    abs(vertexColor.r - u_CurrentSelectedId.r) < u_PickingThreshold &&
-    abs(vertexColor.g - u_CurrentSelectedId.g) < u_PickingThreshold &&
-    abs(vertexColor.b - u_CurrentSelectedId.b) < u_PickingThreshold;
+  return distance(vertexColor,u_CurrentSelectedId.rgb) < 0.01;
 }
 
 void setPickingColor(vec3 pickingColor) {
@@ -47,16 +29,6 @@ void setPickingColor(vec3 pickingColor) {
 
   v_PickingResult.a = float((u_PickingStage == PICKING_HIGHLIGHT) && isVertexPicked(pickingColor));
 
-  // if (u_EnableSelect == 1.0 && u_PickingStage == PICKING_HIGHLIGHT && isVertexSelected(pickingColor)) {
-  //   // 选中态
-  //   v_PickingResult.a = SELECT;
-  // } else if (u_PickingStage == PICKING_HIGHLIGHT && isVertexPicked(pickingColor)) {
-  //   // 高亮态
-  //   v_PickingResult.a = HIGHLIGHT;
-  // } else {
-  //   v_PickingResult.a = NORMAL;
-  // }
-
   // Stores the picking color so that the fragment shader can render it during picking
   v_PickingResult.rgb = pickingColor * COLOR_SCALE;
 }

packages/core/src/shaders/picking_uniforms.glsl

@@ -0,0 +1,12 @@
+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;
+};

packages/core/src/shaders/projection.glsl

@@ -11,27 +11,8 @@
 #define COORDINATE_SYSTEM_METER_OFFSET 7.0
 
 #define COORDINATE_SYSTEM_P20_2 8.0         // amap2.0
+#pragma include "scene_uniforms"
 
-layout(std140) uniform SceneUniforms {
-  mat4 u_ViewMatrix;
-  mat4 u_ProjectionMatrix;
-  mat4 u_ViewProjectionMatrix;
-  mat4 u_ModelMatrix;
-  mat4 u_Mvp;
-  vec4 u_ViewportCenterProjection;
-  vec3 u_PixelsPerDegree;
-  float u_Zoom;
-  vec3 u_PixelsPerDegree2;
-  float u_ZoomScale;
-  vec3 u_PixelsPerMeter;
-  float u_CoordinateSystem;
-  vec3 u_CameraPosition;
-  float u_DevicePixelRatio;
-  vec2 u_ViewportCenter;
-  vec2 u_ViewportSize;
-  vec2 u_sceneCenterMercator;
-  float u_FocalDistance;
-};
 
 // web mercator coords -> world coords
 vec2 project_mercator(vec2 lnglat) {

packages/core/src/shaders/scene_uniforms.glsl

@@ -0,0 +1,20 @@
+layout(std140) uniform SceneUniforms {
+  mat4 u_ViewMatrix;
+  mat4 u_ProjectionMatrix;
+  mat4 u_ViewProjectionMatrix;
+  mat4 u_ModelMatrix;
+  mat4 u_Mvp;
+  vec4 u_ViewportCenterProjection;
+  vec3 u_PixelsPerDegree;
+  float u_Zoom;
+  vec3 u_PixelsPerDegree2;
+  float u_ZoomScale;
+  vec3 u_PixelsPerMeter;
+  float u_CoordinateSystem;
+  vec3 u_CameraPosition;
+  float u_DevicePixelRatio;
+  vec2 u_ViewportCenter;
+  vec2 u_ViewportSize;
+  vec2 u_sceneCenterMercator;
+  float u_FocalDistance;
+};

packages/layers/src/core/BaseLayer.ts

@@ -1273,10 +1273,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
       inject,
     });
     const { vs, fs, uniforms } = this.shaderModuleService.getModule(moduleName);
-    console.log(vs, fs);
     const { createModel } = this.rendererService;
     return new Promise((resolve) => {
-      // console.log(this.encodedData)
       const { attributes, elements, count } =
         this.styleAttributeService.createAttributesAndIndices(
           this.encodedData,
@@ -1384,10 +1382,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     this.models.forEach((model) => {
       model.draw(
         {
-          uniformBuffers: [
-            ...this.layerModel.uniformBuffers,
-            ...this.rendererService.uniformBuffers,
-          ],
           uniforms: this.layerModel.getUninforms(),
           blend: this.layerModel.getBlend(),
           stencil: this.layerModel.getStencil(options),