@next2d/webgl 1.18.12 → 2.0.0

package/src/FrameBufferManager.js

@@ -0,0 +1,229 @@
+import { $getAtlasTextureObject } from "./AtlasManager";
+/**
+ * @description 生成したFrameBufferの管理オブジェクトを配列にプールして再利用します。
+ *              Pool the management object of the generated FrameBuffer in an array and reuse it.
+ *
+ * @type {array}
+ * @protected
+ */
+export const $objectPool = [];
+/**
+ * @description READ_FRAMEBUFFER専用のFrameBufferオブジェクト
+ *              FrameBuffer object for READ_FRAMEBUFFER only
+ *
+ * @class
+ * @public
+ */
+export let $readFrameBuffer;
+/**
+ * @description READ_FRAMEBUFFER専用のFrameBufferオブジェクトを設定
+ *              Set the FrameBuffer object for READ_FRAMEBUFFER only
+ *
+ * @param  {WebGL2RenderingContext} gl
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setReadFrameBuffer = (gl) => {
+    $readFrameBuffer = gl.createFramebuffer();
+};
+/**
+ * @description DRAW_FRAMEBUFFER専用のFrameBufferオブジェクト
+ *              FrameBuffer object for DRAW_FRAMEBUFFER only
+ *
+ * @class
+ * @public
+ */
+export let $drawFrameBuffer = null;
+/**
+ * @description DRAW_FRAMEBUFFER専用のFrameBufferオブジェクトを設定
+ *              Set the FrameBuffer object for DRAW_FRAMEBUFFER only
+ *
+ * @param  {WebGL2RenderingContext} gl
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setDrawFrameBuffer = (gl) => {
+    $drawFrameBuffer = gl.createFramebuffer();
+};
+/**
+ * @description アトラス専用のFrameBufferオブジェクト
+ *              FrameBuffer object for atlas only
+ *
+ * @class
+ * @public
+ */
+export let $atlasFrameBuffer = null;
+/**
+ * @description アトラス専用のFrameBufferオブジェクトを設定
+ *              Set the FrameBuffer object for atlas only
+ *
+ * @param  {WebGL2RenderingContext} gl
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setAtlasFrameBuffer = (gl) => {
+    $atlasFrameBuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, $atlasFrameBuffer);
+    const textureObject = $getAtlasTextureObject();
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureObject.resource, 0);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, $atlasFrameBuffer);
+};
+/**
+ * @description 現在アタッチされてるAttachmentObject
+ *              Currently attached AttachmentObject
+ *
+ * @type {IAttachmentObject|null}
+ * @private
+ */
+let $currentAttachment = null;
+/**
+ * @description 現在アタッチされてるAttachmentObjectを設定
+ *              Set the currently attached AttachmentObject
+ *
+ * @param  {IAttachmentObject | null} attachment_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setCurrentAttachment = (attachment_object) => {
+    $currentAttachment = attachment_object;
+};
+/**
+ * @description 現在アタッチされてるAttachmentObjectを返却
+ *              Returns the currently attached AttachmentObject
+ *
+ * @return {IAttachmentObject | null}
+ * @method
+ * @protected
+ */
+export const $getCurrentAttachment = () => {
+    return $currentAttachment;
+};
+/**
+ * @description FrameBufferがバインドされているかどうかのフラグ
+ *              Flag to check if FrameBuffer is bound
+ *
+ * @type {boolean}
+ * @protected
+ */
+let $isFramebufferBound = false;
+/**
+ * @description FrameBufferがバインドされているかどうかのフラグの値を更新
+ *              Update the value of the flag to check if FrameBuffer is bound
+ *
+ * @param {boolean} state
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setFramebufferBound = (state) => {
+    $isFramebufferBound = state;
+};
+/**
+ * @description FrameBufferがバインドされているかどうかのフラグの値を返却
+ *              Returns the value of the flag to check if FrameBuffer is bound
+ *
+ * @return {boolean}
+ * @method
+ * @protected
+ */
+export const $useFramebufferBound = () => {
+    return $isFramebufferBound;
+};
+/**
+ * @description ビットマップの読み込み専用のFrameBufferオブジェクト
+ *              FrameBuffer object for reading bitmaps only
+ *
+ * @type {WebGLFramebuffer|null}
+ * @default null
+ * @private
+ */
+let $readBitmapFramebuffer = null;
+/**
+ * @description ビットマップの書き込み専用のFrameBufferオブジェクト
+ *              FrameBuffer object for writing bitmaps only
+ *
+ * @type {WebGLFramebuffer|null}
+ * @default null
+ * @private
+ */
+let $drawBitmapFramebuffer = null;
+/**
+ * @type {WebGLFramebuffer}
+ * @private
+ */
+let $pixelFrameBuffer = null;
+/**
+ * @description PBO
+ *              Pixel Buffer Object
+ *
+ * @type {WebGLBuffer}
+ * @private
+ */
+let $pixelBufferObject = null;
+/**
+ * @description ビットマップの読み込み専用のFrameBufferオブジェクトを設定
+ *              Set the FrameBuffer object for reading bitmaps only
+ *
+ * @param  {WebGL2RenderingContext} gl
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setBitmapFrameBuffer = (gl) => {
+    // blitFramebuffer
+    $drawBitmapFramebuffer = gl.createFramebuffer();
+    $readBitmapFramebuffer = gl.createFramebuffer();
+    // PBO
+    $pixelFrameBuffer = gl.createFramebuffer();
+    $pixelBufferObject = gl.createBuffer();
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, $pixelBufferObject);
+};
+/**
+ * @description ビットマップの読み込み専用のFrameBufferオブジェクトを返却
+ *              Returns the FrameBuffer object for reading bitmaps only
+ *
+ * @return {WebGLFramebuffer}
+ * @method
+ * @protected
+ */
+export const $getReadBitmapFrameBuffer = () => {
+    return $readBitmapFramebuffer;
+};
+/**
+ * @description ビットマップの書き込み専用のFrameBufferオブジェクトを返却
+ *              Returns the FrameBuffer object for writing bitmaps only
+ *
+ * @return {WebGLFramebuffer}
+ * @method
+ * @protected
+ */
+export const $getDrawBitmapFrameBuffer = () => {
+    return $drawBitmapFramebuffer;
+};
+/**
+ * @description PBO用のFrameBufferオブジェクトを返却
+ *              Returns the FrameBuffer object for PBO
+ *
+ * @return {WebGLFramebuffer}
+ * @method
+ * @protected
+ */
+export const $getPixelFrameBuffer = () => {
+    return $pixelFrameBuffer;
+};
+/**
+ * @description PBO
+ *              Pixel Buffer Object
+ *
+ * @return {WebGLBuffer}
+ * @method
+ * @protected
+ */
+export const $getPixelBufferObject = () => {
+    return $pixelBufferObject;
+};

