45:["$","title",null,{"children":"Prompting only (WebGL) | Visionscarto | Observable"}] 4d:T2076,function globe() { const height = Math.min(width, 640); const dpr = window.devicePixelRatio || 1; const canvas = document.createElement("canvas"); canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; canvas.style.display = "block"; canvas.style.background = "#000"; canvas.style.cursor = "grab"; canvas.style.touchAction = "none"; const gl = canvas.getContext("webgl2", {antialias: true}); const projection = d3.geoOrthographic() .scale(height / 2.3) .translate([width / 2, height / 2]) .rotate([100, -30]) .precision(0.1); // --- shaders --- const vs = `#version 300 es in vec2 a; out vec2 vPx; uniform vec2 uSize; void main() { vPx = (a * 0.5 + 0.5) * uSize; vPx.y = uSize.y - vPx.y; gl_Position = vec4(a, 0.0, 1.0); }`; const fs = `#version 300 es precision highp float; in vec2 vPx; out vec4 color; uniform sampler2D uTex; uniform vec2 uCenter; // projection translate (px) uniform float uScale; // projection scale (px) uniform mat3 uRot; // view → geographic cartesian const float PI = 3.141592653589793; const float MAXLAT = 1.4844222297453324; // 85.0511° const vec3 HAZE = vec3(0.42, 0.68, 1.0); // atmospheric blue const float ATMO = 0.06; // atmosphere thickness (fraction of radius) // Outer haze: approximate optical depth of a thin shell seen beyond the limb float outerHaze(float r) { float R = 1.0 + ATMO; if (r >= R) return 0.0; float chord = sqrt(R * R - r * r); // path length through the shell float maxChord = sqrt(R * R - 1.0); float t = chord / maxChord; return pow(t, 1.6); } void main() { vec2 p = (vPx - uCenter) / uScale; p.y = -p.y; float r2 = dot(p, p); float r = sqrt(r2); if (r2 > 1.0) { float h = outerHaze(r); color = vec4(HAZE * h * 0.85, 1.0); return; } vec3 v = vec3(sqrt(1.0 - r2), p.x, p.y); vec3 o = uRot * v; float lon = atan(o.y, o.x); float lat = asin(clamp(o.z, -1.0, 1.0)); float cl = clamp(lat, -MAXLAT, MAXLAT); float u = (lon + PI) / (2.0 * PI); float w = (1.0 - log(tan(PI / 4.0 + cl / 2.0)) / PI) / 2.0; // seam-free gradients across the antimeridian float u2 = fract(u + 0.5); vec2 dx = vec2(dFdx(u), dFdx(w)), dy = vec2(dFdy(u), dFdy(w)); vec2 dx2 = vec2(dFdx(u2), dFdx(w)), dy2 = vec2(dFdy(u2), dFdy(w)); if (abs(dx2.x) + abs(dy2.x) < abs(dx.x) + abs(dy.x)) { dx = dx2; dy = dy2; } vec3 c = textureGrad(uTex, vec2(u, w), dx, dy).rgb; // Inner haze: path length through the atmosphere grows toward the limb float mu = v.x; // cos(view angle) float R = 1.0 + ATMO; float path = sqrt(R * R - r2) - mu; // length through shell above surface float path0 = R - 1.0; // path at disk center float depth = path / path0; float haze = 1.0 - exp(-0.10 * depth); // gentle overall veil haze = clamp(haze + 0.55 * pow(1.0 - mu, 3.0), 0.0, 0.9); // stronger near limb c = mix(c, HAZE, haze); // smooth antialiased edge into the outer haze float edge = clamp((1.0 - r) * uScale, 0.0, 1.0); color = vec4(mix(HAZE * 0.85, c, edge), 1.0); }`; function compile(type, src) { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; } const prog = gl.createProgram(); gl.attachShader(prog, compile(gl.VERTEX_SHADER, vs)); gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(prog)); gl.useProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW); const aLoc = gl.getAttribLocation(prog, "a"); gl.enableVertexAttribArray(aLoc); gl.vertexAttribPointer(aLoc, 2, gl.FLOAT, false, 0, 0); const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, tileMosaic); gl.generateMipmap(gl.TEXTURE_2D); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); const ext = gl.getExtension("EXT_texture_filter_anisotropic"); if (ext) gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, Math.min(8, gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT))); const uSize = gl.getUniformLocation(prog, "uSize"); const uCenter = gl.getUniformLocation(prog, "uCenter"); const uScale = gl.getUniformLocation(prog, "uScale"); const uRot = gl.getUniformLocation(prog, "uRot"); const cart = ([l, p]) => { l *= Math.PI / 180; p *= Math.PI / 180; return [Math.cos(p) * Math.cos(l), Math.cos(p) * Math.sin(l), Math.sin(p)]; }; function render() { // Rotation is linear in cartesian space: build matrix from inverse-rotated basis vectors const rot = d3.geoRotation(projection.rotate()); const toLL = ([x, y, z]) => [Math.atan2(y, x) * 180 / Math.PI, Math.asin(z) * 180 / Math.PI]; const c0 = cart(rot.invert(toLL([1, 0, 0]))); const c1 = cart(rot.invert(toLL([0, 1, 0]))); const c2 = cart(rot.invert(toLL([0, 0, 1]))); gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform2f(uSize, canvas.width, canvas.height); const [tx, ty] = projection.translate(); gl.uniform2f(uCenter, tx * dpr, ty * dpr); gl.uniform1f(uScale, projection.scale() * dpr); gl.uniformMatrix3fv(uRot, false, [...c0, ...c1, ...c2]); // column-major gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } // --- versor zooming (drag to rotate, scroll/pinch to zoom) --- function versorZoom(projection, {scale = projection.scale(), scaleExtent = [0.8, 12]} = {}) { let v0, q0, r0, a0, tl; const zoom = d3.zoom() .scaleExtent(scaleExtent.map((x) => x * scale)) .on("start", zoomstarted) .on("zoom", zoomed); function point(event, that) { const t = d3.pointers(event, that); if (t.length !== tl) { tl = t.length; if (tl > 1) a0 = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]); zoomstarted.call(that, event); } return tl > 1 ? [d3.mean(t, (p) => p[0]), d3.mean(t, (p) => p[1]), Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0])] : t[0]; } function zoomstarted(event) { v0 = versor.cartesian(projection.invert(point(event, this))); q0 = versor((r0 = projection.rotate())); } function zoomed(event) { projection.scale(event.transform.k); const pt = point(event, this); const v1 = versor.cartesian(projection.rotate(r0).invert(pt)); const delta = versor.delta(v0, v1); let q1 = versor.multiply(q0, delta); if (pt[2]) { const d = (pt[2] - a0) / 2; const s = -Math.sin(d); const c = Math.sign(Math.cos(d)); q1 = versor.multiply([Math.sqrt(1 - s * s), 0, 0, c * s], q1); } projection.rotate(versor.rotation(q1)); if (delta[0] < 0.7) zoomstarted.call(this, event); } return Object.assign( (selection) => selection.property("__zoom", d3.zoomIdentity.scale(projection.scale())).call(zoom), {on(type, ...options) { return options.length ? (zoom.on(type, ...options), this) : zoom.on(type); }} ); } let frame = null; const schedule = () => { if (!frame) frame = requestAnimationFrame(() => { frame = null; render(); }); }; d3.select(canvas) .call(versorZoom(projection).on("zoom.render", schedule)) .on("pointerdown.cursor", () => (canvas.style.cursor = "grabbing")) .on("pointerup.cursor pointerleave.cursor", () => (canvas.style.cursor = "grab")); invalidation.then(() => { if (frame) cancelAnimationFrame(frame); gl.getExtension("WEBGL_lose_context")?.loseContext(); }); render(); return canvas; }4e:[] 49:{"id":"dad997e0d82e622f","slug":"prompting-only-web-gl","title":"Prompting only (WebGL)","thumbnail":"9f2c83c8219d123eaeab7f521e95ec5f4bb9e741acfc7aef72e4e6bd232f99a1","access_level":"public","create_time":"$D2026-11-10T17:25:53.548Z","update_time":"$D2026-11-10T17:33:19.282Z","view_time":null,"first_public_time":"$D2026-11-10T17:32:41.292Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto","avatar_url":"https://avatars-next.observableusercontent.com/9946d22004b9d0eaf6a5bfda50b0a32ca1003656c403106c7b54f8dd5cf784b7","tier":"starter_2024","bio":"Maps — and other representations of the world.","followed_by_you":false,"follows_you":false},"version":41,"publish_version":41,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"bio":"Vocateur.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"958a492ccf138cc7","slug":"30daymapchallenge","title":"#30DayMapChallenge","owner":{"id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto"}},"type":"notebook","body":{"titling":"auto","title":"Prompting only (WebGL)","cells":[{"id":1,"value":"# Prompting only (WebGL)\n\n*Day 10. Prompting only.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"

Hey Observable, redo https://observablehq.com/@alexmgullen/prompting-only in WebGL, and use versor zooming.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"globe()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Drag to rotate (versor dragging), scroll or pinch to zoom. Imagery: [Esri World Imagery](https://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9) — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4d","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import versor from \"npm:versor\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// Stitch Esri World Imagery tiles at zoom 4 into a single 4096×4096 Web Mercator mosaic\nconst tileZoom = 4;\nconst tileMosaic = await (async () => {\n const n = 2 ** tileZoom, size = 256;\n const canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = n * size;\n const ctx = canvas.getContext(\"2d\");\n const jobs = [];\n for (let y = 0; y < n; ++y) {\n for (let x = 0; x < n; ++x) {\n jobs.push(new Promise((resolve) => {\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n img.onload = () => (ctx.drawImage(img, x * size, y * size, size, size), resolve(true));\n img.onerror = () => resolve(false);\n img.src = `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${tileZoom}/${y}/${x}`;\n }));\n }\n }\n const results = await Promise.all(jobs);\n canvas.loaded = results.filter(Boolean).length;\n return canvas;\n})();\nconst tilesLoaded = tileMosaic.loaded;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 44:null