@cyclonium/canvas-3d 0.0.100

package/lib/canvas-3d.d.ts

@@ -0,0 +1,58 @@
+import type { Vec3 } from 'cc';
+import type { Canvas3DOptions, Canvas3DW2, Canvas3DW3 } from './types.js';
+export { Canvas3DLineCap, Canvas3DLineJoin } from './types.js';
+export type { Canvas3DBoxOptions, Canvas3DCapsuleOptions, Canvas3DCylinderOptions, Canvas3DDiscOptions, Canvas3DLineOptions, Canvas3DOptions, Canvas3DPrimitiveMode, Canvas3DPrimitiveOptions, Canvas3DQuadOptions, Canvas3DRingOptions, Canvas3DSphereOptions, Canvas3DW2, Canvas3DW3, Canvas3DW3Scope, } from './types.js';
+export declare class Canvas3D {
+    constructor(opts: Canvas3DOptions);
+    get w2(): Canvas3DW2;
+    get w3(): Canvas3DW3;
+    get lineWidth(): number;
+    set lineWidth(value: number);
+    get strokeWidth(): number;
+    set strokeWidth(value: number);
+    get lineJoin(): import("./types.js").Canvas3DLineJoin;
+    set lineJoin(value: import("./types.js").Canvas3DLineJoin);
+    get lineCap(): import("./types.js").Canvas3DLineCap;
+    set lineCap(value: import("./types.js").Canvas3DLineCap);
+    get miterLimit(): number;
+    set miterLimit(value: number);
+    get lineDash(): number[];
+    set lineDash(value: number[]);
+    get lineDashOffset(): number;
+    set lineDashOffset(value: number);
+    get strokeColor(): import("cc").math.Color;
+    set strokeColor(value: import("cc").math.Color);
+    get fillColor(): import("cc").math.Color;
+    set fillColor(value: import("cc").math.Color);
+    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;
+    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;
+    /**
+     * 渲染当前画布。通常在帧结束时调用。
+     */
+    commit(): void;
+    destroy(): void;
+    private readonly _node;
+    private readonly _w2;
+    private readonly _w3;
+    private readonly _drawCommands;
+    private readonly _materials;
+    private _renderRecord;
+    private readonly _enqueueGeometry;
+    private _getMaterial;
+    private _canReuseRenderRecord;
+    private _createRenderingDrawCommands;
+    private _destroyRenderRecord;
+    private _clearPendingDraws;
+}
+//# sourceMappingURL=canvas-3d.d.ts.map

package/lib/canvas-3d.js

