@next2d/webgl 1.14.20

package/dist/CanvasToWebGLContextPath.js

@@ -0,0 +1,210 @@
+import { BezierConverter } from "./BezierConverter";
+import { $getArray, $poolArray } from "@next2d/share";
+/**
+ * @class
+ */
+export class CanvasToWebGLContextPath {
+    /**
+     * @constructor
+     */
+    constructor() {
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$currentPath = $getArray();
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$vertices = $getArray();
+        /**
+         * @type {BezierConverter}
+         * @private
+         */
+        this._$bezierConverter = new BezierConverter();
+    }
+    /**
+     * @member {array}
+     * @readonly
+     * @public
+     */
+    get vertices() {
+        this._$pushCurrentPathToVertices();
+        return this._$vertices;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    begin() {
+        this._$currentPath.length = 0;
+        while (this._$vertices.length) {
+            $poolArray(this._$vertices.pop());
+        }
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @public
+     */
+    moveTo(x, y) {
+        if (!this._$currentPath.length) {
+            this._$pushPointToCurrentPath(x, y, false);
+            return;
+        }
+        if (this._$equalsToLastPoint(x, y)) {
+            return;
+        }
+        this._$pushCurrentPathToVertices();
+        this._$pushPointToCurrentPath(x, y, false);
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @public
+     */
+    lineTo(x, y) {
+        if (!this._$currentPath.length) {
+            this.moveTo(0, 0);
+        }
+        if (this._$equalsToLastPoint(x, y)) {
+            return;
+        }
+        this._$pushPointToCurrentPath(x, y, false);
+    }
+    /**
+     * @param  {number} cx
+     * @param  {number} cy
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @public
+     */
+    quadTo(cx, cy, x, y) {
+        if (!this._$currentPath.length) {
+            this.moveTo(0, 0);
+        }
+        if (this._$equalsToLastPoint(x, y)) {
+            return;
+        }
+        this._$pushPointToCurrentPath(cx, cy, true);
+        this._$pushPointToCurrentPath(x, y, false);
+    }
+    /**
+     * @param  {number} cx1
+     * @param  {number} cy1
+     * @param  {number} cx2
+     * @param  {number} cy2
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @public
+     */
+    cubicTo(cx1, cy1, cx2, cy2, x, y) {
+        if (!this._$currentPath.length) {
+            this.moveTo(0, 0);
+        }
+        if (this._$equalsToLastPoint(x, y)) {
+            return;
+        }
+        const fromX = +this._$currentPath[this._$currentPath.length - 3];
+        const fromY = +this._$currentPath[this._$currentPath.length - 2];
+        this
+            ._$bezierConverter
+            .cubicToQuad(fromX, fromY, cx1, cy1, cx2, cy2, x, y);
+        const buffer = this
+            ._$bezierConverter
+            ._$bezierConverterBuffer;
+        for (let i = 0; i < 32;) {
+            this.quadTo(buffer[i++], buffer[i++], buffer[i++], buffer[i++]);
+        }
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} radius
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawCircle(x, y, radius) {
+        const r = radius;
+        const k = radius * 0.5522847498307936;
+        this.cubicTo(x + r, y + k, x + k, y + r, x, y + r);
+        this.cubicTo(x - k, y + r, x - r, y + k, x - r, y);
+        this.cubicTo(x - r, y - k, x - k, y - r, x, y - r);
+        this.cubicTo(x + k, y - r, x + r, y - k, x + r, y);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    close() {
+        if (this._$currentPath.length <= 6) {
+            return;
+        }
+        const x = +this._$currentPath[0];
+        const y = +this._$currentPath[1];
+        if (this._$equalsToLastPoint(x, y)) {
+            return;
+        }
+        this._$pushPointToCurrentPath(x, y, false);
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$equalsToLastPoint(x, y) {
+        const lastX = +this._$currentPath[this._$currentPath.length - 3];
+        const lastY = +this._$currentPath[this._$currentPath.length - 2];
+        return x === lastX && y === lastY;
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {boolean} is_control_point
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$pushPointToCurrentPath(x, y, is_control_point) {
+        this._$currentPath.push(x, y, is_control_point);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$pushCurrentPathToVertices() {
+        if (this._$currentPath.length < 4) {
+            this._$currentPath.length = 0;
+            return;
+        }
+        this._$vertices.push(this._$currentPath);
+        this._$currentPath = $getArray();
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} w
+     * @param  {number} h
+     * @return {array}
+     * @method
+     * @public
+     */
+    createRectVertices(x, y, w, h) {
+        return $getArray($getArray(x, y, false, x + w, y, false, x + w, y + h, false, x, y + h, false));
+    }
+}

package/dist/CanvasToWebGLContextStyle.d.ts

@@ -0,0 +1,78 @@
+import { CanvasGradientToWebGL } from "./CanvasGradientToWebGL";
+import { CanvasPatternToWebGL } from "./CanvasPatternToWebGL";
+import type { CapsStyleImpl } from "./interface/CapsStyleImpl";
+import type { JointStyleImpl } from "./interface/JointStyleImpl";
+/**
+ * @class
+ */
+export declare class CanvasToWebGLContextStyle {
+    private _$fillStyle;
+    private _$strokeStyle;
+    private _$lineWidth;
+    private _$lineCap;
+    private _$lineJoin;
+    private _$miterLimit;
+    /**
+     * @constructor
+     * @public
+     */
+    constructor();
+    /**
+     * @member {number}
+     * @default 5
+     * @public
+     */
+    get miterLimit(): number;
+    set miterLimit(miter_limit: number);
+    /**
+     * @member {number}
+     * @default 1
+     * @public
+     */
+    get lineWidth(): number;
+    set lineWidth(line_width: number);
+    /**
+     * @member {string}
+     * @default "round"
+     * @public
+     */
+    get lineCap(): CapsStyleImpl;
+    set lineCap(line_cap: CapsStyleImpl);
+    /**
+     * @member {string}
+     * @default "round"
+     * @public
+     */
+    get lineJoin(): JointStyleImpl;
+    set lineJoin(line_join: JointStyleImpl);
+    /**
+     * @member {Float32Array|CanvasGradientToWebGL|CanvasPatternToWebGL}
+     * @public
+     */
+    get fillStyle(): Float32Array | CanvasGradientToWebGL | CanvasPatternToWebGL;
+    set fillStyle(style: Float32Array | CanvasGradientToWebGL | CanvasPatternToWebGL);
+    /**
+     * @member {Float32Array|CanvasGradientToWebGL|CanvasPatternToWebGL}
+     * @public
+     */
+    get strokeStyle(): Float32Array | CanvasGradientToWebGL | CanvasPatternToWebGL;
+    set strokeStyle(style: Float32Array | CanvasGradientToWebGL | CanvasPatternToWebGL);
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    clear(): void;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$clearFill(): void;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$clearStroke(): void;
+}

package/dist/CanvasToWebGLContextStyle.js

@@ -0,0 +1,139 @@
+import { CanvasGradientToWebGL } from "./CanvasGradientToWebGL";
+import { CanvasPatternToWebGL } from "./CanvasPatternToWebGL";
+import { $getFloat32Array4, $poolFloat32Array4, $Float32Array } from "@next2d/share";
+/**
+ * @class
+ */
+export class CanvasToWebGLContextStyle {
+    /**
+     * @constructor
+     * @public
+     */
+    constructor() {
+        this._$fillStyle = $getFloat32Array4(1, 1, 1, 1); // fixed size 4
+        this._$strokeStyle = $getFloat32Array4(1, 1, 1, 1); // fixed size 4
+        this._$lineWidth = 1;
+        this._$lineCap = "round";
+        this._$lineJoin = "round";
+        this._$miterLimit = 5;
+    }
+    /**
+     * @member {number}
+     * @default 5
+     * @public
+     */
+    get miterLimit() {
+        return this._$miterLimit;
+    }
+    set miterLimit(miter_limit) {
+        this._$miterLimit = miter_limit;
+    }
+    /**
+     * @member {number}
+     * @default 1
+     * @public
+     */
+    get lineWidth() {
+        return this._$lineWidth;
+    }
+    set lineWidth(line_width) {
+        this._$lineWidth = line_width;
+    }
+    /**
+     * @member {string}
+     * @default "round"
+     * @public
+     */
+    get lineCap() {
+        return this._$lineCap;
+    }
+    set lineCap(line_cap) {
+        this._$lineCap = line_cap;
+    }
+    /**
+     * @member {string}
+     * @default "round"
+     * @public
+     */
+    get lineJoin() {
+        return this._$lineJoin;
+    }
+    set lineJoin(line_join) {
+        this._$lineJoin = line_join;
+    }
+    /**
+     * @member {Float32Array|CanvasGradientToWebGL|CanvasPatternToWebGL}
+     * @public
+     */
+    get fillStyle() {
+        return this._$fillStyle;
+    }
+    set fillStyle(style) {
+        if (this._$fillStyle instanceof $Float32Array) {
+            $poolFloat32Array4(this._$fillStyle);
+        }
+        this._$fillStyle = style;
+    }
+    /**
+     * @member {Float32Array|CanvasGradientToWebGL|CanvasPatternToWebGL}
+     * @public
+     */
+    get strokeStyle() {
+        return this._$strokeStyle;
+    }
+    set strokeStyle(style) {
+        if (this._$strokeStyle instanceof $Float32Array) {
+            $poolFloat32Array4(this._$strokeStyle);
+        }
+        this._$strokeStyle = style;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    clear() {
+        this._$lineWidth = 1;
+        this._$lineCap = "round";
+        this._$lineJoin = "round";
+        this._$miterLimit = 5;
+        this._$clearFill();
+        this._$clearStroke();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$clearFill() {
+        if (this._$fillStyle instanceof CanvasGradientToWebGL) {
+            this._$fillStyle.dispose();
+            this._$fillStyle = $getFloat32Array4(1, 1, 1, 1);
+            return;
+        }
+        if (this._$fillStyle instanceof CanvasPatternToWebGL) {
+            this._$fillStyle.dispose();
+            this._$fillStyle = $getFloat32Array4(1, 1, 1, 1);
+            return;
+        }
+        this._$fillStyle.fill(1);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$clearStroke() {
+        if (this._$strokeStyle instanceof CanvasGradientToWebGL) {
+            this._$strokeStyle.dispose();
+            this._$strokeStyle = $getFloat32Array4(1, 1, 1, 1);
+            return;
+        }
+        if (this._$strokeStyle instanceof CanvasPatternToWebGL) {
+            this._$strokeStyle.dispose();
+            this._$strokeStyle = $getFloat32Array4(1, 1, 1, 1);
+            return;
+        }
+        this._$strokeStyle.fill(1);
+    }
+}

package/dist/ColorBufferPool.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @class
+ */
+export declare class ColorBufferPool {
+    private readonly _$gl;
+    private readonly _$objectPool;
+    private _$samples;
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @param {number}                samples
+     * @constructor
+     */
+    constructor(gl: WebGL2RenderingContext, samples: number);
+    /**
+     * @member {number}
+     * @param {number} samples
+     * @public
+     */
+    set samples(samples: number);
+    /**
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @private
+     */
+    _$createColorBuffer(): WebGLRenderbuffer;
+    /**
+     * @param  {number} area
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @private
+     */
+    _$getColorBuffer(area: number): WebGLRenderbuffer;
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @param  {number} [samples=0]
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @public
+     */
+    create(width: number, height: number, samples?: number): WebGLRenderbuffer;
+    /**
+     * @param  {WebGLRenderbuffer} [colorBuffer = null]
+     * @return {void}
+     * @method
+     * @public
+     */
+    release(colorBuffer: WebGLRenderbuffer): void;
+    /**
+     * @description 「めぐる式二分探索法」で面積が引数以上の要素のインデックスを求める
+     *
+     * @param  {number} area
+     * @return {number}
+     * @method
+     * @private
+     */
+    _$bsearch(area: number): number;
+}

package/dist/ColorBufferPool.js

@@ -0,0 +1,134 @@
+import { $getArray, $Math, $upperPowerOfTwo } from "@next2d/share";
+/**
+ * @class
+ */
+export class ColorBufferPool {
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @param {number}                samples
+     * @constructor
+     */
+    constructor(gl, samples) {
+        this._$gl = gl;
+        this._$samples = samples;
+        this._$objectPool = $getArray();
+    }
+    /**
+     * @member {number}
+     * @param {number} samples
+     * @public
+     */
+    set samples(samples) {
+        this._$samples = samples;
+    }
+    /**
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @private
+     */
+    _$createColorBuffer() {
+        const colorBuffer = this._$gl.createRenderbuffer();
+        if (!colorBuffer) {
+            throw new Error("the color buffer is null.");
+        }
+        const stencilBuffer = this._$gl.createRenderbuffer();
+        if (!stencilBuffer) {
+            throw new Error("the stencil buffer is null.");
+        }
+        colorBuffer.stencil = stencilBuffer;
+        colorBuffer.samples = 0;
+        colorBuffer.width = 0;
+        colorBuffer.height = 0;
+        colorBuffer.area = 0;
+        colorBuffer.dirty = true;
+        return colorBuffer;
+    }
+    /**
+     * @param  {number} area
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @private
+     */
+    _$getColorBuffer(area) {
+        if (!this._$objectPool.length) {
+            return this._$createColorBuffer();
+        }
+        const index = this._$bsearch(area);
+        if (index < this._$objectPool.length) {
+            const colorBuffer = this._$objectPool[index];
+            this._$objectPool.splice(index, 1);
+            return colorBuffer;
+        }
+        const colorBuffer = this._$objectPool.shift();
+        if (!colorBuffer) {
+            throw new Error("the color buffer is void.");
+        }
+        return colorBuffer;
+    }
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @param  {number} [samples=0]
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @public
+     */
+    create(width, height, samples = 0) {
+        // 128以下で描画崩れが発生する場合がある？ため、256を最小サイズにする
+        width = $Math.max(256, $upperPowerOfTwo(width));
+        height = $Math.max(256, $upperPowerOfTwo(height));
+        const colorBuffer = this._$getColorBuffer(width * height);
+        if (!samples) {
+            samples = this._$samples;
+        }
+        if (colorBuffer.width < width
+            || colorBuffer.height < height
+            || colorBuffer.samples !== samples) {
+            width = $Math.max(width, colorBuffer.width);
+            height = $Math.max(height, colorBuffer.height);
+            colorBuffer.samples = samples;
+            colorBuffer.width = width;
+            colorBuffer.height = height;
+            colorBuffer.area = width * height;
+            colorBuffer.dirty = false;
+            this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, colorBuffer);
+            this._$gl.renderbufferStorageMultisample(this._$gl.RENDERBUFFER, samples, this._$gl.RGBA8, width, height);
+            this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, colorBuffer.stencil);
+            this._$gl.renderbufferStorageMultisample(this._$gl.RENDERBUFFER, samples, this._$gl.STENCIL_INDEX8, width, height);
+        }
+        return colorBuffer;
+    }
+    /**
+     * @param  {WebGLRenderbuffer} [colorBuffer = null]
+     * @return {void}
+     * @method
+     * @public
+     */
+    release(colorBuffer) {
+        colorBuffer.dirty = true;
+        const index = this._$bsearch(colorBuffer.area);
+        this._$objectPool.splice(index, 0, colorBuffer);
+    }
+    /**
+     * @description 「めぐる式二分探索法」で面積が引数以上の要素のインデックスを求める
+     *
+     * @param  {number} area
+     * @return {number}
+     * @method
+     * @private
+     */
+    _$bsearch(area) {
+        let ng = -1;
+        let ok = this._$objectPool.length;
+        while ($Math.abs(ok - ng) > 1) {
+            const mid = $Math.floor((ok + ng) / 2);
+            if (area <= this._$objectPool[mid].area) {
+                ok = mid;
+            }
+            else {
+                ng = mid;
+            }
+        }
+        return ok;
+    }
+}