2c:null 2d:["$","title",null,{"children":"Sharing a single d3.zoom state between svg, canvas, and webgl | Benjamin Schmidt | Observable"}] 32:T4c4,md` For canvas and svg, I have used strategies borrow from Mike Bostock's zoom notebooks. 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. `33:T48e,zoomBehavior = { 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 // Three different *drawing* functions. // SVG can just have the transform applied directly to the existing elements. d3.select(svg).selectAll("g").attr("transform", transform) // Canvas has the transform applied inside the draw draw_canvas(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") .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 }34: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 }35: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] }36:[] 30:{"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","thumbnail":"69221b4744986ce749149fb510974a9ac6c2dcb6bba79fadf3faf253a471e9ae","access_level":"public","create_time":"$D2020-03-12T03:05:02.756Z","update_time":"$D2021-02-09T17:15:13.716Z","view_time":null,"first_public_time":"$D2020-03-23T18:40:46.363Z","fork":false,"stars":28,"starred":false,"owner":{"type":"team","id":"18bbeceb36c8f564","login":"bmschmidt","name":"Benjamin Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/addc2adb5ec95cc72a64820e4a08488bad5d48d95a895eef85a45b136ed66792","tier":"starter_2024"},"version":678,"publish_version":678,"role":null,"authored":false,"authors":[{"type":"individual","id":"33354ca265b21f01","login":"bmschmidt","name":"Benjamin Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/addc2adb5ec95cc72a64820e4a08488bad5d48d95a895eef85a45b136ed66792","tier":null}],"members":[{"type":"individual","id":"33354ca265b21f01","login":"bmschmidt","name":"Benjamin Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/addc2adb5ec95cc72a64820e4a08488bad5d48d95a895eef85a45b136ed66792","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":12,"collection":{"id":"129de12642a17c31","slug":"deep-scatterplots","title":"Deep Scatterplots","owner":{"id":"18bbeceb36c8f564","login":"bmschmidt","name":"Benjamin Schmidt"}},"type":"notebook","body":{"title":"Sharing a single d3.zoom state between svg, canvas, and webgl","cells":[{"id":0,"value":"md`# Sharing a single d3.zoom state between svg, canvas, and webgl\n\nI find it confusing to align d3 zoom states between svg, canvas 2d, and webgl contexts. This notebook shows one way to keep the three states aligned with each other that respects the basic ideas of d3-zoom and so--for instance--allows the use of d3 zoom transitions.\n\nAlthough I have three different windows below, the primary use of this behavior is actually to have multiple stacked elements on top of each other using 'position:fixed' or 'position:absolute'.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":4,"value":"{\n const trio = DOM.element(\"div\")\n return html`\n

Canvas, semantic zoom

SVG, geometric zoom

Webgl, balanced zoom

\n\n\n${canvas2d}${svg}${glcanv}

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":38,"value":"h = w*1.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"w = width/3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":617,"value":"md`# Zoom Behavior\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"},{"id":118,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"d3.selectAll(\".shared-zoom\").call(zoomBehavior)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":202,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":203,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"regl = wrapREGL(glcanv);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":657,"value":"md`## Create the webgl canvas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":47,"value":"svg = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, w, h])\n .attr(\"width\", w)\n .attr(\"id\", \"svg-layer\")\n .classed(\"shared-zoom\", true)\n .attr(\"height\", h);\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"},{"id":599,"value":"md`# Two-d canvas contexts\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"canvas2d = {\n const canvas = d3.create(\"canvas\").attr(\"width\", w).attr(\"height\", h).attr(\"id\", \"twod\").classed(\"shared-zoom\", true)\n return canvas.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"{\n // initial draw.\n draw_canvas(d3.zoomIdentity)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"draw_canvas = function(transform) {\n\n // This canvas approach is @fil's.\n const {x, y, k} = transform; \n \n // Would be wiser to get the context outside of this function?\n const context = canvas2d.getContext(\"2d\")\n context.clearRect(0, 0, w, h)\n\n // Point radius is variable here.\n const path = d3\n .geoPath()\n .context(context)\n .pointRadius(2 / k);\n \n context.save();\n context.translate(x, y);\n context.scale(k, k)\n for (let d of data) {\n context.beginPath(),\n path({ type: \"Point\", coordinates: [d.x, d.y] }),\n context.fill();\n }\n context.restore();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"id":14,"value":"import { f } from \"@fil/phyllotaxis-explained\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":198,"value":"wrapREGL = require('regl')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"