@next2d/player 1.14.6 → 1.14.8

package/dist/webgl/CanvasToWebGLContextMask.js

@@ -0,0 +1,443 @@
+import { WebGLFillMeshGenerator } from "./WebGLFillMeshGenerator";
+import { $poolArray } from "../player/util/RenderUtil";
+/**
+ * @class
+ */
+export class CanvasToWebGLContextMask {
+    _$context;
+    _$gl;
+    _$clips;
+    _$poolClip;
+    _$clipStatus;
+    _$containerClip;
+    _$currentClip;
+    /**
+     * @param {CanvasToWebGLContext} context
+     * @param {WebGL2RenderingContext} gl
+     * @constructor
+     * @public
+     */
+    constructor(context, gl) {
+        /**
+         * @type {CanvasToWebGLContext}
+         * @private
+         */
+        this._$context = context;
+        /**
+         * @type {WebGL2RenderingContext}
+         * @private
+         */
+        this._$gl = gl;
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$clips = [];
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$poolClip = [];
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$clipStatus = false;
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$containerClip = false;
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$currentClip = false;
+    }
+    /**
+     * @member {boolean}
+     * @public
+     */
+    get containerClip() {
+        return this._$containerClip;
+    }
+    set containerClip(flag) {
+        this._$containerClip = flag;
+    }
+    /**
+     * @param {boolean} mask
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$onClear(mask) {
+        if (mask) {
+            this._$gl.enable(this._$gl.STENCIL_TEST);
+            this._$currentClip = true;
+        }
+    }
+    /**
+     * @param {boolean} mask
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$onBind(mask) {
+        if (!mask && this._$currentClip) {
+            // キャッシュ作成前は、一旦マスクを無効にする
+            this._$gl.disable(this._$gl.STENCIL_TEST);
+            this._$currentClip = false;
+        }
+        else if (mask && !this._$currentClip) {
+            // キャッシュ作成後は、マスクの状態を復元する
+            this._$gl.enable(this._$gl.STENCIL_TEST);
+            this._$currentClip = true;
+            this._$endClipDef();
+        }
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$onClearRect() {
+        this._$gl.disable(this._$gl.STENCIL_TEST);
+        this._$currentClip = false;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$endClip() {
+        const manager = this._$context.frameBuffer;
+        const currentAttachment = manager.currentAttachment;
+        const texture = manager.getTextureFromCurrentAttachment();
+        this._$context._$bind(this._$context.cacheAttachment);
+        this._$context.cacheAttachment = null;
+        // blend off
+        this._$context.blend.disable();
+        const cacheBounds = this._$context.cacheBounds;
+        this._$context.reset();
+        this._$context.setTransform(1, 0, 0, 1, 0, 0);
+        this._$context.drawImage(texture, cacheBounds.xMin, cacheBounds.yMin, texture.width, texture.height);
+        // blend restart
+        this._$context.blend.enable();
+        // pool
+        manager.releaseAttachment(currentAttachment, true);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$enterClip() {
+        if (!this._$currentClip) {
+            this._$gl.enable(this._$gl.STENCIL_TEST);
+            this._$currentClip = true;
+        }
+        // buffer mask on
+        const currentAttachment = this
+            ._$context
+            .frameBuffer
+            .currentAttachment;
+        if (!currentAttachment) {
+            throw new Error("mask currentAttachment is null.");
+        }
+        currentAttachment.mask = true;
+        ++currentAttachment.clipLevel;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$beginClipDef() {
+        const currentAttachment = this
+            ._$context
+            .frameBuffer
+            .currentAttachment;
+        if (!currentAttachment) {
+            throw new Error("mask currentAttachment is null.");
+        }
+        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.stencilMask(1 << currentAttachment.clipLevel - 1);
+        this._$gl.colorMask(false, false, false, false);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$endClipDef() {
+        const currentAttachment = this
+            ._$context
+            .frameBuffer
+            .currentAttachment;
+        if (!currentAttachment) {
+            throw new Error("mask currentAttachment is null.");
+        }
+        const clipLevel = currentAttachment.clipLevel;
+        let mask = 0;
+        for (let idx = 0; idx < clipLevel; ++idx) {
+            mask |= (1 << clipLevel - idx) - 1;
+        }
+        this._$gl.disable(this._$gl.SAMPLE_ALPHA_TO_COVERAGE);
+        this._$gl.stencilFunc(this._$gl.EQUAL, mask & 0xff, mask);
+        this._$gl.stencilOp(this._$gl.KEEP, this._$gl.KEEP, this._$gl.KEEP);
+        this._$gl.stencilMask(0xff);
+        this._$gl.colorMask(true, true, true, true);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$leaveClip() {
+        const currentAttachment = this
+            ._$context
+            .frameBuffer
+            .currentAttachment;
+        if (!currentAttachment) {
+            throw new Error("mask currentAttachment is null.");
+        }
+        --currentAttachment.clipLevel;
+        currentAttachment.mask = !!currentAttachment.clipLevel;
+        // end clip
+        if (!currentAttachment.clipLevel) {
+            this._$context._$clearRectStencil(0, 0, currentAttachment.width, currentAttachment.height);
+            if (this._$context.cacheAttachment) {
+                this._$endClip();
+            }
+            return;
+        }
+        // replace
+        const w = currentAttachment.width;
+        const h = currentAttachment.height;
+        // create buffer
+        const vertices = this
+            ._$context
+            .path
+            .createRectVertices(0, 0, w, h);
+        const object = this
+            ._$context
+            .vao
+            .createFill(vertices);
+        $poolArray(vertices.pop());
+        $poolArray(vertices);
+        const variants = this
+            ._$context
+            .shaderList
+            .shapeShaderVariants;
+        const shader = variants.getMaskShapeShader(false, false);
+        const uniform = shader.uniform;
+        variants.setMaskShapeUniformIdentity(uniform, w, h);
+        const range = object.indexRanges[0];
+        // deny
+        if (!this._$currentClip) {
+            this._$currentClip = true;
+            this._$gl.enable(this._$gl.STENCIL_TEST);
+        }
+        this._$gl.enable(this._$gl.SAMPLE_ALPHA_TO_COVERAGE);
+        this._$gl.stencilFunc(this._$gl.ALWAYS, 0, 0xff);
+        this._$gl.stencilOp(this._$gl.REPLACE, this._$gl.REPLACE, this._$gl.REPLACE);
+        this._$gl.stencilMask(1 << currentAttachment.clipLevel);
+        this._$gl.colorMask(false, false, false, false);
+        shader._$containerClip(object, range.first, range.count);
+        // object pool
+        const indexRanges = object.indexRanges;
+        for (let idx = 0; idx < indexRanges.length; ++idx) {
+            WebGLFillMeshGenerator
+                .indexRangePool
+                .push(indexRanges[idx]);
+        }
+        $poolArray(object.indexRanges);
+        this._$context.vao.releaseFill(object);
+        this._$endClipDef();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$drawContainerClip() {
+        const currentAttachment = this
+            ._$context
+            .frameBuffer
+            .currentAttachment;
+        if (!currentAttachment) {
+            throw new Error("mask currentAttachment is null.");
+        }
+        const currentClipLevel = currentAttachment.clipLevel;
+        const variants = this
+            ._$context
+            .shaderList
+            .shapeShaderVariants;
+        const shader = variants
+            .getMaskShapeShader(false, false);
+        const uniform = shader.uniform;
+        let useLevel = currentClipLevel;
+        // create buffer
+        const w = currentAttachment.width;
+        const h = currentAttachment.height;
+        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);
+        const length = this._$poolClip.length;
+        for (let idx = 0; idx < length; ++idx) {
+            const object = this._$poolClip.shift(); // fixed
+            if (!object) {
+                continue;
+            }
+            variants.setMaskShapeUniform(uniform, false, object.matrixA, object.matrixB, object.matrixC, object.matrixD, object.matrixE, object.matrixF, object.matrixG, object.matrixH, object.matrixI, object.viewportWidth, object.viewportHeight, null);
+            const indexRanges = object.vertexArrayObject.indexRanges;
+            for (let idx = 0; idx < indexRanges.length; ++idx) {
+                const range = indexRanges[idx];
+                this._$gl.stencilMask(1 << useLevel - 1);
+                shader
+                    ._$containerClip(object.vertexArrayObject, range.first, range.count);
+                WebGLFillMeshGenerator
+                    .indexRangePool
+                    .push(range);
+            }
+            $poolArray(indexRanges);
+            this._$context.vao.releaseFill(object.vertexArrayObject);
+            ++useLevel;
+            // union
+            if (useLevel > 7) {
+                // union
+                this._$unionStencilMask(currentClipLevel, w, h);
+                // reset
+                useLevel = currentClipLevel;
+            }
+        }
+        // last union
+        if (useLevel > currentClipLevel + 1) {
+            this._$unionStencilMask(currentClipLevel, w, h);
+        }
+    }
+    /**
+     * @param  {number} level
+     * @param  {number} w
+     * @param  {number} h
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$unionStencilMask(level, w, h) {
+        // create buffer
+        const vertices = this
+            ._$context
+            .path
+            .createRectVertices(0, 0, w, h);
+        const object = this
+            ._$context
+            .vao
+            .createFill(vertices);
+        $poolArray(vertices.pop());
+        $poolArray(vertices);
+        const variants = this
+            ._$context
+            .shaderList
+            .shapeShaderVariants;
+        const shader = variants
+            .getMaskShapeShader(false, false);
+        const uniform = shader.uniform;
+        variants
+            .setMaskShapeUniformIdentity(uniform, w, h);
+        const range = object.indexRanges[0];
+        // 例として level=4 の場合
+        //
+        // ステンシルバッファの4ビット目以上を4ビット目に統合する。
+        //   |?|?|?|?|?|*|*|*|  ->  | | | | |?|*|*|*|
+        //
+        // このとき、4ビット目以上に1のビットが1つでもあれば4ビット目を1、
+        // そうでなければ4ビット目を0とする。
+        //
+        //   00000***  ->  00000***
+        //   00001***  ->  00001***
+        //   00010***  ->  00001***
+        //   00011***  ->  00001***
+        //   00100***  ->  00001***
+        //    ...
+        //   11101***  ->  00001***
+        //   11110***  ->  00001***
+        //   11111***  ->  00001***
+        //
+        // したがってステンシルの現在の値を 00001000 と比較すればよい。
+        // 比較して 00001000 以上であれば 00001*** で更新し、そうでなければ 00000*** で更新する。
+        // 下位3ビットは元の値を保持する必要があるので 11111000 でマスクする。
+        this._$gl.stencilFunc(this._$gl.LEQUAL, 1 << level - 1, 0xff);
+        this._$gl.stencilOp(this._$gl.ZERO, this._$gl.REPLACE, this._$gl.REPLACE);
+        this._$gl.stencilMask(~((1 << level - 1) - 1));
+        shader._$containerClip(object, range.first, range.count);
+        // reset
+        if (this._$poolClip.length) {
+            this._$gl.stencilFunc(this._$gl.ALWAYS, 0, 0xff);
+            this._$gl.stencilOp(this._$gl.KEEP, this._$gl.INVERT, this._$gl.INVERT);
+        }
+        // object pool
+        const indexRanges = object.indexRanges;
+        for (let idx = 0; idx < indexRanges.length; ++idx) {
+            WebGLFillMeshGenerator
+                .indexRangePool
+                .push(indexRanges[idx]);
+        }
+        $poolArray(object.indexRanges);
+        this._$context.vao.releaseFill(object);
+    }
+    /**
+     * @param  {WebGLVertexArrayObject} vertex_array
+     * @param  {Float32Array} matrix
+     * @param  {number} width
+     * @param  {number} height
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$onClip(vertex_array, matrix, width, height) {
+        this._$clipStatus = true;
+        if (this._$containerClip) {
+            this._$poolClip.push({
+                "vertexArrayObject": vertex_array,
+                "matrixA": matrix[0],
+                "matrixB": matrix[1],
+                "matrixC": matrix[2],
+                "matrixD": matrix[3],
+                "matrixE": matrix[4],
+                "matrixF": matrix[5],
+                "matrixG": matrix[6],
+                "matrixH": matrix[7],
+                "matrixI": matrix[8],
+                "viewportWidth": width,
+                "viewportHeight": height
+            });
+            return true;
+        }
+        return false;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$onSave() {
+        this._$clips.push(this._$clipStatus);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$onRestore() {
+        if (this._$clips.length) {
+            this._$clipStatus = !!this._$clips.pop();
+        }
+    }
+}

package/dist/webgl/CanvasToWebGLContextPath.d.ts

@@ -0,0 +1,111 @@
+import type { VerticesImpl } from "../interface/VerticesImpl";
+/**
+ * @class
+ */
+export declare class CanvasToWebGLContextPath {
+    private _$currentPath;
+    private readonly _$vertices;
+    private readonly _$bezierConverter;
+    /**
+     * @constructor
+     */
+    constructor();
+    /**
+     * @member {array}
+     * @readonly
+     * @public
+     */
+    get vertices(): VerticesImpl;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    begin(): void;
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @public
+     */
+    moveTo(x: number, y: number): void;
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @public
+     */
+    lineTo(x: number, y: number): void;
+    /**
+     * @param  {number} cx
+     * @param  {number} cy
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @public
+     */
+    quadTo(cx: number, cy: number, x: number, y: number): void;
+    /**
+     * @param  {number} cx1
+     * @param  {number} cy1
+     * @param  {number} cx2
+     * @param  {number} cy2
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @public
+     */
+    cubicTo(cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number): void;
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} radius
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawCircle(x: number, y: number, radius: number): void;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    close(): void;
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$equalsToLastPoint(x: number, y: number): boolean;
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {boolean} is_control_point
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$pushPointToCurrentPath(x: number, y: number, is_control_point: boolean): void;
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$pushCurrentPathToVertices(): void;
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} w
+     * @param  {number} h
+     * @return {array}
+     * @method
+     * @public
+     */
+    createRectVertices(x: number, y: number, w: number, h: number): VerticesImpl;
+}