roxy-cobewebgl 1.0.0

package/src/fallback.js

@@ -0,0 +1,579 @@
+/**
+ * 主线程 WebGL 回退渲染（无 OffscreenCanvas / 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);
+  }
+`;
+
+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);
+  }
+`;
+
+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;
+}
+
+function createWorldTextureFromGeoJSON(gl, geojson, opts = {}) {
+  const W = 720, H = 360;
+  const c = document.createElement('canvas');
+  c.width = W;
+  c.height = H;
+  const ctx = c.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();
+    }
+  }
+
+  if (opts.debugShowTexture) {
+    c.style.cssText = 'position:fixed;left:10px;bottom:10px;width:200px;height:100px;border:1px solid #0f0;z-index:999;image-rendering:pixelated;';
+    document.body.appendChild(c);
+  }
+
+  const tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+  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;
+  const 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) {
+    const x = a[0]*(1-t) + b[0]*t;
+    const y = a[1]*(1-t) + b[1]*t;
+    const z = a[2]*(1-t) + b[2]*t;
+    return vec3Normalize([x, y, z]);
+  }
+  const sinA = Math.sin(angle);
+  const wa = Math.sin((1 - t) * angle) / sinA;
+  const 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;
+    const 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);
+      const count = head - tail + 1;
+      return { startIdx: tail, drawCount: Math.max(2, count), 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 };
+  }
+}
+
+function normalizeArcs(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,
+  }));
+}
+
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @param {object} config
+ * @param {object} [config.map]
+ * @param {string} [config.mapUrl]
+ * @param {object[]} [config.arcsData]
+ * @param {object} [config.params]
+ * @param {boolean} [config.debugShowTexture]
+ * @param {function(Error|string):void} [config.onError]
+ * @returns {Promise<{ setState: Function, destroy: Function, resize: Function }|null>}
+ */
+export async function createFallbackGlobe(canvas, config) {
+  const onError = config.onError || ((e) => console.error('[cobewebgl-fallback]', e));
+  const gl = canvas.getContext('webgl', { antialias: false, alpha: false });
+  if (!gl) {
+    onError(new Error('WebGL 不可用'));
+    return null;
+  }
+
+  const program = createProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER);
+  if (!program) {
+    onError(new Error('主着色器编译失败'));
+    return null;
+  }
+
+  const 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)
+  );
+
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]), gl.STATIC_DRAW);
+
+  let geojson;
+  try {
+    if (config.map && typeof config.map === 'object') {
+      geojson = config.map;
+    } else if (config.mapUrl) {
+      const resp = await fetch(String(config.mapUrl));
+      if (!resp.ok) throw new Error('fetch map failed: ' + resp.status);
+      geojson = await resp.json();
+    } else {
+      throw new Error('需要 map 或 mapUrl');
+    }
+  } catch (e) {
+    onError(e);
+    return null;
+  }
+
+  const worldTex = createWorldTextureFromGeoJSON(gl, geojson, {
+    debugShowTexture: !!config.debugShowTexture,
+  });
+
+  const arcsNorm = normalizeArcs(config.arcsData);
+  let arcProgram = null;
+  let arcLoc = {};
+  let arcAnimator = null;
+  if (arcsNorm.length > 0) {
+    arcProgram = createProgram(gl, ARC_VERTEX_SHADER, ARC_FRAGMENT_SHADER);
+    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(arcsNorm, gl);
+    }
+  }
+
+  const defaults = {
+    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,
+  };
+  const state = { ...defaults, ...config.params };
+
+  let running = true;
+  let rafId = 0;
+
+  function resizeCanvas() {
+    const dpr = Math.min(2, window.devicePixelRatio || 1);
+    const w = Math.floor(canvas.clientWidth * dpr);
+    const h = Math.floor(canvas.clientHeight * dpr);
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+      gl.viewport(0, 0, w, h);
+    }
+  }
+
+  function render(t) {
+    if (!running) return;
+    resizeCanvas();
+    const timeSec = t * 0.001;
+    if (state.autoRotate) state.phi += state.rotationSpeed || 0.003;
+
+    const debugVal = typeof state.debug === 'number' ? state.debug : (typeof window !== 'undefined' && window.__GLOBE_DEBUG__) || 0;
+
+    gl.useProgram(program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    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, state.phi);
+    gl.uniform1f(loc.u_theta, state.theta);
+    gl.uniform3fv(loc.u_baseColor, state.baseColor);
+    gl.uniform3fv(loc.u_glowColor, state.glowColor);
+    gl.uniform3fv(loc.u_dotColor, state.dotColor);
+    gl.uniform1f(loc.u_opacity, state.opacity != null ? state.opacity : 0.9);
+    gl.uniform1f(loc.u_glowOn, state.glowOn);
+    gl.uniform1f(loc.u_dots, state.dots);
+    gl.uniform1f(loc.u_dotSize, state.dotSize);
+    gl.uniform1f(loc.u_globeRadius, state.globeRadius);
+    gl.uniform1f(loc.u_debug, debugVal);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+    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, state.phi);
+      gl.uniform1f(arcLoc.u_theta, state.theta);
+      gl.uniform1f(arcLoc.u_aspect, aspect);
+      gl.uniform1f(arcLoc.u_globeRadius, state.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 st = arcAnimator.getState(i, timeSec);
+        if (!st) continue;
+        const color = arcAnimator.arcs[i].color || state.arcColor;
+        gl.uniform3fv(arcLoc.u_arcColor, color);
+        gl.uniform1f(arcLoc.u_arcAlpha, st.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, st.startIdx, st.drawCount);
+      }
+      gl.disable(gl.BLEND);
+    }
+    rafId = requestAnimationFrame(render);
+  }
+
+  resizeCanvas();
+  rafId = requestAnimationFrame(render);
+
+  return {
+    setState(partial) {
+      Object.assign(state, partial);
+    },
+    resize() {
+      resizeCanvas();
+    },
+    destroy() {
+      running = false;
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    },
+  };
+}