@mytec: 10km grad works
This commit is contained in:
@@ -15,6 +15,7 @@ import { db } from '@/db/schema.ts';
|
||||
import MapView from '@/components/map/Map.tsx';
|
||||
import GeographicHeatmap from '@/components/map/GeographicHeatmap.tsx';
|
||||
import WebGLCoverageLayer from '@/components/map/WebGLCoverageLayer.tsx';
|
||||
import WebGLRadialCoverageLayer from '@/components/map/WebGLRadialCoverageLayer.tsx';
|
||||
import CoverageBoundary from '@/components/map/CoverageBoundary.tsx';
|
||||
import HeatmapLegend from '@/components/map/HeatmapLegend.tsx';
|
||||
import SiteList from '@/components/panels/SiteList.tsx';
|
||||
@@ -126,8 +127,8 @@ export default function App() {
|
||||
const setShowElevationOverlay = useSettingsStore((s) => s.setShowElevationOverlay);
|
||||
const elevationOpacity = useSettingsStore((s) => s.elevationOpacity);
|
||||
const setElevationOpacity = useSettingsStore((s) => s.setElevationOpacity);
|
||||
const useWebGLCoverage = useSettingsStore((s) => s.useWebGLCoverage);
|
||||
const setUseWebGLCoverage = useSettingsStore((s) => s.setUseWebGLCoverage);
|
||||
const coverageRenderer = useSettingsStore((s) => s.coverageRenderer);
|
||||
const setCoverageRenderer = useSettingsStore((s) => s.setCoverageRenderer);
|
||||
|
||||
// History (undo/redo)
|
||||
const canUndo = useHistoryStore((s) => s.canUndo);
|
||||
@@ -698,8 +699,20 @@ export default function App() {
|
||||
{/* Show partial results during tiled calculation, or final result */}
|
||||
{(coverageResult || (isCalculating && partialPoints.length > 0)) && (
|
||||
<>
|
||||
{/* Only render ONE layer - WebGL or Canvas, never both */}
|
||||
{useWebGLCoverage && (
|
||||
{/* Render coverage layer based on selected renderer */}
|
||||
{coverageRenderer === 'webgl-radial' && (
|
||||
<WebGLRadialCoverageLayer
|
||||
key="webgl-radial-coverage"
|
||||
points={isCalculating && partialPoints.length > 0 ? partialPoints : (coverageResult?.points ?? [])}
|
||||
visible={heatmapVisible}
|
||||
opacity={settings.heatmapOpacity}
|
||||
minRsrp={-130}
|
||||
maxRsrp={-50}
|
||||
radiusMeters={settings.heatmapRadius}
|
||||
onWebGLFailed={() => setCoverageRenderer('webgl-texture')}
|
||||
/>
|
||||
)}
|
||||
{coverageRenderer === 'webgl-texture' && (
|
||||
<WebGLCoverageLayer
|
||||
key="webgl-coverage"
|
||||
points={isCalculating && partialPoints.length > 0 ? partialPoints : (coverageResult?.points ?? [])}
|
||||
@@ -707,10 +720,10 @@ export default function App() {
|
||||
opacity={settings.heatmapOpacity}
|
||||
minRsrp={-130}
|
||||
maxRsrp={-50}
|
||||
onWebGLFailed={() => setUseWebGLCoverage(false)}
|
||||
onWebGLFailed={() => setCoverageRenderer('canvas')}
|
||||
/>
|
||||
)}
|
||||
{!useWebGLCoverage && (
|
||||
{coverageRenderer === 'canvas' && (
|
||||
<GeographicHeatmap
|
||||
key="canvas-coverage"
|
||||
points={isCalculating && partialPoints.length > 0 ? partialPoints : (coverageResult?.points ?? [])}
|
||||
@@ -866,29 +879,24 @@ export default function App() {
|
||||
unit="%"
|
||||
hint="Transparency of the RF coverage overlay"
|
||||
/>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-dark-text">
|
||||
Smooth Rendering
|
||||
</label>
|
||||
<p className="text-xs text-gray-400 dark:text-dark-muted">
|
||||
WebGL interpolation for smooth gradients
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setUseWebGLCoverage(!useWebGLCoverage)}
|
||||
className={`relative w-11 h-6 rounded-full transition-colors ${
|
||||
useWebGLCoverage ? 'bg-blue-500' : 'bg-gray-300 dark:bg-dark-border'
|
||||
}`}
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-dark-text">
|
||||
Coverage Renderer
|
||||
</label>
|
||||
<p className="text-xs text-gray-400 dark:text-dark-muted mb-1">
|
||||
Visualization style for coverage overlay
|
||||
</p>
|
||||
<select
|
||||
value={coverageRenderer}
|
||||
onChange={(e) => setCoverageRenderer(e.target.value as 'webgl-radial' | 'webgl-texture' | 'canvas')}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-card text-sm dark:text-dark-text"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${
|
||||
useWebGLCoverage ? 'translate-x-5' : ''
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<option value="webgl-radial">WebGL Radial (smooth)</option>
|
||||
<option value="webgl-texture">WebGL Texture (fast)</option>
|
||||
<option value="canvas">Canvas (fallback)</option>
|
||||
</select>
|
||||
</div>
|
||||
{!useWebGLCoverage && (
|
||||
{coverageRenderer === 'canvas' && (
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-dark-text">
|
||||
Heatmap Quality
|
||||
|
||||
559
frontend/src/components/map/WebGLRadialCoverageLayer.tsx
Normal file
559
frontend/src/components/map/WebGLRadialCoverageLayer.tsx
Normal file
@@ -0,0 +1,559 @@
|
||||
/**
|
||||
* WebGL Radial Gradients Coverage Layer
|
||||
*
|
||||
* Uses multi-pass additive blending to render smooth radial gradients
|
||||
* around each coverage point, similar to Canvas GeographicHeatmap but GPU-accelerated.
|
||||
*
|
||||
* Approach:
|
||||
* 1. Render each point as a quad with radial falloff (only when data changes)
|
||||
* 2. Use additive blending to accumulate (weight * rsrp, weight)
|
||||
* 3. Final pass: normalize and apply colormap (on every frame)
|
||||
*/
|
||||
|
||||
import { useEffect, useRef, useMemo, useCallback } from 'react';
|
||||
import { useMap } from 'react-leaflet';
|
||||
|
||||
// Logging: 0=off, 1=errors, 2=info, 3=debug
|
||||
const LOG_LEVEL = 2;
|
||||
const log = (level: number, ...args: unknown[]) => {
|
||||
if (level <= LOG_LEVEL) console.log('[WebGL Radial]', ...args);
|
||||
};
|
||||
|
||||
export interface CoveragePoint {
|
||||
lat: number;
|
||||
lon: number;
|
||||
rsrp: number;
|
||||
}
|
||||
|
||||
interface WebGLRadialCoverageLayerProps {
|
||||
points: CoveragePoint[];
|
||||
opacity: number;
|
||||
minRsrp?: number;
|
||||
maxRsrp?: number;
|
||||
visible: boolean;
|
||||
radiusMeters?: number;
|
||||
onWebGLFailed?: () => void;
|
||||
}
|
||||
|
||||
// Point accumulation vertex shader
|
||||
const POINT_VERTEX_SHADER = `
|
||||
attribute vec2 a_position; // quad vertices (-1 to 1)
|
||||
attribute vec2 a_pointPos; // point position in normalized coords
|
||||
attribute float a_pointRsrp; // normalized RSRP (0-1)
|
||||
attribute float a_pointRadius; // radius in normalized coords
|
||||
|
||||
varying vec2 v_localPos;
|
||||
varying float v_rsrp;
|
||||
|
||||
void main() {
|
||||
// Expand quad around point center
|
||||
vec2 pos = a_pointPos + a_position * a_pointRadius;
|
||||
gl_Position = vec4(pos * 2.0 - 1.0, 0.0, 1.0); // Map 0-1 to clip space -1 to 1
|
||||
|
||||
v_localPos = a_position; // -1 to 1 within the quad
|
||||
v_rsrp = a_pointRsrp;
|
||||
}
|
||||
`;
|
||||
|
||||
// Point accumulation fragment shader
|
||||
const POINT_FRAGMENT_SHADER = `
|
||||
precision highp float;
|
||||
|
||||
varying vec2 v_localPos;
|
||||
varying float v_rsrp;
|
||||
|
||||
void main() {
|
||||
// Radial distance from center (0 at center, 1 at edge)
|
||||
float dist = length(v_localPos);
|
||||
|
||||
// Discard outside circle
|
||||
if (dist > 1.0) discard;
|
||||
|
||||
// Radial falloff - softer gaussian for better edge coverage
|
||||
// exp(-2) = 0.135 at edge vs exp(-3) = 0.05, giving more contribution from edge points
|
||||
float weight = exp(-dist * dist * 2.0);
|
||||
|
||||
// Output: (weight * rsrp, weight, 0, 0)
|
||||
// Using RG channels for accumulation
|
||||
gl_FragColor = vec4(weight * v_rsrp, weight, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
// Final compositing vertex shader
|
||||
const COMPOSITE_VERTEX_SHADER = `
|
||||
attribute vec2 a_position;
|
||||
varying vec2 v_uv;
|
||||
|
||||
void main() {
|
||||
gl_Position = vec4(a_position, 0.0, 1.0);
|
||||
v_uv = (a_position + 1.0) * 0.5;
|
||||
}
|
||||
`;
|
||||
|
||||
// Final compositing fragment shader
|
||||
const COMPOSITE_FRAGMENT_SHADER = `
|
||||
precision highp float;
|
||||
|
||||
uniform sampler2D u_accumTexture;
|
||||
uniform float u_opacity;
|
||||
|
||||
varying vec2 v_uv;
|
||||
|
||||
vec3 rsrpToColor(float t) {
|
||||
// t: 0 = weak (red), 1 = strong (cyan)
|
||||
if (t < 0.25) return mix(vec3(1.0, 0.0, 0.0), vec3(1.0, 0.5, 0.0), t / 0.25);
|
||||
if (t < 0.5) return mix(vec3(1.0, 0.5, 0.0), vec3(1.0, 1.0, 0.0), (t - 0.25) / 0.25);
|
||||
if (t < 0.75) return mix(vec3(1.0, 1.0, 0.0), vec3(0.0, 1.0, 0.0), (t - 0.5) / 0.25);
|
||||
return mix(vec3(0.0, 1.0, 0.0), vec3(0.0, 1.0, 1.0), (t - 0.75) / 0.25);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec4 accum = texture2D(u_accumTexture, v_uv);
|
||||
|
||||
float totalValue = accum.r;
|
||||
float totalWeight = accum.g;
|
||||
|
||||
// No coverage - discard if weight is truly zero
|
||||
if (totalWeight < 0.0001) discard;
|
||||
|
||||
// Weighted average RSRP
|
||||
float avgRsrp = clamp(totalValue / totalWeight, 0.0, 1.0);
|
||||
|
||||
// Color mapping
|
||||
vec3 color = rsrpToColor(avgRsrp);
|
||||
|
||||
// Alpha based on weight (fade at edges)
|
||||
float alpha = min(1.0, totalWeight * 0.1) * u_opacity;
|
||||
|
||||
gl_FragColor = vec4(color, alpha);
|
||||
}
|
||||
`;
|
||||
|
||||
function compileShader(gl: WebGLRenderingContext, source: string, type: number): WebGLShader | null {
|
||||
const shader = gl.createShader(type);
|
||||
if (!shader) return null;
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
console.error('[WebGL Radial] Shader error:', gl.getShaderInfoLog(shader));
|
||||
gl.deleteShader(shader);
|
||||
return null;
|
||||
}
|
||||
return shader;
|
||||
}
|
||||
|
||||
function createProgram(gl: WebGLRenderingContext, vsSource: string, fsSource: string): WebGLProgram | null {
|
||||
const vs = compileShader(gl, vsSource, gl.VERTEX_SHADER);
|
||||
const fs = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
|
||||
if (!vs || !fs) return null;
|
||||
|
||||
const program = gl.createProgram();
|
||||
if (!program) return null;
|
||||
gl.attachShader(program, vs);
|
||||
gl.attachShader(program, fs);
|
||||
gl.linkProgram(program);
|
||||
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||||
console.error('[WebGL Radial] Program error:', gl.getProgramInfoLog(program));
|
||||
return null;
|
||||
}
|
||||
|
||||
// Clean up shaders after linking
|
||||
gl.deleteShader(vs);
|
||||
gl.deleteShader(fs);
|
||||
|
||||
return program;
|
||||
}
|
||||
|
||||
interface Bounds {
|
||||
minLat: number;
|
||||
maxLat: number;
|
||||
minLon: number;
|
||||
maxLon: number;
|
||||
}
|
||||
|
||||
export default function WebGLRadialCoverageLayer({
|
||||
points,
|
||||
opacity,
|
||||
minRsrp = -130,
|
||||
maxRsrp = -50,
|
||||
visible,
|
||||
radiusMeters = 400,
|
||||
onWebGLFailed,
|
||||
}: WebGLRadialCoverageLayerProps) {
|
||||
const map = useMap();
|
||||
|
||||
// Refs for WebGL resources
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const glRef = useRef<WebGLRenderingContext | null>(null);
|
||||
const pointProgramRef = useRef<WebGLProgram | null>(null);
|
||||
const compositeProgramRef = useRef<WebGLProgram | null>(null);
|
||||
const accumTextureRef = useRef<WebGLTexture | null>(null);
|
||||
const framebufferRef = useRef<WebGLFramebuffer | null>(null);
|
||||
const quadBufferRef = useRef<WebGLBuffer | null>(null);
|
||||
const pointBufferRef = useRef<WebGLBuffer | null>(null);
|
||||
const boundsRef = useRef<Bounds | null>(null);
|
||||
const initializedRef = useRef(false);
|
||||
const lastPointsHashRef = useRef<string>('');
|
||||
|
||||
// Track if points need to be re-rendered (expensive pass)
|
||||
const needsPointRenderRef = useRef(true);
|
||||
|
||||
// Stable ref for callback
|
||||
const onWebGLFailedRef = useRef(onWebGLFailed);
|
||||
onWebGLFailedRef.current = onWebGLFailed;
|
||||
|
||||
// Track framebuffer size
|
||||
const fbSizeRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 });
|
||||
|
||||
// Compute points hash for change detection
|
||||
const pointsHash = useMemo(() => {
|
||||
if (points.length === 0) return 'empty';
|
||||
const first = points[0];
|
||||
const last = points[points.length - 1];
|
||||
return `${points.length}:${first.lat.toFixed(5)}:${last.lon.toFixed(5)}:${first.rsrp.toFixed(1)}`;
|
||||
}, [points]);
|
||||
|
||||
// Calculate bounds from points
|
||||
const calculateBounds = useCallback((pts: CoveragePoint[]): Bounds | null => {
|
||||
if (pts.length === 0) return null;
|
||||
|
||||
let minLat = Infinity, maxLat = -Infinity;
|
||||
let minLon = Infinity, maxLon = -Infinity;
|
||||
|
||||
for (const p of pts) {
|
||||
if (p.lat < minLat) minLat = p.lat;
|
||||
if (p.lat > maxLat) maxLat = p.lat;
|
||||
if (p.lon < minLon) minLon = p.lon;
|
||||
if (p.lon > maxLon) maxLon = p.lon;
|
||||
}
|
||||
|
||||
// Padding needs to accommodate the radial gradient of edge points
|
||||
// Each point's gradient extends beyond its center, use 12% of range as padding
|
||||
const latRangeRaw = maxLat - minLat;
|
||||
const lonRangeRaw = maxLon - minLon;
|
||||
const latPaddingGradient = latRangeRaw * 0.12;
|
||||
const lonPaddingGradient = lonRangeRaw * 0.12;
|
||||
const latPaddingRadius = radiusMeters / 111000;
|
||||
const lonPaddingRadius = radiusMeters / (111000 * Math.cos((minLat + maxLat) / 2 * Math.PI / 180));
|
||||
|
||||
const latPadding = Math.max(latPaddingGradient, latPaddingRadius);
|
||||
const lonPadding = Math.max(lonPaddingGradient, lonPaddingRadius);
|
||||
|
||||
log(2, 'Bounds padding:', { latPadding: latPadding.toFixed(5), lonPadding: lonPadding.toFixed(5) });
|
||||
|
||||
return {
|
||||
minLat: minLat - latPadding,
|
||||
maxLat: maxLat + latPadding,
|
||||
minLon: minLon - lonPadding,
|
||||
maxLon: maxLon + lonPadding,
|
||||
};
|
||||
}, [radiusMeters]);
|
||||
|
||||
// Render function - split into point accumulation (expensive) and composite (cheap)
|
||||
const render = useCallback(() => {
|
||||
const canvas = canvasRef.current;
|
||||
const gl = glRef.current;
|
||||
const pointProgram = pointProgramRef.current;
|
||||
const compositeProgram = compositeProgramRef.current;
|
||||
const framebuffer = framebufferRef.current;
|
||||
const accumTexture = accumTextureRef.current;
|
||||
const quadBuffer = quadBufferRef.current;
|
||||
const bounds = boundsRef.current;
|
||||
|
||||
if (!canvas || !gl || !pointProgram || !compositeProgram || !framebuffer ||
|
||||
!accumTexture || !quadBuffer || !bounds) {
|
||||
return;
|
||||
}
|
||||
|
||||
log(3, 'render() points:', points.length, 'needsPointRender:', needsPointRenderRef.current);
|
||||
|
||||
// Position canvas over coverage area
|
||||
const nw = map.latLngToLayerPoint([bounds.maxLat, bounds.minLon]);
|
||||
const se = map.latLngToLayerPoint([bounds.minLat, bounds.maxLon]);
|
||||
const width = Math.abs(se.x - nw.x);
|
||||
const height = Math.abs(se.y - nw.y);
|
||||
|
||||
if (width < 1 || height < 1) return;
|
||||
|
||||
canvas.style.transform = `translate(${nw.x}px, ${nw.y}px)`;
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
|
||||
// Set canvas resolution
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
const canvasW = Math.min(Math.round(width * dpr), 2048);
|
||||
const canvasH = Math.min(Math.round(height * dpr), 2048);
|
||||
|
||||
// Resize canvas and framebuffer if needed (with tolerance to avoid subpixel jitter)
|
||||
const needsResize = Math.abs(canvas.width - canvasW) > 2 || Math.abs(canvas.height - canvasH) > 2;
|
||||
if (needsResize) {
|
||||
canvas.width = canvasW;
|
||||
canvas.height = canvasH;
|
||||
|
||||
// Resize accumulation texture
|
||||
gl.bindTexture(gl.TEXTURE_2D, accumTexture);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, canvasW, canvasH, 0, gl.RGBA, gl.FLOAT, null);
|
||||
|
||||
fbSizeRef.current = { width: canvasW, height: canvasH };
|
||||
needsPointRenderRef.current = true; // Must re-render points after resize
|
||||
}
|
||||
|
||||
// === Pass 1: Accumulate points into framebuffer (only when needed) ===
|
||||
if (needsPointRenderRef.current) {
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
gl.useProgram(pointProgram);
|
||||
gl.enable(gl.BLEND);
|
||||
gl.blendFunc(gl.ONE, gl.ONE); // Additive blending
|
||||
|
||||
// Bind quad buffer for point rendering
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
|
||||
const posLoc = gl.getAttribLocation(pointProgram, 'a_position');
|
||||
gl.enableVertexAttribArray(posLoc);
|
||||
gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
// Get attribute locations for point data
|
||||
const pointPosLoc = gl.getAttribLocation(pointProgram, 'a_pointPos');
|
||||
const pointRsrpLoc = gl.getAttribLocation(pointProgram, 'a_pointRsrp');
|
||||
const pointRadiusLoc = gl.getAttribLocation(pointProgram, 'a_pointRadius');
|
||||
|
||||
// Calculate radius in normalized coords
|
||||
const latRange = bounds.maxLat - bounds.minLat;
|
||||
const lonRange = bounds.maxLon - bounds.minLon;
|
||||
|
||||
// Calculate radius: ensure smooth overlap between adjacent points
|
||||
const gridDim = Math.sqrt(points.length);
|
||||
const avgCellLat = latRange / gridDim;
|
||||
const avgCellLon = lonRange / gridDim;
|
||||
|
||||
// For smooth coverage we need each point's gradient to reach ~2 cells in every direction
|
||||
// Denser grids (more points) need relatively larger multiplier because edge effects matter more
|
||||
const baseMultiplier = 3.5;
|
||||
const densityBoost = Math.max(1.0, gridDim / 50); // 1.0 at 50pts, 1.6 at 80pts
|
||||
const radiusMultiplier = baseMultiplier * densityBoost;
|
||||
|
||||
const normalizedRadiusLat = (avgCellLat * radiusMultiplier) / latRange;
|
||||
const normalizedRadiusLon = (avgCellLon * radiusMultiplier) / lonRange;
|
||||
const normalizedRadius = Math.max(normalizedRadiusLat, normalizedRadiusLon);
|
||||
|
||||
log(2, 'Grid estimate:', { points: points.length, gridDim: gridDim.toFixed(1), densityBoost: densityBoost.toFixed(2), radiusMultiplier: radiusMultiplier.toFixed(1), normalizedRadius: normalizedRadius.toFixed(4) });
|
||||
|
||||
// Draw each point as a quad
|
||||
const rsrpRange = maxRsrp - minRsrp;
|
||||
for (const p of points) {
|
||||
const normX = (p.lon - bounds.minLon) / lonRange;
|
||||
const normY = (p.lat - bounds.minLat) / latRange;
|
||||
const normRsrp = Math.max(0, Math.min(1, (p.rsrp - minRsrp) / rsrpRange));
|
||||
|
||||
gl.vertexAttrib2f(pointPosLoc, normX, normY);
|
||||
gl.vertexAttrib1f(pointRsrpLoc, normRsrp);
|
||||
gl.vertexAttrib1f(pointRadiusLoc, normalizedRadius);
|
||||
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
||||
}
|
||||
|
||||
gl.disableVertexAttribArray(posLoc);
|
||||
needsPointRenderRef.current = false;
|
||||
}
|
||||
|
||||
// === Pass 2: Composite to screen (always runs) ===
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
gl.useProgram(compositeProgram);
|
||||
gl.enable(gl.BLEND);
|
||||
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); // Normal blending
|
||||
|
||||
// Bind quad buffer
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
|
||||
const compositePos = gl.getAttribLocation(compositeProgram, 'a_position');
|
||||
gl.enableVertexAttribArray(compositePos);
|
||||
gl.vertexAttribPointer(compositePos, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
// Bind accumulation texture
|
||||
gl.activeTexture(gl.TEXTURE0);
|
||||
gl.bindTexture(gl.TEXTURE_2D, accumTexture);
|
||||
gl.uniform1i(gl.getUniformLocation(compositeProgram, 'u_accumTexture'), 0);
|
||||
gl.uniform1f(gl.getUniformLocation(compositeProgram, 'u_opacity'), opacity);
|
||||
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
||||
gl.disableVertexAttribArray(compositePos);
|
||||
|
||||
}, [map, points, minRsrp, maxRsrp, opacity]);
|
||||
|
||||
// Effect 1: Initialize WebGL
|
||||
useEffect(() => {
|
||||
if (!visible) return;
|
||||
if (initializedRef.current && canvasRef.current && glRef.current) return;
|
||||
|
||||
const pane = map.getPane('overlayPane');
|
||||
if (!pane) return;
|
||||
|
||||
// Remove any leftover canvas
|
||||
const existing = pane.querySelectorAll('canvas.webgl-radial-coverage');
|
||||
existing.forEach(c => c.remove());
|
||||
|
||||
// Create canvas
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.className = 'webgl-radial-coverage';
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.pointerEvents = 'none';
|
||||
canvas.style.transformOrigin = '0 0';
|
||||
pane.appendChild(canvas);
|
||||
canvasRef.current = canvas;
|
||||
|
||||
// Initialize WebGL
|
||||
const gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: false });
|
||||
if (!gl) {
|
||||
console.error('[WebGL Radial] WebGL not available');
|
||||
onWebGLFailedRef.current?.();
|
||||
return;
|
||||
}
|
||||
glRef.current = gl;
|
||||
|
||||
// Check for float texture support
|
||||
const floatExt = gl.getExtension('OES_texture_float');
|
||||
gl.getExtension('OES_texture_float_linear'); // Enable if available
|
||||
if (!floatExt) {
|
||||
console.error('[WebGL Radial] OES_texture_float not supported');
|
||||
onWebGLFailedRef.current?.();
|
||||
return;
|
||||
}
|
||||
|
||||
gl.enable(gl.BLEND);
|
||||
|
||||
// Create point program
|
||||
const pointProgram = createProgram(gl, POINT_VERTEX_SHADER, POINT_FRAGMENT_SHADER);
|
||||
if (!pointProgram) {
|
||||
console.error('[WebGL Radial] Failed to create point program');
|
||||
onWebGLFailedRef.current?.();
|
||||
return;
|
||||
}
|
||||
pointProgramRef.current = pointProgram;
|
||||
|
||||
// Create composite program
|
||||
const compositeProgram = createProgram(gl, COMPOSITE_VERTEX_SHADER, COMPOSITE_FRAGMENT_SHADER);
|
||||
if (!compositeProgram) {
|
||||
console.error('[WebGL Radial] Failed to create composite program');
|
||||
onWebGLFailedRef.current?.();
|
||||
return;
|
||||
}
|
||||
compositeProgramRef.current = compositeProgram;
|
||||
|
||||
// Create quad buffer (fullscreen quad)
|
||||
const quadBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
||||
-1, -1,
|
||||
1, -1,
|
||||
-1, 1,
|
||||
1, 1,
|
||||
]), gl.STATIC_DRAW);
|
||||
quadBufferRef.current = quadBuffer;
|
||||
|
||||
// Create point buffer (will be filled per-point for now, TODO: instancing)
|
||||
const pointBuffer = gl.createBuffer();
|
||||
pointBufferRef.current = pointBuffer;
|
||||
|
||||
// Create accumulation texture (float RGBA)
|
||||
// Use NEAREST filtering - float textures require OES_texture_float_linear for LINEAR
|
||||
const accumTexture = gl.createTexture();
|
||||
gl.bindTexture(gl.TEXTURE_2D, accumTexture);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.FLOAT, null);
|
||||
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);
|
||||
accumTextureRef.current = accumTexture;
|
||||
|
||||
// Create framebuffer
|
||||
const framebuffer = gl.createFramebuffer();
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
|
||||
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, accumTexture, 0);
|
||||
framebufferRef.current = framebuffer;
|
||||
|
||||
// Check framebuffer status
|
||||
const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
|
||||
if (status !== gl.FRAMEBUFFER_COMPLETE) {
|
||||
console.error('[WebGL Radial] Framebuffer not complete:', status);
|
||||
onWebGLFailedRef.current?.();
|
||||
return;
|
||||
}
|
||||
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
||||
|
||||
initializedRef.current = true;
|
||||
|
||||
}, [visible, map]);
|
||||
|
||||
// Effect 2: Update bounds when points change
|
||||
useEffect(() => {
|
||||
if (!visible || points.length === 0) return;
|
||||
if (pointsHash === lastPointsHashRef.current) return;
|
||||
|
||||
const bounds = calculateBounds(points);
|
||||
if (!bounds) return;
|
||||
|
||||
boundsRef.current = bounds;
|
||||
lastPointsHashRef.current = pointsHash;
|
||||
needsPointRenderRef.current = true; // Mark for point re-render
|
||||
|
||||
render();
|
||||
}, [visible, points, pointsHash, calculateBounds, render]);
|
||||
|
||||
// Effect 3: Map event listeners
|
||||
useEffect(() => {
|
||||
if (!visible) return;
|
||||
|
||||
let frameId = 0;
|
||||
const onMapChange = () => {
|
||||
cancelAnimationFrame(frameId);
|
||||
frameId = requestAnimationFrame(render);
|
||||
};
|
||||
|
||||
map.on('move', onMapChange);
|
||||
map.on('zoom', onMapChange);
|
||||
map.on('resize', onMapChange);
|
||||
|
||||
return () => {
|
||||
map.off('move', onMapChange);
|
||||
map.off('zoom', onMapChange);
|
||||
map.off('resize', onMapChange);
|
||||
cancelAnimationFrame(frameId);
|
||||
};
|
||||
}, [visible, map, render]);
|
||||
|
||||
// Effect 4: Visibility toggle
|
||||
useEffect(() => {
|
||||
if (canvasRef.current) {
|
||||
canvasRef.current.style.display = visible ? 'block' : 'none';
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
const gl = glRef.current;
|
||||
if (gl) {
|
||||
if (accumTextureRef.current) gl.deleteTexture(accumTextureRef.current);
|
||||
if (framebufferRef.current) gl.deleteFramebuffer(framebufferRef.current);
|
||||
if (quadBufferRef.current) gl.deleteBuffer(quadBufferRef.current);
|
||||
if (pointBufferRef.current) gl.deleteBuffer(pointBufferRef.current);
|
||||
if (pointProgramRef.current) gl.deleteProgram(pointProgramRef.current);
|
||||
if (compositeProgramRef.current) gl.deleteProgram(compositeProgramRef.current);
|
||||
}
|
||||
if (canvasRef.current) {
|
||||
canvasRef.current.remove();
|
||||
canvasRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -3,6 +3,8 @@ import { persist } from 'zustand/middleware';
|
||||
|
||||
type Theme = 'light' | 'dark' | 'system';
|
||||
|
||||
type CoverageRenderer = 'webgl-texture' | 'webgl-radial' | 'canvas';
|
||||
|
||||
interface SettingsState {
|
||||
theme: Theme;
|
||||
showTerrain: boolean;
|
||||
@@ -14,6 +16,7 @@ interface SettingsState {
|
||||
showElevationOverlay: boolean;
|
||||
elevationOpacity: number;
|
||||
useWebGLCoverage: boolean;
|
||||
coverageRenderer: CoverageRenderer;
|
||||
setTheme: (theme: Theme) => void;
|
||||
setShowBoundary: (show: boolean) => void;
|
||||
setShowTerrain: (show: boolean) => void;
|
||||
@@ -24,6 +27,7 @@ interface SettingsState {
|
||||
setShowElevationOverlay: (show: boolean) => void;
|
||||
setElevationOpacity: (opacity: number) => void;
|
||||
setUseWebGLCoverage: (use: boolean) => void;
|
||||
setCoverageRenderer: (renderer: CoverageRenderer) => void;
|
||||
}
|
||||
|
||||
function applyTheme(theme: Theme) {
|
||||
@@ -50,6 +54,7 @@ export const useSettingsStore = create<SettingsState>()(
|
||||
showElevationOverlay: false,
|
||||
elevationOpacity: 0.5,
|
||||
useWebGLCoverage: true, // Default to WebGL smooth rendering
|
||||
coverageRenderer: 'webgl-radial' as CoverageRenderer, // Default to radial gradients
|
||||
setTheme: (theme: Theme) => {
|
||||
set({ theme });
|
||||
applyTheme(theme);
|
||||
@@ -63,16 +68,21 @@ export const useSettingsStore = create<SettingsState>()(
|
||||
setShowElevationOverlay: (show: boolean) => set({ showElevationOverlay: show }),
|
||||
setElevationOpacity: (opacity: number) => set({ elevationOpacity: opacity }),
|
||||
setUseWebGLCoverage: (use: boolean) => set({ useWebGLCoverage: use }),
|
||||
setCoverageRenderer: (renderer: CoverageRenderer) => set({ coverageRenderer: renderer }),
|
||||
}),
|
||||
{
|
||||
name: 'rfcp-settings',
|
||||
version: 2, // Bump version to reset useWebGLCoverage to true
|
||||
version: 3, // v3: Add coverageRenderer setting
|
||||
migrate: (persistedState: unknown, version: number) => {
|
||||
const state = persistedState as Partial<SettingsState>;
|
||||
if (version < 2) {
|
||||
// v2: Reset useWebGLCoverage to true (was stuck on false from early WebGL failures)
|
||||
state.useWebGLCoverage = true;
|
||||
}
|
||||
if (version < 3) {
|
||||
// v3: Add coverageRenderer, default to radial
|
||||
state.coverageRenderer = 'webgl-radial';
|
||||
}
|
||||
return state as SettingsState;
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user