31:T5fa,viewof glyphIdx = { const min = 0, max = d3.sum(glyphSets, x => x.length) - 1; let value = 0; const number = html``; const range = html``; const random = html``; const form = html``; number.addEventListener("input", e => { value = range.valueAsNumber = e.target.valueAsNumber; }); range.addEventListener("input", e => { value = number.valueAsNumber = e.target.valueAsNumber; }); random.addEventListener("click", e => { value = Math.round(min + Math.random() * (max - min)); range.valueAsNumber = value; number.valueAsNumber = value; form.dispatchEvent(new CustomEvent("input")); }); Object.defineProperty(form, "value", { get() { return value; }, set(v) { value = v; number.value = value; range.valueAsNumber = value; form.dispatchEvent(new CustomEvent("input")); } }); return form; }32:Tc4c,md`### 1. Finding latent features with Autoencoder The first step was to render the glyphs as 64x64 images, then train an autoencoder with [Perceptual Similarity](https://github.com/richzhang/PerceptualSimilarity) loss. Here is the neural network architecture: ~~~ ============================================================================== Layer (type:depth-idx) Output Shape Param # ============================================================================== Autoencoder -- -- ├─Encoder: 1-1 [2, 128] -- │ └─Sequential: 2-1 [2, 128, 1, 1] -- │ │ └─Conv2d: 3-1 [2, 32, 64, 64] 320 │ │ └─BatchNorm2d: 3-2 [2, 32, 64, 64] 64 │ │ └─ReLU: 3-3 [2, 32, 64, 64] -- │ │ └─EncoderBlock: 3-4 [2, 32, 32, 32] 53,728 │ │ └─EncoderBlock: 3-5 [2, 64, 16, 16] 70,208 │ │ └─EncoderBlock: 3-6 [2, 128, 8, 8] 279,680 │ │ └─EncoderBlock: 3-7 [2, 256, 4, 4] 1,116,416 │ │ └─EncoderBlock: 3-8 [2, 128, 1, 1] 2,887,040 ├─Decoder: 1-2 [2, 1, 64, 64] -- │ └─Sequential: 2-2 [2, 128] -- │ │ └─Linear: 3-9 [2, 128] 16,512 │ │ └─BatchNorm1d: 3-10 [2, 128] 256 │ │ └─ReLU: 3-11 [2, 128] -- │ └─Sequential: 2-3 [2, 1, 64, 64] -- │ │ └─DecoderBlock: 3-12 [2, 256, 4, 4] 2,887,424 │ │ └─DecoderBlock: 3-13 [2, 128, 8, 8] 1,116,032 │ │ └─DecoderBlock: 3-14 [2, 64, 16, 16] 279,488 │ │ └─DecoderBlock: 3-15 [2, 32, 32, 32] 70,112 │ │ └─DecoderBlock: 3-16 [2, 32, 64, 64] 53,728 │ │ └─Conv2d: 3-17 [2, 1, 64, 64] 289 │ │ └─Sigmoid: 3-18 [2, 1, 64, 64] -- ============================================================================== Total params: 8,831,297 Trainable params: 8,831,297 Non-trainable params: 0 Total mult-adds (G): 9.11 ============================================================================== ~~~ The network was trained for 300 epochs, here are the stats of last 30 epochs ${html`

`} ${html`

Comparison of original data and autoencoder reconstructions.

`}`33:T485,md`### 4. Render WebGL2 Vector Fonts With Slug Algorithm The [Slug Algorithm](http://jcgt.org/published/0006/02/02/) is the state of art GPU multi-resolutions vector font rendering technique. The general idea is to split the em unit into 16 vectical and horizontal bands, and for each pixel we can just check the glyph curves intersecting the corresponding bands. ${html`

Splitting em unit into 16 vertical and horizontal bands

