s3m-three 0.3.8 → 0.3.10

package/src/render/EdgeLines.ts

@@ -14,6 +14,7 @@
  */
 import * as THREE from 'three';
 import { DUMMY_BATCH_TEX } from './StyleMaterial.js';
+import { GPUPathManager } from './GPUPathManager.js';
 
 /** 所有等宽线材质共享的分辨率 uniform（每帧更新一次即可） */
 export interface LineSharedUniforms {
@@ -38,8 +39,14 @@ export interface ThickLineStyleUniforms {
 /** 等宽线的「单体状态」uniform：直接复用主材质 userData 里那几个对象，自动跟随 */
 export interface ThickLineBatchUniforms {
   uBatchTex: { value: THREE.Texture };
+  uBatchTex2?: { value: THREE.Texture };
+  uBatchMix?: { value: number };
   uBatchTexWidth: { value: number };
   uBatchTexActive: { value: number };
+  uPathTex?: { value: unknown };
+  uPathCount?: { value: number };
+  uPathTime?: { value: number };
+  uPathTexActive?: { value: number };
 }
 
 export interface ThickLineMaterial extends THREE.ShaderMaterial {
@@ -69,30 +76,99 @@ const VERT = /* glsl */ `
   uniform float uElevation;
   uniform vec3 uTranslation;
   uniform sampler2D uBatchTex;
+  uniform sampler2D uBatchTex2;
+  uniform float uBatchMix;
   uniform float uBatchTexWidth;
   uniform int uBatchTexActive;
+  uniform sampler2D uPathTex;
+  uniform float uPathCount;
+  uniform float uPathTime;
+  uniform int uPathTexActive;
+
+  vec4 s3mSampleBatch( sampler2D texA, sampler2D texB, vec2 uv, float mixVal ) {
+    vec4 vA = texture2D( texA, uv );
+    if ( mixVal <= 0.0001 ) return vA;
+    vec4 vB = texture2D( texB, uv );
+    return mix( vA, vB, mixVal );
+  }
 
   void main() {
-    // 单体平移 / 拔高 / 隐藏：与主着色器同一份状态纹理、同一套口径。
-    // 不采样的话，单体一动棱线就留在原地——这正是「棱线跟随」要解决的。
+    // 单体平移 / 旋转 / 拔高 / 隐藏：与主着色器同一份 6 行状态纹理、同一套变换口径。
+    // 不采样的话，单体一动或一转棱线就留在原地——这正是「棱线跟随」要解决的。
     vec3 s3mA = position;
     vec3 s3mB = aOther;
+    vec3 s3mCustomOffset = vec3( 0.0 );
+    mat3 s3mRot = mat3( 1.0 );
+    vec3 s3mPivot = vec3( 0.0 );
+
     if ( uBatchTexActive > 0 && aBatchId >= 0.0 ) {
-      vec4 bState = texture2D( uBatchTex, vec2( ( aBatchId + 0.5 ) / uBatchTexWidth, 0.25 ) );
+      float s3mU = ( aBatchId + 0.5 ) / uBatchTexWidth;
+      vec4 bState = s3mSampleBatch( uBatchTex, uBatchTex2, vec2( s3mU, 0.08333333 ), uBatchMix );
       if ( bState.a < -0.5 ) {
         // 该单体被隐藏：顶点着色器不能 discard，扔到裁剪空间外
         gl_Position = vec4( 2.0, 2.0, 2.0, 1.0 );
         return;
       }
-      vec4 bOffset = texture2D( uBatchTex, vec2( ( aBatchId + 0.5 ) / uBatchTexWidth, 0.75 ) );
-      vec3 s3mOffset = bOffset.xyz;
-      if ( s3mOffset.z == 0.0 && bState.a > 0.0 ) {
-        s3mOffset.z = bState.a;
+      vec4 bOffset = s3mSampleBatch( uBatchTex, uBatchTex2, vec2( s3mU, 0.25 ), uBatchMix );
+      s3mCustomOffset = bOffset.xyz;
+      if ( s3mCustomOffset.z == 0.0 && bState.a > 0.0 ) {
+        s3mCustomOffset.z = bState.a;
+      }
+      vec4 r2 = s3mSampleBatch( uBatchTex, uBatchTex2, vec2( s3mU, 0.41666667 ), uBatchMix );
+      vec4 r3 = s3mSampleBatch( uBatchTex, uBatchTex2, vec2( s3mU, 0.58333333 ), uBatchMix );
+      vec4 r4 = s3mSampleBatch( uBatchTex, uBatchTex2, vec2( s3mU, 0.75 ), uBatchMix );
+      s3mRot = mat3(
+        vec3( r2.x, r3.x, r4.x ),
+        vec3( r2.y, r3.y, r4.y ),
+        vec3( r2.z, r3.z, r4.z )
+      );
+      s3mPivot = vec3( r2.w, r3.w, r4.w );
+
+      // Row 5: GPU 路径动画计算
+      if ( uPathTexActive > 0 ) {
+        vec4 r5 = s3mSampleBatch( uBatchTex, uBatchTex2, vec2( s3mU, 0.91666667 ), uBatchMix );
+        float pathId = r5.x;
+        float speed = r5.y;
+        float phase = r5.z;
+        float mode = r5.w;
+        if ( pathId >= 0.0 && mode > 0.5 && uPathCount > 0.0 ) {
+          float t = phase + uPathTime * speed;
+          bool autoHeading = true;
+          if ( mode >= 4.0 ) {
+            autoHeading = false;
+            mode -= 3.0;
+          }
+          if ( mode < 1.5 ) {
+            t = fract( t );
+          } else if ( mode < 2.5 ) {
+            t = clamp( t, 0.0, 1.0 );
+          } else {
+            t = mod( t, 2.0 );
+            t = ( t > 1.0 ) ? ( 2.0 - t ) : t;
+          }
+          float pathU = ( t * 255.0 + 0.5 ) / 256.0;
+          float pathV = ( pathId + 0.5 ) / uPathCount;
+          vec4 pathSample = texture2D( uPathTex, vec2( pathU, pathV ) );
+          vec3 pathPos = pathSample.xyz;
+          float pathYaw = pathSample.w;
+          if ( autoHeading ) {
+            float c = cos( pathYaw );
+            float s = sin( pathYaw );
+            mat3 rotHeading = mat3(
+              c, -s, 0.0,
+              s,  c, 0.0,
+              0.0, 0.0, 1.0
+            );
+            s3mRot = rotHeading * s3mRot;
+          }
+          s3mCustomOffset += pathPos;
+        }
       }
-      s3mA += s3mOffset;
-      s3mB += s3mOffset;
     }
 
+    s3mA = s3mRot * ( s3mA - s3mPivot ) + s3mPivot + s3mCustomOffset;
+    s3mB = s3mRot * ( s3mB - s3mPivot ) + s3mPivot + s3mCustomOffset;
+
     // 选中单体平移/拔高：与着色器里 transformed += uTranslation 保持同一口径（物体空间）
     vec3 offset = uTranslation + vec3( 0.0, 0.0, uElevation );
     vec4 clipA = projectionMatrix * modelViewMatrix * vec4( s3mA + offset, 1.0 );
@@ -158,10 +234,16 @@ export function createThickLineMaterial(
   if (opts.opacity !== undefined && styleUniforms) style.uOpacity.value = opts.opacity;
   if (opts.width !== undefined && styleUniforms) style.uWidth.value = opts.width;
 
-  const batch: Required<ThickLineBatchUniforms> = batchUniforms ?? {
-    uBatchTex: { value: DUMMY_BATCH_TEX },
-    uBatchTexWidth: { value: 1 },
-    uBatchTexActive: { value: 0 },
+  const batch: Required<ThickLineBatchUniforms> = {
+    uBatchTex: batchUniforms?.uBatchTex ?? { value: DUMMY_BATCH_TEX },
+    uBatchTex2: batchUniforms?.uBatchTex2 ?? { value: DUMMY_BATCH_TEX },
+    uBatchMix: batchUniforms?.uBatchMix ?? { value: 0 },
+    uBatchTexWidth: batchUniforms?.uBatchTexWidth ?? { value: 1 },
+    uBatchTexActive: batchUniforms?.uBatchTexActive ?? { value: 0 },
+    uPathTex: batchUniforms?.uPathTex ?? { value: GPUPathManager.DUMMY_PATH_TEX },
+    uPathCount: batchUniforms?.uPathCount ?? { value: 1 },
+    uPathTexActive: batchUniforms?.uPathTexActive ?? { value: 0 },
+    uPathTime: batchUniforms?.uPathTime ?? { value: 0 },
   };
 
   const mat = new THREE.ShaderMaterial({
@@ -174,8 +256,14 @@ export function createThickLineMaterial(
       uElevation: style.uElevation ?? { value: opts.elevation ?? 0 },
       uTranslation: { value: new THREE.Vector3(0, 0, 0) },
       uBatchTex: batch.uBatchTex,
+      uBatchTex2: batch.uBatchTex2,
+      uBatchMix: batch.uBatchMix,
       uBatchTexWidth: batch.uBatchTexWidth,
       uBatchTexActive: batch.uBatchTexActive,
+      uPathTex: batch.uPathTex,
+      uPathCount: batch.uPathCount,
+      uPathTexActive: batch.uPathTexActive,
+      uPathTime: batch.uPathTime,
     },
     vertexShader: VERT,
     fragmentShader: FRAG,