@next2d/player 1.14.7 → 1.14.8

package/dist/webgl/CanvasToWebGLContext.js

@@ -0,0 +1,1453 @@
+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 "../player/util/RenderUtil";
+/**
+ * @class
+ */
+export class CanvasToWebGLContext {
+    _$gl;
+    _$maxTextureSize;
+    _$contextStyle;
+    _$cacheBounds;
+    _$matrix;
+    _$cacheAttachment;
+    _$stack;
+    _$globalAlpha;
+    _$imageSmoothingEnabled;
+    _$globalCompositeOperation;
+    _$clearColorR;
+    _$clearColorG;
+    _$clearColorB;
+    _$clearColorA;
+    _$viewportWidth;
+    _$viewportHeight;
+    _$frameBufferManager;
+    _$path;
+    _$grid;
+    _$offsetX;
+    _$offsetY;
+    _$blends;
+    _$positions;
+    _$isLayer;
+    _$shaderList;
+    _$gradientLUT;
+    _$vao;
+    _$mask;
+    _$blend;
+    _$maskBufferArray;
+    _$maskBoundsArray;
+    _$attachmentArray;
+    /**
+     * @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;
+    }
+}