21:null 22:["$","title",null,{"children":"Sharing a d3.zoom state between svg & webgl | David Mora | Observable"}] 27:T4b6,zoomBehavior = { // single, shared zoom state const zoom = d3 .zoom() .extent([ [0, 0], [w, h] ]) .scaleExtent([1, 500]) .on("zoom", zoomed); function zoomed() { const { transform } = d3.event; // (Just for display above the image.) state.transform = transform; // 2 different *drawing* functions. // SVG can just have the transform applied directly to the existing elements. d3.select(svg).selectAll("g").attr("transform", transform); // Regl clearing outside the rendering call. regl.clear({ color: [0, 0, 0, 0], depth: 1 }); renderer({ transform: transform }); // Apply the zoom transform to the other elements. // This problem ends up calling the zoom behavior on all events three times per tick; it would be safer // to manage a separate zoom behavior for each element. // d3.selectAll(".shared-zoom") // for context: each element is classed as "".shared-zoom" // .filter(function (d) { // // avoid recursing this call on the element that generated the call. // return d3.zoomTransform(this) != transform; // }) // .call(zoom.transform, transform); } return zoom; }28:T482,md` ### WebGL approach For webgl, the trick is that you need you need three separate 3x3 affine transformation matrices. (Although calling them affine is a little fancy; really, they do only scale and translate, but *not* rotation). 1. One that projects from the arbitrary data values into the (top-left oriented) coordinate space used by canvas and svg. 2. The 3x3 zoom matrix that can be derived from a d3 zoom state. This changes with zoom level. 3. A 3x3 matrix to project from svg/canvas coordinates into the -1, 1 space used by webgl. (Including a flip on the y axis, since webgl is centered on the bottom left.) This is the same across all zooms. Although there are three matrices passed to webgl, they can be multiplied by each other at the base level of the webgl function--only a single multiplication is required for each individual point, which is where things might get computationally expensive. The advantage of this is that you can easily overlay webgl elements on top of SVG or canvas ones, or vice versa. So if you want to use d3-annotate (svg only, last I checked) with a webgl visualization, you can do so at any level of zoom. `29:T7f0,renderer = { const [window_transformation_matrix, untransform_matrix] = window_transform(scales.x, scales.y, w, h).map(d => d.flat()) const parameters = { depth: { enable: false }, stencil: { enable: false }, frag: ` precision mediump float; varying vec4 fill; void main() { vec2 cxy = 2.0 * gl_PointCoord - 1.0; float r = dot(cxy, cxy); if (r > 1.0) discard; gl_FragColor = fill; } `, vert: ` precision mediump float; attribute vec2 position; // Base point size uniform float u_size; // The d3-scale factor. uniform float u_k; varying vec4 fill; // Transform from data space to the open window. uniform mat3 u_window_scale; // Transform from the open window to the d3-zoom. uniform mat3 u_zoom; uniform mat3 u_untransform; // We can bundle the three matrices together here for all shaders. mat3 from_coord_to_gl = u_window_scale * u_zoom * u_untransform; void main() { vec3 pos2d = vec3(position.x, position.y, 1.0) * from_coord_to_gl; gl_Position = vec4(pos2d, 1.0); // Smooth point size scaling. gl_PointSize = 4.0 * (exp(log(u_k)*0.5)); fill =vec4(0.3, 0.1, 0.9, 1.0); } `, attributes: { position: { buffer: regl_buffer, stride: 8, offset: 0 }, }, uniforms: { u_k: function(context, props) { return props.transform.k; }, u_window_scale: window_transformation_matrix, u_untransform: untransform_matrix, u_zoom: function(context, props) { return [ // This is how you build a transform matrix from d3 zoom. [props.transform.k, 0, props.transform.x], [0, props.transform.k, props.transform.y], [0, 0, 1], ].flat() }, u_size: 4 }, count: 300, primitive: "points" } const regl_call = regl(parameters) regl_call({transform: d3.zoomIdentity}) return regl_call }2a:T5d2,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. function gap(array) { // Return the magnitude of a scale. return array[1] - array[0] } let x_mid = d3.mean(x_scale.domain()) let y_mid = d3.mean(y_scale.domain()) const xmulti = gap(x_scale.range())/gap(x_scale.domain()); const ymulti = gap(y_scale.range())/gap(y_scale.domain()); // the xscale and yscale ranges may not be the full width or height. const aspect_ratio = width/height; // translates from data space to scaled space. const m1 = [ // transform by the scale; [xmulti, 0, -xmulti * x_mid + d3.mean(x_scale.range()) ], [0, ymulti, -ymulti * y_mid + d3.mean(y_scale.range()) ], [0, 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, -1], [0, - 2 / height, 1], [0, 0, 1] ] return [m1, m2] }2b:[] 25:{"id":"c36c7c244e168399","slug":"how-cute-svg-and-webgl-are-sharing-d3-zoom-state-together","title":"Sharing a d3.zoom state between svg & webgl","thumbnail":"8074f0312859c7855052366e30215b934721ba559e03618fb8a6320bd4f94342","access_level":"public","create_time":"$D2022-11-10T20:48:21.247Z","update_time":"$D2022-11-11T00:25:59.233Z","view_time":null,"first_public_time":"$D2022-11-11T00:17:43.429Z","has_unpublished_edits":null,"fork":{"id":"be4320f101f1023f","slug":"sharing-a-single-zoom-state-between-svg-canvas-and-webgl","title":"Sharing a single d3.zoom state between svg, canvas, and webgl","owner":{"id":"18bbeceb36c8f564","login":"bmschmidt","name":"Benjamin Schmidt"}},"stars":1,"starred":false,"owner":{"type":"team","id":"ca5fdab65538f148","login":"davidnmora","name":"David Mora","avatar_url":"https://avatars-next.observableusercontent.com/05e764a7aea9b9b56f7aeb269af5ff1f9e1b461105f5f05fd7bd2e42e84bb04a","tier":"starter_2024","bio":"Passionate about viz & systems thinking. Stanford CS 2017"},"version":763,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd1e7381399c13b3","login":"davidnmora","name":"David Mora","avatar_url":"https://avatars-next.observableusercontent.com/05e764a7aea9b9b56f7aeb269af5ff1f9e1b461105f5f05fd7bd2e42e84bb04a","tier":null,"bio":"Passionate about viz & systems thinking. Stanford CS 2017"}],"members":[{"type":"individual","id":"cd1e7381399c13b3","login":"davidnmora","name":"David Mora","avatar_url":"https://avatars-next.observableusercontent.com/05e764a7aea9b9b56f7aeb269af5ff1f9e1b461105f5f05fd7bd2e42e84bb04a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sharing a d3.zoom state between svg & webgl","cells":[{"id":0,"value":"md`# Sharing a d3.zoom state between svg & webgl\n\nBelow you can see 2 the same viz drawn in black/blue using SVG/Webgl layered on top of each other.\n\nZoom/panning adjusts both, despite the fact transformations are being applied in a SVG/Webgl specific ways. \n\nBasically, we've used a shared d3.zoom state to update both.\n\nSee the [original notebook](https://observablehq.com/@bmschmidt/sharing-a-single-zoom-state-between-svg-canvas-and-webgl) for what they look like when not layered on top of each other.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"{\n while (true) {\n yield md`The current zoom transform is \\`${JSON.stringify(state.transform)}\\`` \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"{\n return html`\n\n

SVG (in black), Webgl (in blue)

\n\n

\n ${svg}\n

\n ${glcanv}\n

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"md`\n\n## Basic image settings\n\nSet width and height so that they can sit next to each other; height is different than width to ensure this works even when the webgl coordinate system is warped.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"h = w * 0.8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"md`\nThe strategy for building the webgl matrices is to use two d3 scales (x and y) as well as width and height.\n\nI don't simply pull width and height out of the scales because they are clipped to make x and y use the same resolution.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"md`# Setting up a shared Zoom Behavior between SVG & Webgl 🧑‍🤝‍🧑\n\n## TLDR: 1. create a d3 zoom object 2. when a zoom \\`event\\` gets triggered, update SVG/Webgl using that event's \\`transform\\`\n\nThese are the functions for managing a single shared zoom state. A zoom on *any* element updates the underlying zoom elements (stored in \\`node.__zoom\\` on *all* elements, so that you can switch your cursor among them).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$27","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"## Apply the same zoom context to each element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"zoomBehavior(d3.selectAll(\".shared-zoom\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"$28","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md`## REGL state.\n\nregl makes it easy to simply write a shader to implement the matrix transforms without the confusing overhead of imagining a 'camera' flying around in space, but also without writing every bit of webgl code directly.\n\nEach draw call takes the current transform as an argument; the props accessor for regl then turns this into a matrix passed to the shaders as a uniform.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$29","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"md`\n\n## Create REGL buffers\nThe buffer creation in regl is simple: just x, y for each point on the raw (i.e., unscaled) data.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"regl_buffer = regl.buffer(raw_data.map(d => [d.x, d.y]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"md`\n## Magic window transforms for webgl and d3-zoom\n\nThis is the bit that I actually wrote this notebook to work out: a function that consumes x and y scales, figure width and figure height, and returns two of the three matrices needed to adjust a d3-zoom transform state.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$2a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"regl = wrapREGL(glcanv);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"// Hide the transform updates from observable for printing. \nstate = new Object()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"md`## Create the webgl canvas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"glcanv = {\n const canvas= d3.create(\"canvas\") .attr(\"width\", w).attr(\"height\", h).classed(\"shared-zoom\", true).attr(\"id\", \"glcanv\")\n return canvas.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`# SVG creation\n\nThe SVG is incredibly easy to set up and render; it's also the least performant. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"svg = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, w, h])\n .attr(\"width\", w)\n .attr(\"height\", h)\n .attr(\"id\", \"svg-layer\")\n .classed(\"shared-zoom\", true);\n\n const g = svg.append(\"g\");\n\n g.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d) => d.x)\n .attr(\"cy\", (d) => d.y)\n .attr(\"r\", 2);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md`\n# Scales\n\nThe data is in an arbitrary space: D3 scales map it into the window coordinate space.\n\nIn this case, it is also important to use a shared coordinate system.\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"scales = {\n \n const square_box = d3.min([w, h])\n \n const scales = {};\n \n for (let [name, dim] of [['x', w], ['y', h]]) {\n const buffer = (dim - square_box)/2\n scales[name] = \n d3.scaleLinear()\n .domain(d3.extent(raw_data.map(d => d[name])))\n .range([buffer, dim-buffer])\n }\n \n return scales\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"data = raw_data.map( (d, i) => {return {x: scales.x(d.x), y: scales.y(d.y), i:i}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`# Toy data\n\nToy data: from https://observablehq.com/@fil/phyllotaxis-explained.\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import { f } from \"@fil/phyllotaxis-explained\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"raw_data = {\n const d = [] \n for (let i = 0; i < 300; i++) {\n const [x, y] = f(i)\n d.push({x: x + 10, y: y + 10, i})\n }\n return d\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"wrapREGL = require('regl')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2b","stdlib":"1"}} 26:"$25:body"