roxy-cobewebgl 1.0.0

package/src/globe.worker.js

@@ -0,0 +1,598 @@
+/**
+ * Cobe 风格点阵地球 - OffscreenCanvas Worker
+ * 整个 WebGL 渲染循环在此 Worker 中运行，不阻塞主线程
+ */
+
+// ───────────────────────────────────────────────
+//  Vertex Shader
+// ───────────────────────────────────────────────
+const VERTEX_SHADER = `
+  attribute vec2 a_position;
+  void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+  }
+`;
+
+// ───────────────────────────────────────────────
+//  Fragment Shader
+// ───────────────────────────────────────────────
+const FRAGMENT_SHADER = `
+  precision highp float;
+
+  uniform vec2  u_resolution;
+  uniform float u_time;
+  uniform sampler2D u_texture;
+
+  uniform float u_phi;
+  uniform float u_theta;
+
+  uniform vec3  u_baseColor;
+  uniform vec3  u_glowColor;
+  uniform vec3  u_dotColor;
+  uniform float u_opacity;
+  uniform float u_glowOn;
+  uniform float u_debug;
+
+  uniform float u_dots;
+  uniform float u_dotSize;
+  uniform float u_globeRadius;
+
+  const float PI   = 3.14159265359;
+  const float kPhi = 1.618033988749895;
+  const float phiMinusOne = 0.618033988749895;
+  const float sqrt5 = 2.23606797749979;
+  const float kTau  = 6.283185307179586;
+  const float twoPiOnPhi = 3.883222077450933;
+  const float byLogPhiPlusOne = 1.0 / log2(1.618033988749895 + 1.0);
+
+  mat3 rotateX(float a) {
+    float c = cos(a), s = sin(a);
+    return mat3(1., 0., 0.,
+                0., c, -s,
+                0., s,  c);
+  }
+  mat3 rotateY(float a) {
+    float c = cos(a), s = sin(a);
+    return mat3( c, 0., s,
+                 0., 1., 0.,
+                -s, 0., c);
+  }
+
+  vec3 nearestFibonacciLattice(vec3 p, out float m) {
+    float dots = u_dots;
+    float byDots = 1.0 / dots;
+    p = p.xzy;
+    float k = max(2., floor(
+      log2(sqrt5 * dots * PI * (1. - p.z * p.z)) * byLogPhiPlusOne
+    ));
+    vec2 f   = floor(pow(kPhi, k) / sqrt5 * vec2(1., kPhi) + .5);
+    vec2 br1 = fract((f + 1.) * phiMinusOne) * kTau - twoPiOnPhi;
+    vec2 br2 = -2. * f;
+    vec2 sp = vec2(atan(p.y, p.x), p.z - 1.);
+    float denom = br1.x * br2.y - br2.x * br1.y;
+    vec2 c = floor(vec2(
+      br2.y * sp.x - br1.y * (sp.y * dots + 1.),
+     -br2.x * sp.x + br1.x * (sp.y * dots + 1.)
+    ) / denom);
+    float mindist = PI;
+    vec3  minip   = vec3(0., 0., 1.);
+    for (float s = 0.; s < 4.; s += 1.) {
+      vec2 o = vec2(mod(s, 2.), floor(s * .5));
+      float idx = dot(f, c + o);
+      if (idx > dots || idx < 0.) continue;
+      float fracV = fract(idx * phiMinusOne);
+      float theta = fract(fracV) * kTau;
+      float cosphi = 1. - 2. * idx * byDots;
+      float sinphi = sqrt(1. - cosphi * cosphi);
+      vec3 sample2 = vec3(cos(theta) * sinphi, sin(theta) * sinphi, cosphi);
+      float dist = length(p - sample2);
+      if (dist < mindist) {
+        mindist = dist;
+        minip   = sample2;
+      }
+    }
+    m = mindist;
+    return minip.xzy;
+  }
+
+  void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    float aspect = u_resolution.x / u_resolution.y;
+    vec2 p = uv * 2. - 1.;
+    p.x *= aspect;
+
+    float r = u_globeRadius;
+    float d2 = dot(p, p);
+    float rSquared = r * r;
+    float l = d2;
+
+    float glowFactor = 0.;
+    vec4 color = vec4(0.);
+
+    if (d2 < rSquared) {
+      float z = sqrt(rSquared - d2);
+      vec3 nor = normalize(vec3(p.x, p.y, z));
+      nor = rotateY(u_phi) * rotateX(u_theta) * nor;
+      float dis;
+      vec3 gP = nearestFibonacciLattice(nor, dis);
+      float gLat = asin(gP.y);
+      float gLng = PI * 0.5 - atan(gP.z, gP.x);
+      vec2 dotUV = vec2(fract(gLng / kTau + 0.5), gLat / PI + 0.5);
+      float texSample = texture2D(u_texture, dotUV).r;
+      float mapColor = step(0.5, texSample);
+      float v = step(dis, u_dotSize);
+
+      if (u_debug > 0.5 && u_debug < 1.5) {
+        float dotMask = v;
+        vec3 surfaceColor = mix(u_baseColor, u_dotColor, dotMask);
+        color = vec4(surfaceColor * u_opacity, 1.);
+      } else if (u_debug > 1.5 && u_debug < 2.5) {
+        color = vec4(dotUV.x, dotUV.y, 0.0, 1.0);
+      } else if (u_debug > 2.5 && u_debug < 3.5) {
+        float dotMask = v * mapColor;
+        vec3 surfaceColor = mix(vec3(texSample * 0.3), u_dotColor, dotMask);
+        color = vec4(surfaceColor, 1.);
+      } else {
+        float dotMask = mapColor * v;
+        vec3 surfaceColor = mix(u_baseColor, u_dotColor, dotMask);
+        color = vec4(surfaceColor * u_opacity, 1.);
+      }
+
+      float edgeFade = sqrt(1.0 - d2 / rSquared);
+      color.rgb *= mix(0.3, 1.0, edgeFade);
+
+      glowFactor = u_glowOn * pow(
+        dot(normalize(vec3(-uv, sqrt(1. - l))), vec3(0., 0., 1.)),
+        4.
+      ) * smoothstep(0., 1., .2 / (l - rSquared));
+
+    } else {
+      float outD = sqrt(0.2 / (l - rSquared));
+      glowFactor = u_glowOn * smoothstep(0.5, 1., outD / (outD + 1.));
+    }
+
+    gl_FragColor = color + vec4(glowFactor * u_glowColor, glowFactor);
+  }
+`;
+
+// ───────────────────────────────────────────────
+//  Arc Vertex Shader
+// ───────────────────────────────────────────────
+const ARC_VERTEX_SHADER = `
+  attribute vec3 a_arcPos;
+  uniform float u_phi;
+  uniform float u_theta;
+  uniform float u_aspect;
+  uniform float u_globeRadius;
+  varying float v_z;
+
+  mat3 rotateX(float a) {
+    float c = cos(a), s = sin(a);
+    return mat3(1., 0., 0., 0., c, -s, 0., s, c);
+  }
+  mat3 rotateY(float a) {
+    float c = cos(a), s = sin(a);
+    return mat3(c, 0., s, 0., 1., 0., -s, 0., c);
+  }
+
+  void main() {
+    vec3 viewPos = rotateX(-u_theta) * rotateY(-u_phi) * a_arcPos;
+    v_z = viewPos.z;
+    gl_Position = vec4(viewPos.x * u_globeRadius / u_aspect, viewPos.y * u_globeRadius, 0.0, 1.0);
+  }
+`;
+
+// ───────────────────────────────────────────────
+//  Arc Fragment Shader
+// ───────────────────────────────────────────────
+const ARC_FRAGMENT_SHADER = `
+  precision highp float;
+  uniform vec3 u_arcColor;
+  uniform float u_arcAlpha;
+  uniform float u_globeRadius;
+  uniform vec2 u_resolution;
+  varying float v_z;
+
+  void main() {
+    vec2 ndc = gl_FragCoord.xy / u_resolution * 2.0 - 1.0;
+    float aspect = u_resolution.x / u_resolution.y;
+    vec2 p = vec2(ndc.x * aspect, ndc.y);
+    float d2 = dot(p, p);
+    float rSq = u_globeRadius * u_globeRadius;
+
+    if (d2 < rSq) {
+      float sphereFrontZ = sqrt(1.0 - d2 / rSq);
+      if (v_z < sphereFrontZ) discard;
+    }
+
+    gl_FragColor = vec4(u_arcColor, u_arcAlpha);
+  }
+`;
+
+// ───────────────────────────────────────────────
+//  工具函数
+// ───────────────────────────────────────────────
+function createProgram(gl, vsSrc, fsSrc) {
+  const vs = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vs, vsSrc);
+  gl.compileShader(vs);
+  if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
+    console.error('Vertex shader error:', gl.getShaderInfoLog(vs));
+    gl.deleteShader(vs);
+    return null;
+  }
+  const fs = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fs, fsSrc);
+  gl.compileShader(fs);
+  if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
+    console.error('Fragment shader error:', gl.getShaderInfoLog(fs));
+    gl.deleteShader(fs);
+    gl.deleteShader(vs);
+    return null;
+  }
+  const prog = gl.createProgram();
+  gl.attachShader(prog, vs);
+  gl.attachShader(prog, fs);
+  gl.linkProgram(prog);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    console.error('Link error:', gl.getProgramInfoLog(prog));
+    gl.deleteProgram(prog);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+    return null;
+  }
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  return prog;
+}
+
+// ───────────────────────────────────────────────
+//  纹理生成（Worker 中用 OffscreenCanvas 2D 画世界地图）
+// ───────────────────────────────────────────────
+function createWorldTexture(gl, geojson) {
+  const W = 720, H = 360;
+  const offCanvas = new OffscreenCanvas(W, H);
+  const ctx = offCanvas.getContext('2d');
+
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, W, H);
+  ctx.fillStyle = '#fff';
+
+  for (const feature of geojson.features) {
+    const geom = feature.geometry;
+    if (!geom) continue;
+    let polys = [];
+    if (geom.type === 'Polygon') polys = [geom.coordinates];
+    else if (geom.type === 'MultiPolygon') polys = geom.coordinates;
+
+    for (const poly of polys) {
+      ctx.beginPath();
+      const ring = poly[0];
+      for (let i = 0; i < ring.length; i++) {
+        const [lng, lat] = ring[i];
+        const x = (lng + 180) / 360 * W;
+        const y = (90 - lat) / 180 * H;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
+
+  const imgData = ctx.getImageData(0, 0, W, H);
+
+  // Worker 中手动翻转 Y（UNPACK_FLIP_Y_WEBGL 对 ArrayBufferView 不生效）
+  const pixels = new Uint8Array(imgData.data);
+  const rowBytes = W * 4;
+  const tmp = new Uint8Array(rowBytes);
+  for (let y = 0; y < H / 2; y++) {
+    const top = y * rowBytes, bot = (H - 1 - y) * rowBytes;
+    tmp.set(pixels.subarray(top, top + rowBytes));
+    pixels.copyWithin(top, bot, bot + rowBytes);
+    pixels.set(tmp, bot);
+  }
+
+  const tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, W, H, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  return tex;
+}
+
+// ───────────────────────────────────────────────
+//  弧线工具
+// ───────────────────────────────────────────────
+const DEG2RAD = Math.PI / 180;
+
+function latLngToVec3(lat, lng) {
+  const latR = lat * DEG2RAD, lngR = lng * DEG2RAD;
+  return [Math.cos(latR) * Math.sin(lngR), Math.sin(latR), Math.cos(latR) * Math.cos(lngR)];
+}
+function vec3Dot(a, b) { return a[0]*b[0] + a[1]*b[1] + a[2]*b[2]; }
+function vec3Length(a) { return Math.sqrt(vec3Dot(a, a)); }
+function vec3Normalize(a) {
+  const l = vec3Length(a);
+  return l > 1e-8 ? [a[0]/l, a[1]/l, a[2]/l] : [0, 0, 1];
+}
+function slerp(a, b, t) {
+  const d = Math.max(-1, Math.min(1, vec3Dot(a, b)));
+  const angle = Math.acos(d);
+  if (angle < 0.001) {
+    return vec3Normalize([a[0]*(1-t)+b[0]*t, a[1]*(1-t)+b[1]*t, a[2]*(1-t)+b[2]*t]);
+  }
+  const sinA = Math.sin(angle);
+  const wa = Math.sin((1-t)*angle)/sinA, wb = Math.sin(t*angle)/sinA;
+  return [a[0]*wa+b[0]*wb, a[1]*wa+b[1]*wb, a[2]*wa+b[2]*wb];
+}
+function generateArcPoints(startVec, endVec, numSegments) {
+  numSegments = numSegments || 64;
+  const d = Math.max(-1, Math.min(1, vec3Dot(startVec, endVec)));
+  const angularDist = Math.acos(d);
+  const arcHeight = Math.min(0.4, 0.1 + 0.2 * angularDist);
+  const points = [];
+  for (let i = 0; i <= numSegments; i++) {
+    const t = i / numSegments;
+    const p = slerp(startVec, endVec, t);
+    const elevation = 1.0 + arcHeight * Math.sin(Math.PI * t);
+    points.push(p[0]*elevation, p[1]*elevation, p[2]*elevation);
+  }
+  return new Float32Array(points);
+}
+function parseHexColor(hex) {
+  const n = parseInt(hex.replace('#', ''), 16);
+  return [(n>>16&255)/255, (n>>8&255)/255, (n&255)/255];
+}
+
+// ───────────────────────────────────────────────
+//  弧线动画管理器
+// ───────────────────────────────────────────────
+class ArcAnimator {
+  constructor(arcsData, gl) {
+    this.gl = gl;
+    this.arcs = arcsData.slice().sort((a, b) => a.order - b.order).map(arc => {
+      const startVec = latLngToVec3(arc.startLat, arc.startLng);
+      const endVec   = latLngToVec3(arc.endLat, arc.endLng);
+      const points   = generateArcPoints(startVec, endVec, 64);
+      const buffer   = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
+      const numPoints = points.length / 3;
+      const d = Math.max(-1, Math.min(1, vec3Dot(startVec, endVec)));
+      const angularDist = Math.acos(d);
+      const color = arc.color ? parseHexColor(arc.color) : null;
+      const tailLen = Math.max(5, Math.floor(numPoints * 0.3));
+      const headEnd = numPoints - 1;
+      const totalDuration = 1.2 + 1.5 * angularDist;
+      const travelRatio = headEnd / (headEnd + tailLen);
+      const travelDuration = totalDuration * travelRatio;
+      const drainDuration  = totalDuration * (1 - travelRatio);
+      return { buffer, numPoints, color, travelDuration, drainDuration, totalDuration, tailLen, headEnd };
+    });
+    this.arcDelay = 1.0;
+    const maxDur = Math.max(...this.arcs.map(a => a.totalDuration));
+    this.cycleDuration = Math.max(1, this.arcs.length - 1) * this.arcDelay + maxDur + 1.0;
+  }
+  getState(arcIndex, timeSec) {
+    const arc = this.arcs[arcIndex];
+    const cycleTime = timeSec % this.cycleDuration;
+    const arcStart  = arcIndex * this.arcDelay;
+    const local     = cycleTime - arcStart;
+    if (local < 0 || local > arc.totalDuration) return null;
+    const tailLen = arc.tailLen, headEnd = arc.headEnd;
+    if (local < arc.travelDuration) {
+      const p    = local / arc.travelDuration;
+      const head = Math.min(headEnd, Math.floor(p * (headEnd + 0.9999)));
+      const tail = Math.max(0, head - tailLen);
+      return { startIdx: tail, drawCount: Math.max(2, head - tail + 1), alpha: 1.0 };
+    }
+    const drainP = (local - arc.travelDuration) / arc.drainDuration;
+    const tail   = Math.floor((headEnd - tailLen) + tailLen * drainP);
+    const count  = headEnd - tail + 1;
+    if (count < 2) return null;
+    return { startIdx: Math.min(tail, headEnd - 1), drawCount: Math.max(2, count), alpha: 1.0 };
+  }
+}
+
+// ───────────────────────────────────────────────
+//  Worker 主逻辑
+// ───────────────────────────────────────────────
+let gl, canvas;
+let program, loc, arcProgram, arcLoc;
+let quadBuffer, worldTex, arcAnimator;
+
+let running = false;
+let rafId = 0;
+
+function normalizeArcsData(arcsData) {
+  return (arcsData || []).map((a, i) => ({
+    order: a.order != null ? a.order : i + 1,
+    startLat: a.startLat,
+    startLng: a.startLng,
+    endLat: a.endLat,
+    endLng: a.endLng,
+    color: a.color,
+  }));
+}
+
+// 可由主线程实时更新的参数
+let params = {
+  phi: 0.3, theta: 0.15,
+  baseColor: [0.06, 0.1, 0.2],
+  glowColor: [0.15, 0.4, 0.85],
+  dotColor:  [0.4, 0.8, 1.0],
+  arcColor:  [1.0, 0.4, 0.2],
+  dots: 800, dotSize: 0.008,
+  globeRadius: 0.55,
+  glowOn: 1.0,
+  debug: 0.0,
+  opacity: 0.9,
+  autoRotate: true,
+  rotationSpeed: 0.003,
+};
+
+async function init(msg) {
+  try {
+    canvas = msg.canvas;
+    if (msg.params) Object.assign(params, msg.params);
+
+    console.log('[Worker] init, canvas size:', canvas.width, canvas.height);
+    gl = canvas.getContext('webgl', { antialias: false, alpha: false });
+    if (!gl) {
+      self.postMessage({ type: 'error', msg: 'WebGL 不可用' });
+      return;
+    }
+    console.log('[Worker] WebGL context OK');
+
+    program = createProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER);
+    if (!program) {
+      self.postMessage({ type: 'error', msg: '主着色器编译失败' });
+      return;
+    }
+    console.log('[Worker] Main shader OK');
+
+    loc = {};
+    loc.a_position = gl.getAttribLocation(program, 'a_position');
+    ['u_resolution','u_time','u_texture','u_phi','u_theta','u_baseColor','u_glowColor','u_dotColor','u_opacity','u_glowOn','u_dots','u_dotSize','u_globeRadius','u_debug'].forEach(
+      n => loc[n] = gl.getUniformLocation(program, n)
+    );
+
+    quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]), gl.STATIC_DRAW);
+
+    let geojson;
+    if (msg.map && typeof msg.map === 'object') {
+      geojson = msg.map;
+      console.log('[Worker] GeoJSON from message, features:', geojson.features && geojson.features.length);
+    } else if (msg.mapUrl) {
+      console.log('[Worker] Fetching map …', String(msg.mapUrl).slice(0, 80));
+      const resp = await fetch(String(msg.mapUrl));
+      if (!resp.ok) {
+        self.postMessage({ type: 'error', msg: 'fetch map failed: ' + resp.status });
+        return;
+      }
+      geojson = await resp.json();
+      console.log('[Worker] GeoJSON parsed, features:', geojson.features.length);
+    } else {
+      self.postMessage({ type: 'error', msg: 'init requires map or mapUrl' });
+      return;
+    }
+
+    worldTex = createWorldTexture(gl, geojson);
+    console.log('[Worker] Texture created');
+
+    const arcsData = normalizeArcsData(msg.arcsData);
+    arcProgram = null;
+    arcAnimator = null;
+    if (arcsData.length > 0) {
+      arcProgram = createProgram(gl, ARC_VERTEX_SHADER, ARC_FRAGMENT_SHADER);
+      arcLoc = {};
+      if (arcProgram) {
+        arcLoc.a_arcPos = gl.getAttribLocation(arcProgram, 'a_arcPos');
+        ['u_phi','u_theta','u_aspect','u_globeRadius','u_arcColor','u_arcAlpha','u_resolution'].forEach(
+          n => arcLoc[n] = gl.getUniformLocation(arcProgram, n)
+        );
+        arcAnimator = new ArcAnimator(arcsData, gl);
+      }
+    }
+    console.log('[Worker] Init complete, starting render loop');
+
+    running = true;
+    rafId = requestAnimationFrame(render);
+  } catch (err) {
+    console.error('[Worker] init error:', err);
+    self.postMessage({ type: 'error', msg: String(err) });
+  }
+}
+
+function resize() {
+  const w = canvas.width, h = canvas.height;
+  gl.viewport(0, 0, w, h);
+}
+
+function render(t) {
+  if (!running) return;
+  resize();
+  const timeSec = t * 0.001;
+  if (params.autoRotate) params.phi += params.rotationSpeed || 0.003;
+
+  // Pass 1: 球体
+  gl.useProgram(program);
+  gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+  gl.enableVertexAttribArray(loc.a_position);
+  gl.vertexAttribPointer(loc.a_position, 2, gl.FLOAT, false, 0, 0);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, worldTex);
+
+  gl.uniform2f(loc.u_resolution, canvas.width, canvas.height);
+  gl.uniform1f(loc.u_time, timeSec);
+  gl.uniform1i(loc.u_texture, 0);
+  gl.uniform1f(loc.u_phi, params.phi);
+  gl.uniform1f(loc.u_theta, params.theta);
+  gl.uniform3fv(loc.u_baseColor, params.baseColor);
+  gl.uniform3fv(loc.u_glowColor, params.glowColor);
+  gl.uniform3fv(loc.u_dotColor, params.dotColor);
+  gl.uniform1f(loc.u_opacity, params.opacity != null ? params.opacity : 0.9);
+  gl.uniform1f(loc.u_glowOn, params.glowOn);
+  gl.uniform1f(loc.u_dots, params.dots);
+  gl.uniform1f(loc.u_dotSize, params.dotSize);
+  gl.uniform1f(loc.u_globeRadius, params.globeRadius);
+  gl.uniform1f(loc.u_debug, params.debug);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+  // Pass 2: 弧线
+  if (arcProgram && arcAnimator) {
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    gl.useProgram(arcProgram);
+    const aspect = canvas.width / canvas.height;
+    gl.uniform1f(arcLoc.u_phi, params.phi);
+    gl.uniform1f(arcLoc.u_theta, params.theta);
+    gl.uniform1f(arcLoc.u_aspect, aspect);
+    gl.uniform1f(arcLoc.u_globeRadius, params.globeRadius);
+    gl.uniform2f(arcLoc.u_resolution, canvas.width, canvas.height);
+
+    try { gl.lineWidth(2.0); } catch (e) { /* ignore */ }
+
+    for (let i = 0; i < arcAnimator.arcs.length; i++) {
+      const state = arcAnimator.getState(i, timeSec);
+      if (!state) continue;
+      const color = arcAnimator.arcs[i].color || params.arcColor;
+      gl.uniform3fv(arcLoc.u_arcColor, color);
+      gl.uniform1f(arcLoc.u_arcAlpha, state.alpha);
+      gl.bindBuffer(gl.ARRAY_BUFFER, arcAnimator.arcs[i].buffer);
+      gl.enableVertexAttribArray(arcLoc.a_arcPos);
+      gl.vertexAttribPointer(arcLoc.a_arcPos, 3, gl.FLOAT, false, 0, 0);
+      gl.drawArrays(gl.LINE_STRIP, state.startIdx, state.drawCount);
+    }
+    gl.disable(gl.BLEND);
+  }
+
+  rafId = requestAnimationFrame(render);
+}
+
+// ───────────────────────────────────────────────
+//  消息处理
+// ───────────────────────────────────────────────
+self.onmessage = function(e) {
+  const msg = e.data;
+  if (msg.type === 'init') {
+    init(msg);
+  } else if (msg.type === 'resize') {
+    if (canvas) {
+      canvas.width = msg.width;
+      canvas.height = msg.height;
+    }
+  } else if (msg.type === 'params') {
+    Object.assign(params, msg.params);
+  } else if (msg.type === 'destroy') {
+    running = false;
+    cancelAnimationFrame(rafId);
+    rafId = 0;
+  }
+};