roxy-cobewebgl 1.1.1 → 1.1.3

package/README.md

@@ -2,6 +2,8 @@
 
 Cobe 风格的高性能点阵地球：纯 WebGL + GLSL，可选 **OffscreenCanvas Worker** 渲染（主线程只做交互），不支持时自动 **主线程 WebGL 回退**。以 **ESM** 发布，可在 Vite / Webpack 5+ 等打包器中使用。
 
+**画布背景**：WebGL 使用带 **alpha** 的上下文（`premultipliedAlpha: false`），每帧以**透明色**清空缓冲，并用 `SRC_ALPHA` 混合绘制；球圆外（**`glowOn` 为关**时）为**全透明**，可透出下层。若仍看到暗边，多为**外圈光晕**，可把 `glowOn` 设为 `0`。`<canvas>` 建议配合 CSS `background: transparent`。
+
 ## 安装
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roxy-cobewebgl",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Cobe-style dotted globe with WebGL (ESM): OffscreenCanvas worker or main-thread fallback",
   "type": "module",
   "main": "./src/index.js",

package/src/fallback.js

@@ -57,6 +57,31 @@ const FRAGMENT_SHADER = `
                 -s, 0., c);
   }
 
+  float goldenFract(float idx) {
+    float a = idx, b = 0.0;
+    if (a >= 524288.) { a -= 524288.; b += 0.803894; }
+    if (a >= 262144.) { a -= 262144.; b += 0.901947; }
+    if (a >= 131072.) { a -= 131072.; b += 0.950973; }
+    if (a >= 65536.)  { a -= 65536.;  b += 0.475487; }
+    if (a >= 32768.)  { a -= 32768.;  b += 0.737743; }
+    if (a >= 16384.)  { a -= 16384.;  b += 0.868872; }
+    if (a >= 8192.)   { a -= 8192.;   b += 0.934436; }
+    if (a >= 4096.)   { a -= 4096.;   b += 0.467218; }
+    if (a >= 2048.)   { a -= 2048.;   b += 0.733609; }
+    if (a >= 1024.)   { a -= 1024.;   b += 0.866804; }
+    if (a >= 512.)    { a -= 512.;    b += 0.433402; }
+    if (a >= 256.)    { a -= 256.;    b += 0.216701; }
+    if (a >= 128.)    { a -= 128.;    b += 0.108351; }
+    if (a >= 64.)     { a -= 64.;     b += 0.554175; }
+    if (a >= 32.)     { a -= 32.;     b += 0.777088; }
+    if (a >= 16.)     { a -= 16.;     b += 0.888544; }
+    if (a >= 8.)      { a -= 8.;      b += 0.944272; }
+    if (a >= 4.)      { a -= 4.;      b += 0.472136; }
+    if (a >= 2.)      { a -= 2.;      b += 0.236068; }
+    if (a >= 1.)      { a -= 1.;      b += 0.618034; }
+    return fract(b);
+  }
+
   vec3 nearestFibonacciLattice(vec3 p, out float m) {
     float dots = u_dots;
     float byDots = 1.0 / dots;
@@ -80,8 +105,7 @@ const FRAGMENT_SHADER = `
       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 theta = goldenFract(idx) * kTau;
       float cosphi = 1. - 2. * idx * byDots;
       float sinphi = sqrt(1. - cosphi * cosphi);
       vec3 sample2 = vec3(cos(theta) * sinphi, sin(theta) * sinphi, cosphi);
@@ -431,6 +455,8 @@ export async function createFallbackGlobe(canvas, config) {
     return null;
   }
 
