diff --git a/examples/app_hub/assets/hub-globe.js b/examples/app_hub/assets/hub-globe.js index fe39d2f..af9bbd6 100644 --- a/examples/app_hub/assets/hub-globe.js +++ b/examples/app_hub/assets/hub-globe.js @@ -157,11 +157,11 @@ function parallelStyle(bright, scale, z) { if (t <= 0) { return null; } - const alpha = bright ? 0.35 + 0.55 * t : 0.15 + 0.45 * t; + const alpha = bright ? 0.55 + 0.45 * t : 0.35 + 0.5 * t; const rgb = bright ? '219,231,246' : '231,236,243'; return { color: 'rgba(' + rgb + ',' + alpha.toFixed(3) + ')', - width: Math.max(bright ? 2.5 : 1.5, scale * (bright ? 0.007 : 0.0055)) * (0.4 + 0.6 * t), + width: Math.max(bright ? 3 : 2, scale * (bright ? 0.009 : 0.006)) * (0.5 + 0.5 * t), }; } @@ -326,11 +326,37 @@ function blitLayer(ctx, cx, cy, r, layer) { if (!layer) { return; } + const { out, x0, y0 } = layer; + const w = out.width; + const h = out.height; + const src = out.data; + ctx.save(); ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.clip(); - ctx.putImageData(layer.out, layer.x0, layer.y0); + + const existing = ctx.getImageData(x0, y0, w, h); + const dst = existing.data; + for (let i = 0; i < src.length; i += 4) { + const sa = src[i + 3]; + if (sa === 0) { + continue; + } + if (sa === 255) { + dst[i] = src[i]; + dst[i + 1] = src[i + 1]; + dst[i + 2] = src[i + 2]; + dst[i + 3] = 255; + continue; + } + const a = sa / 255; + dst[i] = Math.round(src[i] * a + dst[i] * (1 - a)); + dst[i + 1] = Math.round(src[i + 1] * a + dst[i + 1] * (1 - a)); + dst[i + 2] = Math.round(src[i + 2] * a + dst[i + 2] * (1 - a)); + dst[i + 3] = 255; + } + ctx.putImageData(existing, x0, y0); ctx.restore(); } @@ -431,7 +457,6 @@ export async function mountHubGlobe(stage, opts) { return sampleOceanRgba(globe, tex); }) ); - drawEwParallels(ctx, cx, cy, r, rotation, layoutScale); blitLayer( ctx, cx, @@ -442,6 +467,7 @@ export async function mountHubGlobe(stage, opts) { return l || [0, 0, 0, 0]; }) ); + drawEwParallels(ctx, cx, cy, r, rotation, layoutScale); drawRim(ctx, globeImg, cx, cy, r, rim, layoutScale); ctx.save(); ctx.beginPath(); diff --git a/examples/app_hub/index.php b/examples/app_hub/index.php index 7d39342..3aa2490 100644 --- a/examples/app_hub/index.php +++ b/examples/app_hub/index.php @@ -180,7 +180,7 @@ unset($__platformDir); var supportsLayout = !!(window.CSS && CSS.supports && CSS.supports('object-fit', 'cover')); var logoEnabled = !!(stage && supportsSvg && supportsLayout); - var logoBuild = '20260606globe11'; + var logoBuild = '20260606globe12'; function hubAsset(rel) { var link = document.querySelector('link[href*="hub.css"]');