@@ -0,0 +1,254 @@
+import { gfx, Material, renderer } from 'cc';
+import { appendMeshGeometry, createOrUpdateRenderingSubMeshRecord, defaultDrawOptions, getMaterialKey, hasGeometry, } from './geometry.js';
+import { Canvas3DW2Impl } from './w2.js';
+import { Canvas3DW3Impl } from './w3.js';
+export { Canvas3DLineCap, Canvas3DLineJoin } from './types.js';
+export class Canvas3D {
+    constructor(opts) {
+        this._node = opts.node;
+        this._w2 = new Canvas3DW2Impl(this._enqueueGeometry);
+        this._w3 = new Canvas3DW3Impl(this._enqueueGeometry);
+    }
+    get w2() {
+        return this._w2;
+    }
+    get w3() {
+        return this._w3;
+    }
+    get lineWidth() {
+        return this._w2.lineWidth;
+    }
+    set lineWidth(value) {
+        this._w2.lineWidth = value;
+    }
+    get strokeWidth() {
+        return this._w2.strokeWidth;
+    }
+    set strokeWidth(value) {
+        this._w2.strokeWidth = value;
+    }
+    get lineJoin() {
+        return this._w2.lineJoin;
+    }
+    set lineJoin(value) {
+        this._w2.lineJoin = value;
+    }
+    get lineCap() {
+        return this._w2.lineCap;
+    }
+    set lineCap(value) {
+        this._w2.lineCap = value;
+    }
+    get miterLimit() {
+        return this._w2.miterLimit;
+    }
+    set miterLimit(value) {
+        this._w2.miterLimit = value;
+    }
+    get lineDash() {
+        return this.getLineDash();
+    }
+    set lineDash(value) {
+        this.setLineDash(value);
+    }
+    get lineDashOffset() {
+        return this._w2.lineDashOffset;
+    }
+    set lineDashOffset(value) {
+        this._w2.lineDashOffset = value;
+    }
+    get strokeColor() {
+        return this._w2.strokeColor;
+    }
+    set strokeColor(value) {
+        this._w2.strokeColor = value;
+    }
+    get fillColor() {
+        return this._w2.fillColor;
+    }
+    set fillColor(value) {
+        this._w2.fillColor = value;
+    }
+    beginPath() {
+        this._w2.beginPath();
+        return this;
+    }
+    closePath() {
+        this._w2.closePath();
+        return this;
+    }
+    moveTo(pointOrX, y, z) {
+        if (typeof pointOrX === 'number') {
+            this._w2.moveTo(pointOrX, y ?? 0, z);
+        }
+        else {
+            this._w2.moveTo(pointOrX);
+        }
+        return this;
+    }
+    lineTo(pointOrX, y, z) {
+        if (typeof pointOrX === 'number') {
+            this._w2.lineTo(pointOrX, y ?? 0, z);
+        }
+        else {
+            this._w2.lineTo(pointOrX);
+        }
+        return this;
+    }
+    ray(dir, length) {
+        this._w2.ray(dir, length);
+        return this;
+    }
+    box(center, halfExtents) {
+        this._w2.box(center, halfExtents);
+        return this;
+    }
+    circle(center, radius) {
+        this._w2.circle(center, radius);
+        return this;
+    }
+    stroke() {
+        this._w2.stroke();
+        return this;
+    }
+    fill() {
+        this._w2.fill();
+        return this;
+    }
+    getLineDash() {
+        return this._w2.getLineDash();
+    }
+    setLineDash(value) {
+        this._w2.setLineDash(value);
+    }
+    /**
+     * 渲染当前画布。通常在帧结束时调用。
+     */
+    commit() {
+        const renderScene = this._node.scene?.renderScene;
+        if (!renderScene) {
+            this._destroyRenderRecord();
+            this._clearPendingDraws();
+            return;
+        }
+        const canReuseRenderRecord = this._canReuseRenderRecord(renderScene);
+        if (!canReuseRenderRecord) {
+            this._destroyRenderRecord();
+        }
+        const renderingDrawCommands = this._createRenderingDrawCommands(renderScene.root.device, canReuseRenderRecord ? this._renderRecord?.renderingSubMeshRecords : undefined);
+        if (renderingDrawCommands.length === 0) {
+            this._destroyRenderRecord();
+            this._clearPendingDraws();
+            return;
+        }
+        const model = canReuseRenderRecord ? this._renderRecord.model : new renderer.scene.Model();
+        model.node = this._node;
+        model.transform = this._node;
+        model.visFlags = this._node.layer;
+        renderingDrawCommands.forEach((drawCommand, iSubModel) => {
+            model.initSubModel(iSubModel, drawCommand.renderingSubMeshRecord.renderingSubMesh, drawCommand.material);
+        });
+        if (!canReuseRenderRecord) {
+            renderScene.addModel(model);
+        }
+        this._renderRecord = {
+            renderScene,
+            renderingSubMeshRecords: renderingDrawCommands.map((drawCommand) => {
+                return drawCommand.renderingSubMeshRecord;
+            }),
+            model,
+        };
+        this._clearPendingDraws();
+    }
+    destroy() {
+        this._destroyRenderRecord();
+        for (const material of this._materials.values()) {
+            material.destroy();
+        }
+        this._materials.clear();
+    }
+    _node;
+    _w2;
+    _w3;
+    _drawCommands = [];
+    _materials = new Map();
+    _renderRecord = undefined;
+    _enqueueGeometry = (geometry, options = defaultDrawOptions) => {
+        if (!hasGeometry(geometry)) {
+            return;
+        }
+        const lastDrawCommand = this._drawCommands[this._drawCommands.length - 1];
+        if (lastDrawCommand && drawOptionsEqual(lastDrawCommand, options)) {
+            appendMeshGeometry(lastDrawCommand.geometry, geometry);
+            return;
+        }
+        this._drawCommands.push({
+            geometry,
+            depthTest: options.depthTest,
+            depthWrite: options.depthWrite,
+        });
+    };
+    _getMaterial(options) {
+        const materialKey = getMaterialKey(options);
+        let material = this._materials.get(materialKey);
+        if (!material) {
+            material = new Material();
+            material.reset({
+                effectName: 'builtin-unlit',
+                defines: {
+                    USE_VERTEX_COLOR: true,
+                },
+                states: {
+                    rasterizerState: {
+                        cullMode: gfx.CullMode.NONE,
+                    },
+                    depthStencilState: {
+                        depthTest: options.depthTest,
+                        depthWrite: options.depthWrite,
+                    },
+                },
+            });
+            this._materials.set(materialKey, material);
+        }
+        return material;
+    }
+    _canReuseRenderRecord(renderScene) {
+        return this._renderRecord !== undefined
+            && this._renderRecord.renderScene === renderScene
+            && this._renderRecord.renderingSubMeshRecords.length === this._drawCommands.length;
+    }
+    _createRenderingDrawCommands(device, reusableSubMeshRecords) {
+        const renderingDrawCommands = [];
+        for (let iDrawCommand = 0; iDrawCommand < this._drawCommands.length; iDrawCommand++) {
+            const drawCommand = this._drawCommands[iDrawCommand];
+            const subMeshRecord = createOrUpdateRenderingSubMeshRecord(device, drawCommand.geometry, reusableSubMeshRecords?.[iDrawCommand]);
+            if (subMeshRecord) {
+                renderingDrawCommands.push({
+                    renderingSubMeshRecord: subMeshRecord,
+                    material: this._getMaterial(drawCommand),
+                });
+            }
+        }
+        return renderingDrawCommands;
+    }
+    _destroyRenderRecord() {
+        if (!this._renderRecord) {
+            return;
+        }
+        const { renderScene, renderingSubMeshRecords, model, } = this._renderRecord;
+        this._renderRecord = undefined;
+        renderScene.removeModel(model);
+        for (const record of renderingSubMeshRecords) {
+            record.renderingSubMesh.destroy();
+        }
+        model.destroy();
+    }
+    _clearPendingDraws() {
+        this._drawCommands.length = 0;
+        this._w2.beginPath();
+    }
+}
+function drawOptionsEqual(a, b) {
+    return a.depthTest === b.depthTest && a.depthWrite === b.depthWrite;
+}
+//# sourceMappingURL=canvas-3d.js.map

