three-text 0.1.1 → 0.2.1

package/dist/types/core/layout/TextLayout.d.ts

@@ -1,5 +1,4 @@
 import { LineInfo, TextAlign, LoadedFont, LayoutOptions } from '../types';
-import { BufferGeometry } from 'three';
 export interface TextLayoutOptions extends LayoutOptions {
     text: string;
     letterSpacing: number;
@@ -27,7 +26,7 @@ export declare class TextLayout {
     private loadedFont;
     constructor(loadedFont: LoadedFont);
     computeLines(options: TextLayoutOptions): LayoutResult;
-    applyAlignment(geometry: BufferGeometry, options: AlignmentOptions): {
+    applyAlignment(vertices: Float32Array, options: AlignmentOptions): {
         offset: number;
         adjustedBounds: {
             min: {

package/dist/types/core/shaping/TextShaper.d.ts

@@ -1,8 +1,7 @@
-import { BufferGeometry } from 'three';
 import { LoadedFont, GlyphGeometryInfo, LineInfo, TextDirection, GlyphCluster, ColorOptions } from '../types';
 import { GlyphGeometryBuilder } from '../cache/GlyphGeometryBuilder';
 export interface ShapedResult {
-    geometry: BufferGeometry;
+    geometry: any;
     glyphInfos: GlyphGeometryInfo[];
     planeBounds: {
         min: {

package/dist/types/core/types.d.ts

@@ -1,8 +1,8 @@
-import { Vector2, BufferGeometry, Vector3 } from 'three';
 import type { HyphenationTrieNode } from '../hyphenation';
+import type { Vec2, Vec3, BoundingBox } from './vectors';
 export type { HyphenationTrieNode };
 export interface Path {
-    points: Vector2[];
+    points: Vec2[];
     glyphIndex: number;
     bounds?: {
         minX: number;
@@ -26,7 +26,7 @@ export interface HarfBuzzGlyph {
 export interface GlyphCluster {
     text: string;
     glyphs: HarfBuzzGlyph[];
-    position: Vector3;
+    position: Vec3;
 }
 export interface GlyphContours {
     glyphId: number;
@@ -206,20 +206,17 @@ export interface TextQueryOptions {
     }[];
 }
 export interface TextGeometryInfo {
-    geometry: BufferGeometry;
-    glyphs: GlyphGeometryInfo[];
-    planeBounds: {
-        min: {
-            x: number;
-            y: number;
-            z: number;
-        };
-        max: {
-            x: number;
-            y: number;
-            z: number;
-        };
+    vertices: Float32Array;
+    normals: Float32Array;
+    indices: Uint32Array;
+    colors?: Float32Array;
+    glyphAttributes?: {
+        glyphCenter: Float32Array;
+        glyphIndex: Float32Array;
+        glyphLineIndex: Float32Array;
     };
+    glyphs: GlyphGeometryInfo[];
+    planeBounds: BoundingBox;
     stats: {
         trianglesGenerated: number;
         verticesGenerated: number;

package/dist/types/core/vectors.d.ts

@@ -0,0 +1,75 @@
+export declare class Vec2 {
+    x: number;
+    y: number;
+    constructor(x?: number, y?: number);
+    set(x: number, y: number): Vec2;
+    clone(): Vec2;
+    copy(v: Vec2): Vec2;
+    add(v: Vec2): Vec2;
+    sub(v: Vec2): Vec2;
+    multiply(scalar: number): Vec2;
+    divide(scalar: number): Vec2;
+    length(): number;
+    lengthSq(): number;
+    normalize(): Vec2;
+    dot(v: Vec2): number;
+    distanceTo(v: Vec2): number;
+    distanceToSquared(v: Vec2): number;
+    equals(v: Vec2): boolean;
+    angle(): number;
+}
+export declare class Vec3 {
+    x: number;
+    y: number;
+    z: number;
+    constructor(x?: number, y?: number, z?: number);
+    set(x: number, y: number, z: number): Vec3;
+    clone(): Vec3;
+    copy(v: Vec3): Vec3;
+    add(v: Vec3): Vec3;
+    sub(v: Vec3): Vec3;
+    multiply(scalar: number): Vec3;
+    divide(scalar: number): Vec3;
+    length(): number;
+    lengthSq(): number;
+    normalize(): Vec3;
+    dot(v: Vec3): number;
+    cross(v: Vec3): Vec3;
+    distanceTo(v: Vec3): number;
+    distanceToSquared(v: Vec3): number;
+    equals(v: Vec3): boolean;
+}
+export declare class Box3 {
+    min: Vec3;
+    max: Vec3;
+    constructor(min?: Vec3, max?: Vec3);
+    set(min: Vec3, max: Vec3): Box3;
+    setFromPoints(points: Vec3[]): Box3;
+    makeEmpty(): Box3;
+    isEmpty(): boolean;
+    expandByPoint(point: Vec3): Box3;
+    expandByScalar(scalar: number): Box3;
+    containsPoint(point: Vec3): boolean;
+    containsBox(box: Box3): boolean;
+    intersectsBox(box: Box3): boolean;
+    getCenter(target?: Vec3): Vec3;
+    getSize(target?: Vec3): Vec3;
+    clone(): Box3;
+    copy(box: Box3): Box3;
+    union(box: Box3): Box3;
+    equals(box: Box3): boolean;
+}
+export interface BoundingBox {
+    min: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    max: {
+        x: number;
+        y: number;
+        z: number;
+    };
+}
+export declare function box3ToBoundingBox(box: Box3): BoundingBox;
+export declare function boundingBoxToBox3(bounds: BoundingBox): Box3;

package/dist/types/p5/index.d.ts

@@ -0,0 +1,17 @@
+import type { TextGeometryInfo } from '../core/types';
+interface P5Vector {
+    x: number;
+    y: number;
+    z: number;
+}
+interface P5Geometry {
+    vertices: P5Vector[];
+    faces: number[][];
+    vertexNormals: P5Vector[];
+}
+interface P5Instance {
+    Geometry: new () => P5Geometry;
+    createVector(x: number, y: number, z: number): P5Vector;
+}
+export declare function createP5Geometry(p5Instance: P5Instance | any, textGeometry: TextGeometryInfo): P5Geometry;
+export {};

package/dist/types/{react → three}/ThreeText.d.ts

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import type { TextOptions, TextGeometryInfo } from "../core/types";
+import type { TextOptions, ThreeTextGeometryInfo as TextGeometryInfo } from "./index";
 export interface ThreeTextProps extends Omit<TextOptions, "text"> {
     children: string;
     font: string | ArrayBuffer;
@@ -11,4 +11,4 @@ export interface ThreeTextProps extends Omit<TextOptions, "text"> {
     onError?: (error: Error) => void;
     vertexColors?: boolean;
 }
-export declare const ThreeText: import("react").ForwardRefExoticComponent<ThreeTextProps & import("react").RefAttributes<THREE.Mesh<THREE.BufferGeometry<THREE.NormalBufferAttributes, THREE.BufferGeometryEventMap>, THREE.Material | THREE.Material[], THREE.Object3DEventMap>>>;
+export declare const Text: import("react").ForwardRefExoticComponent<ThreeTextProps & import("react").RefAttributes<THREE.Mesh<THREE.BufferGeometry<THREE.NormalBufferAttributes, THREE.BufferGeometryEventMap>, THREE.Material | THREE.Material[], THREE.Object3DEventMap>>>;

package/dist/types/three/index.d.ts

@@ -0,0 +1,21 @@
+import { BufferGeometry } from 'three';
+import { Text as TextCore } from '../core/Text';
+import type { TextOptions, TextGeometryInfo as CoreTextGeometryInfo, LoadedFont } from '../core/types';
+import type { HyphenationTrieNode } from '../hyphenation';
+export interface ThreeTextGeometryInfo extends Omit<CoreTextGeometryInfo, 'vertices' | 'normals' | 'indices' | 'colors' | 'glyphAttributes'> {
+    geometry: BufferGeometry;
+    getLoadedFont(): LoadedFont | undefined;
+    getCacheStatistics(): any;
+    clearCache(): void;
+    measureTextWidth(text: string, letterSpacing?: number): number;
+}
+export declare class Text {
+    static setHarfBuzzPath: typeof TextCore.setHarfBuzzPath;
+    static setHarfBuzzBuffer: typeof TextCore.setHarfBuzzBuffer;
+    static init: typeof TextCore.init;
+    static registerPattern: typeof TextCore.registerPattern;
+    static preloadPatterns: typeof TextCore.preloadPatterns;
+    static create(options: TextOptions): Promise<ThreeTextGeometryInfo>;
+}
+export type { TextOptions, ThreeTextGeometryInfo as TextGeometryInfo, LoadedFont };
+export type { HyphenationTrieNode };

package/dist/types/three/react.d.ts

@@ -0,0 +1,10 @@
+import { Text as ThreeTextCore } from './index';
+export type { ThreeTextProps } from './ThreeText';
+export declare const Text: import("react").ForwardRefExoticComponent<import("./ThreeText").ThreeTextProps & import("react").RefAttributes<import("three").Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>, import("three").Material | import("three").Material[], import("three").Object3DEventMap>>> & {
+    setHarfBuzzPath: typeof import("..").Text.setHarfBuzzPath;
+    setHarfBuzzBuffer: typeof import("..").Text.setHarfBuzzBuffer;
+    init: typeof import("..").Text.init;
+    registerPattern: typeof import("..").Text.registerPattern;
+    preloadPatterns: typeof import("..").Text.preloadPatterns;
+    create: typeof ThreeTextCore.create;
+};

package/dist/types/webgl/index.d.ts

@@ -0,0 +1,48 @@
+import type { TextGeometryInfo } from '../core/types';
+export interface WebGLBufferSet {
+    buffers: {
+        position: WebGLBuffer;
+        normal: WebGLBuffer;
+        color?: WebGLBuffer;
+        indices: WebGLBuffer;
+        glyphCenter?: WebGLBuffer;
+        glyphIndex?: WebGLBuffer;
+        glyphLineIndex?: WebGLBuffer;
+    };
+    attributes: {
+        position: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        normal: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        color?: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        glyphCenter?: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        glyphIndex?: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        glyphLineIndex?: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+    };
+    drawCount: number;
+    mode: GLenum;
+    dispose(): void;
+}
+export declare function createWebGLBuffers(gl: WebGLRenderingContext | WebGL2RenderingContext, textGeometry: TextGeometryInfo): WebGLBufferSet;

package/dist/types/webgpu/index.d.ts

@@ -0,0 +1,16 @@
+import type { TextGeometryInfo } from '../core/types';
+export interface WebGPUBufferSet {
+    buffers: {
+        vertex: GPUBuffer;
+        color?: GPUBuffer;
+        indices: GPUBuffer;
+    };
+    layout: {
+        vertex: GPUVertexBufferLayout;
+        color?: GPUVertexBufferLayout;
+    };
+    indexFormat: GPUIndexFormat;
+    vertexCount: number;
+    dispose(): void;
+}
+export declare function createWebGPUBuffers(device: GPUDevice, textGeometry: TextGeometryInfo): WebGPUBufferSet;

package/dist/webgl/index.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+// WebGL adapter - lightweight utility to create WebGL buffers from core geometry
+function createWebGLBuffers(gl, textGeometry) {
+    const { vertices, normals, indices, colors, glyphAttributes } = textGeometry;
+    // Create position buffer
+    const positionBuffer = gl.createBuffer();
+    if (!positionBuffer)
+        throw new Error('Failed to create position buffer');
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    // Create normal buffer
+    const normalBuffer = gl.createBuffer();
+    if (!normalBuffer)
+        throw new Error('Failed to create normal buffer');
+    gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
+    // Create index buffer
+    const indexBuffer = gl.createBuffer();
+    if (!indexBuffer)
+        throw new Error('Failed to create index buffer');
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+    const buffers = {
+        position: positionBuffer,
+        normal: normalBuffer,
+        indices: indexBuffer
+    };
+    const attributes = {
+        position: { size: 3, type: gl.FLOAT, normalized: false },
+        normal: { size: 3, type: gl.FLOAT, normalized: false }
+    };
+    // Optional color buffer
+    if (colors) {
+        const colorBuffer = gl.createBuffer();
+        if (!colorBuffer)
+            throw new Error('Failed to create color buffer');
+        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+        buffers.color = colorBuffer;
+        attributes.color = { size: 3, type: gl.FLOAT, normalized: false };
+    }
+    // Optional glyph attribute buffers
+    if (glyphAttributes) {
+        const glyphCenterBuffer = gl.createBuffer();
+        if (!glyphCenterBuffer)
+            throw new Error('Failed to create glyphCenter buffer');
+        gl.bindBuffer(gl.ARRAY_BUFFER, glyphCenterBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, glyphAttributes.glyphCenter, gl.STATIC_DRAW);
+        buffers.glyphCenter = glyphCenterBuffer;
+        attributes.glyphCenter = { size: 3, type: gl.FLOAT, normalized: false };
+        const glyphIndexBuffer = gl.createBuffer();
+        if (!glyphIndexBuffer)
+            throw new Error('Failed to create glyphIndex buffer');
+        gl.bindBuffer(gl.ARRAY_BUFFER, glyphIndexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, glyphAttributes.glyphIndex, gl.STATIC_DRAW);
+        buffers.glyphIndex = glyphIndexBuffer;
+        attributes.glyphIndex = { size: 1, type: gl.FLOAT, normalized: false };
+        const glyphLineIndexBuffer = gl.createBuffer();
+        if (!glyphLineIndexBuffer)
+            throw new Error('Failed to create glyphLineIndex buffer');
+        gl.bindBuffer(gl.ARRAY_BUFFER, glyphLineIndexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, glyphAttributes.glyphLineIndex, gl.STATIC_DRAW);
+        buffers.glyphLineIndex = glyphLineIndexBuffer;
+        attributes.glyphLineIndex = { size: 1, type: gl.FLOAT, normalized: false };
+    }
+    return {
+        buffers,
+        attributes,
+        drawCount: indices.length,
+        mode: gl.TRIANGLES,
+        dispose() {
+            gl.deleteBuffer(positionBuffer);
+            gl.deleteBuffer(normalBuffer);
+            gl.deleteBuffer(indexBuffer);
+            if (buffers.color)
+                gl.deleteBuffer(buffers.color);
+            if (buffers.glyphCenter)
+                gl.deleteBuffer(buffers.glyphCenter);
+            if (buffers.glyphIndex)
+                gl.deleteBuffer(buffers.glyphIndex);
+            if (buffers.glyphLineIndex)
+                gl.deleteBuffer(buffers.glyphLineIndex);
+        }
+    };
+}
+
+exports.createWebGLBuffers = createWebGLBuffers;

package/dist/webgl/index.d.ts

@@ -0,0 +1,51 @@
+import { TextGeometryInfo } from '../core/types';
+
+interface WebGLBufferSet {
+    buffers: {
+        position: WebGLBuffer;
+        normal: WebGLBuffer;
+        color?: WebGLBuffer;
+        indices: WebGLBuffer;
+        glyphCenter?: WebGLBuffer;
+        glyphIndex?: WebGLBuffer;
+        glyphLineIndex?: WebGLBuffer;
+    };
+    attributes: {
+        position: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        normal: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        color?: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        glyphCenter?: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        glyphIndex?: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+        glyphLineIndex?: {
+            size: number;
+            type: GLenum;
+            normalized: boolean;
+        };
+    };
+    drawCount: number;
+    mode: GLenum;
+    dispose(): void;
+}
+declare function createWebGLBuffers(gl: WebGLRenderingContext | WebGL2RenderingContext, textGeometry: TextGeometryInfo): WebGLBufferSet;
+
+export { WebGLBufferSet, createWebGLBuffers };

package/dist/webgl/index.js

@@ -0,0 +1,86 @@
+// WebGL adapter - lightweight utility to create WebGL buffers from core geometry
+function createWebGLBuffers(gl, textGeometry) {
+    const { vertices, normals, indices, colors, glyphAttributes } = textGeometry;
+    // Create position buffer
+    const positionBuffer = gl.createBuffer();
+    if (!positionBuffer)
+        throw new Error('Failed to create position buffer');
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    // Create normal buffer
+    const normalBuffer = gl.createBuffer();
+    if (!normalBuffer)
+        throw new Error('Failed to create normal buffer');
+    gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
+    // Create index buffer
+    const indexBuffer = gl.createBuffer();
+    if (!indexBuffer)
+        throw new Error('Failed to create index buffer');
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+    const buffers = {
+        position: positionBuffer,
+        normal: normalBuffer,
+        indices: indexBuffer
+    };
+    const attributes = {
+        position: { size: 3, type: gl.FLOAT, normalized: false },
+        normal: { size: 3, type: gl.FLOAT, normalized: false }
+    };
+    // Optional color buffer
+    if (colors) {
+        const colorBuffer = gl.createBuffer();
+        if (!colorBuffer)
+            throw new Error('Failed to create color buffer');
+        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+        buffers.color = colorBuffer;
+        attributes.color = { size: 3, type: gl.FLOAT, normalized: false };
+    }
+    // Optional glyph attribute buffers
+    if (glyphAttributes) {
+        const glyphCenterBuffer = gl.createBuffer();
+        if (!glyphCenterBuffer)
+            throw new Error('Failed to create glyphCenter buffer');
+        gl.bindBuffer(gl.ARRAY_BUFFER, glyphCenterBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, glyphAttributes.glyphCenter, gl.STATIC_DRAW);
+        buffers.glyphCenter = glyphCenterBuffer;
+        attributes.glyphCenter = { size: 3, type: gl.FLOAT, normalized: false };
+        const glyphIndexBuffer = gl.createBuffer();
+        if (!glyphIndexBuffer)
+            throw new Error('Failed to create glyphIndex buffer');
+        gl.bindBuffer(gl.ARRAY_BUFFER, glyphIndexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, glyphAttributes.glyphIndex, gl.STATIC_DRAW);
+        buffers.glyphIndex = glyphIndexBuffer;
+        attributes.glyphIndex = { size: 1, type: gl.FLOAT, normalized: false };
+        const glyphLineIndexBuffer = gl.createBuffer();
+        if (!glyphLineIndexBuffer)
+            throw new Error('Failed to create glyphLineIndex buffer');
+        gl.bindBuffer(gl.ARRAY_BUFFER, glyphLineIndexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, glyphAttributes.glyphLineIndex, gl.STATIC_DRAW);
+        buffers.glyphLineIndex = glyphLineIndexBuffer;
+        attributes.glyphLineIndex = { size: 1, type: gl.FLOAT, normalized: false };
+    }
+    return {
+        buffers,
+        attributes,
+        drawCount: indices.length,
+        mode: gl.TRIANGLES,
+        dispose() {
+            gl.deleteBuffer(positionBuffer);
+            gl.deleteBuffer(normalBuffer);
+            gl.deleteBuffer(indexBuffer);
+            if (buffers.color)
+                gl.deleteBuffer(buffers.color);
+            if (buffers.glyphCenter)
+                gl.deleteBuffer(buffers.glyphCenter);
+            if (buffers.glyphIndex)
+                gl.deleteBuffer(buffers.glyphIndex);
+            if (buffers.glyphLineIndex)
+                gl.deleteBuffer(buffers.glyphLineIndex);
+        }
+    };
+}
+
+export { createWebGLBuffers };

package/dist/webgpu/index.cjs

@@ -0,0 +1,99 @@
+'use strict';
+
+// WebGPU adapter - lightweight utility to create GPU buffers from core geometry
+function createWebGPUBuffers(device, textGeometry) {
+    const { vertices, normals, indices, colors } = textGeometry;
+    const vertexCount = indices.length;
+    // Interleave position and normal data for better cache coherency
+    // Layout: [px, py, pz, nx, ny, nz, px, py, pz, nx, ny, nz, ...]
+    const interleavedData = new Float32Array((vertices.length / 3) * 6);
+    for (let i = 0; i < vertices.length / 3; i++) {
+        const baseIndex = i * 6;
+        const vertIndex = i * 3;
+        // Position (NO FLIP - pass through)
+        interleavedData[baseIndex] = vertices[vertIndex];
+        interleavedData[baseIndex + 1] = vertices[vertIndex + 1];
+        interleavedData[baseIndex + 2] = vertices[vertIndex + 2];
+        // Normal (NO FLIP - pass through)
+        interleavedData[baseIndex + 3] = normals[vertIndex];
+        interleavedData[baseIndex + 4] = normals[vertIndex + 1];
+        interleavedData[baseIndex + 5] = normals[vertIndex + 2];
+    }
+    // Create vertex buffer with interleaved data
+    const vertexBuffer = device.createBuffer({
+        size: interleavedData.byteLength,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        mappedAtCreation: true
+    });
+    new Float32Array(vertexBuffer.getMappedRange()).set(interleavedData);
+    vertexBuffer.unmap();
+    // Create index buffer (NO FLIP - pass through)
+    const indexBuffer = device.createBuffer({
+        size: indices.byteLength,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+        mappedAtCreation: true
+    });
+    new Uint32Array(indexBuffer.getMappedRange()).set(indices);
+    indexBuffer.unmap();
+    // Vertex buffer layout for interleaved data
+    const vertexLayout = {
+        arrayStride: 24, // 6 floats * 4 bytes = 24 bytes per vertex
+        attributes: [
+            {
+                shaderLocation: 0,
+                offset: 0,
+                format: 'float32x3' // position
+            },
+            {
+                shaderLocation: 1,
+                offset: 12, // 3 floats * 4 bytes
+                format: 'float32x3' // normal
+            }
+        ]
+    };
+    const buffers = {
+        vertex: vertexBuffer,
+        indices: indexBuffer
+    };
+    const layout = {
+        vertex: vertexLayout
+    };
+    // Optional color buffer
+    let colorBuffer;
+    let colorLayout;
+    if (colors) {
+        colorBuffer = device.createBuffer({
+            size: colors.byteLength,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            mappedAtCreation: true
+        });
+        new Float32Array(colorBuffer.getMappedRange()).set(colors);
+        colorBuffer.unmap();
+        colorLayout = {
+            arrayStride: 12, // 3 floats * 4 bytes
+            attributes: [
+                {
+                    shaderLocation: 2,
+                    offset: 0,
+                    format: 'float32x3'
+                }
+            ]
+        };
+        buffers.color = colorBuffer;
+        layout.color = colorLayout;
+    }
+    return {
+        buffers,
+        layout,
+        indexFormat: 'uint32',
+        vertexCount,
+        dispose() {
+            vertexBuffer.destroy();
+            indexBuffer.destroy();
+            if (colorBuffer)
+                colorBuffer.destroy();
+        }
+    };
+}
+
+exports.createWebGPUBuffers = createWebGPUBuffers;

package/dist/webgpu/index.d.ts

@@ -0,0 +1,19 @@
+import { TextGeometryInfo } from '../core/types';
+
+interface WebGPUBufferSet {
+    buffers: {
+        vertex: GPUBuffer;
+        color?: GPUBuffer;
+        indices: GPUBuffer;
+    };
+    layout: {
+        vertex: GPUVertexBufferLayout;
+        color?: GPUVertexBufferLayout;
+    };
+    indexFormat: GPUIndexFormat;
+    vertexCount: number;
+    dispose(): void;
+}
+declare function createWebGPUBuffers(device: GPUDevice, textGeometry: TextGeometryInfo): WebGPUBufferSet;
+
+export { WebGPUBufferSet, createWebGPUBuffers };