three-text 0.5.2 → 0.6.0

package/dist/vector/webgpu/index.js

@@ -1,317 +1,134 @@
+var vertWGSL = "// WGSL port of the reference Slug vertex shader\n// Original HLSL by Eric Lengyel, MIT License, Copyright 2017\n\nstruct Uniforms {\n    slug_matrix: mat4x4<f32>,\n    slug_viewport: vec2<f32>,\n};\n\n@group(0) @binding(0) var<uniform> u: Uniforms;\n\nstruct VertexInput {\n    @location(0) a_pos: vec4<f32>,\n    @location(1) a_tex: vec4<f32>,\n    @location(2) a_jac: vec4<f32>,\n    @location(3) a_bnd: vec4<f32>,\n    @location(4) a_col: vec4<f32>,\n};\n\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) color: vec4<f32>,\n    @location(1) texcoord: vec2<f32>,\n    @location(2) @interpolate(flat) banding: vec4<f32>,\n    @location(3) @interpolate(flat) glyph: vec4<i32>,\n};\n\nfn SlugUnpack(tex: vec4<f32>, bnd: vec4<f32>) -> VertexOutput {\n    var out: VertexOutput;\n    let g = bitcast<vec2<u32>>(tex.zw);\n    out.glyph = vec4<i32>(\n        i32(g.x & 0xFFFFu),\n        i32(g.x >> 16u),\n        i32(g.y & 0xFFFFu),\n        i32(g.y >> 16u)\n    );\n    out.banding = bnd;\n    return out;\n}\n\nfn SlugDilate(\n    pos: vec4<f32>, tex: vec4<f32>, jac: vec4<f32>,\n    m0: vec4<f32>, m1: vec4<f32>, m3: vec4<f32>,\n    dim: vec2<f32>\n) -> vec4<f32> {\n    // Returns vec4(dilated_pos.xy, new_texcoord.xy)\n    let n = normalize(pos.zw);\n    let s = dot(m3.xy, pos.xy) + m3.w;\n    let t = dot(m3.xy, n);\n\n    let u_val = (s * dot(m0.xy, n) - t * (dot(m0.xy, pos.xy) + m0.w)) * dim.x;\n    let v_val = (s * dot(m1.xy, n) - t * (dot(m1.xy, pos.xy) + m1.w)) * dim.y;\n\n    let s2 = s * s;\n    let st = s * t;\n    let uv = u_val * u_val + v_val * v_val;\n    let d = pos.zw * (s2 * (st + sqrt(uv)) / (uv - st * st));\n\n    let vpos = pos.xy + d;\n    let vtex = vec2<f32>(tex.x + dot(d, jac.xy), tex.y + dot(d, jac.zw));\n    return vec4<f32>(vpos, vtex);\n}\n\n@vertex\nfn vs_main(in: VertexInput) -> VertexOutput {\n    let dilated = SlugDilate(\n        in.a_pos, in.a_tex, in.a_jac,\n        u.slug_matrix[0], u.slug_matrix[1], u.slug_matrix[3],\n        u.slug_viewport\n    );\n\n    let p = dilated.xy;\n    var out = SlugUnpack(in.a_tex, in.a_bnd);\n\n    out.position = vec4<f32>(\n        p.x * u.slug_matrix[0].x + p.y * u.slug_matrix[0].y + u.slug_matrix[0].w,\n        p.x * u.slug_matrix[1].x + p.y * u.slug_matrix[1].y + u.slug_matrix[1].w,\n        p.x * u.slug_matrix[2].x + p.y * u.slug_matrix[2].y + u.slug_matrix[2].w,\n        p.x * u.slug_matrix[3].x + p.y * u.slug_matrix[3].y + u.slug_matrix[3].w\n    );\n\n    out.texcoord = dilated.zw;\n    out.color = in.a_col;\n    return out;\n}\n";
+
+var fragWGSL = "// WGSL port of the reference Slug pixel shader\n// by Eric Lengyel, MIT License, Copyright 2017\n\nconst kLogBandTextureWidth: u32 = 12u;\n\n@group(0) @binding(1) var curveTexture: texture_2d<f32>;\n@group(0) @binding(2) var bandTexture: texture_2d<u32>;\n\nstruct FragmentInput {\n    @location(0) color: vec4<f32>,\n    @location(1) texcoord: vec2<f32>,\n    @location(2) @interpolate(flat) banding: vec4<f32>,\n    @location(3) @interpolate(flat) glyph: vec4<i32>,\n};\n\nfn CalcRootCode(y1: f32, y2: f32, y3: f32) -> u32 {\n    let i1 = bitcast<u32>(y1) >> 31u;\n    let i2 = bitcast<u32>(y2) >> 30u;\n    let i3 = bitcast<u32>(y3) >> 29u;\n\n    var shift = (i2 & 2u) | (i1 & ~2u);\n    shift = (i3 & 4u) | (shift & ~4u);\n\n    return (0x2E74u >> shift) & 0x0101u;\n}\n\nfn SolveHorizPoly(p12: vec4<f32>, p3: vec2<f32>) -> vec2<f32> {\n    let a = p12.xy - p12.zw * 2.0 + p3;\n    let b = p12.xy - p12.zw;\n    let ra = 1.0 / a.y;\n    let rb = 0.5 / b.y;\n\n    let d = sqrt(max(b.y * b.y - a.y * p12.y, 0.0));\n    var t1 = (b.y - d) * ra;\n    var t2 = (b.y + d) * ra;\n\n    if (abs(a.y) < 1.0 / 65536.0) {\n        t1 = p12.y * rb;\n        t2 = t1;\n    }\n\n    return vec2<f32>(\n        (a.x * t1 - b.x * 2.0) * t1 + p12.x,\n        (a.x * t2 - b.x * 2.0) * t2 + p12.x\n    );\n}\n\nfn SolveVertPoly(p12: vec4<f32>, p3: vec2<f32>) -> vec2<f32> {\n    let a = p12.xy - p12.zw * 2.0 + p3;\n    let b = p12.xy - p12.zw;\n    let ra = 1.0 / a.x;\n    let rb = 0.5 / b.x;\n\n    let d = sqrt(max(b.x * b.x - a.x * p12.x, 0.0));\n    var t1 = (b.x - d) * ra;\n    var t2 = (b.x + d) * ra;\n\n    if (abs(a.x) < 1.0 / 65536.0) {\n        t1 = p12.x * rb;\n        t2 = t1;\n    }\n\n    return vec2<f32>(\n        (a.y * t1 - b.y * 2.0) * t1 + p12.y,\n        (a.y * t2 - b.y * 2.0) * t2 + p12.y\n    );\n}\n\nfn CalcBandLoc(glyphLoc: vec2<i32>, offset: u32) -> vec2<i32> {\n    var bandLoc = vec2<i32>(glyphLoc.x + i32(offset), glyphLoc.y);\n    let bandShift = kLogBandTextureWidth;\n    let bandMask = i32((1u << bandShift) - 1u);\n    bandLoc.y += bandLoc.x >> bandShift;\n    bandLoc.x &= bandMask;\n    return bandLoc;\n}\n\nfn CalcCoverage(xcov: f32, ycov: f32, xwgt: f32, ywgt: f32) -> f32 {\n    var coverage = max(\n        abs(xcov * xwgt + ycov * ywgt) / max(xwgt + ywgt, 1.0 / 65536.0),\n        min(abs(xcov), abs(ycov))\n    );\n    coverage = clamp(coverage, 0.0, 1.0);\n    return coverage;\n}\n\nfn SlugRender(renderCoord: vec2<f32>, bandTransform: vec4<f32>, glyphData: vec4<i32>) -> f32 {\n    let emsPerPixel = fwidth(renderCoord);\n    let pixelsPerEm = 1.0 / emsPerPixel;\n\n    var bandMax = glyphData.zw;\n    bandMax.y &= 0x00FF;\n\n    let bandIndex = clamp(\n        vec2<i32>(renderCoord * bandTransform.xy + bandTransform.zw),\n        vec2<i32>(0, 0),\n        bandMax\n    );\n    let glyphLoc = glyphData.xy;\n\n    var xcov = 0.0;\n    var xwgt = 0.0;\n\n    let hbandData = textureLoad(bandTexture, vec2<i32>(glyphLoc.x + bandIndex.y, glyphLoc.y), 0).xy;\n    let hbandLoc = CalcBandLoc(glyphLoc, hbandData.y);\n\n    for (var ci = 0; ci < i32(hbandData.x); ci++) {\n        let curveLoc = vec2<i32>(textureLoad(bandTexture, vec2<i32>(hbandLoc.x + ci, hbandLoc.y), 0).xy);\n\n        let p12 = textureLoad(curveTexture, curveLoc, 0) - vec4<f32>(renderCoord, renderCoord);\n        let p3 = textureLoad(curveTexture, vec2<i32>(curveLoc.x + 1, curveLoc.y), 0).xy - renderCoord;\n\n        if (max(max(p12.x, p12.z), p3.x) * pixelsPerEm.x < -0.5) { break; }\n\n        let code = CalcRootCode(p12.y, p12.w, p3.y);\n        if (code != 0u) {\n            let r = SolveHorizPoly(p12, p3) * pixelsPerEm.x;\n\n            if ((code & 1u) != 0u) {\n                xcov += clamp(r.x + 0.5, 0.0, 1.0);\n                xwgt = max(xwgt, clamp(1.0 - abs(r.x) * 2.0, 0.0, 1.0));\n            }\n            if (code > 1u) {\n                xcov -= clamp(r.y + 0.5, 0.0, 1.0);\n                xwgt = max(xwgt, clamp(1.0 - abs(r.y) * 2.0, 0.0, 1.0));\n            }\n        }\n    }\n\n    var ycov = 0.0;\n    var ywgt = 0.0;\n\n    let vbandData = textureLoad(bandTexture, vec2<i32>(glyphLoc.x + bandMax.y + 1 + bandIndex.x, glyphLoc.y), 0).xy;\n    let vbandLoc = CalcBandLoc(glyphLoc, vbandData.y);\n\n    for (var ci = 0; ci < i32(vbandData.x); ci++) {\n        let curveLoc = vec2<i32>(textureLoad(bandTexture, vec2<i32>(vbandLoc.x + ci, vbandLoc.y), 0).xy);\n        let p12 = textureLoad(curveTexture, curveLoc, 0) - vec4<f32>(renderCoord, renderCoord);\n        let p3 = textureLoad(curveTexture, vec2<i32>(curveLoc.x + 1, curveLoc.y), 0).xy - renderCoord;\n\n        if (max(max(p12.y, p12.w), p3.y) * pixelsPerEm.y < -0.5) { break; }\n\n        let code = CalcRootCode(p12.x, p12.z, p3.x);\n        if (code != 0u) {\n            let r = SolveVertPoly(p12, p3) * pixelsPerEm.y;\n\n            if ((code & 1u) != 0u) {\n                ycov -= clamp(r.x + 0.5, 0.0, 1.0);\n                ywgt = max(ywgt, clamp(1.0 - abs(r.x) * 2.0, 0.0, 1.0));\n            }\n            if (code > 1u) {\n                ycov += clamp(r.y + 0.5, 0.0, 1.0);\n                ywgt = max(ywgt, clamp(1.0 - abs(r.y) * 2.0, 0.0, 1.0));\n            }\n        }\n    }\n\n    return CalcCoverage(xcov, ycov, xwgt, ywgt);\n}\n\n@fragment\nfn fs_main(in: FragmentInput) -> @location(0) vec4<f32> {\n    let coverage = SlugRender(in.texcoord, in.banding, in.glyph);\n    return in.color * coverage;\n}\n";
+
+// Slug shader source re-exports
+// The .glsl/.wgsl files are the single source of truth, imported as strings
+// at build time via the glslPlugin in rollup.config.js
+// @ts-ignore - resolved by rollup glslPlugin
+const vertexShaderWGSL = vertWGSL;
+const fragmentShaderWGSL = fragWGSL;
+
 /// <reference types="@webgpu/types" />
