@cyclonium/canvas-3d 0.0.100

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { Canvas3D, Canvas3DLineCap, Canvas3DLineJoin } from './canvas-3d.js';
+export type { Canvas3DBoxOptions, Canvas3DCapsuleOptions, Canvas3DCylinderOptions, Canvas3DDiscOptions, Canvas3DLineOptions, Canvas3DPrimitiveMode, Canvas3DPrimitiveOptions, Canvas3DQuadOptions, Canvas3DRingOptions, Canvas3DSphereOptions, Canvas3DW2, Canvas3DW3, Canvas3DW3Scope, } from './canvas-3d.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -0,0 +1,2 @@
+export { Canvas3D, Canvas3DLineCap, Canvas3DLineJoin } from './canvas-3d.js';
+//# sourceMappingURL=index.js.map

package/lib/types.d.ts

@@ -0,0 +1,248 @@
+import type { Color, gfx, Mat4, Material, Node, renderer, RenderingSubMesh, Vec2, Vec3 } from 'cc';
+export interface Canvas3DOptions {
+    readonly node: Node;
+}
+export declare enum Canvas3DLineJoin {
+    round = "round",
+    bevel = "bevel",
+    miter = "miter"
+}
+export declare enum Canvas3DLineCap {
+    butt = "butt",
+    round = "round",
+    square = "square"
+}
+export interface SubPath {
+    readonly points: Vec3[];
+    closed: boolean;
+}
+export declare enum PathEntryType {
+    subPath = "subPath",
+    box = "box",
+    circle = "circle"
+}
+export type PathEntry = {
+    readonly type: PathEntryType.subPath;
+    readonly subPath: SubPath;
+} | {
+    readonly type: PathEntryType.box;
+    readonly center: Vec3;
+    readonly halfExtents: Vec3;
+} | {
+    readonly type: PathEntryType.circle;
+    readonly center: Vec3;
+    readonly radius: number;
+};
+export interface MeshGeometry {
+    readonly vertices: number[];
+    readonly indices: number[];
+}
+export interface DrawOptions {
+    readonly depthTest: boolean;
+    readonly depthWrite: boolean;
+}
+export interface DrawCommand extends DrawOptions {
+    readonly geometry: MeshGeometry;
+}
+export interface RenderingDrawCommand {
+    readonly renderingSubMeshRecord: RenderingSubMeshRecord;
+    readonly material: Material;
+}
+export interface RenderingSubMeshRecord {
+    readonly renderingSubMesh: RenderingSubMesh;
+    readonly vertexBuffer: gfx.Buffer;
+    readonly indexBuffer: gfx.Buffer;
+    vertexBufferBytes: number;
+    indexBufferBytes: number;
+    indexBytesPerElement: number;
+}
+export interface StrokeStyle {
+    readonly lineWidth: number;
+    readonly lineJoin: Canvas3DLineJoin;
+    readonly lineCap: Canvas3DLineCap;
+    readonly miterLimit: number;
+    readonly lineDash: readonly number[];
+    readonly lineDashOffset: number;
+}
+export interface StrokeSegmentWriter {
+    readonly geometry: MeshGeometry;
+    readonly direction: Vec3;
+    readonly normalA: Vec3;
+    readonly normalB: Vec3;
+    vertexOffsetF: number;
+    indexOffset: number;
+    baseVertex: number;
+}
+export interface RenderRecord {
+    readonly renderScene: renderer.RenderScene;
+    readonly renderingSubMeshRecords: RenderingSubMeshRecord[];
+    readonly model: renderer.scene.Model;
+}
+export interface PrimitiveDrawState {
+    lineWidth: number;
+    lineJoin: Canvas3DLineJoin;
+    lineCap: Canvas3DLineCap;
+    miterLimit: number;
+    lineDash: readonly number[];
+    lineDashOffset: number;
+    fillColor: Color;
+    strokeColor: Color;
+    transform: Mat4;
+    depthTest: boolean;
+    depthWrite: boolean;
+}
+export type EnqueueGeometry = (geometry: MeshGeometry, options?: DrawOptions) => void;
+export type Canvas3DPrimitiveMode = 'wireframe' | 'solid' | 'both';
+export interface Canvas3DPrimitiveOptions {
+    readonly color?: Readonly<Color> | string;
+    readonly strokeColor?: Readonly<Color> | string;
+    readonly fillColor?: Readonly<Color> | string;
+    readonly lineWidth?: number;
+    readonly lineJoin?: Canvas3DLineJoin;
+    readonly lineCap?: Canvas3DLineCap;
+    readonly lineDash?: readonly number[];
+    readonly lineDashOffset?: number;
+    readonly transform?: Mat4;
+    readonly depthTest?: boolean;
+    readonly depthWrite?: boolean;
+    readonly mode?: Canvas3DPrimitiveMode;
+}
+export interface Canvas3DLineOptions extends Canvas3DPrimitiveOptions {
+    readonly from: Vec3;
+    readonly to: Vec3;
+}
+export interface Canvas3DBoxOptions extends Canvas3DPrimitiveOptions {
+    readonly center: Vec3;
+    readonly halfExtents: number | Vec3;
+}
+export interface Canvas3DQuadOptions extends Canvas3DPrimitiveOptions {
+    readonly center: Vec3;
+    readonly normal: Vec3;
+    readonly halfExtents: number | Vec2;
+}
+export interface Canvas3DCylinderOptions extends Canvas3DPrimitiveOptions {
+    readonly center: Vec3;
+    readonly radius: number;
+    readonly height: number;
+    readonly up?: Vec3;
+    readonly radialSegments?: number;
+}
+export interface Canvas3DDiscOptions extends Canvas3DPrimitiveOptions {
+    readonly center: Vec3;
+    readonly normal: Vec3;
+    readonly radius: number;
+    readonly segments?: number;
+}
+export interface Canvas3DRingOptions extends Canvas3DPrimitiveOptions {
+    readonly center: Vec3;
+    readonly normal: Vec3;
+    readonly innerRadius: number;
+    readonly outerRadius: number;
+    readonly segments?: number;
+}
+export interface Canvas3DSphereOptions extends Canvas3DPrimitiveOptions {
+    readonly center: Vec3;
+    readonly radius: number;
+    readonly segments?: number;
+    readonly latitudeSegments?: number;
+    readonly longitudeSegments?: number;
+}
+export interface Canvas3DCapsuleOptions extends Canvas3DPrimitiveOptions {
+    readonly center: Vec3;
+    readonly radius: number;
+    readonly height: number;
+    readonly up?: Vec3;
+    readonly radialSegments?: number;
+    readonly capSegments?: number;
+}
+export interface Canvas3DW2 {
+    get lineWidth(): number;
+    set lineWidth(value: number);
+    get strokeWidth(): number;
+    set strokeWidth(value: number);
+    get lineJoin(): Canvas3DLineJoin;
+    set lineJoin(value: Canvas3DLineJoin);
+    get lineCap(): Canvas3DLineCap;
+    set lineCap(value: Canvas3DLineCap);
+    get miterLimit(): number;
+    set miterLimit(value: number);
+    get lineDash(): number[];
+    set lineDash(value: readonly number[]);
+    get lineDashOffset(): number;
+    set lineDashOffset(value: number);
+    get strokeColor(): Color;
+    set strokeColor(value: Color);
+    get fillColor(): Color;
+    set fillColor(value: Color);
+    get strokeStyle(): Color;
+    set strokeStyle(value: Readonly<Color> | string);
+    get fillStyle(): Color;
+    set fillStyle(value: Readonly<Color> | string);
+    beginPath(): this;
+    closePath(): this;
+    moveTo(point: Vec3): this;
+    moveTo(x: number, y: number, z?: number): this;
+    lineTo(point: Vec3): this;
+    lineTo(x: number, y: number, z?: number): this;
+    rect(x: number, y: number, width: number, height: number, z?: number): this;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean, z?: number): this;
+    ray(dir: Vec3, length: number): this;
+    box(center: Vec3, halfExtents: number | Vec3): this;
+    circle(center: Vec3, radius: number): this;
+    stroke(): this;
+    fill(): this;
+    getLineDash(): number[];
+    setLineDash(value: readonly number[]): void;
+}
+export interface Canvas3DW3 {
+    scope(draw: (w3: Canvas3DW3Scope) => void): this;
+    line(options: Canvas3DLineOptions): this;
+    box(options: Canvas3DBoxOptions): this;
+    quad(options: Canvas3DQuadOptions): this;
+    cylinder(options: Canvas3DCylinderOptions): this;
+    disc(options: Canvas3DDiscOptions): this;
+    ring(options: Canvas3DRingOptions): this;
+    sphere(options: Canvas3DSphereOptions): this;
+    capsule(options: Canvas3DCapsuleOptions): this;
+}
+export interface Canvas3DW3Scope {
+    get lineWidth(): number;
+    set lineWidth(value: number);
+    get lineJoin(): Canvas3DLineJoin;
+    set lineJoin(value: Canvas3DLineJoin);
+    get lineCap(): Canvas3DLineCap;
+    set lineCap(value: Canvas3DLineCap);
+    get lineDash(): number[];
+    set lineDash(value: readonly number[]);
+    get lineDashOffset(): number;
+    set lineDashOffset(value: number);
+    get strokeColor(): Color;
+    set strokeColor(value: Color);
+    get fillColor(): Color;
+    set fillColor(value: Color);
+    color(value: Readonly<Color> | string): this;
+    depthTest(value?: boolean): this;
+    depthWrite(value?: boolean): this;
+    save(): this;
+    restore(): this;
+    resetTransform(): this;
+    setTransform(transform: Mat4): this;
+    transform(transform: Mat4): this;
+    translate(x: number, y: number, z?: number): this;
+    scale(x: number, y?: number, z?: number): this;
+    rotate(rad: number, axis: Vec3): this;
+    rotateX(rad: number): this;
+    rotateY(rad: number): this;
+    rotateZ(rad: number): this;
+    line(options: Canvas3DLineOptions): this;
+    box(options: Canvas3DBoxOptions): this;
+    quad(options: Canvas3DQuadOptions): this;
+    cylinder(options: Canvas3DCylinderOptions): this;
+    disc(options: Canvas3DDiscOptions): this;
+    ring(options: Canvas3DRingOptions): this;
+    sphere(options: Canvas3DSphereOptions): this;
+    capsule(options: Canvas3DCapsuleOptions): this;
+    getLineDash(): number[];
+    setLineDash(value: readonly number[]): void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/types.js

@@ -0,0 +1,19 @@
+export var Canvas3DLineJoin;
+(function (Canvas3DLineJoin) {
+    Canvas3DLineJoin["round"] = "round";
+    Canvas3DLineJoin["bevel"] = "bevel";
+    Canvas3DLineJoin["miter"] = "miter";
+})(Canvas3DLineJoin || (Canvas3DLineJoin = {}));
+export var Canvas3DLineCap;
+(function (Canvas3DLineCap) {
+    Canvas3DLineCap["butt"] = "butt";
+    Canvas3DLineCap["round"] = "round";
+    Canvas3DLineCap["square"] = "square";
+})(Canvas3DLineCap || (Canvas3DLineCap = {}));
+export var PathEntryType;
+(function (PathEntryType) {
+    PathEntryType["subPath"] = "subPath";
+    PathEntryType["box"] = "box";
+    PathEntryType["circle"] = "circle";
+})(PathEntryType || (PathEntryType = {}));
+//# sourceMappingURL=types.js.map

package/lib/w2.d.ts

@@ -0,0 +1,58 @@
+import { Color, Vec3 } from 'cc';
+import { Canvas3DLineCap, Canvas3DLineJoin } from './types.js';
+import type { Canvas3DW2, EnqueueGeometry } from './types.js';
+export declare class Canvas3DW2Impl implements Canvas3DW2 {
+    constructor(enqueueGeometry: EnqueueGeometry);
+    get lineWidth(): number;
+    set lineWidth(value: number);
+    get strokeWidth(): number;
+    set strokeWidth(value: number);
+    get lineJoin(): Canvas3DLineJoin;
+    set lineJoin(value: Canvas3DLineJoin);
+    get lineCap(): Canvas3DLineCap;
+    set lineCap(value: Canvas3DLineCap);
+    get miterLimit(): number;
+    set miterLimit(value: number);
+    get lineDash(): number[];
+    set lineDash(value: readonly number[]);
+    get lineDashOffset(): number;
+    set lineDashOffset(value: number);
+    get strokeColor(): Color;
+    set strokeColor(value: Color);
+    get fillColor(): Color;
+    set fillColor(value: Color);
+    get strokeStyle(): Color;
+    set strokeStyle(value: Readonly<Color> | string);
+    get fillStyle(): Color;
+    set fillStyle(value: Readonly<Color> | string);
+    beginPath(): this;
+    closePath(): this;
+    moveTo(point: Vec3): this;
+    moveTo(x: number, y: number, z?: number): this;
+    lineTo(point: Vec3): this;
+    lineTo(x: number, y: number, z?: number): this;
+    rect(x: number, y: number, width: number, height: number, z?: number): this;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean, z?: number): this;
+    ray(dir: Vec3, length: number): this;
+    box(center: Vec3, halfExtents: number | Vec3): this;
+    circle(center: Vec3, radius: number): this;
+    stroke(): this;
+    fill(): this;
+    getLineDash(): number[];
+    setLineDash(value: readonly number[]): void;
+    private _createStrokeStyle;
+    private _lineWidth;
+    private _lineJoin;
+    private _lineCap;
+    private _miterLimit;
+    private _lineDash;
+    private _lineDashOffset;
+    private readonly _strokeColor;
+    private readonly _fillColor;
+    private readonly _pathEntries;
+    private readonly _currentPoint;
+    private readonly _enqueueGeometry;
+    private _currentSubPath;
+    private _hasCurrentPoint;
+}
+//# sourceMappingURL=w2.d.ts.map

