@next2d/webgl 1.14.20

package/dist/VertexArrayObjectManager.js

@@ -0,0 +1,277 @@
+import { WebGLFillMeshGenerator } from "./WebGLFillMeshGenerator";
+import { WebGLStrokeMeshGenerator } from "./WebGLStrokeMeshGenerator";
+import { $upperPowerOfTwo } from "@next2d/share";
+/**
+ * @class
+ */
+export class VertexArrayObjectManager {
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @constructor
+     * @public
+     */
+    constructor(gl) {
+        /**
+         * @type {WebGL2RenderingContext}
+         * @private
+         */
+        this._$gl = gl;
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$fillVertexArrayPool = [];
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$strokeVertexArrayPool = [];
+        /**
+         * @type {WebGLVertexArrayObject}
+         * @default null
+         * @private
+         */
+        this._$boundVertexArray = null;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$fillAttrib_vertex = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$fillAttrib_bezier = 1;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$strokeAttrib_vertex = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$strokeAttrib_option1 = 1;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$strokeAttrib_option2 = 2;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$strokeAttrib_type = 3;
+        /**
+         * @type {Float32Array}
+         * @default 0
+         * @private
+         */
+        this._$vertexBufferData = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]);
+        /**
+         * @type {WebGLVertexArrayObject}
+         * @private
+         */
+        this._$commonVertexArray = this._$getVertexArray(0, 1);
+    }
+    /**
+     * @param  {number} begin
+     * @param  {number} end
+     * @return {WebGLVertexArrayObject}
+     * @method
+     * @private
+     */
+    _$getVertexArray(begin, end) {
+        const vertexArray = this._$gl.createVertexArray();
+        if (!vertexArray) {
+            throw new Error("the WebGLVertexArrayObject is null.");
+        }
+        this.bind(vertexArray);
+        const vertexBuffer = this._$gl.createBuffer();
+        this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, vertexBuffer);
+        this._$vertexBufferData[0] = begin;
+        this._$vertexBufferData[2] = begin;
+        this._$vertexBufferData[4] = end;
+        this._$vertexBufferData[6] = end;
+        this._$gl.bufferData(this._$gl.ARRAY_BUFFER, this._$vertexBufferData, this._$gl.STATIC_DRAW);
+        this._$gl.enableVertexAttribArray(0);
+        this._$gl.vertexAttribPointer(0, 2, this._$gl.FLOAT, false, 0, 0);
+        return vertexArray;
+    }
+    /**
+     * @return {WebGLVertexArrayObject}
+     * @method
+     * @private
+     */
+    _$getFillVertexArray() {
+        if (this._$fillVertexArrayPool.length) {
+            const vertexArray = this._$fillVertexArrayPool.pop();
+            if (vertexArray) {
+                return vertexArray;
+            }
+        }
+        const vertexArray = this._$gl.createVertexArray();
+        if (!vertexArray) {
+            throw new Error("the WebGLVertexArrayObject is null.");
+        }
+        this.bind(vertexArray);
+        const vertexBuffer = this._$gl.createBuffer();
+        if (!vertexBuffer) {
+            throw new Error("the WebGLBuffer is null.");
+        }
+        vertexArray.vertexBuffer = vertexBuffer;
+        vertexArray.vertexLength = 0;
+        this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, vertexBuffer);
+        this._$gl.enableVertexAttribArray(0);
+        this._$gl.enableVertexAttribArray(1);
+        this._$gl.vertexAttribPointer(this._$fillAttrib_vertex, 2, this._$gl.FLOAT, false, 16, 0);
+        this._$gl.vertexAttribPointer(this._$fillAttrib_bezier, 2, this._$gl.FLOAT, false, 16, 8);
+        return vertexArray;
+    }
+    /**
+     * @return {WebGLVertexArrayObject}
+     * @method
+     * @private
+     */
+    _$getStrokeVertexArray() {
+        if (this._$strokeVertexArrayPool.length) {
+            const vertexArray = this._$strokeVertexArrayPool.pop();
+            if (vertexArray) {
+                return vertexArray;
+            }
+        }
+        const vertexArray = this._$gl.createVertexArray();
+        if (!vertexArray) {
+            throw new Error("the WebGLVertexArrayObject is null.");
+        }
+        this.bind(vertexArray);
+        const vertexBuffer = this._$gl.createBuffer();
+        if (!vertexBuffer) {
+            throw new Error("the WebGLBuffer is null.");
+        }
+        vertexArray.vertexBuffer = vertexBuffer;
+        vertexArray.vertexLength = 0;
+        this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, vertexBuffer);
+        const indexBuffer = this._$gl.createBuffer();
+        if (!indexBuffer) {
+            throw new Error("the WebGLBuffer is null.");
+        }
+        vertexArray.indexBuffer = indexBuffer;
+        vertexArray.indexLength = 0;
+        this._$gl.bindBuffer(this._$gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+        this._$gl.enableVertexAttribArray(0);
+        this._$gl.enableVertexAttribArray(1);
+        this._$gl.enableVertexAttribArray(2);
+        this._$gl.enableVertexAttribArray(3);
+        this._$gl.vertexAttribPointer(this._$strokeAttrib_vertex, 2, this._$gl.FLOAT, false, 28, 0);
+        this._$gl.vertexAttribPointer(this._$strokeAttrib_option1, 2, this._$gl.FLOAT, false, 28, 8);
+        this._$gl.vertexAttribPointer(this._$strokeAttrib_option2, 2, this._$gl.FLOAT, false, 28, 16);
+        this._$gl.vertexAttribPointer(this._$strokeAttrib_type, 1, this._$gl.FLOAT, false, 28, 24);
+        return vertexArray;
+    }
+    /**
+     * @param  {array} vertices
+     * @return {WebGLVertexArrayObject}
+     * @method
+     * @public
+     */
+    createFill(vertices) {
+        const mesh = WebGLFillMeshGenerator.generate(vertices);
+        const vertexBufferData = mesh.vertexBufferData;
+        const vertexArray = this._$getFillVertexArray();
+        vertexArray.indexRanges = mesh.indexRanges;
+        this.bind(vertexArray);
+        this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, vertexArray.vertexBuffer);
+        if (vertexArray.vertexLength < vertexBufferData.length) {
+            vertexArray.vertexLength = $upperPowerOfTwo(vertexBufferData.length);
+            this._$gl.bufferData(this._$gl.ARRAY_BUFFER, vertexArray.vertexLength * 4, this._$gl.DYNAMIC_DRAW);
+        }
+        this._$gl.bufferSubData(this._$gl.ARRAY_BUFFER, 0, vertexBufferData);
+        return vertexArray;
+    }
+    /**
+     * @param  {array} vertices
+     * @param  {string} lineCap
+     * @param  {string} lineJoin
+     * @return {WebGLVertexArrayObject}
+     * @method
+     * @public
+     */
+    createStroke(vertices, lineCap, lineJoin) {
+        const mesh = WebGLStrokeMeshGenerator.generate(vertices, lineCap, lineJoin);
+        const vertexBufferData = mesh.vertexBufferData;
+        const indexBufferData = mesh.indexBufferData;
+        const vertexArray = this._$getStrokeVertexArray();
+        vertexArray.indexCount = indexBufferData.length;
+        this.bind(vertexArray);
+        this._$gl.bindBuffer(this._$gl.ARRAY_BUFFER, vertexArray.vertexBuffer);
+        this._$gl.bindBuffer(this._$gl.ELEMENT_ARRAY_BUFFER, vertexArray.indexBuffer);
+        if (vertexArray.vertexLength < vertexBufferData.length) {
+            vertexArray.vertexLength = $upperPowerOfTwo(vertexBufferData.length);
+            this._$gl.bufferData(this._$gl.ARRAY_BUFFER, vertexArray.vertexLength * 4, this._$gl.DYNAMIC_DRAW);
+        }
+        if (vertexArray.indexLength < indexBufferData.length) {
+            vertexArray.indexLength = $upperPowerOfTwo(indexBufferData.length);
+            this._$gl.bufferData(this._$gl.ELEMENT_ARRAY_BUFFER, vertexArray.indexLength * 2, this._$gl.DYNAMIC_DRAW);
+        }
+        this._$gl.bufferSubData(this._$gl.ARRAY_BUFFER, 0, vertexBufferData);
+        this._$gl.bufferSubData(this._$gl.ELEMENT_ARRAY_BUFFER, 0, indexBufferData);
+        return vertexArray;
+    }
+    /**
+     * @param  {WebGLVertexArrayObject} vertex_array
+     * @return {void}
+     * @method
+     * @public
+     */
+    releaseFill(vertex_array) {
+        this._$fillVertexArrayPool.push(vertex_array);
+    }
+    /**
+     * @param  {WebGLVertexArrayObject} vertex_array
+     * @return {void}
+     * @method
+     * @public
+     */
+    releaseStroke(vertex_array) {
+        this._$strokeVertexArrayPool.push(vertex_array);
+    }
+    /**
+     * @param  {WebGLVertexArrayObject} [vertex_array = null]
+     * @return {void}
+     * @method
+     * @public
+     */
+    bind(vertex_array = null) {
+        if (vertex_array === this._$boundVertexArray) {
+            return;
+        }
+        this._$boundVertexArray = vertex_array;
+        this._$gl.bindVertexArray(vertex_array);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    bindCommonVertexArray() {
+        this.bind(this._$commonVertexArray);
+    }
+    /**
+     * @param  {number} begin
+     * @param  {number} end
+     * @return {void}
+     * @method
+     * @public
+     */
+    bindGradientVertexArray(begin, end) {
+        const vertexArray = this._$getVertexArray(begin, end);
+        this.bind(vertexArray);
+    }
+}

