{
const rgbFromStr = (str /*: string */) => {
return str
.match(/rgb\((\d+),\s?(\d+),\s?(\d+)\)/)
?.slice(1, 4)
?.map(x => +x / 255);
};
// const sampleExtent = d3.extent(tile.features, f => +f.properties.ELEVATION)
// From the original, non-culled dataset:
const sampleExtent = [-915, 915]
// WARNING depending on the inputs to the scale below, heights may not be visually accurate
// const zScale = d3.scaleLinear().domain([0, sampleExtent[1]]).range([-0.5, 0.5]);
const zScale = d3.scaleLinear().domain(sampleExtent).range([-0.5, 0.5]);
async function initLineRenderer({ context, device }) {
const margin = 0;
// this is where you'd want to pass the tile size as a uniform
// and convert it to -1 to 1 space in the vertex shader
// vs the hardcoding you're doing now
const projection = d3.geoMercator().fitExtent(
[
[margin, margin],
[TILE_WIDTH - margin, TILE_HEIGHT - margin],
],
tile,
);
const path = feature => {
switch (feature.geometry.type) {
case 'LineString': {
return feature.geometry.coordinates.reduce(
(vertices /*: number[][] */, [lng, lat] /*: [number, number] */) => {
const [x, y] = projection([lng, lat]) /* as [number, number] */;
vertices.push([x, y, zScale(+feature.properties.ELEVATION)]);
return vertices;
},
[],
);
}
default:
return null;
}
};
// WARNING color is interpolated inaccurately (based on the extent of the tile heights,
// not absolute height) and should be fixed in a non-demo
const normElevation = d3.scaleLinear()
.domain(
d3.extent(tile.features, f => +f.properties.ELEVATION) /* as [number, number] */,
)
.range([0, 1]);
const lines = tile.features
// .filter(feature => +feature.properties.ELEVATION % 10 === 0)
.map(feature => {
const vertices = path(feature);
if (!vertices) {
return null;
}
// FIXME messy; splits color logic between here and renderer
let c;
if (colorScheme !== 'randomSegment') {
if (colorScheme === 'random') {
c = [util.rand(), util.rand(), util.rand(), 1]
} else {
const color = d3.color(
d3[colorScheme](normElevation(+feature.properties.ELEVATION)),
)
c = [...rgbFromStr(color.formatRgb()), 1]
}
}
return {
vertices,
color: c,
};
})
.filter(Boolean);
return new LineRenderer(
device,
context,
lines,
colorScheme === 'randomSegment' && { randomSegmentColors: true }
);
}
async function main() {
let frame;
const { context, device } = await gpu.init(TILE_WIDTH, TILE_HEIGHT);
const renderer = await initLineRenderer({ context, device });
// camera
const projection = mat4.perspective((90 * Math.PI) / 180, TILE_WIDTH / TILE_HEIGHT, 0.1, 256);
let position = [0, 0, 1.5];
const target = [0, 0, 0];
const up = [0, 1, 0];
const rotation = -Math.PI / 4;
const view = mat4.lookAt(
[...position],
target,
up,
);
mat4.rotateX(view, rotation, view)
const viewProjection = mat4.multiply(projection, view);
const minZoom = 0.5;
const maxZoom = 5.0;
const zoomSpeed = 0.001;
function zoom(e) {
e.preventDefault();
const vd = [
target[0] - position[0],
target[1] - position[1],
target[2] - position[2],
];
const len = Math.sqrt(vd[0] * vd[0] + vd[1] * vd[1] + vd[2] * vd[2]);
vd[0] /= len;
vd[1] /= len;
vd[2] /= len;
const amt = e.deltaY * zoomSpeed;
const np = [
position[0] - vd[0] * amt,
position[1] - vd[1] * amt,
position[2] - vd[2] * amt
];
const dist = Math.sqrt(np[0] * np[0] + np[1] * np[1] + np[2] * np[2]);
if (dist >= minZoom && dist <= maxZoom) {
position = np;
mat4.lookAt(position, target, up, view);
mat4.rotateX(view, rotation, view);
mat4.multiply(projection, view, viewProjection);
}
}
function tick() {
let t = performance.now() * 0.0001;
const matrix = mat4.copy(viewProjection);
mat4.rotateZ(viewProjection, t, matrix);
renderer.render(matrix);
frame = requestAnimationFrame(tick);
}
frame = requestAnimationFrame(tick);
context.canvas.addEventListener('wheel', zoom);
// Specific to ObservableHQ.com:
invalidation.then(() => {
cancelAnimationFrame(frame);
renderer.cleanup();
device.destroy();
context.canvas.removeEventListener('wheel', zoom);
})
return { context }
}
return (await main()).context.canvas
}
LineRenderer = {
// prettier-ignore
const vertexShader = /* wgsl */ `
@group(0) @binding(0) var<uniform> matrix: mat4x4f;
struct VertexOut {
@builtin(position) position: vec4f,
@location(0) color: vec4f
}
@vertex
fn vs(
@location(0) position: vec4f,
@location(1) color: vec4f
) -> VertexOut {
var output: VertexOut;
// FIXME should pass width & height as uniforms instead of hardcoding
output.position = matrix * vec4f((position.xy / ${TILE_WIDTH / 2} - 1.0), position.z, 1.0);
output.color = color;
return output;
}
`;
const fragmentShader = /* wgsl */ `
@fragment
fn fs(@location(0) color: vec4f) -> @location(0) vec4f {
return color;
}
`;
class LineRenderer {
device /* : GPUDevice */;
context /* : CanvasRenderingContext2D */;
canvas /* : HTMLCanvasElement */;
vertexBuffer /* : GPUBuffer */;
colorBuffer /*: GPUBuffer */;
uniformBuffer /*: GPUBuffer */;
pipeline /*: GPURenderPipeline */;
options /*: { randomSegmentColors?: boolean } */ = {};
multisampleTexture;
renderPassDescriptor = {
colorAttachments: [
{
view: null,
clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
loadOp: 'clear',
storeOp: 'store',
},
],
}
constructor(device /*: GPUDevice */, context /*: CanvasRenderingContext2D */, lines, options = {}) {
this.device = device;
this.canvas = context.canvas;
this.context = context;
this.options = options;
const vertexData /*: number[] */ = [];
const colorData /*: number[] */ = [];
for (const line of lines) {
const { vertices, color } = line;
for (let i = 0; i < vertices.length - 1; i++) {
// FIXME performance for continuous lines
vertexData.push(
// Start
vertices[i][0],
vertices[i][1],
vertices[i][2],
1,
// End
vertices[i + 1][0],
vertices[i + 1][1],
vertices[i + 1][2],
1,
);
if (!color || this.options?.randomSegmentColors) {
const c = [util.rand(), util.rand(), util.rand(), 1]
// prettier-ignore
colorData.push(
...c,
...c,
)
} else {
// prettier-ignore
colorData.push(
...color,
...color,
)
}
}
}
// Vertex buffer
this.vertexBuffer = gpu.mapBuffer(device, new Float32Array(vertexData), {
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
// Color buffer
this.colorBuffer = gpu.mapBuffer(device, new Float32Array(colorData), {
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
// Uniform buffer for transformation matrix
this.uniformBuffer = device.createBuffer({
size: 64, // 4x4 matrix = 16 floats = 64 bytes
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});
this.pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {
module: device.createShaderModule({ code: vertexShader }),
entryPoint: 'vs',
buffers: [
{
// Position buffer layout
arrayStride: 16, // 4 floats * 4 bytes
attributes: [
{
shaderLocation: 0,
offset: 0,
format: 'float32x4',
},
],
},
{
// Color buffer layout
arrayStride: 16, // 4 floats * 4 bytes
attributes: [
{
shaderLocation: 1,
offset: 0,
format: 'float32x4',
},
],
},
],
},
fragment: {
module: device.createShaderModule({ code: fragmentShader }),
entryPoint: 'fs',
targets: [
{
format: navigator.gpu.getPreferredCanvasFormat(),
blend: gpu.Blending.Additive,
},
],
},
primitive: {
topology: 'line-list',
},
multisample: {
count: 4,
},
});
this.bindGroup = device.createBindGroup({
layout: this.pipeline.getBindGroupLayout(0),
entries: [
{
binding: 0,
resource: { buffer: this.uniformBuffer },
},
],
});
this.vertexCount = vertexData.length / 4;
}
render(camera) {
this.device.queue.writeBuffer(this.uniformBuffer, 0, camera);
const commandEncoder = this.device.createCommandEncoder();
const canvasTexture = this.context.getCurrentTexture();
// Antialiasing
// https://webgpufundamentals.org/webgpu/lessons/webgpu-multisampling.html
if (!this.multisampleTexture ||
this.multisampleTexture.width !== canvasTexture.width ||
this.multisampleTexture.height !== canvasTexture.height) {
if (this.multisampleTexture) {
this.multisampleTexture.destroy();
}
this.multisampleTexture = this.device.createTexture({
format: canvasTexture.format,
usage: GPUTextureUsage.RENDER_ATTACHMENT,
size: [canvasTexture.width, canvasTexture.height],
sampleCount: 4,
});
}
this.renderPassDescriptor.colorAttachments[0].view = this.multisampleTexture.createView();
this.renderPassDescriptor.colorAttachments[0].resolveTarget = canvasTexture.createView();
const renderPass = commandEncoder.beginRenderPass(this.renderPassDescriptor);
renderPass.setPipeline(this.pipeline);
renderPass.setBindGroup(0, this.bindGroup);
renderPass.setVertexBuffer(0, this.vertexBuffer);
renderPass.setVertexBuffer(1, this.colorBuffer);
renderPass.draw(this.vertexCount);
renderPass.end();
this.device.queue.submit([commandEncoder.finish()]);
}
cleanup() {
;[this.vertexBuffer, this.colorBuffer, this.uniformBuffer].forEach(buffer => buffer.destroy());
}
}
return LineRenderer
}
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.
