@next2d/webgl 1.18.12 → 2.0.0

package/src/Shader/GradientLUTGenerator/usecase/GradientLUTGenerateShapeTextureUseCase.js

@@ -0,0 +1,44 @@
+import { execute as variantsGradientLUTShaderService } from "../../Variants/GradientLUT/service/VariantsGradientLUTShaderService";
+import { execute as blendOneZeroService } from "../../../Blend/service/BlendOneZeroService";
+import { execute as blendResetService } from "../../../Blend/service/BlendResetService";
+import { execute as gradientLUTSetUniformService } from "../service/GradientLUTSetUniformService";
+import { execute as gradientLUTGeneratorFillTextureUseCase } from "./GradientLUTGeneratorFillTextureUseCase";
+import { execute as contextBeginNodeRenderingService } from "../../../Context/service/ContextBeginNodeRenderingService";
+import { $gl, $context } from "../../../WebGLUtil";
+import { $getGradientAttachmentObject, $getGradientLUTGeneratorMaxLength, $rgbIdentityTable, $rgbToLinearTable } from "../../GradientLUTGenerator";
+/**
+ * @description グラデーションのテクスチャを生成します。
+ *              Generates a texture of the gradient.
+ *
+ * @param  {array} stops
+ * @param  {number} interpolation
+ * @return {ITextureObject}
+ * @method
+ * @protected
+ */
+export const execute = (stops, interpolation) => {
+    const currentAttachment = $context.currentAttachmentObject;
+    const scissorBox = $gl.getParameter($gl.SCISSOR_BOX);
+    $gl.disable($gl.SCISSOR_TEST);
+    const gradientAttachmentObject = $getGradientAttachmentObject();
+    $context.bind(gradientAttachmentObject);
+    const isLinearSpace = interpolation === 0;
+    const stopsLength = stops.length / 5;
+    const table = isLinearSpace
+        ? $rgbToLinearTable
+        : $rgbIdentityTable;
+    blendOneZeroService();
+    const maxLength = $getGradientLUTGeneratorMaxLength();
+    for (let begin = 0; begin < stopsLength; begin += maxLength - 1) {
+        const end = Math.min(begin + maxLength, stopsLength);
+        const shaderManager = variantsGradientLUTShaderService(end - begin, isLinearSpace);
+        gradientLUTSetUniformService(shaderManager, stops, begin, end, table);
+        gradientLUTGeneratorFillTextureUseCase(shaderManager, stops[0], stops[stops.length - 5]);
+    }
+    blendResetService();
+    if (currentAttachment) {
+        $context.bind(currentAttachment);
+    }
+    contextBeginNodeRenderingService(scissorBox[0], scissorBox[1], scissorBox[2], scissorBox[3]);
+    return gradientAttachmentObject.texture;
+};

package/src/Shader/GradientLUTGenerator/usecase/GradientLUTGeneratorFillTextureUseCase.d.ts

@@ -0,0 +1,13 @@
+import type { ShaderManager } from "../../ShaderManager";
+/**
+ * @description グラデーションのtextureの描画を実行
+ *              Execute drawing of gradient texture
+ *
+ * @param  {ShaderManager} shader_manager
+ * @param  {number} begin
+ * @param  {number} end
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (shader_manager: ShaderManager, begin: number, end: number) => void;

package/src/Shader/GradientLUTGenerator/usecase/GradientLUTGeneratorFillTextureUseCase.js

@@ -0,0 +1,20 @@
+import { $gl } from "../../../WebGLUtil";
+import { execute as vertexArrayObjectGetGradientObjectUseCase } from "../../../VertexArrayObject/usecase/VertexArrayObjectGetGradientObjectUseCase";
+import { execute as vertexArrayObjectBindService } from "../../../VertexArrayObject/service/VertexArrayObjectBindService";
+/**
+ * @description グラデーションのtextureの描画を実行
+ *              Execute drawing of gradient texture
+ *
+ * @param  {ShaderManager} shader_manager
+ * @param  {number} begin
+ * @param  {number} end
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (shader_manager, begin, end) => {
+    shader_manager.useProgram();
+    shader_manager.bindUniform();
+    vertexArrayObjectBindService(vertexArrayObjectGetGradientObjectUseCase(begin, end));
+    $gl.drawArrays($gl.TRIANGLE_STRIP, 0, 4);
+};

package/src/Shader/GradientLUTGenerator.d.ts

@@ -0,0 +1,36 @@
+import type { IAttachmentObject } from "../interface/IAttachmentObject";
+/**
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export declare const $getGradientAttachmentObject: () => IAttachmentObject;
+/**
+ * @description 最大長を返却
+ *              Returns the maximum length
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const $getGradientLUTGeneratorMaxLength: () => number;
+/**
+ * @description 最大長を設定
+ *              Set the maximum length
+ *
+ * @param  {WebGL2RenderingContext} gl
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $setGradientLUTGeneratorMaxLength: (gl: WebGL2RenderingContext) => void;
+/**
+ * @type {Float32Array}
+ * @private
+ */
+export declare const $rgbToLinearTable: Float32Array;
+/**
+ * @type {Float32Array}
+ * @private
+ */
+export declare const $rgbIdentityTable: Float32Array;