package/dist/WebGLFillMeshGenerator.d.ts

@@ -0,0 +1,31 @@
+import type { FillMeshImpl } from "./interface/FillMeshImpl";
+import type { IndexRangeImpl } from "./interface/IndexRangeImpl";
+/**
+ * @class
+ */
+export declare class WebGLFillMeshGenerator {
+    private static _$vertexBufferData;
+    private static _$indexRanges;
+    private static _$indexRangePool;
+    private static _$currentIndex;
+    /**
+     * @member {array}
+     * @static
+     */
+    static get indexRangePool(): IndexRangeImpl[];
+    /**
+     * @param  {array} vertices
+     * @return {FillMeshImpl}
+     * @method
+     * @static
+     */
+    static generate(vertices: any[]): FillMeshImpl;
+    /**
+     * @param  {array} vertex
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$generateMesh(vertex: any[]): void;
+}

package/dist/WebGLFillMeshGenerator.js

@@ -0,0 +1,101 @@
+import { $Float32Array, $getArray } from "@next2d/share";
+/**
+ * @class
+ */
+export class WebGLFillMeshGenerator {
+    /**
+     * @member {array}
+     * @static
+     */
+    static get indexRangePool() {
+        return this._$indexRangePool;
+    }
+    /**
+     * @param  {array} vertices
+     * @return {FillMeshImpl}
+     * @method
+     * @static
+     */
+    static generate(vertices) {
+        let vertexBufferLen = 0;
+        for (let idx = 0; idx < vertices.length; ++idx) {
+            vertexBufferLen += (vertices[idx].length / 3 - 2) * 12;
+        }
+        this._$vertexBufferData = new $Float32Array(vertexBufferLen);
+        this._$indexRanges = $getArray();
+        this._$currentIndex = 0;
+        for (let idx = 0; idx < vertices.length; ++idx) {
+            const first = this._$currentIndex;
+            this._$generateMesh(vertices[idx]);
+            const count = this._$currentIndex - first;
+            const indexRange = this._$indexRangePool.pop() || { "first": 0, "count": 0 };
+            indexRange.first = first;
+            indexRange.count = count;
+            this._$indexRanges.push(indexRange);
+        }
+        return {
+            "vertexBufferData": this._$vertexBufferData,
+            "indexRanges": this._$indexRanges
+        };
+    }
+    /**
+     * @param  {array} vertex
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$generateMesh(vertex) {
+        const vbd = this._$vertexBufferData;
+        let currentIndex = this._$currentIndex;
+        const length = vertex.length - 5;
+        for (let v = 3; v < length; v += 3) {
+            let i = currentIndex * 4;
+            if (vertex[v + 2]) {
+                vbd[i++] = vertex[v - 3];
+                vbd[i++] = vertex[v - 2];
+                vbd[i++] = 0;
+                vbd[i++] = 0;
+                vbd[i++] = vertex[v];
+                vbd[i++] = vertex[v + 1];
+                vbd[i++] = 0.5;
+                vbd[i++] = 0;
+                vbd[i++] = vertex[v + 3];
+                vbd[i++] = vertex[v + 4];
+                vbd[i++] = 1;
+                vbd[i++] = 1;
+            }
+            else if (vertex[v + 5]) {
+                vbd[i++] = vertex[0];
+                vbd[i++] = vertex[1];
+                vbd[i++] = 0.5;
+                vbd[i++] = 0.5;
+                vbd[i++] = vertex[v];
+                vbd[i++] = vertex[v + 1];
+                vbd[i++] = 0.5;
+                vbd[i++] = 0.5;
+                vbd[i++] = vertex[v + 6];
+                vbd[i++] = vertex[v + 7];
+                vbd[i++] = 0.5;
+                vbd[i++] = 0.5;
+            }
+            else {
+                vbd[i++] = vertex[0];
+                vbd[i++] = vertex[1];
+                vbd[i++] = 0.5;
+                vbd[i++] = 0.5;
+                vbd[i++] = vertex[v];
+                vbd[i++] = vertex[v + 1];
+                vbd[i++] = 0.5;
+                vbd[i++] = 0.5;
+                vbd[i++] = vertex[v + 3];
+                vbd[i++] = vertex[v + 4];
+                vbd[i++] = 0.5;
+                vbd[i++] = 0.5;
+            }
+            currentIndex += 3;
+        }
+        this._$currentIndex = currentIndex;
+    }
+}
+WebGLFillMeshGenerator._$indexRangePool = $getArray();

package/dist/WebGLStrokeMeshGenerator.d.ts

@@ -0,0 +1,183 @@
+import type { StrokeMethImpl } from "./interface/StrokeMethImpl";
+import type { JointStyleImpl } from "./interface/JointStyleImpl";
+import type { CapsStyleImpl } from "./interface/CapsStyleImpl";
+/**
+ * @class
+ */
+export declare class WebGLStrokeMeshGenerator {
+    private static _$vertexBufferData;
+    private static _$vertexBufferPos;
+    private static _$indexBufferData;
+    private static _$indexBufferPos;
+    private static _$lineCap;
+    private static _$lineJoin;
+    /**
+     * @param  {array}  vertices
+     * @param  {string} line_cap
+     * @param  {string} line_join
+     * @return {object}
+     * @method
+     * @static
+     */
+    static generate(vertices: any[], line_cap: CapsStyleImpl, line_join: JointStyleImpl): StrokeMethImpl;
+    /**
+     * @param  {number} delta_length
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$expandVertexBufferIfNeeded(delta_length: number): void;
+    /**
+     * @param  {number} delta_length
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$expandIndexBufferIfNeeded(delta_length: number): void;
+    /**
+     * @param  {Float32Array} vertex
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$generateLineSegment(vertex: any[]): void;
+    /**
+     * @param  {number} x1 線分の始点のx座標
+     * @param  {number} y1 線分の始点のy座標
+     * @param  {number} cx 線分の制御点のx座標
+     * @param  {number} cy 線分の制御点のy座標
+     * @param  {number} x2 線分の終点のx座標
+     * @param  {number} y2 線分の終点のy座標
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$addQuadSegmentMesh(x1: number, y1: number, cx: number, cy: number, x2: number, y2: number): void;
+    /**
+     * @param  {number} x1 線分の始点のx座標
+     * @param  {number} y1 線分の始点のy座標
+     * @param  {number} x2 線分の終点のx座標
+     * @param  {number} y2 線分の終点のy座標
+     * @param  {number} [type = 1]
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$addLineSegmentMesh(x1: number, y1: number, x2: number, y2: number, type?: number): void;
+    /**
+     * @param  {number} vertex_begin_offset 結合対象の頂点の範囲（開始）
+     * @param  {number} vertex_end_offset   結合対象の頂点の範囲（終了）
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$generateLineJoin(vertex_begin_offset: number, vertex_end_offset: number): void;
+    /**
+     * @param  {number} x1
+     * @param  {number} y1
+     * @param  {number} x2
+     * @param  {number} y2
+     * @return {number}
+     * @method
+     * @static
+     */
+    static _$cross: (x1: number, y1: number, x2: number, y2: number) => number;
+    /**
+     * @param  {number} x1            線分Aの始点のx座標
+     * @param  {number} y1            線分Aの始点のy座標
+     * @param  {number} x2            結合点のx座標
+     * @param  {number} y2            結合点のy座標
+     * @param  {number} type          線分タイプ
+     * @param  {number} x3            線分Bの終点のx座標
+     * @param  {number} y3            線分Bの終点のy座標
+     * @param  {number} index_offset2 線分Aの凸側の頂点インデックス
+     * @param  {number} index_offset3 線分Aの凹側の頂点インデックス
+     * @param  {number} index_offset4 線分Bの凸側の頂点インデックス
+     * @param  {number} index_offset5 線分Bの凹側の頂点インデックス
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$addLineJoinMesh(x1: number, y1: number, x2: number, y2: number, type: number, x3: number, y3: number, index_offset2: number, index_offset3: number, index_offset4?: number, index_offset5?: number): void;
+    /**
+     * @param  {number} x 結合点のx座標
+     * @param  {number} y 結合点のy座標
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$addRoundJoinMesh(x: number, y: number): void;
+    /**
+     * @param  {number} x      結合点のx座標
+     * @param  {number} y      結合点のy座標
+     * @param  {number} ax     線分Aの始点のx座標
+     * @param  {number} ay     線分Aの始点のy座標
+     * @param  {number} bx     線分Bの終点のx座標
+     * @param  {number} by     線分Bの終点のy座標
+     * @param  {number} index1
+     * @param  {number} index4
+     * @param  {number} index5
+     * @param  {number} index8
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$addMiterJoinMesh(x: number, y: number, ax: number, ay: number, bx: number, by: number, index1: number, index4: number, index5: number, index8: number): void;
+    /**
+     * @param  {number} x      結合点のx座標
+     * @param  {number} y      結合点のy座標
+     * @param  {number} index1
+     * @param  {number} index2
+     * @param  {number} index3
+     * @param  {number} index4
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$addBevelJoinMesh(x: number, y: number, index1: number, index2: number, index3: number, index4: number): void;
+    /**
+     * @param  {number} vertex_begin_offset 結合対象の頂点の範囲（開始）
+     * @param  {number} vertex_end_offset   結合対象の頂点の範囲（終了）
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$generateLineCap(vertex_begin_offset: number, vertex_end_offset: number): void;
+    /**
+     * @param  {number} x1     線端のx座標
+     * @param  {number} y1     線端のy座標
+     * @param  {number} x2     もう一方の端点のx座標
+     * @param  {number} y2     もう一方の端点のy座標
+     * @param  {number} index1 端点から反時計回り側の頂点インデックス
+     * @param  {number} index2 端点から時計回り側の頂点インデックス
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$addLineCapMesh(x1: number, y1: number, x2: number, y2: number, index1: number, index2: number): void;
+    /**
+     * @param  {number} x1     線端のx座標
+     * @param  {number} y1     線端のy座標
+     * @param  {number} x2     もう一方の端点のx座標
+     * @param  {number} y2     もう一方の端点のy座標
+     * @param  {number} index1 端点から反時計回り側の頂点インデックス
+     * @param  {number} index2 端点から時計回り側の頂点インデックス
+     * @return {void}
+     * @method
+     * @static
+     * @private
+     */
+    static _$addSquareCapMesh(x1: number, y1: number, x2: number, y2: number, index1: number, index2: number): void;
+}