import { mapSpec, worldMapImage } from "ea1ae6dbb4ec6b18"
import { colorSwap, colorTable as tmpColorTable }
with { mapSpec, worldMapImage }
from "9ac73284e07039a6"
colorReplacementMapTmp = {
const crm = new Map();
const green = ColorNum.fromHex6("#bae43d");
return new Map([...colorSwap.sourceColors.entries()].filter(e => e[1] == green));
// sampleColorReplacementMap
}
wrapX = true
//wrapX = useSampleValues.includes("wrapX")
colorReplacementMap = useSampleValues.includes("colorReplacementMap") ? sampleColorReplacementMap : undefined;
colorTable = tmpColorTable.bitmap
// colorTable = colorReplacementMap ? buildColorTable(colorReplacementMap) : undefined;
perfMeasures = [];
perfMeasuresReport = {
const raw = _.groupBy(perfMeasures.map(p => {
const { name, duration } = p;
const { ts, mp } = p.detail;
const msPerMp = duration / mp;
const msPerTs = duration / (ts / 1024);
return { name, ts, duration, msPerMp, msPerTs };
}), "name");
function readStats(data) {
const stats = {};
for (let key of ["duration", "msPerMp", "msPerTs"]) {
stats[key] = _.mean(data.map(d => d[key]));
}
stats.raw = data;
return stats;
}
const report = {};
for (let [name, data] of Object.entries(raw)) {
report[name] = { all: readStats(data) };
const byTs = _.groupBy(data, "ts");
for (let [ts, tsData] of Object.entries(byTs)) {
report[name][ts] = readStats(tsData);
}
}
report.raw = raw;
return report;
}
perfMeasures2 = _.groupBy(perfMeasures.map(p => ({ name: p.name, duration: p.duration, mp: p.detail, msPerMp: p.duration / p.detail })), "name")
createCanvasElement(regl.canvas.transferToImageBitmap())
async function gpuProcessTile(tile, rect) {
const textureDimensions = [ tile.naturalWidth ?? tile.width, tile.naturalHeight ?? tile.height ];
const tileTexture = regl.texture({ data: tile });
const buffers = {
color: regl.framebuffer({ depthStencil: false, shape: textureDimensions }),
neighbors: regl.framebuffer({ depthStencil: false, shape: textureDimensions }),
coords: regl.framebuffer({ depthStencil: false, shape: textureDimensions }),
};
[ regl.canvas.width, regl.canvas.height ] = textureDimensions
await pauseIfNeeded();
const detail = {
mp: textureDimensions[0] * textureDimensions[1] / (1024 * 1024),
ts: sampleTileSize
};
async function getPixelIO(extendAtEdges) {
const crop = Object.assign({}, rect.crop);
if (extendAtEdges) {
if (rect.mapEdges.e) crop.width += 1;
if (rect.mapEdges.s) crop.height += 1;
}
const now = performance.now();
const ctx = (new OffscreenCanvas(crop.width, crop.height)).getContext("2d");
const pixelIO = PixelIO.fromImageSource(regl.canvas);
debugger;
perfMeasures.push(performance.measure("gpuProcessTile v2", { start: now, detail }));
pixelIO.crop(crop);
await pauseIfNeeded();
return pixelIO;
}
try {
const result = {
offset: [rect.x, rect.y],
mapEdges: rect.mapEdges
}
replaceColorCommand({
uSampler: tileTexture,
textureDimensions,
target: buffers.color
});
renderToCanvasCommand({
uSampler: tileTexture,
textureDimensions
});
return;
result.colorIO = await getPixelIO(false);
findNeighborsCommand({
uSampler: buffers.color,
textureDimensions,
target: buffers.neighbors
});
result.neighborsIO = await getPixelIO(false);
classifyCoordsCommand({
uSampler: buffers.color,
textureDimensions,
target: buffers.coords
});
result.coordsIO = await getPixelIO(true);
return result;
}
finally {
[tileTexture, ...Object.values(buffers)].forEach(o => o.destroy());
}
}
/*
async function getPixelIO(framebuffer, extendAtEdges) {
const dataArray = regl.read({ framebuffer });
const pixelIO = new PixelIO(framebuffer.width, framebuffer.height, dataArray);
const crop = Object.assign({}, rect.crop);
if (extendAtEdges) {
if (rect.mapEdges.e) crop.width += 1;
if (rect.mapEdges.s) crop.height += 1;
}
pixelIO.crop(crop);
await pauseIfNeeded();
return pixelIO;
}
*/
XydNum.toXyd(2251799947902979)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