-function createBufferWithData(device, data, usage) {
-    const byteLength = Math.max(4, data.byteLength);
-    const buffer = device.createBuffer({
-        size: byteLength,
-        usage,
-        mappedAtCreation: true
-    });
-    if (data.byteLength > 0) {
-        const mapped = new Uint8Array(buffer.getMappedRange());
-        mapped.set(new Uint8Array(data.buffer, data.byteOffset, data.byteLength));
-    }
-    buffer.unmap();
-    return buffer;
-}
-function createGeometryResources(device, data) {
-    const interiorPositionBuffer = createBufferWithData(device, data.interiorPositions, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST);
-    const interiorIndexBuffer = createBufferWithData(device, data.interiorIndices, GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST);
-    const curvePositionBuffer = createBufferWithData(device, data.curvePositions, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST);
-    const fillPositionBuffer = createBufferWithData(device, data.fillPositions, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST);
-    const fillIndexBuffer = createBufferWithData(device, data.fillIndices, GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST);
-    return {
-        interiorPositionBuffer,
-        interiorIndexBuffer,
-        interiorIndexCount: data.interiorIndices.length,
-        interiorIndexFormat: data.interiorIndices instanceof Uint16Array ? 'uint16' : 'uint32',
-        curvePositionBuffer,
-        curveVertexCount: data.curvePositions.length / 3,
-        fillPositionBuffer,
-        fillIndexBuffer,
-        fillIndexCount: data.fillIndices.length
-    };
-}
-function destroyGeometryResources(resources) {
-    resources.interiorPositionBuffer.destroy();
-    resources.interiorIndexBuffer.destroy();
-    resources.curvePositionBuffer.destroy();
-    resources.fillPositionBuffer.destroy();
-    resources.fillIndexBuffer.destroy();
-}
-function createWebGPUVectorRenderer(device, format, options = {}) {
-    const depthStencilFormat = options.depthStencilFormat ?? 'depth24plus-stencil8';
-    const sampleCount = options.sampleCount ?? 4;
+function createResources(device, gpuData, format, sampleCount) {
     const uniformBuffer = device.createBuffer({
         size: 80,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    const curveTexture = device.createTexture({
+        size: [gpuData.curveTexture.width, gpuData.curveTexture.height],
+        format: 'rgba32float',
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
     });
+    device.queue.writeTexture({ texture: curveTexture }, gpuData.curveTexture.data.buffer, { bytesPerRow: gpuData.curveTexture.width * 16 }, [gpuData.curveTexture.width, gpuData.curveTexture.height]);
+    const bandTexture = device.createTexture({
+        size: [gpuData.bandTexture.width, gpuData.bandTexture.height],
+        format: 'rgba32uint',
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+    });
+    device.queue.writeTexture({ texture: bandTexture }, gpuData.bandTexture.data.buffer, { bytesPerRow: gpuData.bandTexture.width * 16 }, [gpuData.bandTexture.width, gpuData.bandTexture.height]);
+    const vertexBuffer = device.createBuffer({
+        size: gpuData.vertices.byteLength,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+    });
+    device.queue.writeBuffer(vertexBuffer, 0, gpuData.vertices.buffer);
+    const indexBuffer = device.createBuffer({
+        size: gpuData.indices.byteLength,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+    });
+    device.queue.writeBuffer(indexBuffer, 0, gpuData.indices.buffer);
+    const vertModule = device.createShaderModule({ code: vertexShaderWGSL });
+    const fragModule = device.createShaderModule({ code: fragmentShaderWGSL });
     const bindGroupLayout = device.createBindGroupLayout({
         entries: [
-            {
-                binding: 0,
-                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-                buffer: { type: 'uniform' }
-            }
-        ]
-    });
-    const pipelineLayout = device.createPipelineLayout({
-        bindGroupLayouts: [bindGroupLayout]
+            { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
+            { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'unfilterable-float' } },
+            { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'uint' } },
+        ],
     });
     const bindGroup = device.createBindGroup({
         layout: bindGroupLayout,
-        entries: [{ binding: 0, resource: { buffer: uniformBuffer } }]
+        entries: [
+            { binding: 0, resource: { buffer: uniformBuffer } },
+            { binding: 1, resource: curveTexture.createView() },
+            { binding: 2, resource: bandTexture.createView() },
+        ],
+    });
+    const pipelineLayout = device.createPipelineLayout({
+        bindGroupLayouts: [bindGroupLayout],
     });
+    const stride = 20 * 4;
     const vertexBufferLayout = {
-        arrayStride: 12,
-        attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x3' }]
-    };
-    const baseVertexShader = `
-struct Uniforms {
-  mvp: mat4x4<f32>,
-  color: vec4<f32>,
-}
-
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-
-struct VertexInput {
-  @location(0) position: vec3<f32>,
-}
-
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-}
-
-@vertex
-fn main(input: VertexInput) -> VertexOutput {
-  var output: VertexOutput;
-  output.position = uniforms.mvp * vec4<f32>(input.position, 1.0);
-  return output;
-}`;
-    const curveVertexShader = `
-struct Uniforms {
-  mvp: mat4x4<f32>,
-  color: vec4<f32>,
-}
-
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-
-struct VertexInput {
-  @location(0) position: vec3<f32>,
-}
-
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) uv: vec2<f32>,
-}
-
-@vertex
-fn main(input: VertexInput, @builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-  let localVertex = vertexIndex % 3u;
-  let u = f32(localVertex) * 0.5;
-  var output: VertexOutput;
-  output.uv = vec2<f32>(u, floor(u));
-  output.position = uniforms.mvp * vec4<f32>(input.position, 1.0);
-  return output;
-}`;
-    const stencilFragmentShader = `
-@fragment
-fn main() -> @location(0) vec4<f32> {
-  return vec4<f32>(1.0);
-}`;
-    const curveFragmentShader = `
-struct FragmentInput {
-  @location(0) uv: vec2<f32>,
-}
-
-@fragment
-fn main(input: FragmentInput) -> @location(0) vec4<f32> {
-  let px = dpdx(input.uv);
-  let py = dpdy(input.uv);
-  let fx = 2.0 * input.uv.x * px.x - px.y;
-  let fy = 2.0 * input.uv.x * py.x - py.y;
-  let denom = sqrt(fx * fx + fy * fy);
-
-  if (denom < 1e-6) {
-    discard;
-  }
-
-  let sd = (input.uv.x * input.uv.x - input.uv.y) / denom;
-  let alpha = clamp(0.5 - sd, 0.0, 1.0);
-  if (alpha <= 0.0) {
-    discard;
-  }
-
-  return vec4<f32>(1.0, 1.0, 1.0, alpha);
-}`;
-    const colorFragmentShader = `
-struct Uniforms {
-  mvp: mat4x4<f32>,
-  color: vec4<f32>,
-}
-
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-
-@fragment
-fn main() -> @location(0) vec4<f32> {
-  return uniforms.color;
-}`;
-    const baseStencilStateFront = {
-        compare: 'always',
-        failOp: 'keep',
-        depthFailOp: 'keep',
-        passOp: 'invert'
-    };
-    const baseStencilStateBack = {
-        compare: 'always',
-        failOp: 'keep',
-        depthFailOp: 'keep',
-        passOp: 'invert'
+        arrayStride: stride,
+        attributes: [
+            { shaderLocation: 0, offset: 0, format: 'float32x4' },
+            { shaderLocation: 1, offset: 16, format: 'float32x4' },
+            { shaderLocation: 2, offset: 32, format: 'float32x4' },
+            { shaderLocation: 3, offset: 48, format: 'float32x4' },
+            { shaderLocation: 4, offset: 64, format: 'float32x4' },
+        ],
     };
-    const colorStencilStateFront = {
-        compare: 'not-equal',
-        failOp: 'keep',
-        depthFailOp: 'keep',
-        passOp: 'zero'
-    };
-    const colorStencilStateBack = {
-        compare: 'not-equal',
-        failOp: 'keep',
-        depthFailOp: 'keep',
-        passOp: 'zero'
-    };
-    const interiorPipeline = device.createRenderPipeline({
+    const pipeline = device.createRenderPipeline({
         layout: pipelineLayout,
         vertex: {
-            module: device.createShaderModule({ code: baseVertexShader }),
-            entryPoint: 'main',
-            buffers: [vertexBufferLayout]
+            module: vertModule,
+            entryPoint: 'vs_main',
+            buffers: [vertexBufferLayout],
         },
         fragment: {
-            module: device.createShaderModule({ code: stencilFragmentShader }),
-            entryPoint: 'main',
-            targets: [{ format, writeMask: 0 }]
+            module: fragModule,
+            entryPoint: 'fs_main',
+            targets: [{
+                    format,
+                    blend: {
+                        color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                        alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                    },
+                }],
         },
         primitive: {
             topology: 'triangle-list',
-            cullMode: 'none'
-        },
-        depthStencil: {
-            format: depthStencilFormat,
-            depthWriteEnabled: false,
-            depthCompare: 'always',
-            stencilFront: baseStencilStateFront,
-            stencilBack: baseStencilStateBack,
-            stencilReadMask: 0xff,
-            stencilWriteMask: 0xff
+            cullMode: 'none',
         },
         multisample: {
             count: sampleCount,
-            alphaToCoverageEnabled: false
-        }
-    });
-    const curvePipeline = device.createRenderPipeline({
-        layout: pipelineLayout,
-        vertex: {
-            module: device.createShaderModule({ code: curveVertexShader }),
-            entryPoint: 'main',
-            buffers: [vertexBufferLayout]
         },
-        fragment: {
-            module: device.createShaderModule({ code: curveFragmentShader }),
-            entryPoint: 'main',
-            targets: [{ format, writeMask: 0 }]
-        },
-        primitive: {
-            topology: 'triangle-list',
-            cullMode: 'none'
-        },
-        depthStencil: {
-            format: depthStencilFormat,
-            depthWriteEnabled: false,
-            depthCompare: 'always',
-            stencilFront: baseStencilStateFront,
-            stencilBack: baseStencilStateBack,
-            stencilReadMask: 0xff,
-            stencilWriteMask: 0xff
-        },
-        multisample: {
-            count: sampleCount,
-            alphaToCoverageEnabled: true
-        }
-    });
-    const colorPipeline = device.createRenderPipeline({
-        layout: pipelineLayout,
-        vertex: {
-            module: device.createShaderModule({ code: baseVertexShader }),
-            entryPoint: 'main',
-            buffers: [vertexBufferLayout]
-        },
-        fragment: {
-            module: device.createShaderModule({ code: colorFragmentShader }),
-            entryPoint: 'main',
-            targets: [{ format, writeMask: GPUColorWrite.ALL }]
-        },
-        primitive: {
-            topology: 'triangle-list',
-            cullMode: 'none'
-        },
-        depthStencil: {
-            format: depthStencilFormat,
-            depthWriteEnabled: false,
-            depthCompare: 'always',
-            stencilFront: colorStencilStateFront,
-            stencilBack: colorStencilStateBack,
-            stencilReadMask: 0xff,
-            stencilWriteMask: 0xff
-        },
-        multisample: {
-            count: sampleCount,
-            alphaToCoverageEnabled: false
-        }
     });
+    return { pipeline, bindGroup, vertexBuffer, indexBuffer, uniformBuffer, indexCount: gpuData.indices.length };
+}
+function draw(device, pass, res, mvpMatrix, viewportWidth, viewportHeight) {
     const uniformData = new Float32Array(20);
-    let geometryResources = null;
+    uniformData.set(mvpMatrix, 0);
+    uniformData[16] = viewportWidth;
+    uniformData[17] = viewportHeight;
+    device.queue.writeBuffer(res.uniformBuffer, 0, uniformData);
+    pass.setPipeline(res.pipeline);
+    pass.setBindGroup(0, res.bindGroup);
+    pass.setVertexBuffer(0, res.vertexBuffer);
+    pass.setIndexBuffer(res.indexBuffer, 'uint16');
+    pass.drawIndexed(res.indexCount);
+}
+function createWebGPUVectorRenderer(device, format, options) {
+    let resources = null;
+    const sampleCount = options?.sampleCount ?? 1;
     return {
         setGeometry(data) {
-            if (geometryResources) {
-                destroyGeometryResources(geometryResources);
-            }
-            geometryResources = createGeometryResources(device, data);
+            if (resources)
+                this.dispose();
+            resources = createResources(device, data, format, sampleCount);
         },
-        render(passEncoder, mvp, color) {
-            if (!geometryResources) {
+        render(passEncoder, mvp, _color, viewportWidth, viewportHeight) {
+            if (!resources)
                 return;
-            }
-            uniformData.set(mvp, 0);
-            uniformData[16] = color[0];
-            uniformData[17] = color[1];
-            uniformData[18] = color[2];
-            uniformData[19] = color[3];
-            device.queue.writeBuffer(uniformBuffer, 0, uniformData);
-            passEncoder.setBindGroup(0, bindGroup);
-            passEncoder.setStencilReference(0);
-            if (geometryResources.interiorIndexCount > 0) {
-                passEncoder.setPipeline(interiorPipeline);
-                passEncoder.setVertexBuffer(0, geometryResources.interiorPositionBuffer);
-                passEncoder.setIndexBuffer(geometryResources.interiorIndexBuffer, geometryResources.interiorIndexFormat);
-                passEncoder.drawIndexed(geometryResources.interiorIndexCount);
-            }
-            if (geometryResources.curveVertexCount > 0) {
-                passEncoder.setPipeline(curvePipeline);
-                passEncoder.setVertexBuffer(0, geometryResources.curvePositionBuffer);
-                passEncoder.draw(geometryResources.curveVertexCount);
-            }
-            passEncoder.setPipeline(colorPipeline);
-            passEncoder.setVertexBuffer(0, geometryResources.fillPositionBuffer);
-            passEncoder.setIndexBuffer(geometryResources.fillIndexBuffer, 'uint32');
-            passEncoder.drawIndexed(geometryResources.fillIndexCount);
+            draw(device, passEncoder, resources, mvp, viewportWidth ?? 1, viewportHeight ?? 1);
         },
         dispose() {
-            if (geometryResources) {
-                destroyGeometryResources(geometryResources);
-                geometryResources = null;
-            }
-            uniformBuffer.destroy();
+            if (!resources)
+                return;
+            resources.vertexBuffer.destroy();
+            resources.indexBuffer.destroy();
+            resources.uniformBuffer.destroy();
+            resources = null;
         }
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-text",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "3D mesh font geometry and text layout engine for the web",
   "main": "dist/three/index.cjs",
   "module": "dist/three/index.js",
@@ -58,6 +58,11 @@
       "import": "./dist/webgpu/index.js",
       "require": "./dist/webgpu/index.cjs"
     },
+    "./vector/core": {
+      "types": "./dist/vector/core/index.d.ts",
+      "import": "./dist/vector/core/index.js",
+      "require": "./dist/vector/core/index.cjs"
+    },
     "./vector/webgl": {
       "types": "./dist/vector/webgl/index.d.ts",
       "import": "./dist/vector/webgl/index.js",

package/dist/types/vector/GlyphVectorGeometryBuilder.d.ts

@@ -1,26 +0,0 @@
-import type { GlyphCluster, LoadedFont, GlyphOutline, VectorGlyphInfo, VectorTextGeometryInfo } from '../core/types';
-import { Cache } from '../utils/Cache';
-import type { LoopBlinnInput } from './LoopBlinnGeometry';
-export declare class GlyphVectorGeometryBuilder {
-    private outlineCache;
-    private drawCallbacks;
-    private collector;
-    private loadedFont;
-    private fontId;
-    private cacheKeyPrefix;
-    private emptyGlyphs;
-    constructor(loadedFont: LoadedFont, cache?: Cache<string, GlyphOutline>);
-    setFontId(fontId: string): void;
-    clearCache(): void;
-    getCacheStats(): import("../utils/Cache").CacheStats;
-    private collectUniqueGlyphIds;
-    private computePlaneBounds;
-    buildForLoopBlinn(clustersByLine: GlyphCluster[][], scale: number): {
-        loopBlinnInput: LoopBlinnInput;
-        glyphs: VectorGlyphInfo[];
-    };
-    private getOutlineForGlyph;
-    private writeSegmentToTexture;
-    private segmentAABB;
-    buildVectorGeometry(clustersByLine: GlyphCluster[][], scale: number, segmentTextureWidth?: number, bandCount?: number, tileCountX?: number, tileCountY?: number): Omit<VectorTextGeometryInfo, 'query'>;
-}

package/dist/types/vector/LoopBlinnGeometry.d.ts

@@ -1,68 +0,0 @@
-import type { BoundingBox } from '../utils/vectors';
-export interface QuadraticSegment {
-    p0x: number;
-    p0y: number;
-    p1x: number;
-    p1y: number;
-    p2x: number;
-    p2y: number;
-}
-interface ContourVertex {
-    x: number;
-    y: number;
-}
-export interface VectorContour {
-    vertices: ContourVertex[];
-    segments: QuadraticSegment[];
-}
-export interface VectorGlyphAttributes {
-    glyphCenter: Float32Array;
-    glyphIndex: Float32Array;
-    glyphProgress: Float32Array;
-    glyphLineIndex: Float32Array;
-    glyphBaselineY: Float32Array;
-}
-export interface GlyphRange {
-    interiorIndexStart: number;
-    interiorIndexCount: number;
-    curveVertexStart: number;
-    curveVertexCount: number;
-}
-export interface VectorGeometryData {
-    interiorPositions: Float32Array;
-    interiorIndices: Uint32Array;
-    curvePositions: Float32Array;
-    fillPositions: Float32Array;
-    fillIndices: Uint32Array;
-    glyphRanges: GlyphRange[];
-    interiorGlyphAttrs?: VectorGlyphAttributes;
-    curveGlyphAttrs?: VectorGlyphAttributes;
-    fillGlyphAttrs?: VectorGlyphAttributes;
-    planeBounds: BoundingBox;
-    stats: {
-        glyphCount: number;
-        contourCount: number;
-        interiorTriangleCount: number;
-        curveTriangleCount: number;
-    };
-}
-export interface LoopBlinnGlyphInput {
-    offsetX: number;
-    offsetY: number;
-    segments: QuadraticSegment[];
-    bounds: {
-        minX: number;
-        minY: number;
-        maxX: number;
-        maxY: number;
-    };
-    lineIndex: number;
-    baselineY: number;
-}
-export interface LoopBlinnInput {
-    glyphs: LoopBlinnGlyphInput[];
-    planeBounds: BoundingBox;
-}
-export declare function extractContours(segments: QuadraticSegment[]): VectorContour[];
-export declare function buildVectorGeometry(input: LoopBlinnInput): VectorGeometryData;
-export {};

package/dist/types/vector/loopBlinnTSL.d.ts

@@ -1,22 +0,0 @@
-import * as THREE from 'three';
-import type { VectorGeometryData } from './LoopBlinnGeometry';
-export interface VectorMeshOptions {
-    color?: THREE.ColorRepresentation;
-    positionNode?: any;
-    colorNode?: any;
-    center?: boolean;
-}
-export interface VectorMeshes {
-    group: THREE.Group;
-    interiorMesh: THREE.Object3D;
-    curveMesh: THREE.Object3D;
-    fillMesh: THREE.Mesh;
-    interiorGeometry: THREE.BufferGeometry;
-    curveGeometry: THREE.BufferGeometry;
-    fillGeometry: THREE.BufferGeometry;
-    setOffset(x: number, y: number, z?: number): void;
-    updateMaterials(options?: VectorMeshOptions): void;
-    dispose(): void;
-}
-export declare const loopBlinnFragment: any;
-export declare function createVectorMeshes(data: VectorGeometryData, options?: VectorMeshOptions | THREE.ColorRepresentation): VectorMeshes;