package/lib/w2.js

@@ -0,0 +1,256 @@
+import { Color, Vec3 } from 'cc';
+import { appendBoxFill, appendBoxStroke, appendCircleFill, appendCircleStroke, appendSubPathFill, appendSubPathStroke, createMeshGeometry, epsilon, normalizeArcDelta, normalizeLineDash, resolveHalfExtents, resolvePoint, roundSegmentRadians, setColor, } from './geometry.js';
+import { Canvas3DLineCap, Canvas3DLineJoin, PathEntryType } from './types.js';
+export class Canvas3DW2Impl {
+    constructor(enqueueGeometry) {
+        this._enqueueGeometry = enqueueGeometry;
+    }
+    get lineWidth() {
+        return this._lineWidth;
+    }
+    set lineWidth(value) {
+        this._lineWidth = Math.max(0, value);
+    }
+    get strokeWidth() {
+        return this._lineWidth;
+    }
+    set strokeWidth(value) {
+        this.lineWidth = value;
+    }
+    get lineJoin() {
+        return this._lineJoin;
+    }
+    set lineJoin(value) {
+        this._lineJoin = value;
+    }
+    get lineCap() {
+        return this._lineCap;
+    }
+    set lineCap(value) {
+        this._lineCap = value;
+    }
+    get miterLimit() {
+        return this._miterLimit;
+    }
+    set miterLimit(value) {
+        this._miterLimit = Math.max(0, value);
+    }
+    get lineDash() {
+        return this.getLineDash();
+    }
+    set lineDash(value) {
+        this.setLineDash(value);
+    }
+    get lineDashOffset() {
+        return this._lineDashOffset;
+    }
+    set lineDashOffset(value) {
+        this._lineDashOffset = Number.isFinite(value) ? value : 0;
+    }
+    get strokeColor() {
+        return this._strokeColor;
+    }
+    set strokeColor(value) {
+        this._strokeColor.set(value);
+    }
+    get fillColor() {
+        return this._fillColor;
+    }
+    set fillColor(value) {
+        this._fillColor.set(value);
+    }
+    get strokeStyle() {
+        return this.strokeColor;
+    }
+    set strokeStyle(value) {
+        setColor(this._strokeColor, value);
+    }
+    get fillStyle() {
+        return this.fillColor;
+    }
+    set fillStyle(value) {
+        setColor(this._fillColor, value);
+    }
+    beginPath() {
+        this._pathEntries.length = 0;
+        this._currentSubPath = undefined;
+        this._hasCurrentPoint = false;
+        return this;
+    }
+    closePath() {
+        if (!this._currentSubPath) {
+            return this;
+        }
+        this._currentSubPath.closed = true;
+        const firstPoint = this._currentSubPath.points[0];
+        if (firstPoint) {
+            this._currentPoint.set(firstPoint);
+            this._hasCurrentPoint = true;
+        }
+        return this;
+    }
+    moveTo(pointOrX, y, z) {
+        const point = resolvePoint(pointOrX, y, z);
+        const subPath = {
+            points: [point],
+            closed: false,
+        };
+        this._pathEntries.push({
+            type: PathEntryType.subPath,
+            subPath,
+        });
+        this._currentSubPath = subPath;
+        this._currentPoint.set(point);
+        this._hasCurrentPoint = true;
+        return this;
+    }
+    lineTo(pointOrX, y, z) {
+        const point = resolvePoint(pointOrX, y, z);
+        if (!this._currentSubPath) {
+            return this.moveTo(point);
+        }
+        this._currentSubPath.points.push(point);
+        this._currentPoint.set(point);
+        this._hasCurrentPoint = true;
+        return this;
+    }
+    rect(x, y, width, height, z = 0) {
+        const subPath = {
+            points: [
+                new Vec3(x, y, z),
+                new Vec3(x + width, y, z),
+                new Vec3(x + width, y + height, z),
+                new Vec3(x, y + height, z),
+            ],
+            closed: true,
+        };
+        this._pathEntries.push({
+            type: PathEntryType.subPath,
+            subPath,
+        });
+        this._currentSubPath = subPath;
+        this._currentPoint.set(subPath.points[0]);
+        this._hasCurrentPoint = true;
+        return this;
+    }
+    arc(x, y, radius, startAngle, endAngle, counterclockwise = false, z = 0) {
+        if (radius <= 0) {
+            return this;
+        }
+        const delta = normalizeArcDelta(startAngle, endAngle, counterclockwise);
+        const segmentCount = Math.max(1, Math.ceil(Math.abs(delta) / roundSegmentRadians));
+        for (let iSegment = 0; iSegment <= segmentCount; iSegment++) {
+            const angle = startAngle + delta * iSegment / segmentCount;
+            const point = new Vec3(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius, z);
+            if (iSegment === 0 && !this._currentSubPath) {
+                this.moveTo(point);
+            }
+            else {
+                this.lineTo(point);
+            }
+        }
+        return this;
+    }
+    ray(dir, length) {
+        const normalizedDir = dir.clone();
+        if (normalizedDir.lengthSqr() <= epsilon) {
+            return this;
+        }
+        normalizedDir.normalize();
+        const start = this._hasCurrentPoint ? this._currentPoint.clone() : Vec3.ZERO.clone();
+        const end = Vec3.scaleAndAdd(new Vec3(), start, normalizedDir, length);
+        if (!this._currentSubPath) {
+            this.moveTo(start);
+        }
+        this.lineTo(end);
+        return this;
+    }
+    box(center, halfExtents) {
+        this._pathEntries.push({
+            type: PathEntryType.box,
+            center: center.clone(),
+            halfExtents: resolveHalfExtents(halfExtents),
+        });
+        return this;
+    }
+    circle(center, radius) {
+        this._pathEntries.push({
+            type: PathEntryType.circle,
+            center: center.clone(),
+            radius: Math.max(0, radius),
+        });
+        return this;
+    }
+    stroke() {
+        const color = this._strokeColor.clone();
+        const strokeStyle = this._createStrokeStyle();
+        if (strokeStyle.lineWidth <= 0) {
+            return this;
+        }
+        const geometry = createMeshGeometry();
+        for (const entry of this._pathEntries) {
+            switch (entry.type) {
+                case PathEntryType.subPath:
+                    appendSubPathStroke(geometry, entry.subPath, strokeStyle, color);
+                    break;
+                case PathEntryType.box:
+                    appendBoxStroke(geometry, entry.center, entry.halfExtents, strokeStyle, color);
+                    break;
+                case PathEntryType.circle:
+                    appendCircleStroke(geometry, entry.center, entry.radius, strokeStyle, color);
+                    break;
+            }
+        }
+        this._enqueueGeometry(geometry);
+        return this;
+    }
+    fill() {
+        const color = this._fillColor.clone();
+        const geometry = createMeshGeometry();
+        for (const entry of this._pathEntries) {
+            switch (entry.type) {
+                case PathEntryType.subPath:
+                    appendSubPathFill(geometry, entry.subPath, color);
+                    break;
+                case PathEntryType.box:
+                    appendBoxFill(geometry, entry.center, entry.halfExtents, color);
+                    break;
+                case PathEntryType.circle:
+                    appendCircleFill(geometry, entry.center, entry.radius, color);
+                    break;
+            }
+        }
+        this._enqueueGeometry(geometry);
+        return this;
+    }
+    getLineDash() {
+        return this._lineDash.slice();
+    }
+    setLineDash(value) {
+        this._lineDash = normalizeLineDash(value);
+    }
+    _createStrokeStyle() {
+        return {
+            lineWidth: this._lineWidth,
+            lineJoin: this._lineJoin,
+            lineCap: this._lineCap,
+            miterLimit: this._miterLimit,
+            lineDash: this.getLineDash(),
+            lineDashOffset: this._lineDashOffset,
+        };
+    }
+    _lineWidth = 1;
+    _lineJoin = Canvas3DLineJoin.miter;
+    _lineCap = Canvas3DLineCap.butt;
+    _miterLimit = 10;
+    _lineDash = [];
+    _lineDashOffset = 0;
+    _strokeColor = Color.WHITE.clone();
+    _fillColor = Color.WHITE.clone();
+    _pathEntries = [];
+    _currentPoint = new Vec3();
+    _enqueueGeometry;
+    _currentSubPath = undefined;
+    _hasCurrentPoint = false;
+}
+//# sourceMappingURL=w2.js.map

