s3m-three 0.3.14 → 0.4.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -23,10 +23,12 @@
23
23
  import * as THREE from 'three';
24
24
  import { usableGeoBounds } from '../tileset/S3MTileset.js';
25
25
  import { setMaxAnisotropy, setCompressedTexturesSupported, setTextureOffThreadDecode, setMaxTextureSize as setTextureSizeCap } from './TextureFactory.js';
26
+ import { setMaterialQuality } from './StyleMaterial.js';
26
27
  import { decodeTextureWithWorker } from '../worker/S3MWorkerClient.js';
27
- import { STYLE, STYLE_LABELS, SELECT_MODE, DEFAULT_STYLE, createSharedUniforms, createOutlineMaterial, } from './StyleMaterial.js';
28
+ import { STYLE, STYLE_LABELS, SELECT_MODE, DEFAULT_STYLE, createSharedUniforms, createOutlineMaterial, resolveEdgeModes, sameEdgeModes, } from './StyleMaterial.js';
28
29
  import { applyPointCloudStyle, isOwnedPointCloudMaterial } from './PointCloudMaterial.js';
29
30
  import { Picker } from './Picker.js';
31
+ import { GpuEdgePass } from './GpuEdgePass.js';
30
32
  import { Animator } from '../anim/Animator.js';
31
33
  import { Path } from '../anim/Path.js';
32
34
  import { GPUPathManager } from './GPUPathManager.js';
@@ -81,6 +83,8 @@ const STYLE_SCALAR_KEYS = [
81
83
  'ambientGain',
82
84
  'edgeWidth',
83
85
  'edgeOpacity',
86
+ 'edgeOffset',
87
+ 'edgeHullWidth',
84
88
  'outlineWidth',
85
89
  ];
86
90
  /** 能逐帧插值的颜色键(在线性空间插值,与 shader 消费端一致) */