package/src/Gradient.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description グラデーションの設定データ
+ *              Gradient setting data
+ *
+ * @type {Array<number | number[] | Float32Array>}
+ * @protected
+ */
+export declare const $gradientData: Array<number | number[] | Float32Array>;

package/src/Gradient.js

@@ -0,0 +1,8 @@
+/**
+ * @description グラデーションの設定データ
+ *              Gradient setting data
+ *
+ * @type {Array<number | number[] | Float32Array>}
+ * @protected
+ */
+export const $gradientData = [];

package/src/Grid.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @type {Map}
+ * @private
+ */
+export declare const $gridDataMap: Map<number, Float32Array | null>;
+/**
+ * @description グリッド情報を初期化
+ *              Initialize grid information
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $terminateGrid: () => void;

package/src/Grid.js

@@ -0,0 +1,16 @@
+/**
+ * @type {Map}
+ * @private
+ */
+export const $gridDataMap = new Map();
+/**
+ * @description グリッド情報を初期化
+ *              Initialize grid information
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $terminateGrid = () => {
+    $gridDataMap.clear();
+};

package/src/Mask/service/MaskBeginMaskService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description マスク描画の開始準備
+ *              Prepare to start drawing the mask
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Mask/service/MaskBeginMaskService.js

@@ -0,0 +1,27 @@
+import { $isMaskDrawing, $setMaskDrawing, $clipLevels } from "../../Mask";
+import { $context, $gl } from "../../WebGLUtil";
+/**
+ * @description マスク描画の開始準備
+ *              Prepare to start drawing the mask
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    currentAttachmentObject.mask = true;
+    currentAttachmentObject.clipLevel++;
+    $clipLevels.set(currentAttachmentObject.clipLevel, currentAttachmentObject.clipLevel);
+    if (!$isMaskDrawing()) {
+        $setMaskDrawing(true);
+        $gl.enable($gl.STENCIL_TEST);
+        $gl.enable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+        $gl.stencilFunc($gl.ALWAYS, 0, 0xff);
+        $gl.stencilOp($gl.ZERO, $gl.INVERT, $gl.INVERT);
+        $gl.colorMask(false, false, false, false);
+    }
+};

package/src/Mask/service/MaskEndMaskService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description マスクの描画を終了
+ *              End mask drawing
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Mask/service/MaskEndMaskService.js

@@ -0,0 +1,26 @@
+import { $gl, $context } from "../../WebGLUtil";
+/**
+ * @description マスクの描画を終了
+ *              End mask drawing
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    const clipLevel = currentAttachmentObject.clipLevel;
+    let mask = 0;
+    for (let idx = 0; idx < clipLevel; ++idx) {
+        mask |= (1 << clipLevel - idx) - 1;
+    }
+    $gl.stencilMask(0xff);
+    $gl.stencilFunc($gl.EQUAL, mask & 0xff, mask);
+    $gl.stencilOp($gl.KEEP, $gl.KEEP, $gl.KEEP);
+    $gl.colorMask(true, true, true, true);
+    $gl.disable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    $gl.disable($gl.SCISSOR_TEST);
+};

package/src/Mask/service/MaskSetMaskBoundsService.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description マスクの描画範囲をセット
+ *              Set the drawing range of the mask.
+ *
+ * @param  {number} x_min
+ * @param  {number} y_min
+ * @param  {number} x_max
+ * @param  {number} y_max
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x_min: number, y_min: number, x_max: number, y_max: number) => void;

package/src/Mask/service/MaskSetMaskBoundsService.js

@@ -0,0 +1,26 @@
+import { $clipBounds } from "../../Mask";
+import { $gl, $context, $getFloat32Array4 } from "../../WebGLUtil";
+/**
+ * @description マスクの描画範囲をセット
+ *              Set the drawing range of the mask.
+ *
+ * @param  {number} x_min
+ * @param  {number} y_min
+ * @param  {number} x_max
+ * @param  {number} y_max
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x_min, y_min, x_max, y_max) => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    // レベルと描画範囲をセット
+    $clipBounds.set(currentAttachmentObject.clipLevel, $getFloat32Array4(x_min, y_min, x_max, y_max));
+    const width = Math.ceil(Math.abs(x_max - x_min));
+    const height = Math.ceil(Math.abs(y_max - y_min));
+    $gl.enable($gl.SCISSOR_TEST);
+    $gl.scissor(x_min, currentAttachmentObject.height - y_min - height, width, height);
+};

package/src/Mask/service/MaskUnionMaskService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description マスクの合成処理
+ *              Mask synthesis processing
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Mask/service/MaskUnionMaskService.js

@@ -0,0 +1,32 @@
+import { execute as shaderManagerFillUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerFillUseCase";
+import { execute as variantsShapeRectShaderService } from "../../Shader/Variants/Shape/service/VariantsShapeRectShaderService";
+import { $getRectVertexArrayObject } from "../../VertexArrayObject";
+import { $gl, $context } from "../../WebGLUtil";
+/**
+ * @description マスクの合成処理
+ *              Mask synthesis processing
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    // レベル以上のステンシルバッファをマージ
+    const mask = 1 << currentAttachmentObject.clipLevel - 1;
+    $gl.stencilMask(~mask - 1);
+    $gl.stencilFunc($gl.LEQUAL, mask, 0xff);
+    $gl.stencilOp($gl.ZERO, $gl.REPLACE, $gl.REPLACE);
+    shaderManagerFillUseCase(variantsShapeRectShaderService(), $getRectVertexArrayObject(), 0, 6);
+    // レベル以上のステンシルバッファをクリア
+    $gl.stencilMask(1 << currentAttachmentObject.clipLevel);
+    $gl.stencilFunc($gl.ALWAYS, 0, 0xff);
+    $gl.stencilOp($gl.REPLACE, $gl.REPLACE, $gl.REPLACE);
+    shaderManagerFillUseCase(variantsShapeRectShaderService(), $getRectVertexArrayObject(), 0, 6);
+    // base mask setting
+    $gl.stencilMask(0xff);
+    $gl.stencilOp($gl.ZERO, $gl.INVERT, $gl.INVERT);
+};

package/src/Mask/usecase/MaskBindUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description マスクOn/Offに合わせたバインド処理
+ *              Binding process according to mask On/Off
+ *
+ * @param  {boolean} mask
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (mask: boolean) => void;

package/src/Mask/usecase/MaskBindUseCase.js

@@ -0,0 +1,25 @@
+import { execute as maskEndMaskService } from "../service/MaskEndMaskService";
+import { $gl } from "../../WebGLUtil";
+import { $isMaskDrawing, $setMaskDrawing } from "../../Mask";
+/**
+ * @description マスクOn/Offに合わせたバインド処理
+ *              Binding process according to mask On/Off
+ *
+ * @param  {boolean} mask
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (mask) => {
+    if (!mask && $isMaskDrawing()) {
+        $setMaskDrawing(false);
+        $gl.disable($gl.STENCIL_TEST);
+        $gl.disable($gl.SCISSOR_TEST);
+    }
+    else if (mask && !$isMaskDrawing()) {
+        $setMaskDrawing(true);
+        // キャッシュ作成後は、マスクの状態を復元する
+        $gl.enable($gl.STENCIL_TEST);
+        maskEndMaskService();
+    }
+};

package/src/Mask/usecase/MaskLeaveMaskUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description マスクの終了処理
+ *              End mask processing
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Mask/usecase/MaskLeaveMaskUseCase.js

@@ -0,0 +1,53 @@
+import { execute as maskEndMaskService } from "../service/MaskEndMaskService";
+import { execute as shaderManagerFillUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerFillUseCase";
+import { execute as variantsShapeRectShaderService } from "../../Shader/Variants/Shape/service/VariantsShapeRectShaderService";
+import { $getRectVertexArrayObject } from "../../VertexArrayObject";
+import { $setMaskDrawing, $clipBounds, $clipLevels } from "../../Mask";
+import { $gl, $context, $poolFloat32Array4 } from "../../WebGLUtil";
+/**
+ * @description マスクの終了処理
+ *              End mask processing
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    const clipLevel = currentAttachmentObject.clipLevel;
+    const bounds = $clipBounds.get(clipLevel);
+    const xMin = bounds[0];
+    const yMin = bounds[1];
+    const xMax = bounds[2];
+    const yMax = bounds[3];
+    // レベルと描画範囲を削除
+    $clipBounds.delete(clipLevel);
+    $clipLevels.delete(clipLevel);
+    $poolFloat32Array4(bounds);
+    const width = Math.ceil(Math.abs(xMax - xMin));
+    const height = Math.ceil(Math.abs(yMax - yMin));
+    $gl.enable($gl.SCISSOR_TEST);
+    $gl.scissor(xMin, currentAttachmentObject.height - yMin - height, width, height);
+    // 単体のマスクであれば終了
+    --currentAttachmentObject.clipLevel;
+    if (!currentAttachmentObject.clipLevel) {
+        currentAttachmentObject.mask = false;
+        $setMaskDrawing(false);
+        $gl.clear($gl.STENCIL_BUFFER_BIT);
+        $gl.disable($gl.STENCIL_TEST);
+        $gl.disable($gl.SCISSOR_TEST);
+        $clipLevels.clear();
+        $clipBounds.clear();
+        return;
+    }
+    // 上位レベルのステンシルバッファをクリア
+    $gl.stencilMask(1 << currentAttachmentObject.clipLevel);
+    $gl.stencilFunc($gl.ALWAYS, 0, 0xff);
+    $gl.stencilOp($gl.REPLACE, $gl.REPLACE, $gl.REPLACE);
+    $gl.colorMask(false, false, false, false);
+    shaderManagerFillUseCase(variantsShapeRectShaderService(), $getRectVertexArrayObject(), 0, 6);
+    maskEndMaskService();
+};

package/src/Mask.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @description マスク描画の状態をセット
+ *              Set the state of mask drawing
+ *
+ * @param  {boolean} state
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const $setMaskDrawing: (state: boolean) => void;
+/**
+ * @description マスク描画中かどうかを返却
+ *              Returns whether the mask is being drawn
+ *
+ * @return {boolean}
+ * @method
+ * @public
+ */
+export declare const $isMaskDrawing: () => boolean;
+/**
+ * @type {Map<number, Float32Array>}
+ * @private
+ */
+export declare const $clipBounds: Map<number, Float32Array>;
+/**
+ * @type {Map<number, number>}
+ * @private
+ */
+export declare const $clipLevels: Map<number, number>;

