@next2d/webgl 1.18.12 → 2.0.0

package/src/Shader/Vertex/VertexShaderSource.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const TEXTURE_TEMPLATE: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const VECTOR_TEMPLATE: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const BLEND_MATRIX_TEMPLATE: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const BLEND_TEMPLATE: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const INSTANCE_TEMPLATE: () => string;

package/src/Shader/Vertex/VertexShaderSource.js

@@ -0,0 +1,141 @@
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const TEXTURE_TEMPLATE = () => {
+    return `#version 300 es
+
+layout (location = 0) in vec2 a_vertex;
+
+out vec2 v_coord;
+
+void main() {
+    v_coord = a_vertex;
+
+    vec2 position = a_vertex * 2.0 - 1.0;
+    gl_Position = vec4(position, 0.0, 1.0);
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const VECTOR_TEMPLATE = () => {
+    return `#version 300 es
+
+layout (location = 0) in vec2 a_vertex;
+
+out vec2 v_coord;
+
+void main() {
+    v_coord = a_vertex;
+
+    vec2 position = a_vertex * 2.0 - 1.0;
+    gl_Position = vec4(position.x, -position.y, 0.0, 1.0);
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const BLEND_MATRIX_TEMPLATE = () => {
+    return `#version 300 es
+
+layout (location = 0) in vec2 a_vertex;
+uniform vec4 u_highp[3];
+
+out vec2 v_coord;
+
+void main() {
+    v_coord = a_vertex;
+
+    mat3 matrix = mat3(
+        u_highp[0].x, u_highp[0].y, 0.0,
+        u_highp[0].z, u_highp[0].w, 0.0,
+        u_highp[1].x, u_highp[1].y, 1.0
+    );
+
+    vec2 size     = u_highp[1].zw;
+    vec2 viewport = vec2(u_highp[2].x, u_highp[2].y);
+
+    vec2 position = vec2(a_vertex.x, 1.0 - a_vertex.y);
+    position = position * size;
+    position = (matrix * vec3(position, 1.0)).xy;
+    position /= viewport;
+
+    position = position * 2.0 - 1.0;
+    gl_Position = vec4(position.x, -position.y, 0.0, 1.0);
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const BLEND_TEMPLATE = () => {
+    return `#version 300 es
+
+layout (location = 0) in vec2 a_vertex;
+uniform vec4 u_highp[2];
+
+out vec2 v_coord;
+
+void main() {
+    v_coord = a_vertex;
+
+    vec2 offset   = u_highp[0].xy;
+    vec2 size     = u_highp[0].zw;
+    vec2 viewport = vec2(u_highp[1].x, u_highp[1].y);
+
+    vec2 position = vec2(a_vertex.x, 1.0 - a_vertex.y);
+    position = position * size + offset;
+    position /= viewport;
+
+    position = position * 2.0 - 1.0;
+    gl_Position = vec4(position.x, -position.y, 0.0, 1.0);
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const INSTANCE_TEMPLATE = () => {
+    return `#version 300 es
+
+layout (location = 0) in vec2 a_vertex;
+layout (location = 1) in vec4 a_rect;
+layout (location = 2) in vec4 a_size;
+layout (location = 3) in vec2 a_offset;
+layout (location = 4) in vec4 a_matrix;
+layout (location = 5) in vec4 a_mul;
+layout (location = 6) in vec4 a_add;
+
+out vec2 v_coord;
+out vec4 v_mul;
+out vec4 v_add;
+
+void main() {
+    v_coord = a_vertex * a_rect.zw + a_rect.xy;
+    v_mul = a_mul;
+    v_add = a_add;
+
+    vec2 position = vec2(a_vertex.x, 1.0 - a_vertex.y);
+    position = position * a_size.xy;
+
+    mat3 matrix = mat3(
+        a_matrix.x, a_matrix.y, 0.0,
+        a_matrix.z, a_matrix.w, 0.0,
+        a_offset.x, a_offset.y, 1.0
+    );
+
+    position = (matrix * vec3(position, 1.0)).xy;
+    position /= a_size.zw;
+
+    position = position * 2.0 - 1.0;
+    gl_Position = vec4(position.x, -position.y, 0.0, 1.0);
+}`;
+};

package/src/Shader/Vertex/VertexShaderSourceFill.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const ATTRIBUTE_BEZIER_ON: () => string;
+/**
+ * @returns {string}
+ * @method
+ * @static
+ */
+export declare const ATTRIBUTE_MATRIX_ON: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const VARYING_UV_ON: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const VARYING_BEZIER_ON: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const STATEMENT_UV_ON: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const STATEMENT_BEZIER_ON: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const ATTRIBUTE_COLOR_ON: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const VARYING_COLOR_ON: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const STATEMENT_COLOR_ON: () => string;
+/**
+ * @description 各種、塗りのシェーダのテンプレートを返却
+ *              Returns a template for various fill shaders
+ *
+ * @param  {number}  highp_length
+ * @param  {boolean} with_uv
+ * @param  {boolean} for_mask
+ * @param  {boolean} is_grid_enabled
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const FILL_TEMPLATE: (highp_length: number, with_uv: boolean, for_mask: boolean, is_grid_enabled: boolean) => string;
+/**
+ * @description 矩形の塗りのシェーダのテンプレートを返却
+ *              Returns a template for filling rectangles
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const FILL_RECT_TEMPLATE: () => string;

package/src/Shader/Vertex/VertexShaderSourceFill.js

@@ -0,0 +1,166 @@
+import { FUNCTION_GRID_OFF, FUNCTION_GRID_ON } from "./VertexShaderLibrary";
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const ATTRIBUTE_BEZIER_ON = () => {
+    return "layout (location = 1) in vec2 a_bezier;";
+};
+/**
+ * @returns {string}
+ * @method
+ * @static
+ */
+export const ATTRIBUTE_MATRIX_ON = () => {
+    return `layout (location = 3) in vec3 a_matrix0;
+layout (location = 4) in vec3 a_matrix1;
+layout (location = 5) in vec3 a_matrix2;`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const VARYING_UV_ON = () => {
+    return "out vec2 v_uv;";
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const VARYING_BEZIER_ON = () => {
+    return "out vec2 v_bezier;";
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const STATEMENT_UV_ON = () => {
+    return `
+    mat3 uv_matrix = mat3(
+        u_highp[0].xyz,
+        u_highp[1].xyz,
+        u_highp[2].xyz
+    );
+    mat3 inverse_matrix = mat3(
+        u_highp[3].xyz,
+        u_highp[4].xyz,
+        vec3(u_highp[2].w, u_highp[3].w, u_highp[4].w)
+    );
+    v_uv = (inverse_matrix * uv_matrix * vec3(a_vertex, 1.0)).xy;`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const STATEMENT_BEZIER_ON = () => {
+    return "v_bezier = a_bezier;";
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const ATTRIBUTE_COLOR_ON = () => {
+    return "layout (location = 2) in vec4 a_color;";
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const VARYING_COLOR_ON = () => {
+    return "out vec4 v_color;";
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const STATEMENT_COLOR_ON = () => {
+    return "v_color = a_color;";
+};
+/**
+ * @description 各種、塗りのシェーダのテンプレートを返却
+ *              Returns a template for various fill shaders
+ *
+ * @param  {number}  highp_length
+ * @param  {boolean} with_uv
+ * @param  {boolean} for_mask
+ * @param  {boolean} is_grid_enabled
+ * @return {string}
+ * @method
+ * @static
+ */
+export const FILL_TEMPLATE = (highp_length, with_uv, for_mask, is_grid_enabled) => {
+    const bezierAttribute = for_mask
+        ? ATTRIBUTE_BEZIER_ON()
+        : "";
+    const uvVarying = for_mask
+        ? VARYING_BEZIER_ON()
+        : with_uv
+            ? VARYING_UV_ON()
+            : "";
+    const uvStatement = for_mask
+        ? STATEMENT_BEZIER_ON()
+        : with_uv
+            ? STATEMENT_UV_ON()
+            : "";
+    const gridFunction = is_grid_enabled
+        ? FUNCTION_GRID_ON(with_uv ? 5 : 0)
+        : FUNCTION_GRID_OFF();
+    const colorAttribute = for_mask
+        ? ""
+        : ATTRIBUTE_COLOR_ON();
+    const colorVarying = for_mask
+        ? ""
+        : VARYING_COLOR_ON();
+    const colorStatement = for_mask
+        ? ""
+        : STATEMENT_COLOR_ON();
+    const matrixAttribute = is_grid_enabled
+        ? ""
+        : ATTRIBUTE_MATRIX_ON();
+    const uniform = highp_length > 1
+        ? `uniform vec4 u_highp[${highp_length}];`
+        : "";
+    return `#version 300 es
+
+layout (location = 0) in vec2 a_vertex;
+${bezierAttribute}
+${colorAttribute}
+${matrixAttribute}
+
+${uniform}
+${uvVarying}
+${colorVarying}
+${gridFunction}
+
+void main() {
+    ${colorStatement}
+    ${uvStatement}
+    vec2 pos = applyMatrix(a_vertex);
+    pos = pos * 2.0 - 1.0;
+    gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0);
+}`;
+};
+/**
+ * @description 矩形の塗りのシェーダのテンプレートを返却
+ *              Returns a template for filling rectangles
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+export const FILL_RECT_TEMPLATE = () => {
+    return `#version 300 es
+layout (location = 0) in vec2 a_vertex;
+void main() {
+    vec2 pos = a_vertex * 2.0 - 1.0;
+    gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0);
+}`;
+};

package/src/StencilBufferObject/service/StencilBufferObjectCreateService.d.ts

@@ -0,0 +1,10 @@
+import type { IStencilBufferObject } from "../../interface/IStencilBufferObject";
+/**
+ * @description 新規のStencilBufferObjectを生成する
+ *              Create a new StencilBufferObject
+ *
+ * @return {object}
+ * @method
+ * @protected
+ */
+export declare const execute: () => IStencilBufferObject;

package/src/StencilBufferObject/service/StencilBufferObjectCreateService.js

@@ -0,0 +1,24 @@
+import { $gl } from "../../WebGLUtil";
+/**
+ * @type {number}
+ * @private
+ */
+let $id = 0;
+/**
+ * @description 新規のStencilBufferObjectを生成する
+ *              Create a new StencilBufferObject
+ *
+ * @return {object}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    return {
+        "id": $id++,
+        "resource": $gl.createRenderbuffer(),
+        "width": 0,
+        "height": 0,
+        "area": 0,
+        "dirty": false
+    };
+};

package/src/StencilBufferObject/service/StencilBufferObjectReleaseColorBufferObjectService.d.ts

@@ -0,0 +1,11 @@
+import type { IStencilBufferObject } from "../../interface/IStencilBufferObject";
+/**
+ * @description StencilBufferObjectをオブジェクトプールに保管、サイズオーバー時は削除します。
+ *              Stores the StencilBufferObject in the object pool and deletes it if it exceeds the size.
+ *
+ * @param  {IStencilBufferObject} stencil_bffer_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (stencil_bffer_object: IStencilBufferObject) => void;

package/src/StencilBufferObject/service/StencilBufferObjectReleaseColorBufferObjectService.js

@@ -0,0 +1,23 @@
+import { $objectPool } from "../../StencilBufferObject";
+import { $gl } from "../../WebGLUtil";
+/**
+ * @description StencilBufferObjectをオブジェクトプールに保管、サイズオーバー時は削除します。
+ *              Stores the StencilBufferObject in the object pool and deletes it if it exceeds the size.
+ *
+ * @param  {IStencilBufferObject} stencil_bffer_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (stencil_bffer_object) => {
+    if ($objectPool.indexOf(stencil_bffer_object) > -1) {
+        return;
+    }
+    // プールに10個以上ある場合は削除
+    if ($objectPool.length > 10) {
+        $gl.deleteRenderbuffer(stencil_bffer_object.resource);
+        return;
+    }
+    stencil_bffer_object.dirty = true;
+    $objectPool.push(stencil_bffer_object);
+};

package/src/StencilBufferObject/usecase/StencilBufferObjectAcquireObjectUseCase.d.ts

@@ -0,0 +1,13 @@
+import { IStencilBufferObject } from "../../interface/IStencilBufferObject";
+/**
+ * @description オブジェクトプールにStencilBufferObjectがあれば再利用、なければ新規作成して返却します。
+ *              If there is a StencilBufferObject in the object pool, it will be reused,
+ *              otherwise it will be created and returned.
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {IStencilBufferObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (width: number, height: number) => IStencilBufferObject;

package/src/StencilBufferObject/usecase/StencilBufferObjectAcquireObjectUseCase.js

@@ -0,0 +1,28 @@
+import { $objectPool } from "../../StencilBufferObject";
+import { execute as stencilBufferObjectCreateService } from "../service/StencilBufferObjectCreateService";
+/**
+ * @description オブジェクトプールにStencilBufferObjectがあれば再利用、なければ新規作成して返却します。
+ *              If there is a StencilBufferObject in the object pool, it will be reused,
+ *              otherwise it will be created and returned.
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {IStencilBufferObject}
+ * @method
+ * @protected
+ */
+export const execute = (width, height) => {
+    if (!$objectPool.length) {
+        return stencilBufferObjectCreateService();
+    }
+    for (let idx = 0; idx < $objectPool.length; ++idx) {
+        const stencilBufferObject = $objectPool[idx];
+        if (stencilBufferObject.width !== width
+            || stencilBufferObject.height !== height) {
+            continue;
+        }
+        $objectPool.splice(idx, 1);
+        return stencilBufferObject;
+    }
+    return $objectPool.shift();
+};

package/src/StencilBufferObject/usecase/StencilBufferObjectGetStencilBufferObjectUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { IStencilBufferObject } from "../../interface/IStencilBufferObject";
+/**
+ * @description StencilBufferObjectを利用できる状態にして、返却します。
+ *              Make the StencilBufferObject available and return it.
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {IStencilBufferObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (width: number, height: number) => IStencilBufferObject;

package/src/StencilBufferObject/usecase/StencilBufferObjectGetStencilBufferObjectUseCase.js

@@ -0,0 +1,27 @@
+import { execute as stencilBufferObjectAcquireObjectUseCase } from "./StencilBufferObjectAcquireObjectUseCase";
+import { $gl } from "../../WebGLUtil";
+/**
+ * @description StencilBufferObjectを利用できる状態にして、返却します。
+ *              Make the StencilBufferObject available and return it.
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {IStencilBufferObject}
+ * @method
+ * @protected
+ */
+export const execute = (width, height) => {
+    const stencilBufferObject = stencilBufferObjectAcquireObjectUseCase(width, height);
+    if (stencilBufferObject.width !== width
+        || stencilBufferObject.height !== height) {
+        // update
+        stencilBufferObject.width = width;
+        stencilBufferObject.height = height;
+        stencilBufferObject.area = width * height;
+        stencilBufferObject.dirty = false;
+        // bind
+        $gl.bindRenderbuffer($gl.RENDERBUFFER, stencilBufferObject.resource);
+        $gl.renderbufferStorage($gl.RENDERBUFFER, $gl.STENCIL_INDEX8, width, height);
+    }
+    return stencilBufferObject;
+};

package/src/StencilBufferObject.d.ts

@@ -0,0 +1,9 @@
+import { IStencilBufferObject } from "./interface/IStencilBufferObject";
+/**
+ * @description StencilBufferObjectの再利用のための配列のオブジェクトプール
+ *              Object pool of array for reusing StencilBufferObject
+ *
+ * @type {IStencilBufferObject[]}
+ * @private
+ */
+export declare const $objectPool: IStencilBufferObject[];

package/src/StencilBufferObject.js

@@ -0,0 +1,8 @@
+/**
+ * @description StencilBufferObjectの再利用のための配列のオブジェクトプール
+ *              Object pool of array for reusing StencilBufferObject
+ *
+ * @type {IStencilBufferObject[]}
+ * @private
+ */
+export const $objectPool = [];

package/src/TextureManager/service/TextureManagerBindService.d.ts

@@ -0,0 +1,14 @@
+import type { ITextureObject } from "../../interface/ITextureObject";
+/**
+ * @description 指定のunitにテクスチャをバインドします。nullの場合はバインドを解除します。
+ *              Binds a texture to the specified unit. If null, the binding is released.
+ *
+ * @param  {number} index
+ * @param  {number} unit
+ * @param  {ITextureObject} [texture_object=null]
+ * @param  {boolean} [smooth=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (index: number, unit: number, texture_object?: ITextureObject | null, smooth?: boolean) => void;

package/src/TextureManager/service/TextureManagerBindService.js

@@ -0,0 +1,33 @@
+import { $gl } from "../../WebGLUtil";
+import { $activeTextureUnit, $boundTextures, $setActiveTextureUnit } from "../../TextureManager";
+/**
+ * @description 指定のunitにテクスチャをバインドします。nullの場合はバインドを解除します。
+ *              Binds a texture to the specified unit. If null, the binding is released.
+ *
+ * @param  {number} index
+ * @param  {number} unit
+ * @param  {ITextureObject} [texture_object=null]
+ * @param  {boolean} [smooth=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (index, unit, texture_object = null, smooth = false) => {
+    if ($activeTextureUnit === -1 || unit !== $activeTextureUnit) {
+        $setActiveTextureUnit(unit);
+        $gl.activeTexture(unit);
+    }
+    const boundTextures = $boundTextures[index];
+    if (boundTextures !== null && texture_object !== null
+        && boundTextures.id === texture_object.id
+        || texture_object === boundTextures) {
+        return;
+    }
+    $boundTextures[index] = texture_object;
+    $gl.bindTexture($gl.TEXTURE_2D, texture_object ? texture_object.resource : null);
+    if (texture_object && texture_object.smooth !== smooth) {
+        texture_object.smooth = smooth;
+        $gl.texParameteri($gl.TEXTURE_2D, $gl.TEXTURE_MIN_FILTER, smooth ? $gl.LINEAR : $gl.NEAREST);
+        $gl.texParameteri($gl.TEXTURE_2D, $gl.TEXTURE_MAG_FILTER, smooth ? $gl.LINEAR : $gl.NEAREST);
+    }
+};

package/src/TextureManager/service/TextureManagerCreateTextureObjectService.d.ts

@@ -0,0 +1,12 @@
+import type { ITextureObject } from "../../interface/ITextureObject";
+/**
+ * @description 新規のテクスチャオブジェクトを作成します。
+ *              Create a new texture object.
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {ITextureObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (width: number, height: number) => ITextureObject;

package/src/TextureManager/service/TextureManagerCreateTextureObjectService.js

@@ -0,0 +1,26 @@
+import { $gl } from "../../WebGLUtil";
+/**
+ * @type {number}
+ * @private
+ */
+let $id = 0;
+/**
+ * @description 新規のテクスチャオブジェクトを作成します。
+ *              Create a new texture object.
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {ITextureObject}
+ * @method
+ * @protected
+ */
+export const execute = (width, height) => {
+    return {
+        "id": $id++,
+        "resource": $gl.createTexture(),
+        "width": width,
+        "height": height,
+        "area": width * height,
+        "smooth": false
+    };
+};

package/src/TextureManager/service/TextureManagerInitializeBindService.d.ts

@@ -0,0 +1,12 @@
+import type { ITextureObject } from "../../interface/ITextureObject";
+/**
+ * @description テクスチャの初期設定を行います。
+ *              Initialize the texture.
+ *
+ * @param  {ITextureObject} textrue_object
+ * @param  {boolean} [smooth=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (textrue_object: ITextureObject, smooth?: boolean) => void;