s3m-three 0.3.8 → 0.3.10

package/dist/render/FeatureStyleManager.js

@@ -13,6 +13,113 @@
  */
 import * as THREE from 'three';
 import { resolveFeature, measureSegments, buildAttributes, pickEntryId, } from '../core/FeatureInfo.js';
+/**
+ * 将各类旋转表示统一解析为 3x3 行优先矩阵数组
+ */
+export function resolveRotationMatrix(rot) {
+    if (rot == null)
+        return null;
+    if (typeof rot === 'number') {
+        const c = Math.cos(rot);
+        const s = Math.sin(rot);
+        return [
+            c, -s, 0,
+            s, c, 0,
+            0, 0, 1,
+        ];
+    }
+    if (Array.isArray(rot)) {
+        if (rot.length === 3) {
+            const euler = new THREE.Euler(rot[0], rot[1], rot[2]);
+            const m = new THREE.Matrix4().makeRotationFromEuler(euler);
+            const e = m.elements;
+            return [
+                e[0], e[4], e[8],
+                e[1], e[5], e[9],
+                e[2], e[6], e[10],
+            ];
+        }
+        if (rot.length === 4) {
+            const q = new THREE.Quaternion(rot[0], rot[1], rot[2], rot[3]);
+            const m = new THREE.Matrix4().makeRotationFromQuaternion(q);
+            const e = m.elements;
+            return [
+                e[0], e[4], e[8],
+                e[1], e[5], e[9],
+                e[2], e[6], e[10],
+            ];
+        }
+    }
+    if (rot instanceof THREE.Euler) {
+        const m = new THREE.Matrix4().makeRotationFromEuler(rot);
+        const e = m.elements;
+        return [
+            e[0], e[4], e[8],
+            e[1], e[5], e[9],
+            e[2], e[6], e[10],
+        ];
+    }
+    if (rot instanceof THREE.Quaternion) {
+        const m = new THREE.Matrix4().makeRotationFromQuaternion(rot);
+        const e = m.elements;
+        return [
+            e[0], e[4], e[8],
+            e[1], e[5], e[9],
+            e[2], e[6], e[10],
+        ];
+    }
+    if (rot instanceof THREE.Matrix3) {
+        const e = rot.elements;
+        return [
+            e[0], e[3], e[6],
+            e[1], e[4], e[7],
+            e[2], e[5], e[8],
+        ];
+    }
+    if (rot instanceof THREE.Matrix4) {
+        const e = rot.elements;
+        return [
+            e[0], e[4], e[8],
+            e[1], e[5], e[9],
+            e[2], e[6], e[10],
+        ];
+    }
+    return null;
+}
+/**
+ * 提取欧拉角 [rx, ry, rz]（弧度）用于动画插值
+ */
+export function extractEulerAngles(rot) {
+    if (rot == null)
+        return [0, 0, 0];
+    if (typeof rot === 'number')
+        return [0, 0, rot];
+    if (Array.isArray(rot)) {
+        if (rot.length === 3)
+            return [rot[0], rot[1], rot[2]];
+        if (rot.length === 4) {
+            const q = new THREE.Quaternion(rot[0], rot[1], rot[2], rot[3]);
+            const e = new THREE.Euler().setFromQuaternion(q);
+            return [e.x, e.y, e.z];
+        }
+    }
+    if (rot instanceof THREE.Euler)
+        return [rot.x, rot.y, rot.z];
+    if (rot instanceof THREE.Quaternion) {
+        const e = new THREE.Euler().setFromQuaternion(rot);
+        return [e.x, e.y, e.z];
+    }
+    if (rot instanceof THREE.Matrix3) {
+        const m = new THREE.Matrix4().set(rot.elements[0], rot.elements[3], rot.elements[6], 0, rot.elements[1], rot.elements[4], rot.elements[7], 0, rot.elements[2], rot.elements[5], rot.elements[8], 0, 0, 0, 0, 1);
+        const e = new THREE.Euler().setFromRotationMatrix(m);
+        return [e.x, e.y, e.z];
+    }
+    if (rot instanceof THREE.Matrix4) {
+        const e = new THREE.Euler().setFromRotationMatrix(rot);
+        return [e.x, e.y, e.z];
+    }
+    return [0, 0, 0];
+}
 function styledMaterialOf(mesh) {
     const m = Array.isArray(mesh.material) ? mesh.material[0] : mesh.material;
     const styled = m;
@@ -115,7 +222,12 @@ export class FeatureStyleManager {
             return {};
         const st = this.featureStyles.get(smid);
         const elev = st?.elevation ?? this.thematicElevation.get(smid);
-        return { translation: st?.translation, elevation: elev };
+        return {
+            translation: st?.translation,
+            elevation: elev,
+            rotation: st?.rotation,
+            pivot: st?.pivot,
+        };
     }
     getFeatureStyles() {
         return new Map(this.featureStyles);
@@ -423,78 +535,61 @@ export class FeatureStyleManager {
         }
         return { smids: 0, batches, conflicts, conflictingSmids: involved.size };
     }
-    applyOverridesToMesh(mesh) {
-        const mat = styledMaterialOf(mesh);
-        if (!mat)
-            return;
-        const ud = mesh.userData;
-        const pickInfo = ud.geoRef?.pickInfo;
-        const hasStyles = this.featureStyles.size > 0 || this.thematicColors.size > 0 || this.thematicElevation.size > 0;
-        const filter = this.filter;
-        const hasFilter = this.fieldFilter != null ||
-            (filter != null &&
-                ((filter.include?.length ?? 0) > 0 ||
-                    (filter.exclude?.length ?? 0) > 0 ||
-                    filter.predicate != null));
-        if (!hasStyles && !hasFilter) {
-            if (mat.userData.uBatchTexActive) {
-                mat.userData.uBatchTexActive.value = 0;
-            }
-            // 单体淡化清除后，把材质 transparent 还原成全局透明度语义
-            if (mat.transparent && !this._isLayerTransparent())
-                mat.transparent = false;
-            return;
-        }
-        if (!pickInfo || Object.keys(pickInfo).length === 0) {
-            if (mat.userData.uBatchTexActive) {
-                mat.userData.uBatchTexActive.value = 0;
-            }
-            if (mat.transparent && !this._isLayerTransparent())
-                mat.transparent = false;
-            return;
-        }
-        let maxBatch = 0;
-        for (const p of Object.values(pickInfo)) {
-            const id = pickEntryId(p);
-            if (id > maxBatch)
-                maxBatch = id;
-        }
-        const width = Math.max(maxBatch + 1, 1);
-        let record = this._meshBatchTextures.get(mesh);
-        if (!record || record.width < width) {
-            const data = new Float32Array(width * 2 * 4);
-            const texture = new THREE.DataTexture(data, width, 2, THREE.RGBAFormat, THREE.FloatType);
-            texture.minFilter = THREE.NearestFilter;
-            texture.magFilter = THREE.NearestFilter;
-            record = { texture, data, width };
-            this._meshBatchTextures.set(mesh, record);
-            mat.userData.uBatchTex.value = texture;
-            mat.userData.uBatchTexWidth.value = width;
-        }
-        const { data, texture } = record;
-        const w = record.width;
+    _bakeStylesIntoBuffer(data, width, pickInfo, mesh, styleMap) {
+        const w = width;
         for (let i = 0; i < w; i++) {
+            // Row 0: [R, G, B, elevation/hidden]
             data[i * 4 + 0] = -1;
             data[i * 4 + 1] = -1;
             data[i * 4 + 2] = -1;
             data[i * 4 + 3] = 0;
+            // Row 1: [translationX, translationY, translationZ, opacity]
             const r1 = (w + i) * 4;
             data[r1 + 0] = 0;
             data[r1 + 1] = 0;
             data[r1 + 2] = 0;
             data[r1 + 3] = 0;
+            // Row 2: [R00, R01, R02, pivot.x] (单位矩阵默认值)
+            const r2 = (w * 2 + i) * 4;
+            data[r2 + 0] = 1;
+            data[r2 + 1] = 0;
+            data[r2 + 2] = 0;
+            data[r2 + 3] = 0;
+            // Row 3: [R10, R11, R12, pivot.y]
+            const r3 = (w * 3 + i) * 4;
+            data[r3 + 0] = 0;
+            data[r3 + 1] = 1;
+            data[r3 + 2] = 0;
+            data[r3 + 3] = 0;
+            // Row 4: [R20, R21, R22, pivot.z]
+            const r4 = (w * 4 + i) * 4;
+            data[r4 + 0] = 0;
+            data[r4 + 1] = 0;
+            data[r4 + 2] = 1;
+            data[r4 + 3] = 0;
+            // Row 5: [pathId, speed, phase, modeFlag] (默认 -1 表示未绑定 GPU 路径)
+            const r5 = (w * 5 + i) * 4;
+            data[r5 + 0] = -1;
+            data[r5 + 1] = 0;
+            data[r5 + 2] = 0;
+            data[r5 + 3] = 0;
         }
         let hasActive = false;
         const hiddenBatches = new Set();
         const colorOfBatch = new Map();
         const elevOfBatch = new Map();
         const translationOfBatch = new Map();
+        const rotationOfBatch = new Map();
+        const pivotOfBatch = new Map();
+        const gpuPathOfBatch = new Map();
         const opacityOfBatch = new Map();
         const ownersOfBatch = new Map();
+        const filter = this.filter;
+        const ud = mesh.userData;
         for (const [smidStr, entry] of Object.entries(pickInfo)) {
             const smid = Number(smidStr);
             const bId = pickEntryId(entry);
-            if (bId < 0 || bId >= record.width)
+            if (bId < 0 || bId >= w)
                 continue;
             ownersOfBatch.set(bId, (ownersOfBatch.get(bId) ?? 0) + 1);
             let hidden = false;
@@ -530,7 +625,7 @@ export class FeatureStyleManager {
                     continue;
                 }
             }
-            const st = this.featureStyles.get(smid);
+            const st = styleMap.get(smid);
             if (st?.hidden) {
                 hiddenBatches.add(bId);
                 continue;
@@ -554,6 +649,17 @@ export class FeatureStyleManager {
             if (st?.translation && !translationOfBatch.has(bId)) {
                 translationOfBatch.set(bId, st.translation);
             }
+            if (st?.rotation != null && !rotationOfBatch.has(bId)) {
+                const rotMat = resolveRotationMatrix(st.rotation);
+                if (rotMat)
+                    rotationOfBatch.set(bId, rotMat);
+            }
+            if (st?.pivot && !pivotOfBatch.has(bId)) {
+                pivotOfBatch.set(bId, st.pivot);
+            }
+            if (st?.gpuPath && !gpuPathOfBatch.has(bId)) {
+                gpuPathOfBatch.set(bId, st.gpuPath);
+            }
         }
         for (const bId of hiddenBatches) {
             data[bId * 4 + 3] = -1;
@@ -595,19 +701,126 @@ export class FeatureStyleManager {
             hasActive = true;
             hasFade = true;
         }
-        // 有淡化单体时整块材质要开混合才有透明效果；清除后还原为全局透明度语义
-        if (hasFade && !mat.transparent)
-            mat.transparent = true;
-        else if (!hasFade && mat.transparent && !this._isLayerTransparent())
-            mat.transparent = false;
+        for (const [bId, rot] of rotationOfBatch) {
+            if (hiddenBatches.has(bId))
+                continue;
+            const piv = pivotOfBatch.get(bId) ?? [0, 0, 0];
+            const r2 = (w * 2 + bId) * 4;
+            data[r2 + 0] = rot[0];
+            data[r2 + 1] = rot[1];
+            data[r2 + 2] = rot[2];
+            data[r2 + 3] = piv[0];
+            const r3 = (w * 3 + bId) * 4;
+            data[r3 + 0] = rot[3];
+            data[r3 + 1] = rot[4];
+            data[r3 + 2] = rot[5];
+            data[r3 + 3] = piv[1];
+            const r4 = (w * 4 + bId) * 4;
+            data[r4 + 0] = rot[6];
+            data[r4 + 1] = rot[7];
+            data[r4 + 2] = rot[8];
+            data[r4 + 3] = piv[2];
+            hasActive = true;
+        }
+        for (const [bId, piv] of pivotOfBatch) {
+            if (rotationOfBatch.has(bId) || hiddenBatches.has(bId))
+                continue;
+            data[(w * 2 + bId) * 4 + 3] = piv[0];
+            data[(w * 3 + bId) * 4 + 3] = piv[1];
+            data[(w * 4 + bId) * 4 + 3] = piv[2];
+            hasActive = true;
+        }
+        // Row 5: 烘焙 GPU 路径动画参数 [pathId, speed, phase, modeFlag]
+        for (const [bId, gp] of gpuPathOfBatch) {
+            if (hiddenBatches.has(bId))
+                continue;
+            const r5 = (w * 5 + bId) * 4;
+            data[r5 + 0] = gp.pathId;
+            data[r5 + 1] = gp.speed ?? 0;
+            data[r5 + 2] = gp.phase ?? 0;
+            let mode = 1; // 1 = loop (默认)
+            if (gp.loop === 'clamp' || gp.loop === false) {
+                mode = 2;
+            }
+            else if (gp.loop === 'pingpong') {
+                mode = 3;
+            }
+            if (gp.autoHeading === false) {
+                mode += 3; // 4=loop+noHeading, 5=clamp+noHeading, 6=pingpong+noHeading
+            }
+            data[r5 + 3] = mode;
+            hasActive = true;
+        }
         let conflicts = 0;
         for (const [bId, owners] of ownersOfBatch) {
             if (owners < 2)
                 continue;
-            if (!hiddenBatches.has(bId) && !colorOfBatch.has(bId) && !elevOfBatch.has(bId))
+            if (!hiddenBatches.has(bId) &&
+                !colorOfBatch.has(bId) &&
+                !elevOfBatch.has(bId) &&
+                !rotationOfBatch.has(bId) &&
+                !gpuPathOfBatch.has(bId)) {
                 continue;
+            }
             conflicts++;
         }
+        return { hasActive, hasFade, conflicts };
+    }
+    applyOverridesToMesh(mesh) {
+        const mat = styledMaterialOf(mesh);
+        if (!mat)
+            return;
+        const ud = mesh.userData;
+        const pickInfo = ud.geoRef?.pickInfo;
+        const hasStyles = this.featureStyles.size > 0 || this.thematicColors.size > 0 || this.thematicElevation.size > 0;
+        const filter = this.filter;
+        const hasFilter = this.fieldFilter != null ||
+            (filter != null &&
+                ((filter.include?.length ?? 0) > 0 ||
+                    (filter.exclude?.length ?? 0) > 0 ||
+                    filter.predicate != null));
+        if (!hasStyles && !hasFilter) {
+            if (mat.userData.uBatchTexActive) {
+                mat.userData.uBatchTexActive.value = 0;
+            }
+            // 单体淡化清除后，把材质 transparent 还原成全局透明度语义
+            if (mat.transparent && !this._isLayerTransparent())
+                mat.transparent = false;
+            return;
+        }
+        if (!pickInfo || Object.keys(pickInfo).length === 0) {
+            if (mat.userData.uBatchTexActive) {
+                mat.userData.uBatchTexActive.value = 0;
+            }
+            if (mat.transparent && !this._isLayerTransparent())
+                mat.transparent = false;
+            return;
+        }
+        let maxBatch = 0;
+        for (const p of Object.values(pickInfo)) {
+            const id = pickEntryId(p);
+            if (id > maxBatch)
+                maxBatch = id;
+        }
+        const width = Math.max(maxBatch + 1, 1);
+        let record = this._meshBatchTextures.get(mesh);
+        if (!record || record.width < width) {
+            const data = new Float32Array(width * 6 * 4);
+            const texture = new THREE.DataTexture(data, width, 6, THREE.RGBAFormat, THREE.FloatType);
+            texture.minFilter = THREE.NearestFilter;
+            texture.magFilter = THREE.NearestFilter;
+            record = { texture, data, width };
+            this._meshBatchTextures.set(mesh, record);
+            mat.userData.uBatchTex.value = texture;
+            mat.userData.uBatchTexWidth.value = width;
+        }
+        const { data, texture } = record;
+        const { hasActive, hasFade, conflicts } = this._bakeStylesIntoBuffer(data, record.width, pickInfo, mesh, this.featureStyles);
+        // 有淡化单体时整块材质要开混合才有透明效果；清除后还原为全局透明度语义
+        if (hasFade && !mat.transparent)
+            mat.transparent = true;
+        else if (!hasFade && mat.transparent && !this._isLayerTransparent())
+            mat.transparent = false;
         if (conflicts > 0 && !this._batchConflictWarned) {
             this._batchConflictWarned = true;
             console.warn(`[s3m] 有 ${conflicts} 个单体状态写不进独立的 batch（多个 SMID 共用同一个 batchId，\n` +
@@ -620,6 +833,90 @@ export class FeatureStyleManager {
             mat.userData.uBatchTexActive.value = hasActive ? 1 : 0;
         }
     }
+    /**
+     * 准备双纹理交叉淡化：烘焙目标样式到第二纹理 (uBatchTex2)
+     */
+    prepareCrossFade(targetStyles, meshes) {
+        for (const mesh of meshes) {
+            const mat = styledMaterialOf(mesh);
+            if (!mat)
+                continue;
+            const ud = mesh.userData;
+            const pickInfo = ud.geoRef?.pickInfo;
+            if (!pickInfo || Object.keys(pickInfo).length === 0)
+                continue;
+            let maxBatch = 0;
+            for (const p of Object.values(pickInfo)) {
+                const id = pickEntryId(p);
+                if (id > maxBatch)
+                    maxBatch = id;
+            }
+            const width = Math.max(maxBatch + 1, 1);
+            let record = this._meshBatchTextures.get(mesh);
+            if (!record || record.width < width) {
+                const data = new Float32Array(width * 6 * 4);
+                const texture = new THREE.DataTexture(data, width, 6, THREE.RGBAFormat, THREE.FloatType);
+                texture.minFilter = THREE.NearestFilter;
+                texture.magFilter = THREE.NearestFilter;
+                record = { texture, data, width };
+                this._meshBatchTextures.set(mesh, record);
+                mat.userData.uBatchTex.value = texture;
+                mat.userData.uBatchTexWidth.value = width;
+            }
+            if (!record.texture2 || !record.data2 || record.data2.length < record.width * 6 * 4) {
+                const data2 = new Float32Array(record.width * 6 * 4);
+                const texture2 = new THREE.DataTexture(data2, record.width, 6, THREE.RGBAFormat, THREE.FloatType);
+                texture2.minFilter = THREE.NearestFilter;
+                texture2.magFilter = THREE.NearestFilter;
+                record.data2 = data2;
+                record.texture2 = texture2;
+            }
+            // 确保当前纹理包含当前状态
+            this._bakeStylesIntoBuffer(record.data, record.width, pickInfo, mesh, this.featureStyles);
+            record.texture.needsUpdate = true;
+            // 烘焙目标状态到 data2
+            const res2 = this._bakeStylesIntoBuffer(record.data2, record.width, pickInfo, mesh, targetStyles);
+            record.texture2.needsUpdate = true;
+            mat.userData.uBatchTex2.value = record.texture2;
+            mat.userData.uBatchTexActive.value = 1;
+            if (res2.hasFade && !mat.transparent)
+                mat.transparent = true;
+        }
+    }
+    /**
+     * 提交双纹理交叉淡化：将 targetStyles 回写到主状态，并将 data2 复制到 data
+     */
+    commitCrossFade(targetStyles, meshes) {
+        this.featureStyles.clear();
+        for (const [k, v] of targetStyles) {
+            this.featureStyles.set(k, v);
+        }
+        for (const mesh of meshes) {
+            const mat = styledMaterialOf(mesh);
+            if (!mat)
+                continue;
+            const record = this._meshBatchTextures.get(mesh);
+            if (!record || !record.data2 || !record.texture2)
+                continue;
+            record.data.set(record.data2);
+            record.texture.needsUpdate = true;
+            mat.userData.uBatchTex2.value = mat.userData.uBatchTex.value;
+        }
+        this._onStyleChanged();
+        this._triggerRepaint();
+    }
+    /**
+     * 取消交叉淡化并恢复单一纹理
+     */
+    cancelCrossFade(meshes) {
+        for (const mesh of meshes) {
+            const mat = styledMaterialOf(mesh);
+            if (!mat)
+                continue;
+            mat.userData.uBatchTex2.value = mat.userData.uBatchTex.value;
+        }
+        this._triggerRepaint();
+    }
     markOverridesDirty(subset, allMeshes) {
         if (subset) {
             for (const m of subset)
@@ -643,6 +940,7 @@ export class FeatureStyleManager {
         const record = this._meshBatchTextures.get(mesh);
         if (record) {
             record.texture.dispose();
+            record.texture2?.dispose();
             this._meshBatchTextures.delete(mesh);
         }
     }
@@ -667,5 +965,55 @@ export class FeatureStyleManager {
         this._markedMeshes.clear();
         this._triggerRepaint();
     }
+    /**
+     * 将单体绑定到 GPU 路径动画
+     * @param smid 单体 ID
+     * @param pathId GPUPathManager 中的路径索引
+     * @param options 速度、初始相位、循环模式与自动转向配置
+     * @param meshes 可选指定的网格集合，不传则全量生效
+     */
+    bindGPUPath(smid, pathId, options = {}, meshes) {
+        const cur = this.getFeatureStyle(smid) ?? {};
+        this.setFeatureStyle(smid, {
+            ...cur,
+            gpuPath: {
+                pathId,
+                speed: options.speed ?? 0,
+                phase: options.phase ?? 0,
+                loop: options.loop ?? 'loop',
+                autoHeading: options.autoHeading ?? true,
+            },
+        }, meshes);
+    }
+    /**
+     * 解绑单体的 GPU 路径动画
+     */
+    unbindGPUPath(smid, meshes) {
+        const cur = this.getFeatureStyle(smid);
+        if (!cur || !cur.gpuPath)
+            return;
+        const next = { ...cur };
+        delete next.gpuPath;
+        this.setFeatureStyle(smid, next, meshes);
+    }
+    /**
+     * 直接设置单体在 GPU 路径上的归一化进度（0.0 ~ 1.0）
+     * @param smid 单体 ID
+     * @param progress 归一化进度 (0~1)
+     * @param meshes 可选指定的网格集合
+     */
+    setGPUPathProgress(smid, progress, meshes) {
+        const cur = this.getFeatureStyle(smid);
+        if (!cur?.gpuPath)
+            return;
+        this.setFeatureStyle(smid, {
+            ...cur,
+            gpuPath: {
+                ...cur.gpuPath,
+                speed: 0,
+                phase: Math.min(1.0, Math.max(0.0, progress)),
+            },
+        }, meshes);
+    }
 }
 //# sourceMappingURL=FeatureStyleManager.js.map