package/src/Shader/GradientLUTGenerator.js

@@ -0,0 +1,60 @@
+import { execute as frameBufferManagerGetAttachmentObjectUseCase } from "../FrameBufferManager/usecase/FrameBufferManagerGetAttachmentObjectUseCase";
+/**
+ * @type {IAttachmentObject | null}
+ * @private
+ */
+let $gradientAttachmentObject = null;
+/**
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export const $getGradientAttachmentObject = () => {
+    if (!$gradientAttachmentObject) {
+        $gradientAttachmentObject = frameBufferManagerGetAttachmentObjectUseCase(512, 1, false);
+    }
+    return $gradientAttachmentObject;
+};
+/**
+ * @type {number}
+ * @private
+ */
+let $maxLength = 0;
+/**
+ * @description 最大長を返却
+ *              Returns the maximum length
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const $getGradientLUTGeneratorMaxLength = () => {
+    return $maxLength;
+};
+/**
+ * @description 最大長を設定
+ *              Set the maximum length
+ *
+ * @param  {WebGL2RenderingContext} gl
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setGradientLUTGeneratorMaxLength = (gl) => {
+    $maxLength = Math.floor(gl.getParameter(gl.MAX_FRAGMENT_UNIFORM_VECTORS) * 0.75);
+};
+/**
+ * @type {Float32Array}
+ * @private
+ */
+export const $rgbToLinearTable = new Float32Array(256);
+/**
+ * @type {Float32Array}
+ * @private
+ */
+export const $rgbIdentityTable = new Float32Array(256);
+for (let idx = 0; idx < 256; ++idx) {
+    const t = idx / 255;
+    $rgbToLinearTable[idx] = Math.pow(t, 2.23333333);
+    $rgbIdentityTable[idx] = t;
+}

package/src/Shader/ShaderInstancedManager/usecase/ShaderInstancedManagerDrawArraysInstancedUseCase.d.ts