package/src/Mask.js

@@ -0,0 +1,42 @@
+/**
+ * @description マスク描画中かどうか
+ *              Whether the mask is being drawn
+ *
+ * @type {boolean}
+ * @default false
+ * @private
+ */
+let $maskDrawingState = false;
+/**
+ * @description マスク描画の状態をセット
+ *              Set the state of mask drawing
+ *
+ * @param  {boolean} state
+ * @return {void}
+ * @method
+ * @public
+ */
+export const $setMaskDrawing = (state) => {
+    $maskDrawingState = state;
+};
+/**
+ * @description マスク描画中かどうかを返却
+ *              Returns whether the mask is being drawn
+ *
+ * @return {boolean}
+ * @method
+ * @public
+ */
+export const $isMaskDrawing = () => {
+    return $maskDrawingState;
+};
+/**
+ * @type {Map<number, Float32Array>}
+ * @private
+ */
+export const $clipBounds = new Map();
+/**
+ * @type {Map<number, number>}
+ * @private
+ */
+export const $clipLevels = new Map();

package/src/Mesh/service/MeshCalculateNormalVectorService.d.ts

@@ -0,0 +1,13 @@
+import type { IPoint } from "../../interface/IPoint";
+/**
+ * @description 直線の法線ベクトルを計算
+ *              Calculate the normal vector of a line
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} thickness
+ * @return {IPoint}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number, thickness: number) => IPoint;

package/src/Mesh/service/MeshCalculateNormalVectorService.js

@@ -0,0 +1,18 @@
+/**
+ * @description 直線の法線ベクトルを計算
+ *              Calculate the normal vector of a line
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} thickness
+ * @return {IPoint}
+ * @method
+ * @protected
+ */
+export const execute = (x, y, thickness) => {
+    const magnitude = Math.sqrt(x * x + y * y);
+    return {
+        "x": -(y / magnitude) * thickness,
+        "y": x / magnitude * thickness
+    };
+};

package/src/Mesh/service/MeshCalculateNormalizeBezierService.d.ts

@@ -0,0 +1,11 @@
+import type { IPoint } from "../../interface/IPoint";
+/**
+ * @description ベクトルの正規化を行う
+ *              Normalize the vector
+ *
+ * @param  {IPoint} point
+ * @return {IPoint}
+ * @method
+ * @protected
+ */
+export declare const execute: (point: IPoint) => IPoint;

package/src/Mesh/service/MeshCalculateNormalizeBezierService.js

@@ -0,0 +1,15 @@
+/**
+ * @description ベクトルの正規化を行う
+ *              Normalize the vector
+ *
+ * @param  {IPoint} point
+ * @return {IPoint}
+ * @method
+ * @protected
+ */
+export const execute = (point) => {
+    const length = Math.sqrt(point.x * point.x + point.y * point.y);
+    return length === 0
+        ? { "x": 0, "y": 0 }
+        : { "x": point.x / length, "y": point.y / length };
+};