package/lib/geometry.d.ts

@@ -0,0 +1,117 @@
+import { Color, gfx, Vec2, Vec3 } from 'cc';
+import type { Canvas3DCapsuleOptions, Canvas3DCylinderOptions, Canvas3DDiscOptions, Canvas3DPrimitiveOptions, Canvas3DQuadOptions, Canvas3DRingOptions, Canvas3DSphereOptions, DrawOptions, EnqueueGeometry, MeshGeometry, PrimitiveDrawState, RenderingSubMeshRecord, StrokeStyle, SubPath } from './types.js';
+export declare enum PrimitiveEntryType {
+    line = "line",
+    box = "box",
+    quad = "quad",
+    cylinder = "cylinder",
+    disc = "disc",
+    ring = "ring",
+    sphere = "sphere",
+    capsule = "capsule"
+}
+export type PrimitiveEntry = {
+    readonly type: PrimitiveEntryType.line;
+    readonly from: Vec3;
+    readonly to: Vec3;
+} | {
+    readonly type: PrimitiveEntryType.box;
+    readonly center: Vec3;
+    readonly halfExtents: Vec3;
+} | {
+    readonly type: PrimitiveEntryType.quad;
+    readonly corners: readonly Vec3[];
+} | {
+    readonly type: PrimitiveEntryType.cylinder;
+    readonly from: Vec3;
+    readonly to: Vec3;
+    readonly radius: number;
+    readonly radialSegments: number;
+    readonly wireSegments: number;
+} | {
+    readonly type: PrimitiveEntryType.disc;
+    readonly center: Vec3;
+    readonly normal: Vec3;
+    readonly radius: number;
+    readonly segments: number;
+} | {
+    readonly type: PrimitiveEntryType.ring;
+    readonly center: Vec3;
+    readonly normal: Vec3;
+    readonly innerRadius: number;
+    readonly outerRadius: number;
+    readonly segments: number;
+} | {
+    readonly type: PrimitiveEntryType.sphere;
+    readonly center: Vec3;
+    readonly radius: number;
+    readonly latitudeSegments: number;
+    readonly longitudeSegments: number;
+    readonly wireSegments: number;
+} | {
+    readonly type: PrimitiveEntryType.capsule;
+    readonly from: Vec3;
+    readonly to: Vec3;
+    readonly radius: number;
+    readonly radialSegments: number;
+    readonly wireSegments: number;
+    readonly capSegments: number;
+};
+export declare const epsilon = 0.000001;
+export declare const roundSegmentRadians: number;
+export declare const defaultDrawOptions: DrawOptions;
+export declare function createMeshGeometry(): MeshGeometry;
+export declare function hasGeometry(geometry: MeshGeometry): boolean;
+export declare function appendMeshGeometry(out: MeshGeometry, geometry: MeshGeometry): void;
+export declare function resolvePoint(pointOrX: Vec3 | number, y?: number, z?: number): Vec3;
+export declare function setColor(out: Color, value: Readonly<Color> | string): void;
+export declare function getMaterialKey(options: DrawOptions): string;
+export declare function drawPrimitive(enqueueGeometry: EnqueueGeometry, baseState: PrimitiveDrawState, entries: readonly PrimitiveEntry[], options: Canvas3DPrimitiveOptions | undefined): void;
+export declare function createPrimitiveDrawState(): PrimitiveDrawState;
+export declare function clonePrimitiveDrawState(state: PrimitiveDrawState): PrimitiveDrawState;
+export declare function copyPrimitiveDrawState(out: PrimitiveDrawState, state: PrimitiveDrawState): PrimitiveDrawState;
+export declare function resolveCapsule(options: Canvas3DCapsuleOptions): {
+    readonly from: Vec3;
+    readonly to: Vec3;
+    readonly radius: number;
+};
+export declare function resolveCylinder(options: Canvas3DCylinderOptions): {
+    readonly from: Vec3;
+    readonly to: Vec3;
+    readonly radius: number;
+};
+export declare function createQuadCorners(options: Canvas3DQuadOptions): Vec3[];
+export declare function resolveDiscRadius(options: Canvas3DDiscOptions): number;
+export declare function resolveCircleSegments(value: number | undefined): number;
+export declare function resolveCylinderSegments(options: Canvas3DCylinderOptions): {
+    readonly radialSegments: number;
+    readonly wireSegments: number;
+};
+export declare function resolveDiscSegments(options: Canvas3DDiscOptions): number;
+export declare function resolveRingSegments(options: Canvas3DRingOptions): number;
+export declare function resolveSphereSegments(options: Canvas3DSphereOptions): {
+    readonly latitudeSegments: number;
+    readonly longitudeSegments: number;
+    readonly wireSegments: number;
+};
+export declare function resolveCapsuleSegments(options: Canvas3DCapsuleOptions): {
+    readonly radialSegments: number;
+    readonly wireSegments: number;
+    readonly capSegments: number;
+};
+export declare function resolveRingRadii(options: Canvas3DRingOptions): {
+    readonly innerRadius: number;
+    readonly outerRadius: number;
+};
+export declare function resolveQuadHalfExtents(halfExtents: number | Vec2): Vec2;
+export declare function normalizeLineDash(value: readonly number[]): number[];
+export declare function appendSubPathStroke(geometry: MeshGeometry, subPath: SubPath, style: StrokeStyle, color: Color): void;
+export declare function appendSubPathFill(geometry: MeshGeometry, subPath: SubPath, color: Color): void;
+export declare function appendBoxStroke(geometry: MeshGeometry, center: Vec3, halfExtents: Vec3, style: StrokeStyle, color: Color): void;
+export declare function appendBoxFill(geometry: MeshGeometry, center: Vec3, halfExtents: Vec3, color: Color): void;
+export declare function appendCircleStroke(geometry: MeshGeometry, center: Vec3, radius: number, style: StrokeStyle, color: Color): void;
+export declare function appendCircleFill(geometry: MeshGeometry, center: Vec3, radius: number, color: Color): void;
+export declare function createOrUpdateRenderingSubMeshRecord(device: gfx.Device, geometry: MeshGeometry, record?: RenderingSubMeshRecord): RenderingSubMeshRecord | undefined;
+export declare function resolveHalfExtents(halfExtents: number | Vec3): Vec3;
+export declare function normalizeArcDelta(startAngle: number, endAngle: number, counterclockwise: boolean): number;
+//# sourceMappingURL=geometry.d.ts.map