@next2d/player 1.14.19 → 1.14.21

package/webgl/CanvasToWebGLContext.js

@@ -1,1421 +0,0 @@
-import { CanvasToWebGLContextStyle } from "./CanvasToWebGLContextStyle";
-import { FrameBufferManager } from "./FrameBufferManager";
-import { CanvasToWebGLContextPath } from "./CanvasToWebGLContextPath";
-import { CanvasToWebGLContextGrid } from "./CanvasToWebGLContextGrid";
-import { CanvasToWebGLShaderList } from "./shader/CanvasToWebGLShaderList";
-import { GradientLUTGenerator } from "./shader/GradientLUTGenerator";
-import { VertexArrayObjectManager } from "./VertexArrayObjectManager";
-import { CanvasToWebGLContextMask } from "./CanvasToWebGLContextMask";
-import { CanvasToWebGLContextBlend } from "./CanvasToWebGLContextBlend";
-import { CanvasPatternToWebGL } from "./CanvasPatternToWebGL";
-import { CanvasGradientToWebGL } from "./CanvasGradientToWebGL";
-import { WebGLFillMeshGenerator } from "./WebGLFillMeshGenerator";
-import { $Math, $getFloat32Array9, $getArray, $clamp, $poolArray, $inverseMatrix, $getFloat32Array6, $poolFloat32Array9, $poolBoundsObject, $getBoundsObject } from "../util/RenderUtil";
-/**
- * @class
- */
-export class CanvasToWebGLContext {
-    /**
-     * @param {WebGL2RenderingContext} gl
-     * @param {number} sample
-     * @constructor
-     * @public
-     */
-    constructor(gl, sample) {
-        /**
-         * @type {WebGL2RenderingContext}
-         * @private
-         */
-        this._$gl = gl;
-        /**
-         * @type {number}
-         * @private
-         */
-        const samples = $Math.min(sample, gl.getParameter(gl.MAX_SAMPLES));
-        /**
-         * @type {number}
-         * @private
-         */
-        this._$maxTextureSize = $Math.min(8192, gl.getParameter(gl.MAX_TEXTURE_SIZE)) - 2;
-        /**
-         * @type {CanvasToWebGLContextStyle}
-         * @private
-         */
-        this._$contextStyle = new CanvasToWebGLContextStyle();
-        /**
-         * @type {BoundsImpl}
-         * @private
-         */
-        this._$cacheBounds = $getBoundsObject();
-        /**
-         * @type {Float32Array}
-         * @private
-         */
-        this._$matrix = $getFloat32Array9(1, 0, 0, 0, 1, 0, 0, 0, 1);
-        /**
-         * @type {AttachmentImpl}
-         * @default null
-         * @private
-         */
-        this._$cacheAttachment = null;
-        /**
-         * @type {array}
-         * @private
-         */
-        this._$stack = [];
-        /**
-         * @type {number}
-         * @default 1
-         * @private
-         */
-        this._$globalAlpha = 1;
-        /**
-         * @type {boolean}
-         * @default false
-         * @private
-         */
-        this._$imageSmoothingEnabled = false;
-        /**
-         * @type {string}
-         * @default "normal"
-         * @private
-         */
-        this._$globalCompositeOperation = "normal";
-        /**
-         * @type {number}
-         * @default 1
-         * @private
-         */
-        this._$clearColorR = 1;
-        /**
-         * @type {number}
-         * @default 1
-         * @private
-         */
-        this._$clearColorG = 1;
-        /**
-         * @type {number}
-         * @default 1
-         * @private
-         */
-        this._$clearColorB = 1;
-        /**
-         * @type {number}
-         * @default 1
-         * @private
-         */
-        this._$clearColorA = 1;
-        /**
-         * @type {number}
-         * @default 0
-         * @private
-         */
-        this._$viewportWidth = 0;
-        /**
-         * @type {number}
-         * @default 0
-         * @private
-         */
-        this._$viewportHeight = 0;
-        /**
-         * @type {FrameBufferManager}
-         * @private
-         */
-        this._$frameBufferManager = new FrameBufferManager(gl, samples);
-        /**
-         * @type {CanvasToWebGLContextPath}
-         * @private
-         */
-        this._$path = new CanvasToWebGLContextPath();
-        /**
-         * @type {CanvasToWebGLContextGrid}
-         * @private
-         */
-        this._$grid = new CanvasToWebGLContextGrid();
-        /**
-         * @type {number}
-         * @default 0
-         * @private
-         */
-        this._$offsetX = 0;
-        /**
-         * @type {number}
-         * @default 0
-         * @private
-         */
-        this._$offsetY = 0;
-        /**
-         * @type {array}
-         * @private
-         */
-        this._$blends = $getArray();
-        /**
-         * @type {array}
-         * @private
-         */
-        this._$positions = $getArray();
-        /**
-         * @type {boolean}
-         * @default false
-         * @private
-         */
-        this._$isLayer = false;
-        /**
-         * @type {CanvasToWebGLShaderList}
-         * @private
-         */
-        this._$shaderList = new CanvasToWebGLShaderList(this, gl);
-        /**
-         * @type {GradientLUTGenerator}
-         * @private
-         */
-        this._$gradientLUT = new GradientLUTGenerator(this, gl);
-        /**
-         * @type {VertexArrayObjectManager}
-         * @private
-         */
-        this._$vao = new VertexArrayObjectManager(gl);
-        /**
-         * @type {CanvasToWebGLContextMask}
-         * @private
-         */
-        this._$mask = new CanvasToWebGLContextMask(this, gl);
-        /**
-         * @type {CanvasToWebGLContextBlend}
-         * @private
-         */
-        this._$blend = new CanvasToWebGLContextBlend(this, gl);
-        /**
-         * @type {array}
-         * @private
-         */
-        this._$maskBufferArray = [];
-        /**
-         * @type {array}
-         * @private
-         */
-        this._$maskBoundsArray = [];
-        /**
-         * @type {array}
-         * @private
-         */
-        this._$attachmentArray = [];
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    reset() {
-        // reset
-        this._$globalAlpha = 1;
-        this._$globalCompositeOperation = "normal";
-        this._$imageSmoothingEnabled = false;
-        // reset color
-        this._$contextStyle.clear();
-    }
-    /**
-     * @return {boolean}
-     * @public
-     */
-    get isLayer() {
-        return this._$isLayer;
-    }
-    /**
-     * @memberof CanvasToWebGLContext#
-     * @return {HTMLCanvasElement}
-     * @public
-     */
-    get canvas() {
-        return this._$gl.canvas;
-    }
-    /**
-     * @return {AttachmentImpl|null}
-     * @public
-     */
-    get cacheAttachment() {
-        return this._$cacheAttachment;
-    }
-    set cacheAttachment(attachment) {
-        this._$cacheAttachment = attachment;
-    }
-    /**
-     * @return {BoundsImpl}
-     * @readonly
-     * @public
-     */
-    get cacheBounds() {
-        return this._$cacheBounds;
-    }
-    /**
-     * @member {Float32Array|CanvasGradientToWebGL|CanvasPatternToWebGL}
-     * @public
-     */
-    get fillStyle() {
-        return this._$contextStyle.fillStyle;
-    }
-    set fillStyle(fill_style) {
-        this._$contextStyle.fillStyle = fill_style;
-    }
-    /**
-     * @member {Float32Array|CanvasGradientToWebGL|CanvasPatternToWebGL}
-     * @public
-     */
-    get strokeStyle() {
-        return this._$contextStyle.strokeStyle;
-    }
-    set strokeStyle(stroke_style) {
-        this._$contextStyle.strokeStyle = stroke_style;
-    }
-    /**
-     * @member {number}
-     * @public
-     */
-    get lineWidth() {
-        return this._$contextStyle.lineWidth;
-    }
-    set lineWidth(line_width) {
-        this._$contextStyle.lineWidth = line_width;
-    }
-    /**
-     * @member {string}
-     * @public
-     */
-    get lineCap() {
-        return this._$contextStyle.lineCap;
-    }
-    set lineCap(line_cap) {
-        this._$contextStyle.lineCap = line_cap;
-    }
-    /**
-     * @member {string}
-     * @public
-     */
-    get lineJoin() {
-        return this._$contextStyle.lineJoin;
-    }
-    set lineJoin(line_join) {
-        this._$contextStyle.lineJoin = line_join;
-    }
-    /**
-     * @member {number}
-     * @public
-     */
-    get miterLimit() {
-        return this._$contextStyle.miterLimit;
-    }
-    set miterLimit(miter_limit) {
-        this._$contextStyle.miterLimit = miter_limit;
-    }
-    /**
-     * @member {number}
-     * @public
-     */
-    get globalAlpha() {
-        return this._$globalAlpha;
-    }
-    set globalAlpha(global_alpha) {
-        this._$globalAlpha = $clamp(global_alpha, 0, 1, 1);
-    }
-    /**
-     * @member {boolean}
-     * @public
-     */
-    get imageSmoothingEnabled() {
-        return this._$imageSmoothingEnabled;
-    }
-    set imageSmoothingEnabled(image_smoothing_enabled) {
-        this._$imageSmoothingEnabled = image_smoothing_enabled;
-    }
-    /**
-     * @member {BlendModeImpl}
-     * @public
-     */
-    get globalCompositeOperation() {
-        return this._$globalCompositeOperation;
-    }
-    set globalCompositeOperation(global_composite_operation) {
-        this._$globalCompositeOperation = global_composite_operation;
-    }
-    /**
-     * @member {FrameBufferManager}
-     * @readonly
-     * @public
-     */
-    get frameBuffer() {
-        return this._$frameBufferManager;
-    }
-    /**
-     * @member {CanvasToWebGLShaderList}
-     * @readonly
-     * @public
-     */
-    get shaderList() {
-        return this._$shaderList;
-    }
-    /**
-     * @member {CanvasToWebGLContextPath}
-     * @readonly
-     * @public
-     */
-    get path() {
-        return this._$path;
-    }
-    /**
-     * @member {CanvasToWebGLContextGrid}
-     * @readonly
-     * @public
-     */
-    get grid() {
-        return this._$grid;
-    }
-    /**
-     * @member {VertexArrayObjectManager}
-     * @readonly
-     * @public
-     */
-    get vao() {
-        return this._$vao;
-    }
-    /**
-     * @member {CanvasToWebGLContextBlend}
-     * @readonly
-     * @public
-     */
-    get blend() {
-        return this._$blend;
-    }
-    /**
-     * @return {object}
-     * @private
-     */
-    _$getCurrentPosition() {
-        return this._$positions[this._$positions.length - 1];
-    }
-    /**
-     * @description textureの最大描画可能サイズからリサイズの比率を算出して返す
-     *              Calculate and return the resize ratio from the maximum drawable size of texture
-     *
-     * @param  {number} width
-     * @param  {number} height
-     * @return {number}
-     * @method
-     * @public
-     */
-    _$getTextureScale(width, height) {
-        const maxSize = $Math.max(width, height);
-        if (maxSize > this._$maxTextureSize) {
-            return this._$maxTextureSize / maxSize;
-        }
-        return 1;
-    }
-    /**
-     * @param  {object} [attachment = null]
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$bind(attachment = null) {
-        if (!attachment) {
-            return;
-        }
-        this._$frameBufferManager.bind(attachment);
-        const colorBuffer = attachment.color;
-        const stencilBuffer = attachment.stencil;
-        const width = attachment.width;
-        const height = attachment.height;
-        if (this._$viewportWidth !== width || this._$viewportHeight !== height) {
-            this._$viewportWidth = width;
-            this._$viewportHeight = height;
-            this._$gl.viewport(0, 0, width, height);
-        }
-        // カラーバッファorステンシルバッファが、未初期化の場合はクリアする
-        if (colorBuffer && colorBuffer.dirty
-            || stencilBuffer && stencilBuffer.dirty) {
-            if (colorBuffer) {
-                colorBuffer.dirty = false;
-            }
-            if (stencilBuffer) {
-                stencilBuffer.dirty = false;
-            }
-            this._$gl.clearColor(0, 0, 0, 0);
-            this.clearRect(0, 0, this._$viewportWidth, this._$viewportHeight);
-            this._$gl.clearColor(this._$clearColorR, this._$clearColorG, this._$clearColorB, this._$clearColorA);
-            this._$mask._$onClear(attachment.mask);
-        }
-        this._$mask._$onBind(attachment.mask);
-    }
-    /**
-     * @param  {number} a
-     * @param  {number} b
-     * @param  {number} c
-     * @param  {number} d
-     * @param  {number} e
-     * @param  {number} f
-     * @return {void}
-     * @method
-     * @public
-     */
-    setTransform(a, b, c, d, e, f) {
-        this._$matrix[0] = a;
-        this._$matrix[1] = b;
-        this._$matrix[3] = c;
-        this._$matrix[4] = d;
-        this._$matrix[6] = e;
-        this._$matrix[7] = f;
-    }
-    /**
-     * @param  {number} width
-     * @param  {number} height
-     * @return {void}
-     * @method
-     * @public
-     */
-    setMaxSize(width, height) {
-        this._$frameBufferManager.setMaxSize(width, height);
-    }
-    /**
-     * @param  {number} a
-     * @param  {number} b
-     * @param  {number} c
-     * @param  {number} d
-     * @param  {number} e
-     * @param  {number} f
-     * @return {void}
-     * @method
-     * @public
-     */
-    transform(a, b, c, d, e, f) {
-        const a00 = this._$matrix[0];
-        const a01 = this._$matrix[1];
-        const a10 = this._$matrix[3];
-        const a11 = this._$matrix[4];
-        const a20 = this._$matrix[6];
-        const a21 = this._$matrix[7];
-        this._$matrix[0] = a * a00 + b * a10;
-        this._$matrix[1] = a * a01 + b * a11;
-        this._$matrix[3] = c * a00 + d * a10;
-        this._$matrix[4] = c * a01 + d * a11;
-        this._$matrix[6] = e * a00 + f * a10 + a20;
-        this._$matrix[7] = e * a01 + f * a11 + a21;
-    }
-    /**
-     * @param  {WebGLTexture} image
-     * @param  {number} x
-     * @param  {number} y
-     * @param  {number} w
-     * @param  {number} h
-     * @param  {Float32Array} [color_transform=null]
-     * @return {void}
-     * @method
-     * @public
-     */
-    drawImage(image, x, y, w, h, color_transform = null) {
-        let ct0 = 1;
-        let ct1 = 1;
-        let ct2 = 1;
-        let ct4 = 0;
-        let ct5 = 0;
-        let ct6 = 0;
-        const ct3 = this._$globalAlpha;
-        const ct7 = 0;
-        if (color_transform) {
-            ct0 = color_transform[0];
-            ct1 = color_transform[1];
-            ct2 = color_transform[2];
-            ct4 = color_transform[4] / 255;
-            ct5 = color_transform[5] / 255;
-            ct6 = color_transform[6] / 255;
-        }
-        this.blend.drawImage(image, x, y, w, h, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7, this._$globalCompositeOperation, this._$viewportWidth, this._$viewportHeight, this._$matrix, this._$imageSmoothingEnabled);
-    }
-    /**
-     * @param  {number} r
-     * @param  {number} g
-     * @param  {number} b
-     * @param  {number} a
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$setColor(r = 0, g = 0, b = 0, a = 0) {
-        this._$clearColorR = r;
-        this._$clearColorG = g;
-        this._$clearColorB = b;
-        this._$clearColorA = a;
-        this._$gl.clearColor(r, g, b, a);
-    }
-    /**
-     * @param  {number} x
-     * @param  {number} y
-     * @param  {number} w
-     * @param  {number} h
-     * @return {void}
-     * @method
-     * @public
-     */
-    clearRect(x, y, w, h) {
-        this._$mask._$onClearRect();
-        this._$gl.enable(this._$gl.SCISSOR_TEST);
-        this._$gl.scissor(x, y, w, h);
-        this._$gl.clear(this._$gl.COLOR_BUFFER_BIT | this._$gl.STENCIL_BUFFER_BIT);
-        this._$gl.disable(this._$gl.SCISSOR_TEST);
-    }
-    /**
-     * @param  {number} x
-     * @param  {number} y
-     * @param  {number} w
-     * @param  {number} h
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$clearRectStencil(x, y, w, h) {
-        this._$mask._$onClearRect();
-        this._$gl.enable(this._$gl.SCISSOR_TEST);
-        this._$gl.scissor(x, y, w, h);
-        this._$gl.clear(this._$gl.STENCIL_BUFFER_BIT);
-        this._$gl.disable(this._$gl.SCISSOR_TEST);
-    }
-    /**
-     * @param  {number} x
-     * @param  {number} y
-     * @return {void}
-     * @method
-     * @public
-     */
-    moveTo(x, y) {
-        this._$path.moveTo(x, y);
-    }
-    /**
-     * @param  {number} x
-     * @param  {number} y
-     * @return {void}
-     * @method
-     * @public
-     */
-    lineTo(x, y) {
-        this._$path.lineTo(x, y);
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    beginPath() {
-        this._$path.begin();
-    }
-    /**
-     * @param  {number} cx
-     * @param  {number} cy
-     * @param  {number} x
-     * @param  {number} y
-     * @return {void}
-     * @method
-     * @public
-     */
-    quadraticCurveTo(cx, cy, x, y) {
-        this._$path.quadTo(cx, cy, x, y);
-    }
-    /**
-     * @param  {number} cp1x
-     * @param  {number} cp1y
-     * @param  {number} cp2x
-     * @param  {number} cp2y
-     * @param  {number} dx
-     * @param  {number} dy
-     * @return {void}
-     * @method
-     * @public
-     */
-    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, dx, dy) {
-        this._$path.cubicTo(cp1x, cp1y, cp2x, cp2y, dx, dy);
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    fill() {
-        // to triangle
-        const fillVertices = this._$path.vertices;
-        if (!fillVertices.length) {
-            return;
-        }
-        const checkVertices = $getArray();
-        for (let idx = 0; idx < fillVertices.length; ++idx) {
-            const vertices = fillVertices[idx];
-            if (10 > vertices.length) {
-                continue;
-            }
-            checkVertices.push(vertices);
-        }
-        if (!checkVertices.length) {
-            $poolArray(checkVertices);
-            return;
-        }
-        const fillVertexArrayObject = this._$vao.createFill(checkVertices);
-        const fillStyle = this.fillStyle;
-        let matrix = this._$matrix;
-        let texture;
-        let variants;
-        let shader;
-        const hasGrid = this._$grid.enabled;
-        if (fillStyle instanceof CanvasGradientToWebGL) {
-            const stops = fillStyle.stops;
-            const isLinearSpace = fillStyle.rgb === "linearRGB";
-            texture = this
-                ._$gradientLUT
-                .generateForShape(stops, isLinearSpace);
-            this
-                ._$frameBufferManager
-                .textureManager
-                .bind0(texture, true);
-            variants = this
-                ._$shaderList
-                .gradientShapeShaderVariants;
-            if (fillStyle.type === "linear") {
-                shader = variants
-                    .getGradientShapeShader(false, hasGrid, false, false, fillStyle.mode);
-                variants.setGradientShapeUniform(shader.uniform, false, 0, 0, 0, hasGrid, matrix, $inverseMatrix(this._$matrix), this._$viewportWidth, this._$viewportHeight, this._$grid, false, fillStyle.points, 0);
-            }
-            else {
-                matrix = this._$stack[this._$stack.length - 1];
-                const hasFocalPoint = fillStyle.focalPointRatio !== 0;
-                shader = variants
-                    .getGradientShapeShader(false, hasGrid, true, hasFocalPoint, fillStyle.mode);
-                variants.setGradientShapeUniform(shader.uniform, false, 0, 0, 0, hasGrid, matrix, $inverseMatrix(this._$matrix), this._$viewportWidth, this._$viewportHeight, this._$grid, true, fillStyle.points, fillStyle.focalPointRatio);
-            }
-        }
-        else if (fillStyle instanceof CanvasPatternToWebGL) {
-            matrix = this._$stack[this._$stack.length - 1];
-            const pct = fillStyle.colorTransform;
-            texture = fillStyle.texture;
-            this
-                ._$frameBufferManager
-                .textureManager
-                .bind0(texture, this._$imageSmoothingEnabled);
-            variants = this
-                ._$shaderList
-                .shapeShaderVariants;
-            shader = variants
-                .getBitmapShapeShader(false, fillStyle.repeat, hasGrid);
-            if (pct) {
-                variants.setBitmapShapeUniform(shader.uniform, false, 0, 0, 0, hasGrid, matrix, $inverseMatrix(this._$matrix), this._$viewportWidth, this._$viewportHeight, this._$grid, texture.width, texture.height, pct[0], pct[1], pct[2], this._$globalAlpha, pct[4] / 255, pct[5] / 255, pct[6] / 255, 0);
-            }
-            else {
-                variants.setBitmapShapeUniform(shader.uniform, false, 0, 0, 0, hasGrid, matrix, $inverseMatrix(this._$matrix), this._$viewportWidth, this._$viewportHeight, this._$grid, texture.width, texture.height, 1, 1, 1, this._$globalAlpha, 0, 0, 0, 0);
-            }
-        }
-        else {
-            variants = this
-                ._$shaderList
-                .shapeShaderVariants;
-            shader = variants
-                .getSolidColorShapeShader(false, this._$grid.enabled);
-            variants.setSolidColorShapeUniform(shader.uniform, false, 0, 0, 0, hasGrid, matrix, this._$viewportWidth, this._$viewportHeight, this._$grid, fillStyle, this._$globalAlpha);
-        }
-        const coverageVariants = this
-            ._$shaderList
-            .shapeShaderVariants;
-        const coverageShader = coverageVariants
-            .getMaskShapeShader(false, hasGrid);
-        coverageVariants.setMaskShapeUniform(coverageShader.uniform, hasGrid, matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5], matrix[6], matrix[7], matrix[8], this._$viewportWidth, this._$viewportHeight, this._$grid);
-        // mask on
-        this._$gl.enable(this._$gl.STENCIL_TEST);
-        this._$gl.stencilMask(0xff);
-        // draw shape
-        this._$gl.enable(this._$gl.SAMPLE_ALPHA_TO_COVERAGE);
-        this._$gl.stencilFunc(this._$gl.ALWAYS, 0, 0xff);
-        this._$gl.stencilOp(this._$gl.KEEP, this._$gl.INVERT, this._$gl.INVERT);
-        this._$gl.colorMask(false, false, false, false);
-        coverageShader._$fill(fillVertexArrayObject);
-        this._$gl.disable(this._$gl.SAMPLE_ALPHA_TO_COVERAGE);
-        // draw shape range
-        this._$gl.stencilFunc(this._$gl.NOTEQUAL, 0, 0xff);
-        this._$gl.stencilOp(this._$gl.KEEP, this._$gl.ZERO, this._$gl.ZERO);
-        this._$gl.colorMask(true, true, true, true);
-        shader._$fill(fillVertexArrayObject);
-        // mask off
-        this._$gl.disable(this._$gl.STENCIL_TEST);
-        // release vertex array
-        this.releaseFillVertexArray(fillVertexArrayObject);
-    }
-    /**
-     * @param  {WebGLVertexArrayObject} vertex_array
-     * @return {void}
-     * @method
-     * @public
-     */
-    releaseFillVertexArray(vertex_array) {
-        // release shape vertex array object
-        this._$vao.releaseFill(vertex_array);
-        const indexRanges = vertex_array.indexRanges;
-        for (let idx = 0; idx < indexRanges.length; ++idx) {
-            WebGLFillMeshGenerator
-                .indexRangePool
-                .push(indexRanges[idx]);
-        }
-        $poolArray(indexRanges);
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$enterClip() {
-        this._$mask._$enterClip();
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$beginClipDef() {
-        this._$mask._$beginClipDef();
-    }
-    /**
-     * @param  {boolean} flag
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$updateContainerClipFlag(flag) {
-        this._$mask.containerClip = flag;
-    }
-    /**
-     * @description マスク処理の開始関数
-     *              Mask processing start function
-     *
-     * @param  {Float32Array} matrix
-     * @param  {object} bounds
-     * @return {Float32Array}
-     * @method
-     * @public
-     */
-    _$startClip(matrix, bounds) {
-        let x = bounds.xMin;
-        let y = bounds.yMin;
-        let width = Math.abs(bounds.xMax - bounds.xMin);
-        let height = Math.abs(bounds.yMax - bounds.yMin);
-        // resize
-        const manager = this._$frameBufferManager;
-        const currentAttachment = manager.currentAttachment;
-        if (!currentAttachment || !currentAttachment.texture) {
-            throw new Error("the current Attachment is null.");
-        }
-        if (x > currentAttachment.width
-            || y > currentAttachment.height) {
-            return null;
-        }
-        if (width + x > currentAttachment.width) {
-            width = currentAttachment.width - x;
-        }
-        if (height + y > currentAttachment.height) {
-            height = currentAttachment.height - y;
-        }
-        if (0 > x) {
-            width += x;
-            x = 0;
-        }
-        if (0 > y) {
-            height += y;
-            y = 0;
-        }
-        if (0 >= width || 0 >= height) {
-            return null;
-        }
-        width = $Math.ceil(width);
-        height = $Math.ceil(height);
-        this._$cacheBounds.xMin = x;
-        this._$cacheBounds.yMin = y;
-        this._$cacheBounds.xMax = width;
-        this._$cacheBounds.yMax = height;
-        this._$cacheAttachment = currentAttachment;
-        // create new buffer
-        this._$bind(manager.createCacheAttachment(width, height, true));
-        // draw background
-        const texture = currentAttachment.texture;
-        this.reset();
-        this.setTransform(1, 0, 0, 1, 0, 0);
-        this.drawImage(texture, -x, -y, texture.width, texture.height);
-        return $getFloat32Array6(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4] - bounds.xMin, matrix[5] - bounds.yMin);
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$endClipDef() {
-        this._$mask._$endClipDef();
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$leaveClip() {
-        this._$mask._$leaveClip();
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$drawContainerClip() {
-        this._$mask._$drawContainerClip();
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    closePath() {
-        this._$path.close();
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    stroke() {
-        const strokeVertices = this._$path.vertices;
-        if (!strokeVertices.length) {
-            return;
-        }
-        const checkVertices = $getArray();
-        for (let idx = 0; idx < strokeVertices.length; ++idx) {
-            const vertices = strokeVertices[idx];
-            if (6 > vertices.length) {
-                continue;
-            }
-            checkVertices.push(vertices);
-        }
-        if (!checkVertices.length) {
-            $poolArray(checkVertices);
-            return;
-        }
-        const strokeBuffer = this._$vao.createStroke(strokeVertices, this.lineCap, this.lineJoin);
-        let matrix = this._$matrix;
-        const strokeStyle = this.strokeStyle;
-        let face = $Math.sign(matrix[0] * matrix[4]);
-        if (face > 0 && matrix[1] !== 0 && matrix[3] !== 0) {
-            face = -$Math.sign(matrix[1] * matrix[3]);
-        }
-        let lineWidth = this.lineWidth * 0.5;
-        let scaleX;
-        let scaleY;
-        if (this._$grid.enabled) {
-            // lineWidth *= $getSameScaleBase();
-            scaleX = $Math.abs(this._$grid.ancestorMatrixA + this._$grid.ancestorMatrixD);
-            scaleY = $Math.abs(this._$grid.ancestorMatrixB + this._$grid.ancestorMatrixE);
-        }
-        else {
-            scaleX = $Math.abs(matrix[0] + matrix[3]);
-            scaleY = $Math.abs(matrix[1] + matrix[4]);
-        }
-        const scaleMin = $Math.min(scaleX, scaleY);
-        const scaleMax = $Math.max(scaleX, scaleY);
-        lineWidth *= scaleMax * (1 - 0.3 * $Math.cos($Math.PI * 0.5 * (scaleMin / scaleMax)));
-        lineWidth = $Math.max(1, lineWidth);
-        const hasGrid = this._$grid.enabled;
-        let texture;
-        let variants;
-        let shader;
-        if (strokeStyle instanceof CanvasGradientToWebGL) {
-            if (strokeStyle.type === "radial") {
-                matrix = this._$stack[this._$stack.length - 1];
-            }
-            const stops = strokeStyle.stops;
-            const isLinearSpace = strokeStyle.rgb === "linearRGB";
-            texture = this
-                ._$gradientLUT
-                .generateForShape(stops, isLinearSpace);
-            this
-                ._$frameBufferManager
-                .textureManager
-                .bind0(texture, true);
-            variants = this
-                ._$shaderList
-                .gradientShapeShaderVariants;
-            if (strokeStyle.type === "linear") {
-                shader = variants
-                    .getGradientShapeShader(true, hasGrid, false, false, strokeStyle.mode);
-                variants.setGradientShapeUniform(shader.uniform, true, lineWidth, face, this.miterLimit, hasGrid, matrix, $inverseMatrix(this._$matrix), this._$viewportWidth, this._$viewportHeight, this._$grid, false, strokeStyle.points, 0);
-            }
-            else {
-                matrix = this._$stack[this._$stack.length - 1];
-                const hasFocalPoint = strokeStyle.focalPointRatio !== 0;
-                shader = variants
-                    .getGradientShapeShader(true, hasGrid, true, hasFocalPoint, strokeStyle.mode);
-                variants.setGradientShapeUniform(shader.uniform, true, lineWidth, face, this.miterLimit, hasGrid, matrix, $inverseMatrix(this._$matrix), this._$viewportWidth, this._$viewportHeight, this._$grid, true, strokeStyle.points, strokeStyle.focalPointRatio);
-            }
-        }
-        else if (strokeStyle instanceof CanvasPatternToWebGL) {
-            matrix = this._$stack[this._$stack.length - 1];
-            const pct = strokeStyle.colorTransform;
-            texture = strokeStyle.texture;
-            this
-                ._$frameBufferManager
-                .textureManager
-                .bind0(texture);
-            variants = this
-                ._$shaderList
-                .shapeShaderVariants;
-            shader = variants
-                .getBitmapShapeShader(true, strokeStyle.repeat, this._$grid.enabled);
-            if (pct) {
-                variants.setBitmapShapeUniform(shader.uniform, true, lineWidth, face, this.miterLimit, hasGrid, matrix, $inverseMatrix(this._$matrix), this._$viewportWidth, this._$viewportHeight, this._$grid, texture.width, texture.height, pct[0], pct[1], pct[2], this._$globalAlpha, pct[4] / 255, pct[5] / 255, pct[6] / 255, 0);
-            }
-            else {
-                variants.setBitmapShapeUniform(shader.uniform, true, lineWidth, face, this.miterLimit, hasGrid, matrix, $inverseMatrix(this._$matrix), this._$viewportWidth, this._$viewportHeight, this._$grid, texture.width, texture.height, 1, 1, 1, this._$globalAlpha, 0, 0, 0, 0);
-            }
-        }
-        else {
-            variants = this
-                ._$shaderList
-                .shapeShaderVariants;
-            shader = variants
-                .getSolidColorShapeShader(true, this._$grid.enabled);
-            variants.setSolidColorShapeUniform(shader.uniform, true, lineWidth, face, this.miterLimit, hasGrid, matrix, this._$viewportWidth, this._$viewportHeight, this._$grid, strokeStyle, this._$globalAlpha);
-        }
-        shader._$stroke(strokeBuffer);
-        this._$vao.releaseStroke(strokeBuffer);
-    }
-    /**
-     * @param  {number} x
-     * @param  {number} y
-     * @param  {number} radius
-     * @return {void}
-     * @method
-     * @public
-     */
-    arc(x, y, radius) {
-        this._$path.drawCircle(x, y, radius);
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    clip() {
-        // to triangle
-        const fillVertices = this._$path.vertices;
-        if (!fillVertices.length) {
-            return;
-        }
-        const checkVertices = $getArray();
-        for (let idx = 0; idx < fillVertices.length; ++idx) {
-            const vertices = fillVertices[idx];
-            if (10 > vertices.length) {
-                continue;
-            }
-            checkVertices.push(vertices);
-        }
-        if (!checkVertices.length) {
-            $poolArray(checkVertices);
-            return;
-        }
-        const fillVertexArrayObject = this._$vao.createFill(checkVertices);
-        // mask render
-        const variants = this
-            ._$shaderList
-            .shapeShaderVariants;
-        const shader = variants.getMaskShapeShader(false, false);
-        const uniform = shader.uniform;
-        variants.setMaskShapeUniform(uniform, false, this._$matrix[0], this._$matrix[1], this._$matrix[2], this._$matrix[3], this._$matrix[4], this._$matrix[5], this._$matrix[6], this._$matrix[7], this._$matrix[8], this._$viewportWidth, this._$viewportHeight, null);
-        if (this._$mask._$onClip(fillVertexArrayObject, this._$matrix, this._$viewportWidth, this._$viewportHeight)) {
-            return;
-        }
-        shader._$fill(fillVertexArrayObject);
-        this.beginPath();
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    save() {
-        // matrix
-        const matrix = this._$matrix;
-        this._$stack.push($getFloat32Array9(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5], matrix[6], matrix[7], matrix[8]));
-        // mask
-        this._$mask._$onSave();
-    }
-    /**
-     * @return {void}
-     * @method
-     * @public
-     */
-    restore() {
-        //matrix
-        if (this._$stack.length) {
-            $poolFloat32Array9(this._$matrix);
-            this._$matrix = this._$stack.pop() || $getFloat32Array9();
-        }
-        // mask
-        this._$mask._$onRestore();
-    }
-    /**
-     * @param  {WebGLTexture} texture
-     * @param  {boolean}      repeat
-     * @param  {Float32Array} color_transform
-     * @return {CanvasPatternToWebGL}
-     * @method
-     * @public
-     */
-    createPattern(texture, repeat, color_transform) {
-        return new CanvasPatternToWebGL(this, texture, repeat, color_transform);
-    }
-    /**
-     * @param  {number} x0
-     * @param  {number} y0
-     * @param  {number} x1
-     * @param  {number} y1
-     * @param  {string} [rgb=InterpolationMethod.RGB]
-     * @param  {string} [mode=SpreadMethod.PAD]
-     * @return {CanvasGradientToWebGL}
-     * @method
-     * @public
-     */
-    createLinearGradient(x0, y0, x1, y1, rgb = "rgb", mode = "pad") {
-        return new CanvasGradientToWebGL()
-            .linear(x0, y0, x1, y1, rgb, mode);
-    }
-    /**
-     * @param  {number} x0
-     * @param  {number} y0
-     * @param  {number} r0
-     * @param  {number} x1
-     * @param  {number} y1
-     * @param  {number} r1
-     * @param  {string} [rgb=InterpolationMethod.RGB]
-     * @param  {string} [mode=SpreadMethod.PAD]
-     * @param  {number} [focal_point_ratio=0]
-     * @return {CanvasGradientToWebGL}
-     * @method
-     * @public
-     */
-    createRadialGradient(x0, y0, r0, x1, y1, r1, rgb = "rgb", mode = "pad", focal_point_ratio = 0) {
-        return new CanvasGradientToWebGL()
-            .radial(x0, y0, r0, x1, y1, r1, rgb, mode, focal_point_ratio);
-    }
-    /**
-     * @param  {WebGLTexture} texture
-     * @param  {boolean}      is_horizontal
-     * @param  {number}       blur
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$applyBlurFilter(texture, is_horizontal, blur) {
-        const manager = this._$frameBufferManager;
-        const currentAttachment = manager.currentAttachment;
-        if (!currentAttachment) {
-            throw new Error("the current attachment is null.");
-        }
-        const width = currentAttachment.width;
-        const height = currentAttachment.height;
-        manager
-            .textureManager
-            .bind0(texture, true);
-        const halfBlur = $Math.ceil(blur * 0.5);
-        const fraction = 1 - (halfBlur - blur * 0.5);
-        const samples = 1 + blur;
-        const variants = this
-            ._$shaderList
-            .filterShaderVariants;
-        const shader = variants
-            .getBlurFilterShader(halfBlur);
-        variants
-            .setBlurFilterUniform(shader.uniform, width, height, is_horizontal, fraction, samples);
-        shader._$drawImage();
-    }
-    /**
-     * @param  {WebGLTexture} texture
-     * @param  {number}  width
-     * @param  {number}  height
-     * @param  {number}  base_width
-     * @param  {number}  base_height
-     * @param  {number}  base_offset_x
-     * @param  {number}  base_offset_y
-     * @param  {number}  blur_width
-     * @param  {number}  blur_height
-     * @param  {number}  blur_offset_x
-     * @param  {number}  blur_offset_y
-     * @param  {boolean} is_glow
-     * @param  {string}  type
-     * @param  {boolean} knockout
-     * @param  {number}  strength
-     * @param  {array | null} [ratios = null]
-     * @param  {array | null} [colors = null]
-     * @param  {array | null} [alphas = null]
-     * @param  {number} [color_r1 = 0]
-     * @param  {number} [color_g1 = 0]
-     * @param  {number} [color_b1 = 0]
-     * @param  {number} [color_a1 = 0]
-     * @param  {number} [color_r2 = 0]
-     * @param  {number} [color_g2 = 0]
-     * @param  {number} [color_b2 = 0]
-     * @param  {number} [color_a2 = 0]
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$applyBitmapFilter(texture, width, height, base_width, base_height, base_offset_x, base_offset_y, blur_width, blur_height, blur_offset_x, blur_offset_y, is_glow, type, knockout, strength, ratios = null, colors = null, alphas = null, color_r1 = 0, color_g1 = 0, color_b1 = 0, color_a1 = 0, color_r2 = 0, color_g2 = 0, color_b2 = 0, color_a2 = 0) {
-        const manager = this._$frameBufferManager;
-        const isInner = type === "inner";
-        const baseAttachment = manager.currentAttachment;
-        const baseTexture = manager.getTextureFromCurrentAttachment();
-        let lut = null;
-        const isGradient = ratios !== null && colors !== null && alphas !== null;
-        if (ratios !== null && colors !== null && alphas !== null) {
-            lut = this
-                ._$gradientLUT
-                .generateForFilter(ratios, colors, alphas);
-        }
-        let targetTextureAttachment;
-        if (isInner) {
-            if (isGradient && lut) {
-                manager
-                    .textureManager
-                    .bind02(texture, lut, true);
-            }
-            else {
-                manager
-                    .textureManager
-                    .bind0(texture);
-            }
-        }
-        else {
-            targetTextureAttachment = this
-                ._$frameBufferManager
-                .createTextureAttachment(width, height);
-            this._$bind(targetTextureAttachment);
-            if (isGradient && lut) {
-                manager
-                    .textureManager
-                    .bind012(texture, baseTexture, lut, true);
-            }
-            else {
-                manager
-                    .textureManager
-                    .bind01(texture, baseTexture);
-            }
-        }
-        const transformsBase = !(isInner || type === "full" && knockout);
-        const transformsBlur = !(width === blur_width && height === blur_height && blur_offset_x === 0 && blur_offset_y === 0);
-        const appliesStrength = !(strength === 1);
-        const variants = this
-            ._$shaderList
-            .filterShaderVariants;
-        const shader = variants.getBitmapFilterShader(transformsBase, transformsBlur, is_glow, type, knockout, appliesStrength, isGradient);
-        variants.setBitmapFilterUniform(shader.uniform, width, height, base_width, base_height, base_offset_x, base_offset_y, blur_width, blur_height, blur_offset_x, blur_offset_y, is_glow, strength, color_r1, color_g1, color_b1, color_a1, color_r2, color_g2, color_b2, color_a2, transformsBase, transformsBlur, appliesStrength, isGradient);
-        if (!isInner) {
-            this.blend.toOneZero();
-        }
-        else if (knockout) {
-            this.blend.toSourceIn();
-        }
-        else {
-            this.blend.toSourceAtop();
-        }
-        shader._$drawImage();
-        if (!isInner) {
-            manager
-                .releaseAttachment(baseAttachment, true);
-        }
-    }
-    /**
-     * @param  {WebGLTexture} texture
-     * @param  {array} matrix
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$applyColorMatrixFilter(texture, matrix) {
-        this
-            ._$frameBufferManager
-            .textureManager
-            .bind0(texture, true);
-        const variants = this
-            ._$shaderList
-            .filterShaderVariants;
-        const shader = variants
-            .getColorMatrixFilterShader();
-        variants
-            .setColorMatrixFilterUniform(shader.uniform, matrix);
-        this.blend.reset();
-        shader._$drawImage();
-    }
-    /**
-     * @param  {WebGLTexture} texture
-     * @param  {number}  matrix_x
-     * @param  {number}  matrix_y
-     * @param  {Float32Array}   matrix
-     * @param  {number}  divisor
-     * @param  {number}  bias
-     * @param  {boolean} preserve_alpha
-     * @param  {boolean} clamp
-     * @param  {number}  color_r
-     * @param  {number}  color_g
-     * @param  {number}  color_b
-     * @param  {number}  color_a
-     * @return {void}
-     * @method
-     * @public
-     */
-    _$applyConvolutionFilter(texture, matrix_x, matrix_y, matrix, divisor, bias, preserve_alpha, clamp, color_r, color_g, color_b, color_a) {
-        const width = texture.width;
-        const height = texture.height;
-        const targetTextureAttachment = this
-            ._$frameBufferManager
-            .createTextureAttachment(width, height);
-        this._$bind(targetTextureAttachment);
-        this
-            ._$frameBufferManager
-            .textureManager
-            .bind0(texture, true);
-        const variants = this
-            ._$shaderList
-            .filterShaderVariants;
-        const shader = variants
-            .getConvolutionFilterShader(matrix_x, matrix_y, preserve_alpha, clamp);
-        variants.setConvolutionFilterUniform(shader.uniform, width, height, matrix, divisor, bias, clamp, color_r, color_g, color_b, color_a);
-        this.blend.reset();
-        shader._$drawImage();
-    }
-    /**
-     * @param  {WebGLTexture} texture
-     * @param  {WebGLTexture} map
-     * @param  {number} base_width
-     * @param  {number} base_height
-     * @param  {PointImpl}  [point=null]
-     * @param  {number} component_x
-     * @param  {number} component_y
-     * @param  {number} scale_x
-     * @param  {number} scale_y
-     * @param  {string} mode
-     * @param  {number} color_r
-     * @param  {number} color_g
-     * @param  {number} color_b
-     * @param  {number} color_a
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$applyDisplacementMapFilter(texture, map, base_width, base_height, point, component_x, component_y, scale_x, scale_y, mode, color_r, color_g, color_b, color_a) {
-        const width = texture.width;
-        const height = texture.height;
-        const targetTextureAttachment = this
-            ._$frameBufferManager
-            .createTextureAttachment(width, height);
-        this._$bind(targetTextureAttachment);
-        if (!point) {
-            point = { "x": 0, "y": 0 };
-        }
-        this
-            ._$frameBufferManager
-            .textureManager
-            .bind01(texture, map);
-        const variants = this
-            ._$shaderList
-            .filterShaderVariants;
-        const shader = variants
-            .getDisplacementMapFilterShader(component_x, component_y, mode);
-        variants.setDisplacementMapFilterUniform(shader.uniform, map.width, map.height, base_width, base_height, point.x, point.y, scale_x, scale_y, mode, color_r, color_g, color_b, color_a);
-        this.blend.reset();
-        shader._$drawImage();
-    }
-    /**
-     * @param  {BoundsImpl} position
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$startLayer(position) {
-        this._$positions.push(position);
-        this._$blends.push(this._$isLayer);
-        this._$isLayer = true;
-    }
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$endLayer() {
-        const bounds = this._$positions.pop();
-        if (bounds) {
-            $poolBoundsObject(bounds);
-        }
-        this._$isLayer = !!this._$blends.pop();
-    }
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$saveCurrentMask() {
-        this._$maskBufferArray.push(this._$cacheAttachment);
-        this._$cacheAttachment = null;
-        const bounds = this._$cacheBounds;
-        this._$maskBoundsArray.push($getBoundsObject(bounds.xMin, bounds.xMax, bounds.yMin, bounds.yMax));
-    }
-    /**
-     * @param  {number} width
-     * @param  {number} height
-     * @param  {boolean} [multisample=false]
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$saveAttachment(width, height, multisample = false) {
-        const manager = this._$frameBufferManager;
-        this
-            ._$attachmentArray
-            .push(manager.currentAttachment);
-        this._$bind(manager.createCacheAttachment(width, height, multisample));
-    }
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$restoreAttachment(release_texture = false) {
-        const manager = this._$frameBufferManager;
-        manager.releaseAttachment(manager.currentAttachment, release_texture);
-        this._$bind(this._$attachmentArray.pop());
-    }
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$restoreCurrentMask() {
-        this._$cacheAttachment = this._$maskBufferArray.pop() || null;
-        this._$cacheBounds = this._$maskBoundsArray.pop() || $getBoundsObject();
-    }
-    /**
-     * @return {object}
-     * @method
-     * @private
-     */
-    getCurrentPosition() {
-        return this._$positions[this._$positions.length - 1];
-    }
-    /**
-     * @description 最大テクスチャサイズを超えないスケール値を取得する
-     * @param  {number} width
-     * @param  {number} height
-     * @return {number}
-     * @method
-     * @public
-     */
-    textureScale(width, height) {
-        const maxSize = $Math.max(width, height);
-        if (maxSize > this._$maxTextureSize) {
-            return this._$maxTextureSize / maxSize;
-        }
-        return 1;
-    }
-}