2b:null 2c:["$","title",null,{"children":"WebGPU (scaled) points | David Kouřil | Observable"}] 31:T1355,{ let canvas = create_canvas({ width: w, height: h }); let context = canvas.getContext("webgpu"); let adapter = await navigator.gpu.requestAdapter(); let device = await adapter.requestDevice(); let format = navigator.gpu.getPreferredCanvasFormat(); context.configure({ device, format }); let [x_buffer, y_buffer] = data.map((arr) => { let buffer = device.createBuffer({ size: arr.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, mappedAtCreation: true }); new Float32Array(buffer.getMappedRange()).set(arr); buffer.unmap(); return buffer; }); let xylayout = device.createBindGroupLayout({ entries: [ { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } }, { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } } ] }); let uniforms = new Float32Array(50); let u_zoom = uniforms.subarray(0, 16); let u_window_scale = uniforms.subarray(16, 32); let u_untransform = uniforms.subarray(32, 48); let ubuffer = device.createBuffer({ size: uniforms.byteLength, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }); { let mats = window_transform(scales.x, scales.y, w, h); u_window_scale.set(mats[0]); u_untransform.set(mats[1]); } let ulayout = device.createBindGroupLayout({ entries: [ { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" } } ] }); let code = ` @group(0) @binding(0) var x_values : array; @group(0) @binding(1) var y_values : array; @group(1) @binding(0) var uni: Uniforms; struct Uniforms { zoom: mat4x4, window_scale: mat4x4, untransform: mat4x4, }; struct VertexOutput { @builtin(position) pos: vec4, @location(1) quad_position: vec2f, }; @vertex fn vert(@builtin(instance_index) instance_index: u32, @builtin(vertex_index) vertex_index: u32) -> VertexOutput { let x = x_values[instance_index]; let y = y_values[instance_index]; let t = uni.untransform * uni.zoom * uni.window_scale; // let t = uni.zoom; let k = uni.zoom[0][0]; let size = exp(log(k) * 0.5)/ 1000.0; let quad_pos = array( vec2f(0, 0), vec2f(1, 0), vec2f(0, 1), vec2f(0, 1), vec2f(1, 0), vec2f(1, 1), ); let qp = quad_pos[vertex_index] - 0.5; let xy = vec4(x, y, 1.0, 1.0) + vec4f(qp * size, 0.0, 0.0); let pos = t * xy; return VertexOutput(pos, qp); } const center: vec2 = vec2(0.0, 0.0); @fragment fn frag(input: VertexOutput) -> @location(0) vec4 { if (distance(input.quad_position, center) > 0.5) { discard; } let opacity = 0.5; return vec4(0.0, 0.0, 0.0, opacity); } `; let module = device.createShaderModule({ code }); let pipeline = device.createRenderPipeline({ layout: device.createPipelineLayout({ bindGroupLayouts: [xylayout, ulayout] }), vertex: { module, entryPoint: "vert", buffers: [] }, fragment: { module, entryPoint: "frag", targets: [ { format, blend: { color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" }, alpha: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" } } } ] }, primitive: { topology: "triangle-list" } }); let xygroup = device.createBindGroup({ layout: xylayout, entries: [ { binding: 0, resource: { buffer: x_buffer } }, { binding: 1, resource: { buffer: y_buffer } } ] }); let ugroup = device.createBindGroup({ layout: ulayout, entries: [{ binding: 0, resource: { buffer: ubuffer } }] }); function render() { let encoder = device.createCommandEncoder(); let pass = encoder.beginRenderPass({ colorAttachments: [ { clearValue: [1, 1, 1, 1], loadOp: "clear", storeOp: "store", view: context.getCurrentTexture().createView() } ] }); pass.setPipeline(pipeline); pass.setBindGroup(0, xygroup); pass.setBindGroup(1, ugroup); pass.draw(6, N); pass.end(); device.queue.submit([encoder.finish()]); } function zoomed({ k, x, y }) { let mat = [ [k, 0, 0, 0], [0, k, 0, 0], [0, 0, 1, 0], [x, y, 0, 1] ]; u_zoom.set(mat.flat()); device.queue.writeBuffer(ubuffer, 0, uniforms); render(); } d3.select(context.canvas).call( d3 .zoom() .scaleExtent([0.1, 1000]) .on("zoom", ({ transform }) => zoomed(transform)) ); zoomed(d3.zoomIdentity); return context.canvas; }32:T5c4,function window_transform(x_scale, y_scale, width, height) { // A function that creates the two matrices a webgl shader needs, in addition to the zoom state, // to stay aligned with canvas and d3 zoom. // width and height are svg parameters; x and y scales project from the data x and y into the // the webgl space. // Given two d3 scales in coordinate space, create two matrices that project from the original // space into [-1, 1] webgl space. // return the magnitude of a scale. let gap = (arr) => arr[1] - arr[0]; let x_mid = d3.mean(x_scale.domain()); let y_mid = d3.mean(y_scale.domain()); let xmulti = gap(x_scale.range()) / gap(x_scale.domain()); let ymulti = gap(y_scale.range()) / gap(y_scale.domain()); // translates from data space to scaled space. const m1 = [ [xmulti, 0, 0, 0], [0, ymulti, 0, 0], [0, 0, 1, 0], [ -xmulti * x_mid + d3.mean(x_scale.range()), -ymulti * y_mid + d3.mean(y_scale.range()), 0, 1 ] ]; // translate from scaled space to webgl space. // The '2' here is because webgl space runs from -1 to 1; the shift at the end is to // shift from [0, 2] to [-1, 1] const m2 = [ [2 / width, 0, 0, 0], // First column [0, -2 / height, 0, 0], // Second column [0, 0, 1, 0], // Third column (unchanged for z-axis in 2D transformations) [-1, 1, 0, 1] // Fourth column, with translations adjusted for WebGL space ]; return [m1.flat(), m2.flat()]; }33:Tb35,data = { let name = "Random"; // name = "Rössler attractor"; // name = "Nose-Hoover attractor"; switch (name) { case "Random": return [ Float32Array.from({ length: N }).map((_) => (Math.random() - 0.5) * 2), Float32Array.from({ length: N }).map((_) => (Math.random() - 0.5) * 2) ]; case "Rössler attractor": { let x = new Float32Array(N); let y = new Float32Array(N); let xn = 2.644838333129883, yn = 4.060488700866699, zn = 2.8982460498809814; let xn1, yn1, zn1; let a = 0.2; let b = 0.2; let c = 5.7; let dt = 0.006; for (var i = 0; i <= N; i++) { let dx = -yn - zn; let dy = xn + a * yn; let dz = b + zn * (xn - c); let xh = xn + 0.5 * dt * dx; let yh = yn + 0.5 * dt * dy; let zh = zn + 0.5 * dt * dz; dx = -yh - zh; dy = xh + a * yh; dz = b + zh * (xh - c); let xn1 = xn + dt * dx; let yn1 = yn + dt * dy; let zn1 = zn + dt * dz; x[i] = xn1; y[i] = yn1; xn = xn1; yn = yn1; zn = zn1; } return [x, y]; } case "Nose-Hoover attractor": { let x = new Float32Array(N); let y = new Float32Array(N); let xn = 2.644838333129883, yn = 4.060488700866699, zn = 2.8982460498809814; let xn1, yn1, zn1; let dt = 0.01; for (var i = 0; i <= N; i++) { let dx = yn; let dy = -xn + yn * zn; let dz = 1.5 - yn * yn; let xh = xn + 0.5 * dt * dx; let yh = yn + 0.5 * dt * dy; let zh = zn + 0.5 * dt * dz; dx = yh; dy = -xh + yh * zh; dz = 1.5 - yh * yh; let xn1 = xn + dt * dx; let yn1 = yn + dt * dy; let zn1 = zn + dt * dz; x[i] = xn1; y[i] = yn1; xn = xn1; yn = yn1; zn = zn1; } return [x, y]; } case "TSUCS 2 attractor": { let x = new Float32Array(N); let y = new Float32Array(N); let xn = 5, yn = 5, zn = 5; let xn1, yn1, zn1; let dt = 0.001; for (var i = 0; i <= N; i++) { let dx = 40.0 * (yn - xn) + 0.16 * xn * zn; let dy = 55.0 * xn - xn * zn + 20.0 * yn; let dz = 1.833 * zn + xn * yn - 0.65 * xn * xn; let xh = xn + 0.5 * dt * dx; let yh = yn + 0.5 * dt * dy; let zh = zn + 0.5 * dt * dz; dx = 40.0 * (yh - xh) + 0.16 * xh * zh; dy = 55.0 * xh - xh * zh + 20.0 * yh; dz = 1.833 * zh + xh * yh - 0.65 * xh * xh; let xn1 = xn + dt * dx; let yn1 = yn + dt * dy; let zn1 = zn + dt * dz; x[i] = xn1 * 0.1; y[i] = zn1 * 0.1; xn = xn1; yn = yn1; zn = zn1; } return [x, y]; } } }34:[] 2f:{"id":"d2300d15d3345d93","slug":null,"title":"WebGPU (scaled) points","thumbnail":"25c8bcf858db1950f7ddcf5a8f51d96afb2a9ee7d23640b9514a8c6bc5ad3706","access_level":"public","create_time":"$D2024-02-29T18:22:00.571Z","update_time":"$D2024-02-29T18:32:10.546Z","view_time":null,"first_public_time":"$D2024-02-29T18:22:00.571Z","has_unpublished_edits":null,"fork":{"id":"ebd528bff462e50f","slug":"webgpu-scaled-points","title":"WebGPU (scaled) points","owner":{"id":"eea54452b8f3877b","login":"manzt","name":"Trevor Manz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"fd04ada92aa3f63b","login":"david-kouril","name":"David Kouřil","avatar_url":"https://avatars-next.observableusercontent.com/4a0977c10ada6b71579ac91d692663ceef8251104d43c78a3d96b2f53bc3b66b","tier":"starter_2024","bio":"yah, thats me getting my hands dirty."},"version":1086,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8232059c96f2bee9","login":"david-kouril","name":"David Kouřil","avatar_url":"https://avatars-next.observableusercontent.com/4a0977c10ada6b71579ac91d692663ceef8251104d43c78a3d96b2f53bc3b66b","tier":null,"bio":"yah, thats me getting my hands dirty."}],"members":[{"type":"individual","id":"8232059c96f2bee9","login":"david-kouril","name":"David Kouřil","avatar_url":"https://avatars-next.observableusercontent.com/4a0977c10ada6b71579ac91d692663ceef8251104d43c78a3d96b2f53bc3b66b","tier":null,"role":"editor"},{"type":"team","id":"fd04ada92aa3f63b","login":"david-kouril","name":"David Kouřil","avatar_url":"https://avatars-next.observableusercontent.com/4a0977c10ada6b71579ac91d692663ceef8251104d43c78a3d96b2f53bc3b66b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"WebGPU (scaled) points","cells":[{"id":410,"value":"# WebGPU (scaled) points\n\nIn a [previous notebook](https://observablehq.com/@manzt/webgpu-points), I used the WebGPU `point-list` in the render pipeline. \n\nUnfortunately, I did not realize 1-pixel size points is all the WebGPU supports. With a zoomable canvas, this isn't very nice because we want points to resize as we zoom in and out. This notebook is an attempt to achieve the desired behavior with [instancing](https://sotrh.github.io/learn-wgpu/beginner/tutorial7-instancing/) (and for me to learn from WebGPU stuff).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":708,"value":"viewof N = Inputs.radio([10000, 100000, 100000, 1000000, 5000000, 10000000], {\n label: \"npoints\",\n value: 1000000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"function create_canvas({ width, height } = {}) {\n let dpr = window.devicePixelRatio || 1;\n let canvas = Object.assign(document.createElement(\"canvas\"), {\n width: width * dpr,\n height: height * dpr\n });\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"scales = {\n let square_box = d3.min([w, h]);\n let d = { x: data[0], y: data[1] };\n let scales = {};\n for (let [name, dim] of [\n [\"x\", w],\n [\"y\", h]\n ]) {\n let buffer = (dim - square_box) / 2;\n scales[name] = d3\n .scaleLinear()\n .domain(d3.extent(d[name]))\n .range([buffer, dim - buffer]);\n }\n return scales;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"d3 = import(\"https://esm.sh/d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"h = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"