@@ -119,6 +123,8 @@ export class S3MViewer {
119
123
  _edgeStyleUniforms;
120
124
  /** 选中棱线的外观 uniform */
121
125
  _selEdgeStyleUniforms;
126
+ /** 全局外扩轮廓的外观 uniform:逐网格轮廓壳共享这些对象 */
127
+ _hullStyleUniforms;
122
128
  /** 3D 物理地表面 / 基坑开挖管理器 */
123
129
  groundManager;
124
130
  /** 多数据集生命周期与锚点管理器 */
@@ -156,6 +162,12 @@ export class S3MViewer {
156
162
  _selectionEdges = null;
157
163
  _selectionEdgeMeshes = [];
158
164
  _edgesEnabled = false;
165
+ /** 当前生效的棱线画法(line / offset / hull / gpu),决定要不要建 / 拆哪种装饰 */
166
+ _edgeModes = resolveEdgeModes(false);
167
+ /** GPU 描边后处理(深度 + 法线),只在 edges 含 'gpu' 时按帧执行 */
168
+ _gpuEdge = null;
169
+ /** 给 GPU 描边传色用的临时 Color,避免每帧 new */
170
+ _gpuEdgeColor = new THREE.Color();
159
171
  /** 瓦片淡入通道的自增序号(不用 pickId:pickId 会被回收复用) */
160
172
  _tileFadeSeq = 0;
161
173
  /** setMode 编排的代次,用来作废被新调用顶掉的旧编排 */
@@ -190,6 +202,8 @@ export class S3MViewer {
190
202
  /** 业务属性查询(可选,配了 `attributes` 才有) */
191
203
  attributeQuery = null;
192
204
  _enuMatrix = new THREE.Matrix4();
205
+ /** 每帧复用:MVP 来自宿主,不要每帧 new(高频分配会带来 GC 抖动) */
206
+ _frameMvp = new THREE.Matrix4();
193
207
  /** 颜色换算用的临时对象,避免每帧 new */
194
208
  _colorScratch = new THREE.Color();
195
209
  _needsRepaint = true;
@@ -233,6 +247,7 @@ export class S3MViewer {
233
247
  this._lodRangeScale = options.lodRangeScale ?? 1.0;
234
248
  this._lodPixelRatioCap = options.lodPixelRatioCap ?? Infinity;
235
249
  setTextureSizeCap(options.maxTextureSize ?? Infinity);
250
+ setMaterialQuality(options.materialQuality ?? 'pbr');
236
251
  if (options.light) {
237
252
  Object.assign(this._lightOptions, options.light);
238
253
  }
@@ -277,6 +292,7 @@ export class S3MViewer {
277
292
  uColor: { value: new THREE.Color(this.style.edgeColor) },
278
293
  uWidth: { value: Math.max(0.1, this.style.edgeWidth ?? 1.5) },
279
294
  uOpacity: { value: 0.6 },
295
+ uOffset: { value: this.style.edgeOffset ?? 0.15 },
280
296
  };
281
297
  this.edgeMaterial = createThickLineMaterial(this.lineShared, {}, this._edgeStyleUniforms);
282
298
  this._selEdgeStyleUniforms = {
@@ -286,10 +302,16 @@ export class S3MViewer {
286
302
  uElevation: { value: this.style.selectElevation ?? 0 },
287
303
  };
288
304
  this.selectionEdgeMaterial = createThickLineMaterial(this.lineShared, {}, this._selEdgeStyleUniforms);
305
+ // 全局外扩轮廓的外观 uniform:逐网格轮廓壳复用这几个对象,改一次全场景生效
306
+ this._hullStyleUniforms = {
307
+ uColor: { value: new THREE.Color(this.style.edgeColor) },
308
+ uWidth: { value: Math.max(0, this.style.edgeHullWidth ?? 0.9) },
309
+ uOpacity: { value: 0.6 },
310
+ };
289
311
  // 关键:style.edges 是个开关,但构造函数从没据此启用过棱线,导致
290
312
  // `style: { edges: true }` 形同虚设、_edgesEnabled 永远是 false。
291
313
  // 这里按 style 实际值调一次 setEdges,让开关真正生效(与 setEdges 后来的手工调用一致)。
292
- this.setEdges(!!this.style.edges);
314
+ this.setEdges(this.style.edges);
293
315
  // 初始化图层整体不透明度:确保共享 uniform uOpacity、材质混合开关与棱线外观与初始 style.opacity 严格一致
294
316
  this._applyOpacity();
295
317
  this._fps.last = performance.now();
@@ -367,6 +389,9 @@ export class S3MViewer {
367
389
  this._syncTextureCapabilities(gl);
368
390
  this.picker?.dispose();
369
391
  this.picker = new Picker(this.renderer);
392
+ // GPU 描边的 RT / 材质绑定在旧上下文上,整体丢弃,下一帧按需重建
393
+ this._gpuEdge?.dispose();
394
+ this._gpuEdge = null;
370
395
  // 共享 uniform / 材质引用不变,three 重新编译着色器时会自然接管;
371
396
  // 这里只确保下一帧尽快驱动一次渲染。
372
397
  this._requestRepaint();
@@ -380,6 +405,8 @@ export class S3MViewer {
380
405
  this.picker?.dispose();
381
406
  this.picker = null;
382
407
  this.outlineMaterial.dispose();
408
+ this._gpuEdge?.dispose();
409
+ this._gpuEdge = null;
383
410
  this.edgeMaterial.dispose();
384
411
  this.selectionEdgeMaterial.dispose();
385
412
  this.scene?.clear();
@@ -542,7 +569,7 @@ export class S3MViewer {
542
569
  triggerRepaint: () => {
543
570
  this._requestRepaint();
544
571
  },
545
- }, this.options.maxTriangles ?? Infinity);
572
+ }, this.options.maxTriangles ?? Infinity, this.options.maxImageCache ?? 128);
546
573
  return entry;
547
574
  }
548
575
  /**
@@ -1298,11 +1325,16 @@ export class S3MViewer {
1298
1325
  entry.root.add(node.group);
1299
1326
  node.group.updateMatrixWorld(true);
1300
1327
  const hasNativeEdges = node.group.userData.hasNativeEdges === true;
1328
+ // forceCpuEdges:无视数据自带的棱线包,改由 CPU 现算。native 是 1px 的
1329
+ // LineBasicMaterial,edgeWidth / 外扩 / 单体跟随全都吃不上。
1330
+ // gpu 画法由 shader 自己描边,native 线段包同样不能留
1331
+ const useNativeEdges = hasNativeEdges && this.style.forceCpuEdges !== true && !this._edgeModes.gpu;
1301
1332
  for (const child of node.group.children) {
1302
1333
  // 数据自带的棱线包:只跟着 edges 开关显示,不参与拾取、不参与着色
1303
1334
  if (child.isLineSegments && child.userData.isEdgeLines) {
1304
- child.visible = this._edgesEnabled;
1335
+ // 一律登记进 _nativeEdgeLines:forceCpuEdges 之后又关掉时还要能把它们放出来
1305
1336
  this._nativeEdgeLines.add(child);
1337
+ child.visible = useNativeEdges && this._edgesEnabled;
1306
1338
  this._styleEdgeLine(child);
1307
1339
  continue;
1308
1340
  }
@@ -1316,7 +1348,8 @@ export class S3MViewer {
1316
1348
  const ud = mesh.userData;
1317
1349
  ud.pickId = this._allocPickId();
1318
1350
  ud.datasetId = entry.id;
1319
- ud.nativeEdges = hasNativeEdges;
1351
+ ud.nativeEdges = useNativeEdges;
1352
+ ud.nativeEdgesRaw = hasNativeEdges;
1320
1353
  this._pickables.set(ud.pickId, {
1321
1354
  datasetId: entry.id,
1322
1355
  mesh,
@@ -1328,8 +1361,13 @@ export class S3MViewer {
1328
1361
  // 点云没有「棱」:给一堆孤立点建 EdgesGeometry 又慢又没意义
1329
1362
  // 点云没有「棱」:给一堆孤立点建 EdgesGeometry 又慢又没意义。
1330
1363
  // 自动描边受三道开关控制:全局 style.edges / 数据集 enableEdges / 地形绿地等关键字跳过。
1331
- if (!hasNativeEdges && !isPoints && this._datasetEdgesEnabled(entry) && !this._shouldSkipAutoEdges(ud, entry.name)) {
1332
- this._ensureEdges(mesh);
1364
+ if (!useNativeEdges && !isPoints && this._datasetEdgesEnabled(entry) && !this._shouldSkipAutoEdges(ud, entry.name)) {
1365
+ // 数据集强制开启(enableEdges: true)时全局画法可能还是关的,退回默认折边线;
1366
+ // 但 gpu 画法本来就不建几何,别在这里多此一举
1367
+ if (this._edgeModes.line || this._edgeModes.hull)
1368
+ this._ensureEdgeDecoration(mesh);
1369
+ else if (!this._edgeModes.gpu)
1370
+ this._ensureEdges(mesh);
1333
1371
  }
1334
1372
  // 新瓦片要继承当前的不透明度与着色方式
1335
1373
  if (isPoints) {
@@ -1567,7 +1605,7 @@ export class S3MViewer {
1567
1605
  if ('edges' in patch) {
1568
1606
  const { edges, ...others } = patch;
1569
1607
  rest = others;
1570
- this.setEdges(!!edges, wantAnim ? transition : undefined);
1608
+ this.setEdges(edges, wantAnim ? transition : undefined);
1571
1609
  if (Object.keys(rest).length === 0) {
1572
1610
  this._requestRepaint();
1573
1611
  return;
@@ -1678,7 +1716,11 @@ export class S3MViewer {
1678
1716
  return;
1679
1717
  }
1680
1718
  this._applyStyleUniforms();
1681
- if (key === 'edgeColor' || key === 'edgeWidth' || key === 'edgeOpacity') {
1719
+ if (key === 'edgeColor' ||
1720
+ key === 'edgeWidth' ||
1721
+ key === 'edgeOpacity' ||
1722
+ key === 'edgeOffset' ||
1723
+ key === 'edgeHullWidth') {
1682
1724
  this._refreshEdgeLines();
1683
1725
  }
1684
1726
  }
@@ -1713,11 +1755,17 @@ export class S3MViewer {
1713
1755
  // 临界角变了要重建 CPU 棱线(EdgesGeometry 的参数),开 / 关走 setEdges 整体刷新。
1714
1756
  // 必须先 _disposeEdges():setEdges 只挑「还没有棱线」的网格来建,
1715
1757
  // 不先拆掉的话已经建好的会被全部跳过,临界角改了等于没改。
1716
- if ('edgeThreshold' in patch && this._edgesEnabled) {
1758
+ if (('edgeThreshold' in patch || 'forceCpuEdges' in patch) && this._edgesEnabled) {
1717
1759
  this._disposeEdges();
1718
- this.setEdges(true);
1719
- }
1720
- else if ('edgeColor' in patch || 'edgeWidth' in patch || 'opacity' in patch || 'edgeOpacity' in patch) {
1760
+ this.setEdges(this.style.edges);
1761
+ }
1762
+ else if ('edgeColor' in patch ||
1763
+ 'edgeWidth' in patch ||
1764
+ 'opacity' in patch ||
1765
+ 'edgeOpacity' in patch ||
1766
+ 'edgeOffset' in patch ||
1767
+ 'edgeHullWidth' in patch) {
1768
+ // 颜色 / 粗细 / 外推距离 / 外扩厚度都只是 uniform,拖着滑块逐帧改也不重建几何
1721
1769
  this._refreshEdgeLines();
1722
1770
  }
1723
1771
  if (this._selection) {
@@ -2000,8 +2048,15 @@ export class S3MViewer {
2000
2048
  /**
2001
2049
  * 全局棱线开关。
2002
2050
  *
2003
- * 数据自带棱线包(primitiveType 13)时直接用,成本为零;
2004
- * 没有的话才用 EdgesGeometry 现算 —— 那是 CPU 端的活,几十万面一次性建会卡住主线程
2051
+ * 取值是 `boolean | EdgeStyle | EdgeStyle[]`(见 resolveEdgeModes):
2052
+ * - `true` / `'line'` 折边线(旧口径)
2053
+ * - `'offset'` 折边线 + 沿边法线外推 `edgeOffset` 米
2054
+ * - `'hull'` 背面外扩轮廓(选中侧 outlineStyle:'hull' 的整场景版)
2055
+ * - `'gpu'` 纯片元描边:零几何、零额外 pass,线宽约 1 像素
2056
+ * - 数组 叠加,例如 `['line', 'hull']`
2057
+ *
2058
+ * 数据自带棱线包(primitiveType 13)时直接用,成本为零;`style.forceCpuEdges`
2059
+ * 可以无视它,改由 CPU 现算 —— 那是 CPU 端的活,几十万面一次性建会卡住主线程
2005
2060
  * (实测 20 个网格 1.9s),所以按 8ms 一帧切片,边建边出。
2006
2061
  *
2007
2062
  * 棱线本身用「屏幕空间等宽线」画(见 EdgeLines.ts):WebGL 的 lineWidth 基本无效,
@@ -2011,23 +2066,33 @@ export class S3MViewer {
2011
2066
  * 开:立刻置位 + 开始分片建线,同时 `uEdgeFade` 0→1 —— 建好一块亮一块,视觉上是渐显;
2012
2067
  * 关:`uEdgeFade` 1→0,淡完才 dispose,避免棱线「啪」一下消失。
2013
2068
  */
2014
- setEdges(enabled, transition) {
2069
+ setEdges(edges, transition) {
2015
2070
  const wantAnim = !!transition && ((transition.duration ?? 0) > 0 || !!transition.spring);
2016
- this._edgesEnabled = enabled;
2017
- this.style.edges = enabled;
2018
- this._styleTarget.edges = enabled;
2019
- // 数据自带的棱线:直接切可见性
2020
- for (const entry of this.datasets.values()) {
2021
- entry.root.traverse((o) => {
2022
- const ud = o.userData;
2023
- if (ud.isEdgeLines) {
2024
- o.visible = enabled;
2025
- this._styleEdgeLine(o);
2026
- }
2027
- });
2071
+ const modes = resolveEdgeModes(edges);
2072
+ // 换画法(line ↔ hull ↔ offset)是结构变更:旧装饰必须拆掉再建,
2073
+ // 否则会出现「切到 hull 了折边线还留着」这种叠影。
2074
+ // 同一画法重复调用(滑块逐帧 setEdges(true))不重建,几何是复用的。
2075
+ const modesChanged = !sameEdgeModes(this._edgeModes, modes);
2076
+ this._edgeModes = modes;
2077
+ this._edgesEnabled = modes.enabled;
2078
+ this.style.edges = edges;
2079
+ this._styleTarget.edges = edges;
2080
+ // 数据自带的棱线:直接切可见性(forceCpuEdges 时永远收起,改由 CPU 现算)。
2081
+ // 只遍历注册时收集好的那批 LineSegments —— 全数据集 traverse 在几千节点下太贵。
2082
+ // gpu 模式下 shader 自己描边,native 线段包必须收起,否则叠成双线
2083
+ const nativeVisible = modes.enabled && !modes.gpu && this.style.forceCpuEdges !== true;
2084
+ for (const lines of this._nativeEdgeLines) {
2085
+ lines.visible = nativeVisible;
2086
+ this._styleEdgeLine(lines);
2028
2087
  }
2029
2088
  this._syncEdgeStyle();
2030
- if (!enabled) {
2089
+ // 关掉 gpu 画法就把后处理资源还回去(整屏 RT 白占显存没意义)。
2090
+ // 必须放在「整体关闭」的早退之前,否则关棱线时永远轮不到它。
2091
+ if (!modes.gpu && this._gpuEdge) {
2092
+ this._gpuEdge.dispose();
2093
+ this._gpuEdge = null;
2094
+ }
2095
+ if (!modes.enabled) {
2031
2096
  if (wantAnim) {
2032
2097
  this.animator.to('style.edgeFade', 0, {
2033
2098
  ...transition,
@@ -2045,18 +2110,25 @@ export class S3MViewer {
2045
2110
  this._requestRepaint();
2046
2111
  return;
2047
2112
  }
2113
+ if (modesChanged)
2114
+ this._disposeEdges();
2048
2115
  const pending = [...this._pickables.values()]
2049
2116
  .map((p) => p.mesh)
2050
2117
  .filter((m) => {
2051
2118
  const ud = m.userData;
2052
2119
  // 点云没有棱可描
2053
- return !ud.edges && !ud.nativeEdges && !isPointCloudObject(m);
2120
+ if (isPointCloudObject(m))
2121
+ return false;
2122
+ // native 棱线还算不算数,取决于**当前**的 forceCpuEdges(它可以在运行中切换),
2123
+ // 所以这里按注册时记下的原始标记重算,而不是沿用注册那一刻的结论。
2124
+ ud.nativeEdges = ud.nativeEdgesRaw === true && this.style.forceCpuEdges !== true;
2125
+ return !ud.nativeEdges && this._needsEdgeDecoration(ud);
2054
2126
  });
2055
2127
  let i = 0;
2056
2128
  const step = () => {
2057
2129
  const t0 = performance.now();
2058
2130
  while (i < pending.length && performance.now() - t0 < 8)
2059
- this._ensureEdges(pending[i++]);
2131
+ this._ensureEdgeDecoration(pending[i++]);
2060
2132
  if (i < pending.length)
2061
2133
  setTimeout(step, 0);
2062
2134
  else
@@ -2129,10 +2201,11 @@ export class S3MViewer {
2129
2201
  this._requestRepaint();
2130
2202
  }
2131
2203
  /**
2132
- * 让全局棱线材质跟上 style.edgeColor / edgeWidth / edgeOpacity。
2204
+ * 让全局棱线材质跟上 style.edgeColor / edgeWidth / edgeOpacity / edgeOffset。
2133
2205
  *
2134
- * 全程 O(1):只有一份共享 edgeMaterial(所有逐 mesh 棱线都用它)+ 一份预制缓存,
2135
- * 所以棱线淡入淡出只要改一个 uniform,新建瓦片自动继承当前进度。
2206
+ * 全程 O(1):只有一份共享 edgeMaterial(所有逐 mesh 棱线都用它)+ 一份预制缓存
2207
+ * + 一批共享外观对象的轮廓壳,所以棱线淡入淡出只要改一个 uniform,
2208
+ * 新建瓦片自动继承当前进度。
2136
2209
  */
2137
2210
  _syncEdgeStyle() {
2138
2211
  const s = this.style;
@@ -2144,6 +2217,14 @@ export class S3MViewer {
2144
2217
  u.uColor.value.set(s.edgeColor);
2145
2218
  u.uWidth.value = Math.max(0.1, s.edgeWidth ?? 1.5);
2146
2219
  u.uOpacity.value = opacity;
2220
+ // 外推距离只在 offset 画法下非 0;其它画法把线钉在面上(与改动前一致)
2221
+ u.uOffset.value = this._edgeModes.offset ? Math.max(0, s.edgeOffset ?? 0.15) : 0;
2222
+ // 外扩轮廓壳与折边线共用颜色 / 透明度,厚度是米制的单独一项
2223
+ const h = this._hullStyleUniforms;
2224
+ h.uColor.value.set(s.edgeColor);
2225
+ h.uWidth.value = Math.max(0, s.edgeHullWidth ?? 0.9);
2226
+ h.uOpacity.value = opacity;
2227
+ // GPU 描边(edges: 'gpu')是后处理,参数每帧从 style 现取,这里不用同步 uniform
2147
2228
  // 预制棱线缓存(LineBasicMaterial)同步颜色 / 不透明度
2148
2229
  if (this._creaseLines) {
2149
2230
  const m = this._creaseLines.material;
@@ -2201,6 +2282,25 @@ export class S3MViewer {
2201
2282
  const hay = `${ud.skeletonName ?? ''} ${datasetName}`.toLowerCase();
2202
2283
  return S3MViewer._EDGE_SKIP_KEYWORDS.some((k) => hay.includes(k));
2203
2284
  }
2285
+ /**
2286
+ * 这块网格还缺哪种棱线装饰(缺就建,齐了就不动)。
2287
+ *
2288
+ * setEdges 的分片建线靠它筛「还没建完的」,注册新瓦片也靠它决定要不要动手。
2289
+ */
2290
+ _needsEdgeDecoration(ud) {
2291
+ if (this._edgeModes.line && !ud.edges)
2292
+ return true;
2293
+ if (this._edgeModes.hull && !ud.edgeHull)
2294
+ return true;
2295
+ return false;
2296
+ }
2297
+ /** 按当前画法补齐这块网格的棱线装饰 */
2298
+ _ensureEdgeDecoration(mesh) {
2299
+ if (this._edgeModes.line)
2300
+ this._ensureEdges(mesh);
2301
+ if (this._edgeModes.hull)
2302
+ this._ensureHull(mesh);
2303
+ }
2204
2304
  _ensureEdges(mesh) {
2205
2305
  const ud = mesh.userData;
2206
2306
  if (ud.edges || ud.nativeEdges || !mesh.geometry)
@@ -2221,11 +2321,23 @@ export class S3MViewer {
2221
2321
  const welded = mergeVerticesByPosition(mesh.geometry, 0.005);
2222
2322
  // 2. 调大临界角(默认 55°,可在 style.edgeThreshold 调),过滤浅坡与曲面细分,只保留真正的棱。
2223
2323
  const thresholdAngle = this.style.edgeThreshold ?? 55;
2224
- const source = new THREE.EdgesGeometry(welded, thresholdAngle);
2324
+ // 'offset' 画法要额外带一条「边法线」才知道往哪推,所以走本地实现(它本来就算好了
2325
+ // 相邻两面法线);其余画法保持 EdgesGeometry 这条老路,几何输出与改动前逐字一致。
2326
+ let segments;
2327
+ let normals;
2328
+ if (this._edgeModes.offset) {
2329
+ const raw = [];
2330
+ segments = buildFeatureEdgeSegments(welded, null, thresholdAngle, raw);
2331
+ if (raw.length > 0)
2332
+ normals = new Float32Array(raw);
2333
+ }
2334
+ else {
2335
+ const source = new THREE.EdgesGeometry(welded, thresholdAngle);
2336
+ const attr = source.getAttribute('position');
2337
+ segments = attr ? attr.array : null;
2338
+ source.dispose();
2339
+ }
2225
2340
  welded.dispose();
2226
- const attr = source.getAttribute('position');
2227
- const segments = attr ? attr.array : null;
2228
- source.dispose();
2229
2341
  if (!segments || segments.length < 6)
2230
2342
  return;
2231
2343
  // 3. 回填每段棱线所属的单体 batchId。
@@ -2243,7 +2355,7 @@ export class S3MViewer {
2243
2355
  batchMap.get(positionQuantKey(segments[s], segments[s + 1], segments[s + 2], 1 / TOL)) ?? -1;
2244
2356
  }
2245
2357
  }
2246
- const lines = new THREE.Mesh(buildThickLineGeometry(segments, batchIds), this._createEdgeMaterial(mesh));
2358
+ const lines = new THREE.Mesh(buildThickLineGeometry(segments, batchIds, normals), this._createEdgeMaterial(mesh));
2247
2359
  lines.renderOrder = 2;
2248
2360
  // 屏幕空间外扩后可能超出原包围球,关掉剔除更稳
2249
2361
  lines.frustumCulled = false;
@@ -2252,6 +2364,44 @@ export class S3MViewer {
2252
2364
  ud.edges = lines;
2253
2365
  mesh.add(lines); // 作为子节点,自动继承 mesh 的世界变换
2254
2366
  }
2367
+ /**
2368
+ * 给一块网格挂「背面外扩轮廓」(整场景版)。
2369
+ *
2370
+ * 复用选中侧那套 `createOutlineMaterial`:顶点沿法线鼓 `edgeHullWidth` 米、只画背面,
2371
+ * 于是被本体挡住的部分不显示,露出来的那圈就是描边。与折边线的差别在于——
2372
+ * 这里**不建任何新几何**,成本只是把同一块网格多画一遍,折边判定那套 CPU 活全省了。
2373
+ *
2374
+ * 实例化几何拿不到逐实例变换(轮廓壳是 mesh 的子节点,不吃 instanceMatrix),
2375
+ * 直接跳过:宁可这栋没描边,也不要所有实例的壳叠在原点。
2376
+ */
2377
+ _ensureHull(mesh) {
2378
+ const ud = mesh.userData;
2379
+ if (ud.edgeHull || !mesh.geometry)
2380
+ return;
2381
+ if (mesh.isInstancedMesh)
2382
+ return;
2383
+ // 地形 / 绿地 / 道路等不参与自动描边(即使全局开棱线也要跳过)
2384
+ if (this._shouldSkipAutoEdges(ud, ''))
2385
+ return;
2386
+ // 逐网格一份材质(各绑各的单体状态纹理),外观 uniform 复用共享对象
2387
+ const mat = createOutlineMaterial(this.uniforms, this.style.edgeHullWidth ?? 0.9, this._hullStyleUniforms, true);
2388
+ // 整块几何都要外扩:选中侧靠 uSelBatch 只扩一栋,全局必须置 whole
2389
+ mat.uniforms.uSelWhole.value = 1;
2390
+ mat.uniforms.uSelBatch.value = -1;
2391
+ const styled = styledMaterialOf(mesh);
2392
+ if (styled?.userData?.uBatchTex) {
2393
+ mat.uniforms.uBatchTex.value = styled.userData.uBatchTex.value;
2394
+ mat.uniforms.uBatchTexWidth.value = styled.userData.uBatchTexWidth.value;
2395
+ mat.uniforms.uBatchTexActive.value = styled.userData.uBatchTexActive.value;
2396
+ }
2397
+ const hull = new THREE.Mesh(mesh.geometry, mat);
2398
+ hull.renderOrder = 2;
2399
+ hull.frustumCulled = false;
2400
+ hull.raycast = () => { };
2401
+ hull.userData.isEdgeHull = true;
2402
+ ud.edgeHull = hull;
2403
+ mesh.add(hull); // 作为子节点,自动继承 mesh 的世界变换
2404
+ }
2255
2405
  /**
2256
2406
  * 给一块网格造专属的棱线材质。
2257
2407
  *
@@ -2298,19 +2448,30 @@ export class S3MViewer {
2298
2448
  _removeEdges(mesh) {
2299
2449
  const ud = mesh.userData;
2300
2450
  const lines = ud.edges;
2301
- if (!lines)
2302
- return;
2303
- mesh.remove(lines);
2304
- lines.geometry?.dispose();
2305
- // 棱线材质现在是逐网格一份(要绑各自的 batch 纹理),得跟着释放
2306
- const mat = lines.material;
2307
- if (Array.isArray(mat)) {
2308
- mat.forEach((m) => m?.dispose?.());
2309
- }
2310
- else {
2311
- mat?.dispose?.();
2451
+ if (lines) {
2452
+ mesh.remove(lines);
2453
+ lines.geometry?.dispose();
2454
+ // 棱线材质现在是逐网格一份(要绑各自的 batch 纹理),得跟着释放
2455
+ const mat = lines.material;
2456
+ if (Array.isArray(mat)) {
2457
+ mat.forEach((m) => m?.dispose?.());
2458
+ }
2459
+ else {
2460
+ mat?.dispose?.();
2461
+ }
2462
+ ud.edges = null;
2463
+ }
2464
+ // 外扩壳的 geometry 是**复用主网格的**,只能释放材质,不能 dispose 几何
2465
+ const hull = ud.edgeHull;
2466
+ if (hull) {
2467
+ mesh.remove(hull);
2468
+ const hmat = hull.material;
2469
+ if (Array.isArray(hmat))
2470
+ hmat.forEach((m) => m?.dispose?.());
2471
+ else
2472
+ hmat?.dispose?.();
2473
+ ud.edgeHull = null;
2312
2474
  }
2313
- ud.edges = null;
2314
2475
  }
2315
2476
  /* ---------------------------------------------------------------- 拾取 */
2316
2477
  /** 获取指定屏幕像素对应的场景射线(用于高精度求交与穿透拾取) */
@@ -2997,6 +3158,35 @@ export class S3MViewer {
2997
3158
  this._selectionEdges = null;
2998
3159
  }
2999
3160
  /* ---------------------------------------------------------------- 渲染 */
3161
+ /**
3162
+ * 执行一帧 GPU 描边(法线 + 深度后处理)。
3163
+ *
3164
+ * 参数全部来自 style,不缓存:`edgeWidth` 在这里是「采样偏移」,线宽 ≈ 2×它;
3165
+ * `edgeThreshold` 是折边敏感度(夹角小于它不描),和 CPU 折边线同一口径。
3166
+ */
3167
+ _renderGpuEdges(canvas) {
3168
+ if (!this.renderer || !this.scene || !this.camera)
3169
+ return;
3170
+ const s = this.style;
3171
+ const fade = this.uniforms.uEdgeFade?.value ?? 1;
3172
+ const opacity = Math.min(1, Math.max(0, s.edgeOpacity ?? 0.6)) * clampOpacity(s.opacity) * fade;
3173
+ if (opacity <= 0.004)
3174
+ return;
3175
+ if (!this._gpuEdge)
3176
+ this._gpuEdge = new GpuEdgePass();
3177
+ if (!this._gpuEdge.supported(this.renderer))
3178
+ return;
3179
+ // 度数 → 归一化法线差(|Δn| = 2·sin(θ/2)),乘 0.6 让阈值落在「刚好能描出」的位置
3180
+ const deg = Math.min(179, Math.max(1, s.edgeThreshold ?? 55));
3181
+ const normalThreshold = 2 * Math.sin((deg * Math.PI) / 360) * 0.6;
3182
+ this._gpuEdge.render(this.renderer, this.scene, this.camera, canvas.width, canvas.height, {
3183
+ color: this._gpuEdgeColor.set(s.edgeColor),
3184
+ opacity,
3185
+ radius: Math.max(1, s.edgeWidth ?? 1.5),
3186
+ normalThreshold,
3187
+ depthThreshold: 0.08,
3188
+ });
3189
+ }
3000
3190
  /** 等宽线要按设备像素换算线宽:uResolution 用绘图缓冲尺寸,uDpr 是缓冲 / CSS 的比值 */
3001
3191
  _updateLineResolution(canvas) {
3002
3192
  const w = canvas.width || 1;
@@ -3042,6 +3232,30 @@ export class S3MViewer {
3042
3232
  return canvasHeight;
3043
3233
  return Math.min(canvasHeight, cssHeight * cap);
3044
3234
  }
3235
+ /** 当前纹理缓存条数上限 */
3236
+ get maxImageCache() {
3237
+ return this.options.maxImageCache ?? 128;
3238
+ }
3239
+ /**
3240
+ * 调整纹理缓存条数。不传 `datasetId` 时对所有已存在数据集立即生效,
3241
+ * 并作为之后新增数据集的默认值。缓存是 LRU,降下来不会立刻释放,下次淘汰时生效。
3242
+ */
3243
+ setMaxImageCache(n, datasetId) {
3244
+ const next = Number.isFinite(n) ? Math.max(1, Math.floor(n)) : 128;
3245
+ if (datasetId) {
3246
+ const entry = this.datasets.get(datasetId);
3247
+ if (entry?.tileset)
3248
+ entry.tileset.maxImageCache = next;
3249
+ }
3250
+ else {
3251
+ this.options.maxImageCache = next;
3252
+ for (const entry of this.datasets.values()) {
3253
+ if (entry.tileset)
3254
+ entry.tileset.maxImageCache = next;
3255
+ }
3256
+ }
3257
+ this._requestRepaint();
3258
+ }
3045
3259
  /** 当前每个数据集的驻留面数预算。Infinity = 不限制 */
3046
3260
  get maxTriangles() {
3047
3261
  return this.options.maxTriangles ?? Infinity;
@@ -3148,7 +3362,7 @@ export class S3MViewer {
3148
3362
  this._enuMatrix.set(s, 0, 0, this.sceneAnchor.x, 0, -s, 0, this.sceneAnchor.y, 0, 0, s, this.sceneAnchor.z, 0, 0, 0, 1);
3149
3363
  // 正交模式由宿主在传入 mvp 前自行替换(见 s3m-maplibre 的 S3MLayer._applyOrtho),
3150
3364
  // 视图矩阵是从宿主输入反推的(P⁻¹×MVP),不会和宿主的 pan/zoom/pitch 错位。
3151
- const mvp = new THREE.Matrix4().fromArray(opts.mvp);
3365
+ const mvp = this._frameMvp.fromArray(opts.mvp);
3152
3366
  mvp.multiply(this._enuMatrix);
3153
3367
  this.camera.projectionMatrix.copy(mvp);
3154
3368
  this.camera.projectionMatrixInverse.copy(mvp).invert();
@@ -3195,6 +3409,10 @@ export class S3MViewer {
3195
3409
  // 这里跳过的是「本层的绘制」,宿主自己的清屏 / 底图照旧。
3196
3410
  if ((this.uniforms.uOpacity?.value ?? 1) > OPACITY_EPS) {
3197
3411
  this.renderer.render(this.scene, this.camera);
3412
+ // GPU 描边必须画在主场景之后:它的全屏 quad 参与宿主深度测试,
3413
+ // 依赖本帧已经写好的深度(被地形挡住的地方不该描边)
3414
+ if (this._edgeModes.gpu)
3415
+ this._renderGpuEdges(canvas);
3198
3416
  }
3199
3417
  this._frame++;
3200
3418
  const now = performance.now();