`} ### 5. Compressing Assets for the Web The final challenge is that there are total 64,033 valid glyphs, which has 64MB curves data. To make it more efficient for the web, we can split them into 4 glyph sets, and compress each with [Zstandard](https://facebook.github.io/zstd/). I compiled a simple [WASM version of Zstandard](https://www.npmjs.com/package/zstd-wasm) with [Emscripten](https://emscripten.org/), which just takes 19kb transfer after GZIP. The compression of glyph sets at level 22 saves another 30% spaces, and we can download and decode them in parallel with Web Workers. `34:T1159,makeSlug = { const source = ` const getCurves = (data, glyph) => { const { offset, num_curves } = glyph; const res = []; let j = offset; for (let i = 0; i < num_curves; i++) { let p1 = [data[j + 0], data[j + 1]]; let p2 = [data[j + 2], data[j + 3]]; let p3 = [data[j + 4], data[j + 5]]; let first = j == offset; if (p2[0] == 1 && p2[1] == 1) { first = true; j += 4; p1 = [data[j + 0], data[j + 1]]; p2 = [data[j + 2], data[j + 3]]; p3 = [data[j + 4], data[j + 5]]; } res.push({ p1, p2, p3, first }); j += 4; } return res; }; const maxP = (c, i) => Math.max(c.p1[i], c.p2[i], c.p3[i]); const minP = (c, i) => Math.min(c.p1[i], c.p2[i], c.p3[i]); const compareCurve = (curves, k) => (i, j) => { const xi = maxP(curves[i], k), xj = maxP(curves[j], k); if (xi == xj) return i < j ? -1 : 1; else return xi < xj ? 1 : -1; }; const range = n => Array.from({ length: n }, (_, i) => i); let curvesData = [], curveCoords = [], bands = []; let data, texWidth, numBands; self.addEventListener("message", e => { const { type } = e.data; if (type == "init") { data = e.data.data; texWidth = e.data.texWidth; numBands = e.data.numBands; self.postMessage({ type: "init" }); } else if (type == "update") { const glyph = e.data.glyph; const curves = getCurves(data, glyph); const coords = []; for (const { p1, p2, p3, first } of curves) { if (first && curvesData.length % 4 != 0) { const toAdd = 4 - curvesData.length % 4; for (let i = 0; i < toAdd; i++) curvesData.push(1); } const newRow = Math.floor(curvesData.length / 4) % texWidth == texWidth - 1; if (newRow) { const toAdd = 8 - curvesData.length % 4; for (let i = 0; i < toAdd; i++) curvesData.push(1); } const n = Math.floor(curvesData.length / 4); coords.push([n % texWidth, Math.floor(n / texWidth)]); if (first || newRow) curvesData.push(...p1); curvesData.push(...p2, ...p3); } const indicesRL = range(curves.length).sort(compareCurve(curves, 0)); for (let b = 0; b < numBands; b++) { const minY = b / numBands, maxY = (b + 1) / numBands, offset = curveCoords.length; let cnt = 0 for (const i of indicesRL) { const mnY = minP(curves[i], 1), mxY = maxP(curves[i], 1); if (mnY > maxY || mxY < minY || mxY - mnY < 1e-5) continue; cnt++; curveCoords.push(coords[i]); } bands.push([cnt, offset]); } const indicesTB = range(curves.length).sort(compareCurve(curves, 1)); for (let b = 0; b < numBands; b++) { const minX = b / numBands, maxX = (b + 1) / numBands, offset = curveCoords.length; let cnt = 0 for (const i of indicesTB) { const mnX = minP(curves[i], 0), mxX = maxP(curves[i], 0); if (mnX > maxX || mxX < minX || mxX - mnX < 1e-5) continue; cnt++; curveCoords.push(coords[i]); } bands.push([cnt, offset]); } self.postMessage({ type: "update" }); } else if (type == "done") { curvesData = new Float32Array(curvesData.flat(1)); curveCoordsData = new Float32Array(curveCoords.flat(1)); bandsData = new Float32Array(bands.flat(1)); self.postMessage({ type: "done", curvesData, curveCoordsData, bandsData }, [curvesData.buffer, curveCoordsData.buffer, bandsData.buffer]); } }); `; return (data, glyphs, texWidth = 4096, numBands = 16, progress = null) => { return new Promise(resolve => { const worker = rs.inlineWorker(source); let i = 0, n = glyphs.length; worker.addEventListener("message", e => { const { type } = e.data; if (type == "init") { worker.postMessage({ type: "update", glyph: glyphs[i++] }); } else if (type == "update") { if (i == n) { worker.postMessage({ type: "done" }); } else { worker.postMessage({ type: "update", glyph: glyphs[i++] }); progress && progress(i, n); } } else if (type == "done") { worker.terminate(); const { curvesData, curveCoordsData, bandsData } = e.data; resolve({ curvesData, curveCoordsData, bandsData, texWidth, numBands, glyphs }); } }); worker.postMessage({ type: "init", texWidth, numBands, data }, [data.buffer]); }); }; }35:T96b,class Picking { constructor(embedding) { this.model = webgl.compileModel(gl, { attribs: { position: { data: embedding.position, size: 3 }, grid: { data: embedding.grid, size: 2 }, index: { data: new Float32Array(d3.range(embedding.index.length)), size: 1 }, id: { data: new Float32Array(Array.from(embedding.index, ID.encode).flat(1)) } }, num: embedding.position.length / 3, mode: gl.POINTS, uniforms: {}, shader: webgl.defShader(gl, { vs: ` void main() { v_index = index; v_id = id; vec3 p = mix(position, vec3(grid, 0.0), t); vec4 pos = view * model * vec4(p, 1.0); gl_Position = proj * pos; gl_PointSize = max(pointSize / -pos.z, 1.0); }`, fs: ` void main() { fragColor = vec4(v_id, 0.0); }`, declPrefixes: { v: "v_" }, attribs: { position: "vec3", grid: "vec2", index: "float", id: "vec3" }, varying: { index: "float", id: "vec3", }, uniforms: { model: ["mat4", m.identity44([])], view: "mat4", proj: "mat4", pointSize: ['float', 20.6], t: ["float", 0], }, state: { depth: true, cull: true, blend: false, blendFn: webgl.BLEND_NORMAL } }) }); this.fbo = webgl.defFBO(gl, { tex: [ webgl.defTexture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, premultiply: true, image: null }), ], depth: webgl.defRBO(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight }) }); Object.defineProperties(this, { _buf: { value: new Uint8Array(4) }, }); } pick(x, y) { this.fbo.bind(); gl.readBuffer(gl.COLOR_ATTACHMENT0); gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, this._buf); this.fbo.unbind(); const id = ID.decode(this._buf); return id != 0xffffff ? id : undefined; } draw(camera, t) { this.fbo.bind(); gl.clearColor(1.0, 1.0, 1.0, 1); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); this.model.uniforms.view = camera.view; this.model.uniforms.proj = camera.proj; this.model.uniforms.t = t; webgl.draw(this.model); this.fbo.unbind(); } }36:Td55,class Atlas { constructor(embedding, font) { this.model = webgl.compileModel(gl, { attribs: { position: { data: embedding.position, size: 3 }, grid: { data: embedding.grid, size: 2 }, index: { data: new Float32Array(d3.range(font.glyphs.length)), size: 1 }, id: { data: new Float32Array(Array.from(embedding.index, ID.encode).flat(1)) } }, num: embedding.position.length / 3, mode: gl.POINTS, uniforms: {}, shader: webgl.defShader(gl, { vs: ` void main() { v_index = index; v_id = id; vec3 p = mix(position, vec3(grid, 0.0), t); vec4 pos = view * model * vec4(p, 1.0); gl_Position = proj * pos; v_size = max(pointSize / -pos.z, 1.0); gl_PointSize = v_size; }`, fs: ` ${moddiv} ${tangentAt} ${gradAt} ${locAt} ${getRootCode} ${traceRay} ${getCurveCoord} ${traceRayBandH} ${traceRayBandV} ${aastep} ${frame} ${norm} void main() { vec2 uv = vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y); vec2 pixelsPerEm = 1.0 / fwidth(uv); float bandIdx = v_index * bandsCount * 2.0; ivec2 bandCoord = ivec2(moddiv(bandIdx, bandsTexWidth)); vec2 bandOffset = vec2(uv * bandsCount); float t0 = clamp(norm(v_size, 1.0, 7.0),0.0,1.0); vec2 hband = texelFetch(bandsTex, bandCoord + ivec2(bandOffset.y, 0), 0).xy; hband.x *= t0; vec2 resH = traceRayBandH(ivec2(hband), pixelsPerEm.x, uv); vec2 vband = texelFetch(bandsTex, bandCoord + ivec2(bandsCount + bandOffset.x, 0), 0).xy; vband.x *= t0; vec2 resV = traceRayBandV(ivec2(vband), pixelsPerEm.y, uv); float r = resV.y / (resH.y + resV.y + 1e-6); float alpha = mix(resH.x, resV.x, r); float col = mix(1.0, 0.15, alpha); float t = clamp(norm(v_size, 1.0, 100.0),0.0,1.0); float ft = frame(uv, t); col = mix(0.2, col, ft); if (selected != vec3(0.0) && distance(selected, v_id) < 1e-3) col = mix(1.0, 0.0, 1.0 - alpha); if (hover != vec3(0.0) && distance(hover, v_id) < 1e-3) col = mix(1.0, 0.2, 1.0 - alpha); fragColor = vec4(vec3(col), 1.0); }`, declPrefixes: { v: "v_" }, attribs: { position: "vec3", grid: "vec2", index: "float", id: "vec3" }, varying: { index: "float", size: "float", id: "vec3" }, uniforms: { model: ["mat4", m.identity44([])], view: "mat4", proj: "mat4", pointSize: ['float', 20.6], t: ["float", 0], hover: 'vec3', selected: 'vec3', bandsCount: ["float", font.numBands], bandsTexWidth: ["float", font.bandsTexWidth], curveCoordsTexWidth: ["float", font.curveCoordsTexWidth], bandsTex: ["sampler2D", 0], curveOffsetTex: ["sampler2D", 1], curvesTex: ["sampler2D", 2], }, state: { depth: true, cull: true, blend: false, blendFn: webgl.BLEND_NORMAL } }), textures: [font.textures.bandsTex, font.textures.curveCoordsTex, font.textures.curvesTex] }); } draw(camera, t, hover, selected) { this.model.uniforms.t = t; this.model.uniforms.view = camera.view; this.model.uniforms.proj = camera.proj; this.model.uniforms.hover = ID.encode(hover); this.model.uniforms.selected = ID.encode(selected); webgl.draw(this.model); } }37:T5ce,Font = { const padTo = (source, width, depth = 4, val = 0) => { const m = source.length; const line = width * depth const n = (line - source.length % line) % line; const ret = new source.constructor(m + n); ret.fill(val); ret.set(source); return ret; }; return class { constructor(slug, { curveCoordsTexWidth, bandsTexWidth }) { const curvesData = padTo(slug.curvesData, slug.texWidth, 4); const curveCoordsData = padTo(slug.curveCoordsData, curveCoordsTexWidth, 2); const bandsData = padTo(slug.bandsData, bandsTexWidth, 2); this.textures = { curvesTex: webgl.defTextureFloat(gl, curvesData, slug.texWidth, curvesData.length / slug.texWidth / 4), curveCoordsTex: webgl.defTextureFloat(gl, new Float32Array(curveCoordsData), curveCoordsTexWidth, Math.ceil(curveCoordsData.length / curveCoordsTexWidth / 2), webgl.TextureFormat.RG32F), bandsTex: webgl.defTextureFloat(gl, new Float32Array(bandsData), bandsTexWidth, Math.ceil(bandsData.length / bandsTexWidth / 2), webgl.TextureFormat.RG32F), }; this.curveCoordsTexWidth = curveCoordsTexWidth; this.bandsTexWidth = bandsTexWidth; this.numBands = slug.numBands; this.glyphs = slug.glyphs; } }; }38:T4fc,axis = new class { constructor(size = 100) { this.model = webgl.compileModel(gl, { attribs: { position: { data: new Float32Array([ 0, 0, 0, 1, 0, 0, // x 0, 0, 0, 0, 1, 0, // y 0, 0, 0, 0, 0, 1 // z ]) }, color: { data: new Float32Array([ 1, 0, 0, 1, 0, 0, // r 0, 1, 0, 0, 1, 0, // g 0, 0, 1, 0, 0, 1, // b ]), size: 3 } }, mode: webgl.DrawMode.LINES, num: 6, uniforms: {}, shader: webgl.defShader(gl, { vs: ` void main() { v_color = color; gl_Position = proj * view * model * vec4(position, 1.0); }`, fs: ` void main() { fragColor = vec4(v_color, 1.0); }`, declPrefixes: { v: "v_" }, attribs: { position: 'vec3', color: 'vec3' }, varying: { color: "vec3", }, uniforms: { model: ["mat4", m.scale44([], size)], proj: "mat4", view: "mat4", }, state: { depth: true } }) }); } draw(camera) { this.model.uniforms.view = camera.view; this.model.uniforms.proj = camera.proj; webgl.draw(this.model); } }39:T644,viewof camera = new class extends View { constructor() { super(); this.cam = new Camera({ viewport: [gl.drawingBufferWidth, gl.drawingBufferHeight], eye: [0, 0, 0.01], near: 0.01, far: 200 }); Object.defineProperties(this, { _locked: { value: false, writable: true } }); } orbitStart(x, y) { if (this._locked) return; this.cam.orbitStart(x, y); } orbitUpdate(x, y) { if (this._locked) return; this.cam.orbitUpdate(x, y); this.notify(); } panStart(x, y) { if (this._locked) return; this.cam.panStart(x, y); } panUpdate(x, y) { if (this._locked) return; this.cam.panUpdate(x, y); this.notify(); } zoom(delta, min, max) { if (this._locked) return; this.cam.zoom(delta, min, max); this.notify(); } panZoom(x, y, delta, min, max) { if (this._locked) return; this.cam.panZoom(x, y, delta, min, max); this.notify(); } goto({ eye = null, target = null, up = null }, speed = 0.08, eps = 1e-5) { this.cancel && this.cancel(); const eye0 = v.copy(this.cam.eye); const target0 = v.copy(this.cam.target); const up0 = v.copy(this.cam.up); this._locked = true; this.cancel = raf(tween(t => { if (eye) this.cam.eye = v.mixN(this.cam.eye, eye0, eye, t); if (target) this.cam.target = v.mixN(this.cam.target, target0, target, t); if (up) this.cam.up = v.mixN(this.cam.up, up0, up, t); this.notify(); }, speed, eps), () => { this._locked = false; }); } get value() { return this.cam; } }3a:T10b2,class Camera { constructor(opts) { const { viewport, eye, target = v.ZERO3, up = v.Y3, fov = 45, near = 0.01, far = 50, } = opts; this.proj = m.perspective([], fov, viewport[0] / viewport[1], near, far); this.tanFov = Math.tan(fov * math.DEG2RAD / 2); Object.defineProperties(this, { _viewport: { value: viewport, writable: true }, _radius: { value: Math.min(...viewport), writable: true }, _center: { value: v.mulN([], viewport, 0.5), writable: true }, _eye: { value: eye, writable: true }, _up0: { value: v.copy(up), writable: true }, _target: { value: v.copy(target), writable: true }, _up: { value: [] }, _viewDir: { value: [] }, _down: { value: [] }, _delta: { value: [] }, _side: { value: [] }, _axis: { value: [] }, _vd: { value: [] }, _rot: { value: [] }, _view: { value: m.lookAt([], eye, target, up) }, _grabEye: { value: [] }, _grabTarget: { value: [] }, _dirty: { value: true, writable: true } }); } _spherePos(out, x, y) { v.divN3(null, v.setC3(out, x - this._center[0], y - this._center[1], 0), this._radius); const mag = v.magSq3(out); return mag > 1.0 ? v.normalize(null, out) : (out[2] = Math.sqrt(1.0 - mag), out); } get eye() { return this._eye; } set eye(val) { this._eye = val; this._dirty = true; return this; } get target() { return this._target; } set target(val) { this._target = val; this._dirty = true; return this; } get up() { return this._up0; } set up(val) { this._up0 = val; this._dirty = true; return this; } get view() { if (!this._dirty) return this._view; this._dirty = false; return m.lookAt(this._view, this.eye, this.target, this.up); } orbitStart(x, y) { this._spherePos(this._down, x, y); v.set3(this._up, this.up); v.sub3(this._viewDir, this.eye, this.target); return this; } orbitUpdate(x, y, speed = 5) { const [dx, dy] = v.sub3(null, this._spherePos(this._delta, x, y), this._down); v.cross3(this._side, this._up, this._viewDir); v.normalize(null, this._side, dx); v.mulN3(this._axis, this._up, -dy); v.add3(null, this._axis, this._side); v.normalize(null, v.cross3(null, this._axis, this._viewDir)); m.rotationAroundAxis33(this._rot, this._axis, v.magSq3(this._delta) * speed); m.mulV33(this.up, this._rot, this._up); v.add3(this.eye, this.target, m.mulV33(this._vd, this._rot, this._viewDir)); this._dirty = true; return this; } panStart(x, y) { v.setC2(this._down, x, y); v.set3(this._grabEye, this.eye); v.set3(this._grabTarget, this.target); return this; } panUpdate(x, y) { const [dx, dy] = v.submN2(null, [x, y], this._down, 2 / this._radius); const viewDir = v.sub3(this._vd, this.target, this.eye); const dist = v.mag(viewDir) * this.tanFov; v.normalize(null, viewDir); const side = v.normalize(null, v.cross3(this._side, this.up, viewDir), dist * dx); const up = v.normalize(this._up, this.up, dist * dy); v.add3(null, v.add3(this.eye, this._grabEye, up), side); v.add3(null, v.add3(this.target, this._grabTarget, up), side); this._dirty = true; return this; } zoom(delta, min = 0.1, max = 10.0) { v.sub3(this._vd, this.target, this.eye); const mag = math.clamp(Math.pow(Math.E, delta) * v.mag(this._vd), min, max); v.sub3(this.eye, this.target, v.normalize(null, this._vd, mag)); this._dirty = true; return this; } panZoom(x, y, delta, min, max) { const d = v.submN2(null, [x, y], this._center, -2 * this.tanFov / this._radius); const a0 = v.mag(v.sub3(this._vd, this.target, this.eye)); this.zoom(delta, min, max); const viewDir = v.sub3(this._vd, this.target, this.eye); const [dx, dy] = v.mulN2(null, d, a0 - v.mag(viewDir)); v.normalize(null, viewDir); const side = v.normalize(null, v.cross3(this._side, this.up, viewDir), dx); const up = v.normalize(this._up, this.up, dy); v.add3(null, v.add3(null, this.target, up), side); v.add3(null, v.add3(null, this.eye, up), side); this._dirty = true; return this; } }3b:T526,loadingProgress = () => { const elm = d3.select(html`

glyph set 1: waiting...

glyph set 2: waiting...

glyph set 3: waiting...

glyph set 4: waiting...

`); const kb = x => x / 1024 | 0; const setup = name => { const el = elm.select(`#${name}`); const unsub0 = hub.subscribe(`${name}.download`, { next({ current, total }) { el.text(`downloaded ${kb(current)} / ${kb(total)} kb`); } }); const unsub1 = hub.subscribe(`${name}.build`, { next({ current, total }) { el.text(`built ${current} / ${total} glyphs`); } }); return [unsub0, unsub1]; }; const unsub0 = setup("part01"); const unsub1 = setup("part02"); const unsub2 = setup("part03"); const unsub3 = setup("part04"); const unsub4 = hub.subscribe("slugs", { next() { elm.style("display", "none"); } }); invalidation.then(() => { unsub0.forEach(x => x()); unsub1.forEach(x => x()); unsub2.forEach(x => x()); unsub3.forEach(x => x()); unsub4(); }); return elm.node(); }3c:Td02,dracoDecode = { function decodeBuffer(decoder, data) { const buffer = new draco.DecoderBuffer(); buffer.Init(new Int8Array(data), data.byteLength); const geometryType = decoder.GetEncodedGeometryType(buffer); let geometry, status; if (geometryType === draco.TRIANGULAR_MESH) { geometry = new draco.Mesh(); status = decoder.DecodeBufferToMesh(buffer, geometry); } else if (geometryType === draco.POINT_CLOUD) { geometry = new draco.PointCloud(); status = decoder.DecodeBufferToPointCloud(buffer, geometry); } else { draco.destroy(decoder); draco.destroy(geometry); draco.destroy(buffer); throw new Error('Unknown geometry type.'); } if (!status.ok() || geometry.ptr === 0) { draco.destroy(decoder); draco.destroy(geometry); draco.destroy(buffer); throw new Error('Decoding failed: ' + status.error_msg()); } geometry.type = geometryType; draco.destroy(buffer); return geometry; } const ATTRIB_ID = { position: draco.POSITION, normal: draco.NORMAL, color: draco.COLOR, uv: draco.TEX_COORD }; const ARRAY = { [draco.DT_FLOAT32]: Float32Array, [draco.DT_FLOAT64]: Float64Array, [draco.DT_INT8]: Int8Array, [draco.DT_INT16]: Int16Array, [draco.DT_INT32]: Int32Array, [draco.DT_UINT8]: Uint8Array, [draco.DT_UINT16]: Uint16Array, [draco.DT_UINT32]: Uint32Array }; const HEAP = { [draco.DT_FLOAT32]: draco.HEAPF32, [draco.DT_FLOAT64]: draco.HEAPF64, [draco.DT_INT8]: draco.HEAP8, [draco.DT_INT16]: draco.HEAP16, [draco.DT_INT32]: draco.HEAP32, [draco.DT_UINT8]: draco.HEAPU8, [draco.DT_UINT16]: draco.HEAPU16, [draco.DT_UINT32]: draco.HEAPU32 }; function decodeAttribute(decoder, geometry, key, type) { let attId; if (key in ATTRIB_ID) { attId = decoder.GetAttributeId(geometry, ATTRIB_ID[key]); } else { attId = decoder.GetAttributeIdByName(geometry, key); } if (attId == -1) return null; const attribute = decoder.GetAttribute(geometry, attId); const numValues = geometry.num_points() * attribute.num_components(); const byteLength = numValues * ARRAY[type].BYTES_PER_ELEMENT; const ptr = draco._malloc(byteLength); decoder.GetAttributeDataArrayForAllPoints(geometry, attribute, type, byteLength, ptr); const array = new ARRAY[type](HEAP[type].buffer, ptr, numValues).slice(); draco._free(ptr); return array; } function decodeIndices(decoder, geometry) { const numIndices = geometry.num_faces() * 3; const byteLength = numIndices * 4; const ptr = draco._malloc(byteLength); decoder.GetTrianglesUInt32Array(geometry, byteLength, ptr); const index = new Uint32Array(draco.HEAPF32.buffer, ptr, numIndices).slice(); draco._free(ptr); return index; } return (data, attribs) => { const decoder = new draco.Decoder(); const geometry = decodeBuffer(decoder, data); const mesh = {}; for (const key in attribs) { mesh[key] = decodeAttribute(decoder, geometry, key, attribs[key]); } if (geometry.type == draco.TRIANGULAR_MESH) { mesh["indices"] = decodeIndices(decoder, geometry); } draco.destroy(geometry); draco.destroy(decoder); return mesh; } }3d:T740,class View { static create(initialize) { return new Promise(resolve => { const view = new View(); let resolved = false; const dispose = initialize((val, state = val) => { view.value = val; view.state = state; if (!resolved) { resolved = true; resolve(Generators.disposable(view, () => { dispose && dispose(); view.dispose(); })); }; }) }); } static state(view, defaults) { return !!view ? view.state : defaults; } static subs(unsubs) { return () => unsubs.forEach(unsub => unsub()); } constructor(value) { Object.defineProperties(this, { _value: { value, writable: true }, _list: { value: {}, writable: true }, _subs: { value: [], writable: true }, }); const dispatch = e => this._subs.forEach(sub => sub(e.value)); this.addEventListener('input', dispatch); this.dispose = () => this.removeEventListener("input", dispatch); }; get value() { return this._value; } set value(val) { this._value = val; this.notify(); } observe(sub) { this._subs.push(sub); sub(this.value); // give out the current value on subscription return () => this._subs = this._subs.filter(l => l !== sub); } notify() { this.dispatchEvent({ type: "input", value: this.value }); } addEventListener(type, listener) { if (!this._list[type]) this._list[type] = []; if (this._list[type].includes(listener)) return; this._list[type] = [listener].concat(this._list[type]); } removeEventListener(type, listener) { this._list[type] = this._list[type].filter(l => l !== listener); } dispatchEvent(event) { if (!this._list[event.type]) return; const p = Promise.resolve(event); this._list[event.type].forEach(l => p.then(l)); } }3e:[{"id":"966deceabc5f4c1e97bbf36a18b53c8f486ab78cbf9e69f234fc93b40688a5a73b3b4d33e7f10eccf217812bee88c672b5177b48a1e7a03d075c900cabc41250","href":"https://static.observableusercontent.com/files/966deceabc5f4c1e97bbf36a18b53c8f486ab78cbf9e69f234fc93b40688a5a73b3b4d33e7f10eccf217812bee88c672b5177b48a1e7a03d075c900cabc41250","name":"embedding.drc","type":"application/octet-stream","lastModified":1620987507913.152,"size":371144},{"id":"83c6616fd2406f88a1f4cd03749928f4b4d2becb0a668e0c7cd72b497b0dd37621bbeb6eb955f2880390a1056c69c4774cfedcd62a8b1f138c75bd2a24b1255f","href":"https://static.observableusercontent.com/files/83c6616fd2406f88a1f4cd03749928f4b4d2becb0a668e0c7cd72b497b0dd37621bbeb6eb955f2880390a1056c69c4774cfedcd62a8b1f138c75bd2a24b1255f","name":"fig_ae_loss.png","type":"image/png","lastModified":1620997542711.424,"size":75708},{"id":"692527117e7a6b32cceec77e4d7de44a7b9e09ea7f6b06cead7883daad515cbb2ebb2fe5340bc98c8ac791ff71aa9c865118d427f23e9da305ba356691b3d4e2","href":"https://static.observableusercontent.com/files/692527117e7a6b32cceec77e4d7de44a7b9e09ea7f6b06cead7883daad515cbb2ebb2fe5340bc98c8ac791ff71aa9c865118d427f23e9da305ba356691b3d4e2","name":"fig_mde_3d.png","type":"image/png","lastModified":1620997545165.02,"size":696487},{"id":"6ff04b96387b13b6fc502fb3f58a30e2198d6894b1ce7cbb2f41689e9abcb46bac24d68fd6447dac38457dd3a4c4ff4f6de3f90bc920f62662e3f32680f3fc42","href":"https://static.observableusercontent.com/files/6ff04b96387b13b6fc502fb3f58a30e2198d6894b1ce7cbb2f41689e9abcb46bac24d68fd6447dac38457dd3a4c4ff4f6de3f90bc920f62662e3f32680f3fc42","name":"SourceHanSerifTC-Bold_data_0.bin","type":"application/octet-stream","lastModified":1620987623836.786,"size":12018912},{"id":"e217edd7c33f5ff81f94aa00580e1df84448936141d6852f72119e906273f41611da592ef5a21f092dce3bcbff23460c744f5c9ba4b6f94b71b8364f3af41f95","href":"https://static.observableusercontent.com/files/e217edd7c33f5ff81f94aa00580e1df84448936141d6852f72119e906273f41611da592ef5a21f092dce3bcbff23460c744f5c9ba4b6f94b71b8364f3af41f95","name":"SourceHanSerifTC-Bold_data_2.bin","type":"application/octet-stream","lastModified":1620987589434.228,"size":14607859},{"id":"72496fa18675b8f41047f8fe5fc51dec25562cc47a848d88437c61ec2fa98c651918c41d242d81f3037c16bf1335dea1fa9e1fe66564d6ccfd33de74ca33986f","href":"https://static.observableusercontent.com/files/72496fa18675b8f41047f8fe5fc51dec25562cc47a848d88437c61ec2fa98c651918c41d242d81f3037c16bf1335dea1fa9e1fe66564d6ccfd33de74ca33986f","name":"SourceHanSerifTC-Bold_data_1.bin","type":"application/octet-stream","lastModified":1620987588921.646,"size":13796957},{"id":"8f12e06f1485a104e8a6dd672c3bef95ad52f7159adf3bcbae4431c41fb4652e18295f28408e6dc850b15a7802883a8411df020fd0c00b9595c88a91170607c0","href":"https://static.observableusercontent.com/files/8f12e06f1485a104e8a6dd672c3bef95ad52f7159adf3bcbae4431c41fb4652e18295f28408e6dc850b15a7802883a8411df020fd0c00b9595c88a91170607c0","name":"SourceHanSerifTC-Bold_data_3.bin","type":"application/octet-stream","lastModified":1620987573917.501,"size":8706129},{"id":"0084dda83482fb07dfc09ed8bf640b90650984a97b6f05a3f9f0bc8352994fdc2426ff036a301a8bfa6cf634e4e02275051dfc730d6970ffd1906ec5ab5aac77","href":"https://static.observableusercontent.com/files/0084dda83482fb07dfc09ed8bf640b90650984a97b6f05a3f9f0bc8352994fdc2426ff036a301a8bfa6cf634e4e02275051dfc730d6970ffd1906ec5ab5aac77","name":"SourceHanSerifTC-Bold_glyphs.json@1.zst","type":"application/octet-stream","lastModified":1620987529300.15,"size":483306},{"id":"0bb11f199de7632a230f7af41a0e57a5acaaef8fc13037baa1ec596966dc5c99134e27081d7babd422653f0f2a05ce4df2c7db5efe8db1a6b8b0ed2a96f52ae1","href":"https://static.observableusercontent.com/files/0bb11f199de7632a230f7af41a0e57a5acaaef8fc13037baa1ec596966dc5c99134e27081d7babd422653f0f2a05ce4df2c7db5efe8db1a6b8b0ed2a96f52ae1","name":"fig_slug.png","type":"image/png","lastModified":1620998593105.147,"size":24739},{"id":"fef88fef4e74efc3ccdf34b6887634880c03900d0b4865b6a63271367e9117844bb76ca50f01ed7edcd23a317467ce639b52e4895cb2a87d5c8ca21e109236ae","href":"https://static.observableusercontent.com/files/fef88fef4e74efc3ccdf34b6887634880c03900d0b4865b6a63271367e9117844bb76ca50f01ed7edcd23a317467ce639b52e4895cb2a87d5c8ca21e109236ae","name":"fig_geomloss_lap.png","type":"image/png","lastModified":1620997548693.327,"size":2248672},{"id":"7e63fad3fe3e2ad8e1d9ff527ae6245d3a408223a2a21fb98a8b66dc7d1622426ed3d38a3704eebd3897437b78911398fefb0c876f55f292b00520229eebab8b","href":"https://static.observableusercontent.com/files/7e63fad3fe3e2ad8e1d9ff527ae6245d3a408223a2a21fb98a8b66dc7d1622426ed3d38a3704eebd3897437b78911398fefb0c876f55f292b00520229eebab8b","name":"fig_mde_2d.png","type":"image/png","lastModified":1620997545515.645,"size":533260},{"id":"013978d4b79e902d79064d04ffac674e365369508de43d3a885b874b1b275da8e524544387a7b6bd18cb304d4264610658493acd017d849967db2d98d0408b85","href":"https://static.observableusercontent.com/files/013978d4b79e902d79064d04ffac674e365369508de43d3a885b874b1b275da8e524544387a7b6bd18cb304d4264610658493acd017d849967db2d98d0408b85","name":"fig_geomloss_grid.png","type":"image/png","lastModified":1620997544096.881,"size":205960},{"id":"34cfb33ea2b4860134dd8e914b7e5598a01977ca0608277347c742f16755f3cf27c943b1744b2c5f209390bcd44fd66758c181a29ecdc9473bbfbb92084132b7","href":"https://static.observableusercontent.com/files/34cfb33ea2b4860134dd8e914b7e5598a01977ca0608277347c742f16755f3cf27c943b1744b2c5f209390bcd44fd66758c181a29ecdc9473bbfbb92084132b7","name":"fig_ae_res.png","type":"image/png","lastModified":1620997543489.991,"size":141403}] 2f:{"title":"Source Hans Serif: A Glyph Atlas","cells":[{"id":0,"value":"md`# Source Hans Serif: A Glyph Atlas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"md`[Source Hans Serif](https://source.typekit.com/source-han-serif/) is the second Pan-CJK typeface family from Adobe Type, a unified typeface design to serve the 1.5 billion people in East Asia. It supports four different East Asian languages — Simplified Chinese, Traditional Chinese, Japanese, and Korean — and the 65,535 glyphs in each of its seven weights are designed to work together with a consistent design that emphasizes shared elements between the languages while honoring the diversity of each.\n\nThis notebook is an attempt to explore all the glyphs in the typeface. Evolving from my last experiment of [Fashion MNIST Exploration](https://observablehq.com/@stwind/exploring-fashion-mnist), and getting huge inspiration from Google Art's [Runway Palette](https://artsexperiments.withgoogle.com/runwaypalette) experiment, I applied a similar approach to embed the glyphs into 2D and 3D spaces.\n\n_{*Required WebGL2 browsers.*}\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"viewof is3d = Inputs.toggle({label: \"3D\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"viewof gl = {\n const canvas = DOM.canvas(width, width / 1.618);\n const gl = canvas.value = canvas.getContext('webgl2');\n gl.getExtension('EXT_color_buffer_float');\n\n gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);\n const bg = 0.1;\n gl.clearColor(bg, bg, bg, 1);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n \n const root = html`

${loadingProgress()}

\n\n ${canvas}\n

`;\n root.value = gl;\n \n return root;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"md`---\n## Process\n\nThe whole process involve the following steps:\n\n1. Train an autoencoder with [PyTorch](https://pytorch.org/) to compress the glyph images into a latent space of 128 dimensions.\n2. Use [Minimum-Distortion Embedding](https://pymde.org/) to embed the latent vectors into 2D and 3D spaces.\n3. Use [GeomLoss](https://www.kernel-operations.io/geomloss/) and [Lap](https://github.com/gatagat/lap) to assign 2D embedding to grid.\n4. Render vector fonts in WebGL2 with the [Slug Algorithm](http://jcgt.org/published/0006/02/02/).\n5. Compress assets for the web with [Draco](https://github.com/google/draco) and [Zstandard](https://facebook.github.io/zstd/).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"md`### 2. Generating 2D and 3D Embeddings.\n\nOnce we have the 128D latent features, we can use [Minimum-Distortion Embedding](https://pymde.org/) to generate the 2D and 3D embeddings. What makes MDE better than UMAP is that you have more controls of the overall shapes of the embeddings.\n\n${html`

`}\n\n${html`

`}\n\nThe we can use [Draco](https://github.com/google/draco) to compress the resulting point cloud.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"md`### 3. Assigning 2D Embedding to Grid\n\nNext step is to assign the 2d embedding to a grid with [GeomLoss](https://www.kernel-operations.io/geomloss/), as the same with [Runway Pallete](https://artsexperiments.withgoogle.com/runwaypalette) by [Cyril Diagne](https://twitter.com/cyrildiagne/status/1199016369662152704). \n\nBut GeomLoss is an approximation not a perfect assignment, so it leaves you about 5~8% of duplications and holes:\n\n${html`

`}\n\nFor the 4,752 misplacements out of 64,033 assignments, we can use [Lap](https://github.com/gatagat/lap) to nudge them to the final locations.\n\n${html`

Lap assignment for duplications and holes.

`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"md`---\n## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"render = {\n gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);\n picking.draw(camera, t);\n \n const bg = 0.15;\n gl.clearColor(bg, bg, bg, 1);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n // axis.draw(camera);\n atlases.forEach(x => x.draw(camera, t, hover, selected));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"t = { atlases; return approach(this === undefined ? 1: this, is3d ? 0 : 1, 0.08, 1e-5) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"hover = Generators.observe(next => {\n const canvas = d3.select(gl.canvas);\n let cur = undefined;\n next(cur);\n \n canvas.on('mousemove', e => {\n const id = picking.pick(e.offsetX, gl.drawingBufferHeight - e.offsetY);\n if (id != cur) {\n next(cur = id);\n }\n });\n canvas.on(\"mouseout\", e => {\n next(cur = undefined);\n });\n\n return () => canvas.on('mousemove', null).on(\"mouseout\", null);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"selected = debounce(viewof glyphIdx, 300)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1272,"value":"{\n atlases;\n \n const canvas = d3.select(gl.canvas);\n canvas.on('click', e => {\n const id = picking.pick(e.offsetX, gl.drawingBufferHeight - e.offsetY);\n if (id) {\n viewof glyphIdx.value = id;\n }\n });\n invalidation.then(() => canvas.on(\"click\", null));\n return \"initialized\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"focus = {\n atlases;\n \n let target = [0, 0, 0];\n if (viewof free.value) {\n viewof camera.goto({ eye: [0,0,7.5], target: v.ZERO3, up: v.Y3 }, 0.09, 1e-4);\n } else if (is3d) {\n target[0] = embedding.position[selected * 3];\n target[1] = embedding.position[selected * 3 + 1];\n target[2] = embedding.position[selected * 3 + 2];\n const eye = v.mulN(null, v.normalize([], target), v.mag(target) + 0.025);\n viewof camera.goto({ eye, target: v.ZERO3 }, 0.1, 1e-4);\n } else {\n target[0] = embedding.grid[selected * 2];\n target[1] = embedding.grid[selected * 2 + 1];\n const eye = v.add3([], target, [0,0,0.25]);\n viewof camera.goto({ eye, target, up: v.Y3 }, 0.1, 1e-4);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"{\n const cam = viewof camera;\n const canvas = d3.select(gl.canvas);\n if (is3d) {\n canvas.call(d3.drag().on('start', e => {\n viewof free.value = true;\n cam.orbitStart(e.x, e.y);\n }).on('drag', e => cam.orbitUpdate(e.x, e.y)))\n .on('wheel', e => {\n e.preventDefault();\n viewof free.value = true;\n cam.zoom(e.deltaY * 1e-3, 0.01, 200 - 1);\n });\n } else {\n canvas.call(d3.drag().on('start', e => {\n viewof free.value = true;\n cam.panStart(e.x, e.y);\n }).on('drag', e => cam.panUpdate(e.x, e.y)))\n .on('wheel', e => {\n e.preventDefault();\n viewof free.value = true;\n cam.panZoom(e.offsetX, e.offsetY, e.deltaY * 1e-3, 0.1, 200 - 1);\n });\n }\n \n invalidation.then(() => canvas.on('.drag', null).on('wheel', null));\n return \"camera control\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"freeView = {\n viewof free.value = glyphIdx == 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"viewof free = new View(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`### Embedding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"embedding = {\n const data = await FileAttachment(\"embedding.drc\").arrayBuffer();\n const raw = dracoDecode(data, {\n position: draco.DT_FLOAT32,\n grid: draco.DT_UINT16,\n index: draco.DT_UINT16\n });\n \n const index = raw.index, n = raw.index.length;\n const position = new Float32Array(n * 3), grid = new Float32Array(n * 2);\n for (let i = 0; i < n; i++) {\n const idx = index[i];\n for (let k = 0; k < 3; k++)\n position[idx * 3 + k] = raw.position[i * 3 + k];\n for (let k = 0; k < 2; k++)\n grid[idx * 2 + k] = raw.grid[i * 2 + k];\n }\n return { \n position, \n grid: makeGrid(position, grid, index), \n index: new Float32Array(d3.sort(index)) \n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"embeddings = [\n subEmbedding(embedding, 0, 16384),\n subEmbedding(embedding, 16384, 32768),\n subEmbedding(embedding, 32768, 49152),\n subEmbedding(embedding, 49152, 64033),\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"subEmbedding = (embedding, start, end) => ({\n position: embedding.position.slice(start * 3, end * 3),\n grid: embedding.grid.slice(start * 2, end * 3),\n index: embedding.index.slice(start, end)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"makeGrid = (position, grid, index) => {\n const domainX = d3.extent(index, i => grid[i * 2]);\n const domainY = d3.extent(index, i => grid[i * 2 + 1]);\n const extentX = d3.extent(index, i => position[i * 3]);\n const extentY = d3.extent(index, i => position[i * 3 + 1]);\n const extent = [Math.min(extentX[0], extentY[0]), Math.max(extentX[1], extentY[1])];\n const aspect = domainX[1] / domainY[1];\n \n const scale = {\n x: d3.scaleLinear(domainX, [extent[0] * aspect, extent[1] * aspect]),\n y: d3.scaleLinear([domainY[1], domainY[0]], extent),\n };\n const res = [], n = index.length;\n for (let i = 0; i < n; i++) {\n const x = grid[i * 2], y = grid[i * 2 + 1];\n res.push(scale.x(x), scale.y(y));\n }\n return new Float32Array(res);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"md`### Slug`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"slugReady = {\n atlases;\n hub.publish(\"slugs\", true);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"font0 = {\n const slug = await buildSlug(\"part01\", await FileAttachment(\"SourceHanSerifTC-Bold_data_0.bin\").url(), glyphSets[0]);\n return new Font(slug, { curveCoordsTexWidth: 2048, bandsTexWidth: 1024 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"font1 = {\n const slug = await buildSlug(\"part02\", await FileAttachment(\"SourceHanSerifTC-Bold_data_1.bin\").url(), glyphSets[1]);\n return new Font(slug, { curveCoordsTexWidth: 2048, bandsTexWidth: 1024 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"font2 = {\n const slug = await buildSlug(\"part03\", await FileAttachment(\"SourceHanSerifTC-Bold_data_2.bin\").url(), glyphSets[2]);\n return new Font(slug, { curveCoordsTexWidth: 2048, bandsTexWidth: 1024 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"font3 = {\n const slug = await buildSlug(\"part04\", await FileAttachment(\"SourceHanSerifTC-Bold_data_3.bin\").url(), glyphSets[3]);\n return new Font(slug, { curveCoordsTexWidth: 2048, bandsTexWidth: 1024 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"picking = {\n atlases;\n return new Picking(embedding);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"atlases = [\n new Atlas(embeddings[0], font0),\n new Atlas(embeddings[1], font1),\n new Atlas(embeddings[2], font2),\n new Atlas(embeddings[3], font3),\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1282,"value":"glyphSets = {\n const raw = new Uint8Array(await FileAttachment(\"SourceHanSerifTC-Bold_glyphs.json@1.zst\").arrayBuffer());\n const data = decompress(raw);\n const text = new TextDecoder().decode(data);\n return JSON.parse(text);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"buildSlug = async (name, url, glyphs) => {\n const data = new Uint8Array(await fetchProgress(url, null, reportProgress(`${name}.download`)));\n return makeSlug(decodeCurvesData(data), glyphs, 4096, 16, reportProgress(`${name}.build`));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"decodeCurvesData = {\n const dequantize = (xQ, alpha, beta, alphaQ = 0, betaQ = 65535) => {\n const s = (beta - alpha) / (betaQ - alphaQ)\n const z = Math.round((beta * alphaQ - alpha * betaQ) / (beta - alpha));\n const res = new Float32Array(xQ.length);\n xQ.forEach((v, i) => res[i] = s * (v - z));\n return res;\n };\n \n const uint8ToUint16 = data => {\n const n = data.length / 2;\n const res = new Uint16Array(n);\n for (let i = 0; i < n; i ++) {\n res[i] = data[i * 2] + data[i * 2 + 1] * 256;\n }\n return res;\n };\n \n return data => dequantize(uint8ToUint16(decompress(data)), 0, 1, 0, 65535);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"viewof getRootCode = glsl`\nuint getRootCode(vec2 p1, vec2 p2, vec2 p3) {\n uint shift = ((p1.y > 0.0) ? 2U : 0U) + ((p2.y > 0.0) ? 4U : 0U) + ((p3.y > 0.0) ? 8U : 0U);\n return 0x2E74U >> shift & 3U;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"viewof traceRay = glsl`\nvec3 traceRay(vec2 p1, vec2 p2, vec2 p3, float pixelsPerEm) {\n uint code = getRootCode(p1, p2, p3);\n\n float coverage = 0.0;\n vec2 t = vec2(-1.0);\n\n if (code == 0U) \n return vec3(coverage, t);\n \n vec2 a = p1 - p2 * 2.0f + p3, b = p1 - p2;\n float c = p1.y;\n float d = sqrt(max(b.y * b.y - a.y * c, 0.0));\n \n if (abs(a.y) < 1e-4) \n t = vec2(c / (2.0 * b.y));\n else\n t = vec2(b.y - d, b.y + d) / a.y;\n\n vec2 x = (a.x * t - b.x * 2.0) * t + p1.x;\n vec2 cov = clamp(x * pixelsPerEm + 0.5, 0.0, 1.0);\n\n coverage += cov.x * float(code & 1U);\n coverage -= cov.y * float(code >> 1U);\n \n return vec3(coverage, t);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"viewof getCurveCoord = glsl`\nivec2 getCurveCoord(sampler2D tex, float offset, float width) {\n ivec2 coord = ivec2(moddiv(offset, width));\n return ivec2(texelFetch(tex, coord, 0).xy);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"viewof traceRayBandH = glsl`\nvec2 traceRayBandH(ivec2 band, float pixelsPerEm, vec2 p) {\n float cov = 0.0, deriv = 0.0, closest = 100.0;\n\n for (int i = 0; i < band.x; i++) {\n ivec2 coord = getCurveCoord(curveOffsetTex, float(band.y + i), curveCoordsTexWidth);\n\n vec4 p12 = texelFetch(curvesTex, coord, 0) - vec4(p, p);\n vec2 p3 = texelFetch(curvesTex, coord + ivec2(1, 0), 0).xy - p;\n\n if (max(max(p12.x, p12.z), p3.x) * pixelsPerEm < -0.5) break;\n\n vec3 res = traceRay(p12.xy, p12.zw, p3.xy, pixelsPerEm);\n cov += res.x;\n\n vec2 t = res.yz;\n vec2 loc = abs(locAt(p12.x, p12.z, p3.x, t));\n if (t.x >= 0.0 && loc.x < closest) {\n closest = loc.x;\n deriv = abs(gradAt(p12.xy, p12.zw, p3.xy, t.x));\n }\n if (t.y >= 0.0 && loc.y < closest) {\n closest = loc.y;\n deriv = abs(gradAt(p12.xy, p12.zw, p3.xy, t.y));\n }\n }\n return vec2(clamp(abs(cov), 0.0, 1.0), deriv);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"viewof traceRayBandV = glsl`\nvec2 traceRayBandV(ivec2 band, float pixelsPerEm, vec2 p) {\n float cov = 0.0, deriv = 0.0, closest = 100.0;\n\n for (int i = 0; i < band.x; i++) {\n ivec2 coord = getCurveCoord(curveOffsetTex, float(band.y + i), curveCoordsTexWidth);\n\n vec4 p12 = (texelFetch(curvesTex, coord, 0) - vec4(p, p)).yxwz;\n vec2 p3 = (texelFetch(curvesTex, coord + ivec2(1, 0), 0).xy - p).yx;\n\n if (max(max(p12.x, p12.z), p3.x) * pixelsPerEm < -0.5) break;\n\n vec3 res = traceRay(p12.xy, p12.zw, p3.xy, pixelsPerEm);\n cov += res.x;\n\n vec2 t = res.yz;\n vec2 loc = abs(locAt(p12.x, p12.z, p3.x, t));\n if (t.x >= 0.0 && loc.x < closest) {\n closest = loc.x;\n deriv = abs(gradAt(p12.xy, p12.zw, p3.xy, t.x));\n }\n if (t.y >= 0.0 && loc.y < closest) {\n closest = loc.y;\n deriv = abs(gradAt(p12.xy, p12.zw, p3.xy, t.y));\n }\n }\n return vec2(clamp(abs(cov), 0.0, 1.0), deriv);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"viewof moddiv = glsl`\nvec2 moddiv(float a, float b) {\n return vec2(mod(a, b), a / b);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"viewof pointAt = glsl`\nvec2 pointAt(vec2 p1, vec2 p2, vec2 p3, float t) {\n float u = 1.0 - t;\n return u * u * p1 + 2.0 * t * u * p2 + t * t * p3;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"viewof tangentAt = glsl`\nfloat tangentAt(float p0, float p1, float p2, float t) {\n\treturn 2.0 * (1.0 - t) * (p1 - p0) + 2.0 * t * (p2 - p1);\n}\n\nvec2 tangentAt(vec2 p0, vec2 p1, vec2 p2, float t) {\n\treturn 2.0 * (1.0 - t) * (p1 - p0) + 2.0 * t * (p2 - p1);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"viewof gradAt = glsl`\nfloat gradAt(vec2 p1, vec2 p2, vec2 p3, float t) {\n vec2 d = tangentAt(p1, p2, p3, t);\n return d.y / (d.x + 1e-6);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"viewof locAt = glsl`\nvec2 locAt(float x1, float x2, float x3, vec2 t) {\n vec2 u = 1.0 - t;\n return u * u * x1 + 2.0 * t * u * x2 + t * t * x3;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"viewof aastep = glsl`\nfloat aastep(float threshold, float value) {\n float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;\n return smoothstep(threshold-afwidth, threshold+afwidth, value);\n}\n\nvec2 aastep(vec2 threshold, vec2 value) {\n vec2 dx = dFdx(value), dy = dFdy(value);\n float afw1 = length(vec2(dx.x, dy.x)), afw2 = length(vec2(dx.y, dy.y));\n vec2 afwidth = vec2(afw1, afw2) * 0.70710678118654757;\n return smoothstep(threshold-afwidth, threshold+afwidth, value);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"viewof frame = glsl`\nfloat frame(vec2 uv, float width) {\n vec2 d = fwidth(uv) * width;\n vec2 t = aastep(d, uv) * (1.0 - aastep(1.0 - d, uv));\n return t.x * t.y;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"viewof norm = glsl`\nfloat norm(float x, float a, float b) {\n return (x - a) / (b - a);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"md`### WebGL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"md`### Misc`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"ID = ({\n encode: val => {\n const r = ( val >> 16 & 0xff ) / 255;\n const g = ( val >> 8 & 0xff ) / 255;\n const b = ( val & 0xff ) / 255;\n return [r, g, b];\n },\n decode: ([r, g, b]) => (r << 16) | (g << 8) | b\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"hub = Generators.disposable(new class {\n constructor() {\n this.stream = rs.pubsub({ topic: e => e.id });\n }\n \n publish(id, event) {\n this.stream.next({ id, event });\n }\n\n subscribe(id, sub) {\n const s = this.stream.subscribeTopic(id, {\n next({ event }) { sub.next(event); },\n done: sub.done,\n error: sub.error\n });\n return () => this.stream.unsubscribeTopic(id, s.wrapped);\n }\n \n done() {\n this.stream.done();\n }\n}, x => x.done())","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"reportProgress = name => (current, total) => hub.publish(name, { current, total })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`### Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"decompress = {\n const ZSTD_isError = zstd.cwrap('ZSTD_isError', 'number', ['number']);\n const ZSTD_getFrameContentSize = zstd.cwrap('ZSTD_getFrameContentSize','number', ['array', 'number']);\n const ZSTD_decompress = zstd.cwrap('ZSTD_decompress', 'number', ['number', 'number', 'array', 'number']);\n\n return data => {\n const contentSize = ZSTD_getFrameContentSize(data, data.length);\n if (!contentSize) {\n throw new Error('zstd: Unable to get frame content size.');\n }\n\n const heap = zstd._malloc(contentSize);\n try {\n const decompressRc = ZSTD_decompress(heap, contentSize, data, data.length);\n if (ZSTD_isError(decompressRc) || decompressRc != contentSize)\n throw new Error('zstd: Unable to decompress.');\n\n return new Uint8Array(zstd.HEAPU8.buffer, heap, contentSize);\n } finally {\n zstd._free(heap);\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"fetchProgress = {\n function concat(arrays) {\n let i = 0, n = 0;\n for (const a of arrays) n += a.length;\n const concat = new Uint8Array(n);\n for (let a of arrays) concat.set(a, i), i += a.length;\n return concat.buffer;\n }\n \n return (url, init, progress) => {\n let cur = 0;\n return fetch(url, init).then(async response => {\n const cl = response.headers.get(\"content-length\");\n const tot = cl ? parseInt(cl) : -1;\n const reader = response.body.getReader();\n const values = [];\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n cur += value.length;\n progress && progress(cur, tot);\n values.push(value);\n }\n return concat(values);\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"function debounce(input, delay = 100) {\n return Generators.observe(notify => {\n let timer = null;\n let value;\n \n function delayed() {\n timer = null;\n if (value === input.value) return;\n notify(value = input.value);\n }\n\n function inputted() {\n if (timer !== null) return;\n notify(value = input.value);\n timer = setTimeout(delayed, delay);\n }\n\n input.addEventListener(\"input\", inputted), inputted();\n return () => input.removeEventListener(\"input\", inputted);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"tween = (f, speed = 0.08, eps = 1e-6) => {\n let t = 0;\n return () => {\n f(t);\n t += (1 - t) * speed;\n return !math.eqDelta(t, 1, eps);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"raf = (f, done) => {\n let handle = requestAnimationFrame(function frame(t) {\n if (f(t) === false) {\n done && done();\n } else {\n handle = requestAnimationFrame(frame);\n }\n });\n return () => cancelAnimationFrame(handle);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1212,"value":"function* approach(start, end, speed = 0.08, eps = 1e-4) {\n start = start !== undefined ? start : end;\n yield start;\n while (!math.eqDelta(start, end, eps)) {\n yield start += (end - start) * speed;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"fps = {\n let t = performance.now(), delta = 0;\n const last = [t];\n return (cell, size = 10) => {\n last.length >= size && last.shift();\n t = performance.now();\n delta = (t - last[0]) / last.length;\n last.push(t);\n return Math.round(1000 / delta);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"import {glsl} from \"@stwind/glsl-chunk-tag\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"webgl = require(\"https://bundle.run/@thi.ng/webgl@4.0.13\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"m = require(\"https://bundle.run/@thi.ng/matrices@0.6.56\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"v = require(\"https://bundle.run/@thi.ng/vectors@6.0.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"math = require(\"https://bundle.run/@thi.ng/math@4.0.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"rs = require(\"https://bundle.run/@thi.ng/rstream@6.0.8\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"draco = {\n const PREFIX = \"https://www.gstatic.com/draco/versioned/decoders/1.4.1/\";\n const wasmBinary = await fetch(`${PREFIX}/draco_decoder.wasm`).then(resp => {\n if (!resp.ok)\n throw new Error(\"HTTP error, status = \" + resp.status);\n return resp.arrayBuffer();\n });\n\n const wrapper = await require(`${PREFIX}/draco_wasm_wrapper.js`);\n return new Promise(resolve => wrapper({ wasmBinary }).then(draco => {\n delete draco.then; // tell Observable not wait for this;\n resolve(draco);\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"zstd = require(\"https://bundle.run/zstd-wasm@0.0.6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}