+  gl.clearColor(0, 0, 0, 0);
+
   const program = createProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER);
   if (!program) {
     onError(new Error('主着色器编译失败'));
@@ -515,6 +541,11 @@ export async function createFallbackGlobe(canvas, config) {
 
     const debugVal = typeof state.debug === 'number' ? state.debug : (typeof window !== 'undefined' && window.__GLOBE_DEBUG__) || 0;
 
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
     gl.useProgram(program);
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
     gl.enableVertexAttribArray(loc.a_position);
@@ -538,8 +569,6 @@ export async function createFallbackGlobe(canvas, config) {
     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);
@@ -559,7 +588,6 @@ export async function createFallbackGlobe(canvas, config) {
         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);
   }

package/src/globe.worker.js

@@ -58,6 +58,31 @@ const FRAGMENT_SHADER = `
                 -s, 0., c);
   }
 
+  float goldenFract(float idx) {
+    float a = idx, b = 0.0;
+    if (a >= 524288.) { a -= 524288.; b += 0.803894; }
+    if (a >= 262144.) { a -= 262144.; b += 0.901947; }
+    if (a >= 131072.) { a -= 131072.; b += 0.950973; }
+    if (a >= 65536.)  { a -= 65536.;  b += 0.475487; }
+    if (a >= 32768.)  { a -= 32768.;  b += 0.737743; }
+    if (a >= 16384.)  { a -= 16384.;  b += 0.868872; }
+    if (a >= 8192.)   { a -= 8192.;   b += 0.934436; }
+    if (a >= 4096.)   { a -= 4096.;   b += 0.467218; }
+    if (a >= 2048.)   { a -= 2048.;   b += 0.733609; }
+    if (a >= 1024.)   { a -= 1024.;   b += 0.866804; }
+    if (a >= 512.)    { a -= 512.;    b += 0.433402; }
+    if (a >= 256.)    { a -= 256.;    b += 0.216701; }
+    if (a >= 128.)    { a -= 128.;    b += 0.108351; }
+    if (a >= 64.)     { a -= 64.;     b += 0.554175; }
+    if (a >= 32.)     { a -= 32.;     b += 0.777088; }
+    if (a >= 16.)     { a -= 16.;     b += 0.888544; }
+    if (a >= 8.)      { a -= 8.;      b += 0.944272; }
+    if (a >= 4.)      { a -= 4.;      b += 0.472136; }
+    if (a >= 2.)      { a -= 2.;      b += 0.236068; }
+    if (a >= 1.)      { a -= 1.;      b += 0.618034; }
+    return fract(b);
+  }
+
   vec3 nearestFibonacciLattice(vec3 p, out float m) {
     float dots = u_dots;
     float byDots = 1.0 / dots;
@@ -80,8 +105,7 @@ const FRAGMENT_SHADER = `
       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 theta = goldenFract(idx) * kTau;
       float cosphi = 1. - 2. * idx * byDots;
       float sinphi = sqrt(1. - cosphi * cosphi);
       vec3 sample2 = vec3(cos(theta) * sinphi, sin(theta) * sinphi, cosphi);
@@ -441,11 +465,16 @@ async function init(msg) {
     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 });
+    gl = canvas.getContext('webgl', {
+      antialias: false,
+      alpha: true,
+      premultipliedAlpha: false,
+    });
     if (!gl) {
       self.postMessage({ type: 'error', msg: 'WebGL 不可用' });
       return;
     }
+    gl.clearColor(0, 0, 0, 0);
     console.log('[Worker] WebGL context OK');
 
     program = createProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER);
@@ -521,6 +550,11 @@ function render(t) {
   const timeSec = t * 0.001;
   if (params.autoRotate) params.phi += params.rotationSpeed || 0.003;
 
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
   // Pass 1: 球体
   gl.useProgram(program);
   gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
@@ -547,8 +581,6 @@ function render(t) {
 
   // 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);
@@ -570,7 +602,6 @@ function render(t) {
       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);

package/src/react/RoxyCobewebgl.jsx

@@ -146,6 +146,7 @@ export const RoxyCobewebgl = forwardRef(function RoxyCobewebgl(props, ref) {
         width: '100%',
         height: '100%',
         verticalAlign: 'middle',
+        backgroundColor: 'transparent',
         ...style,
       }}
     />

package/src/vue/RoxyCobewebgl.vue

@@ -147,5 +147,6 @@ defineExpose({
   width: 100%;
   height: 100%;
   vertical-align: middle;
+  background: transparent;
 }
 </style>