roxy-cobewebgl 1.1.0 → 1.1.2

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.0",
+  "version": "1.1.2",
   "description": "Cobe-style dotted globe with WebGL (ESM): OffscreenCanvas worker or main-thread fallback",
   "type": "module",
   "main": "./src/index.js",

package/src/fallback.js

@@ -421,12 +421,18 @@ function normalizeArcs(arcsData) {
  */
 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 });
+  const gl = canvas.getContext('webgl', {
+    antialias: false,
+    alpha: true,
+    premultipliedAlpha: false,
+  });
   if (!gl) {
     onError(new Error('WebGL 不可用'));
     return null;
   }
 
+  gl.clearColor(0, 0, 0, 0);
+
   const program = createProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER);
   if (!program) {
     onError(new Error('主着色器编译失败'));
@@ -511,6 +517,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);
@@ -534,8 +545,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);
@@ -555,7 +564,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

@@ -441,11 +441,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 +526,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 +557,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 +578,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>