package/lib/w3.d.ts

@@ -0,0 +1,17 @@
+import type { Canvas3DBoxOptions, Canvas3DCapsuleOptions, Canvas3DCylinderOptions, Canvas3DDiscOptions, Canvas3DLineOptions, Canvas3DQuadOptions, Canvas3DRingOptions, Canvas3DSphereOptions, Canvas3DW3, Canvas3DW3Scope, EnqueueGeometry } from './types.js';
+export declare class Canvas3DW3Impl implements Canvas3DW3 {
+    constructor(enqueueGeometry: EnqueueGeometry);
+    scope(draw: (w3: Canvas3DW3Scope) => void): this;
+    line(options: Canvas3DLineOptions): this;
+    box(options: Canvas3DBoxOptions): this;
+    quad(options: Canvas3DQuadOptions): this;
+    cylinder(options: Canvas3DCylinderOptions): this;
+    disc(options: Canvas3DDiscOptions): this;
+    ring(options: Canvas3DRingOptions): this;
+    sphere(options: Canvas3DSphereOptions): this;
+    capsule(options: Canvas3DCapsuleOptions): this;
+    private _drawDirect;
+    private readonly _enqueueGeometry;
+    private readonly _directScope;
+}
+//# sourceMappingURL=w3.d.ts.map