@@ -0,0 +1,11 @@
+import type { ShaderInstancedManager } from "../../ShaderInstancedManager";
+/**
+ * @description インスタンシング描画を実行します。
+ *              Execute instanced drawing.
+ *
+ * @param  {ShaderInstancedManager} shader_instanced_manager
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (shader_instanced_manager: ShaderInstancedManager) => void;

package/src/Shader/ShaderInstancedManager/usecase/ShaderInstancedManagerDrawArraysInstancedUseCase.js

@@ -0,0 +1,20 @@
+import { execute as vertexArrayObjectBindAttributeUseCase } from "../../../VertexArrayObject/usecase/VertexArrayObjectBindAttributeUseCase";
+import { $gl } from "../../../WebGLUtil";
+/**
+ * @description インスタンシング描画を実行します。
+ *              Execute instanced drawing.
+ *
+ * @param  {ShaderInstancedManager} shader_instanced_manager
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (shader_instanced_manager) => {
+    // setup
+    shader_instanced_manager.useProgram();
+    shader_instanced_manager.bindUniform();
+    // bind data
+    vertexArrayObjectBindAttributeUseCase();
+    // draw
+    $gl.drawArraysInstanced($gl.TRIANGLES, 0, 6, shader_instanced_manager.count);
+};

package/src/Shader/ShaderInstancedManager.d.ts

@@ -0,0 +1,32 @@
+import { ShaderManager } from "./ShaderManager";
+/**
+ * @class
+ * @extends ShaderManager
+ */
+export declare class ShaderInstancedManager extends ShaderManager {
+    /**
+     * @description attribute変数の数
+     *              Number of attribute variables
+     *
+     * @type {number}
+     * @public
+     */
+    count: number;
+    /**
+     * @param {string} vertex_source
+     * @param {string} fragment_source
+     * @param {boolean} [atlas=true]
+     * @constructor
+     * @public
+     */
+    constructor(vertex_source: string, fragment_source: string, atlas?: boolean);
+    /**
+     * @description attributeの配列を初期化します。
+     *              Initialize the array of attributes.
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    clear(): void;
+}

package/src/Shader/ShaderInstancedManager.js

@@ -0,0 +1,43 @@
+import { ShaderManager } from "./ShaderManager";
+import { renderQueue } from "@next2d/render-queue";
+/**
+ * @class
+ * @extends ShaderManager
+ */
+export class ShaderInstancedManager extends ShaderManager {
+    /**
+     * @param {string} vertex_source
+     * @param {string} fragment_source
+     * @param {boolean} [atlas=true]
+     * @constructor
+     * @public
+     */
+    constructor(vertex_source, fragment_source, atlas = true) {
+        super(vertex_source, fragment_source, atlas);
+        /**
+         * @description attribute変数の数
+         *              Number of attribute variables
+         *
+         * @type {number}
+         * @public
+         */
+        Object.defineProperty(this, "count", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.count = 0;
+    }
+    /**
+     * @description attributeの配列を初期化します。
+     *              Initialize the array of attributes.
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    clear() {
+        this.count = renderQueue.offset = 0;
+    }
+}

package/src/Shader/ShaderManager/service/ShaderManagerBindUniformService.d.ts

@@ -0,0 +1,11 @@
+import type { IUniformData } from "../../../interface/IUniformData";
+/**
+ * @description uniform変数をバインドします。
+ *              Bind uniform variables.
+ *
+ * @param  {Map} uniform_map
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (uniform_map: Map<string, IUniformData>) => void;

package/src/Shader/ShaderManager/service/ShaderManagerBindUniformService.js

@@ -0,0 +1,23 @@
+/**
+ * @description uniform変数をバインドします。
+ *              Bind uniform variables.
+ *
+ * @param  {Map} uniform_map
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (uniform_map) => {
+    for (const data of uniform_map.values()) {
+        if (data.method === undefined || data.assign === undefined) {
+            continue;
+        }
+        if (data.assign < 0) {
+            data.method(data.array);
+        }
+        else if (data.assign > 0) {
+            data.assign--;
+            data.method(data.array);
+        }
+    }
+};

package/src/Shader/ShaderManager/service/ShaderManagerCreateProgramService.d.ts

@@ -0,0 +1,12 @@
+import type { IProgramObject } from "../../../interface/IProgramObject";
+/**
+ * @description 指定のシェーダープログラムを生成する
+ *              Generates the specified shader program
+ *
+ * @param  {string} vertex_source
+ * @param  {string} fragment_source
+ * @return {IProgramObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertex_source: string, fragment_source: string) => IProgramObject;

package/src/Shader/ShaderManager/service/ShaderManagerCreateProgramService.js

@@ -0,0 +1,39 @@
+import { $gl } from "../../../WebGLUtil";
+/**
+ * @description シェーダープログラムID
+ *              Shader program ID
+ *
+ * @type {number}
+ * @private
+ */
+let $programId = 0;
+/**
+ * @description 指定のシェーダープログラムを生成する
+ *              Generates the specified shader program
+ *
+ * @param  {string} vertex_source
+ * @param  {string} fragment_source
+ * @return {IProgramObject}
+ * @method
+ * @protected
+ */
+export const execute = (vertex_source, fragment_source) => {
+    const program = $gl.createProgram();
+    const vertexShader = $gl.createShader($gl.VERTEX_SHADER);
+    $gl.shaderSource(vertexShader, vertex_source);
+    $gl.compileShader(vertexShader);
+    const fragmentShader = $gl.createShader($gl.FRAGMENT_SHADER);
+    $gl.shaderSource(fragmentShader, fragment_source);
+    $gl.compileShader(fragmentShader);
+    $gl.attachShader(program, vertexShader);
+    $gl.attachShader(program, fragmentShader);
+    $gl.linkProgram(program);
+    $gl.detachShader(program, vertexShader);
+    $gl.detachShader(program, fragmentShader);
+    $gl.deleteShader(vertexShader);
+    $gl.deleteShader(fragmentShader);
+    return {
+        "id": $programId++,
+        "resource": program
+    };
+};

package/src/Shader/ShaderManager/service/ShaderManagerInitializeUniformService.d.ts

@@ -0,0 +1,12 @@
+import type { IUniformData } from "../../../interface/IUniformData";
+/**
+ * @description uniform変数の初期化
+ *              Initialize uniform variables
+ *
+ * @param {WebGLProgram} program
+ * @param {Map} map
+ * @param {boolean} [atlas=false]
+ * @method
+ * @protected
+ */
+export declare const execute: (program: WebGLProgram, map: Map<string, IUniformData>, atlas?: boolean) => void;

package/src/Shader/ShaderManager/service/ShaderManagerInitializeUniformService.js

@@ -0,0 +1,62 @@
+import { $gl } from "../../../WebGLUtil";
+/**
+ * @description uniform変数の初期化
+ *              Initialize uniform variables
+ *
+ * @param {WebGLProgram} program
+ * @param {Map} map
+ * @param {boolean} [atlas=false]
+ * @method
+ * @protected
+ */
+export const execute = (program, map, atlas = false) => {
+    const count = $gl.getProgramParameter(program, $gl.ACTIVE_UNIFORMS);
+    for (let idx = 0; idx < count; ++idx) {
+        const info = $gl.getActiveUniform(program, idx);
+        const name = info.name.endsWith("[0]")
+            ? info.name.slice(0, -3)
+            : info.name;
+        const location = $gl.getUniformLocation(program, name);
+        // WebGLの仕様でuniformのint型のデフォルト値は0に設定されるため、
+        // sampler2D（size=1）の値の更新は不要
+        if (info.type === $gl.SAMPLER_2D && info.size === 1 && !atlas) {
+            continue;
+        }
+        const data = {};
+        switch (info.type) {
+            // uniformの値の設定は、gl.uniform4[fi]v()が最速のため、
+            // 可能な限りFloat32Arrayに値をパックして転送するようにする
+            case $gl.FLOAT_VEC4:
+                data.method = $gl.uniform4fv.bind($gl, location);
+                data.array = new Float32Array(4 * info.size);
+                data.assign = -1;
+                break;
+            case $gl.INT_VEC4:
+                data.method = $gl.uniform4iv.bind($gl, location);
+                data.array = new Int32Array(4 * info.size);
+                data.assign = -1;
+                break;
+            // uniformの値の設定は、programに保持されるため、
+            // sampler2Dは一度だけ設定するようにする
+            case $gl.SAMPLER_2D:
+                data.method = atlas
+                    ? $gl.uniform1i.bind($gl, location, 3)
+                    : $gl.uniform1iv.bind($gl, location);
+                data.array = new Int32Array(info.size);
+                data.assign = 1;
+                break;
+            case $gl.FLOAT:
+            case $gl.FLOAT_VEC2:
+            case $gl.FLOAT_VEC3:
+            case $gl.FLOAT_MAT2:
+            case $gl.FLOAT_MAT3:
+            case $gl.FLOAT_MAT4:
+            case $gl.INT:
+            case $gl.INT_VEC2:
+            case $gl.INT_VEC3:
+            default:
+                throw new Error("Use gl.FLOAT_VEC4 or gl.INT_VEC4 instead");
+        }
+        map.set(name, data);
+    }
+};

package/src/Shader/ShaderManager/service/ShaderManagerSetBitmapFillUniformService.d.ts

@@ -0,0 +1,14 @@
+import type { ShaderManager } from "../../ShaderManager";
+/**
+ * @description ShaderManagerのBitmapの塗りのuniform変数を設定します。
+ *              Set the fill uniform variables of the ShaderManager.
+ *
+ * @param  {ShaderManager} shader_manager
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {Float32Array | null} grid_data
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (shader_manager: ShaderManager, width: number, height: number, grid_data: Float32Array | null) => void;

package/src/Shader/ShaderManager/service/ShaderManagerSetBitmapFillUniformService.js

@@ -0,0 +1,85 @@
+import { $context, $inverseMatrix, $getViewportWidth, $getViewportHeight } from "../../../WebGLUtil";
+/**
+ * @description ShaderManagerのBitmapの塗りのuniform変数を設定します。
+ *              Set the fill uniform variables of the ShaderManager.
+ *
+ * @param  {ShaderManager} shader_manager
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {Float32Array | null} grid_data
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (shader_manager, width, height, grid_data) => {
+    const highp = shader_manager.highp;
+    // vertex: u_matrix
+    const matrix = $context.$stack[$context.$stack.length - 1];
+    highp[0] = matrix[0];
+    highp[1] = matrix[1];
+    highp[2] = matrix[2];
+    highp[4] = matrix[3];
+    highp[5] = matrix[4];
+    highp[6] = matrix[5];
+    highp[8] = matrix[6];
+    highp[9] = matrix[7];
+    highp[10] = matrix[8];
+    // vertex: u_inverse_matrix
+    const inverseMatrix = $inverseMatrix($context.$matrix);
+    highp[12] = inverseMatrix[0];
+    highp[13] = inverseMatrix[1];
+    highp[14] = inverseMatrix[2];
+    highp[16] = inverseMatrix[3];
+    highp[17] = inverseMatrix[4];
+    highp[18] = inverseMatrix[5];
+    highp[11] = inverseMatrix[6];
+    highp[15] = inverseMatrix[7];
+    highp[19] = inverseMatrix[8];
+    // vertex: u_viewport
+    highp[3] = $getViewportWidth();
+    highp[7] = $getViewportHeight();
+    if (grid_data) {
+        // vertex: u_parent_matrix
+        highp[20] = grid_data[0];
+        highp[21] = grid_data[1];
+        highp[22] = 0;
+        highp[24] = grid_data[2];
+        highp[25] = grid_data[3];
+        highp[26] = 0;
+        highp[28] = grid_data[4];
+        highp[29] = grid_data[5];
+        highp[30] = 1;
+        // vertex: u_ancestor_matrix
+        highp[32] = grid_data[6];
+        highp[33] = grid_data[7];
+        highp[34] = 0;
+        highp[36] = grid_data[8];
+        highp[37] = grid_data[9];
+        highp[38] = 0;
+        highp[40] = grid_data[10];
+        highp[41] = grid_data[11];
+        highp[42] = 1;
+        // vertex: u_parent_viewport
+        highp[31] = grid_data[12];
+        highp[35] = grid_data[13];
+        highp[39] = grid_data[14];
+        highp[43] = grid_data[15];
+        // vertex: u_grid_min
+        highp[44] = grid_data[16];
+        highp[45] = grid_data[17];
+        highp[46] = grid_data[18];
+        highp[47] = grid_data[19];
+        // vertex: u_grid_max
+        highp[48] = grid_data[20];
+        highp[49] = grid_data[21];
+        highp[50] = grid_data[22];
+        highp[51] = grid_data[23];
+        // vertex: u_offset
+        highp[52] = grid_data[24];
+        highp[53] = grid_data[25];
+    }
+    const mediump = shader_manager.mediump;
+    // fragment: u_uv
+    mediump[0] = width;
+    mediump[1] = height;
+};

package/src/Shader/ShaderManager/service/ShaderManagerSetBitmapFilterUniformService.d.ts

@@ -0,0 +1,35 @@
+import type { ShaderManager } from "../../ShaderManager";
+/**
+ * @description BitmapFilterのUniformを設定します。
+ *              Set the Uniform of the BitmapFilter.
+ *
+ * @param  {ShaderManager} shader_manager
+ * @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  {number} strength
+ * @param  {number} color_r1
+ * @param  {number} color_g1
+ * @param  {number} color_b1
+ * @param  {number} color_a1
+ * @param  {number} color_r2
+ * @param  {number} color_g2
+ * @param  {number} color_b2
+ * @param  {number} color_a2
+ * @param  {boolean} transforms_base
+ * @param  {boolean} transforms_blur
+ * @param  {boolean} applies_strength
+ * @param  {boolean} is_gradient
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (shader_manager: ShaderManager, width: number, height: number, base_width: number, base_height: number, base_offset_x: number, base_offset_y: number, blur_width: number, blur_height: number, blur_offset_x: number, blur_offset_y: number, is_glow: boolean, strength: number, color_r1: number, color_g1: number, color_b1: number, color_a1: number, color_r2: number, color_g2: number, color_b2: number, color_a2: number, transforms_base: boolean, transforms_blur: boolean, applies_strength: boolean, is_gradient: boolean) => void;