@next2d/webgl 1.18.12 → 2.0.0

package/src/Shader/Fragment/FragmentShaderSourceBlend.js

@@ -0,0 +1,285 @@
+import { STATEMENT_COLOR_TRANSFORM_ON } from "./FragmentShaderLibrary";
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const FUNCTION_NORMAL = () => {
+    return `
+vec4 blend (in vec4 src, in vec4 dst) {
+    return src + dst - dst * src.a;
+}`;
+};
+// 各ブレンド式は、前景と背景の両方のアルファを考慮する必要がある
+// https://odashi.hatenablog.com/entry/20110921/1316610121
+// https://hakuhin.jp/as3/blend.html
+//
+// [基本計算式]
+// ・色(rgb)はストレートアルファ
+// ・アルファ(a)が0の場合は例外処理をする
+// 前景色 a: src.rgb * (src.a * (1.0 - dst.a))
+// 背景色 b: dst.rgb * (dst.a * (1.0 - src.a))
+// 合成色 c: mix.rgb * (src.a * dst.a)
+// 最終結果: a + b + c
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const FUNCTION_SUBTRACT = () => {
+    // [合成色計算式]
+    // dst - src
+    return `
+vec4 blend (in vec4 src, in vec4 dst) {
+    if (src.a == 0.0) { return dst; }
+    if (dst.a == 0.0) { return src; }
+
+    vec4 a = src - src * dst.a;
+    vec4 b = dst - dst * src.a;
+
+    src.rgb /= src.a;
+    dst.rgb /= dst.a;
+
+    vec4 c = vec4(dst.rgb - src.rgb, src.a * dst.a);
+    c.rgb *= c.a;
+
+    return a + b + c;
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const FUNCTION_MULTIPLY = () => {
+    // [合成色計算式]
+    // src * dst
+    return `
+vec4 blend (in vec4 src, in vec4 dst) {
+    vec4 a = src - src * dst.a;
+    vec4 b = dst - dst * src.a;
+    vec4 c = src * dst;
+
+    return a + b + c;
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const FUNCTION_LIGHTEN = () => {
+    // [合成色計算式]
+    // (src > dst) ? src : dst
+    return `
+vec4 blend (in vec4 src, in vec4 dst) {
+    if (src.a == 0.0) { return dst; }
+    if (dst.a == 0.0) { return src; }
+
+    vec4 a = src - src * dst.a;
+    vec4 b = dst - dst * src.a;
+
+    src.rgb /= src.a;
+    dst.rgb /= dst.a;
+
+    vec4 c = vec4(mix(src.rgb, dst.rgb, step(src.rgb, dst.rgb)), src.a * dst.a);
+    c.rgb *= c.a;
+
+    return a + b + c;
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const FUNCTION_DARKEN = () => {
+    // [合成色計算式]
+    // (src < dst) ? src : dst
+    return `
+vec4 blend (in vec4 src, in vec4 dst) {
+    if (src.a == 0.0) { return dst; }
+    if (dst.a == 0.0) { return src; }
+
+    vec4 a = src - src * dst.a;
+    vec4 b = dst - dst * src.a;
+
+    src.rgb /= src.a;
+    dst.rgb /= dst.a;
+
+    vec4 c = vec4(mix(src.rgb, dst.rgb, step(dst.rgb, src.rgb)), src.a * dst.a);
+    c.rgb *= c.a;
+
+    return a + b + c;
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const FUNCTION_OVERLAY = () => {
+    // [合成色計算式]
+    // if (dst < 0.5) {
+    //     return 2.0 * src * dst
+    // } else {
+    //     return 1.0 - 2.0 * (1.0 - src) * (1.0 - dst)
+    // }
+    return `
+vec4 blend (in vec4 src, in vec4 dst) {
+    if (src.a == 0.0) { return dst; }
+    if (dst.a == 0.0) { return src; }
+
+    vec4 a = src - src * dst.a;
+    vec4 b = dst - dst * src.a;
+
+    src.rgb /= src.a;
+    dst.rgb /= dst.a;
+
+    vec4 mul = src * dst;
+    vec3 c1 = 2.0 * mul.rgb;
+    vec3 c2 = 2.0 * (src.rgb + dst.rgb - mul.rgb) - 1.0;
+    vec4 c = vec4(mix(c1, c2, step(vec3(0.5), dst.rgb)), mul.a);
+    c.rgb *= c.a;
+
+    return a + b + c;
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const FUNCTION_HARDLIGHT = () => {
+    // [合成色計算式]
+    // if (src < 0.5) {
+    //     return 2.0 * src * dst
+    // } else {
+    //     return 1.0 - 2.0 * (1.0 - src) * (1.0 - dst)
+    // }
+    return `
+vec4 blend (in vec4 src, in vec4 dst) {
+    if (src.a == 0.0) { return dst; }
+    if (dst.a == 0.0) { return src; }
+
+    vec4 a = src - src * dst.a;
+    vec4 b = dst - dst * src.a;
+
+    src.rgb /= src.a;
+    dst.rgb /= dst.a;
+
+    vec4 mul = src * dst;
+    vec3 c1 = 2.0 * mul.rgb;
+    vec3 c2 = 2.0 * (src.rgb + dst.rgb - mul.rgb) - 1.0;
+    vec4 c = vec4(mix(c1, c2, step(vec3(0.5), src.rgb)), mul.a);
+    c.rgb *= c.a;
+
+    return a + b + c;
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const FUNCTION_DIFFERENCE = () => {
+    // [合成色計算式]
+    // abs(src - dst)
+    return `
+vec4 blend (in vec4 src, in vec4 dst) {
+    if (src.a == 0.0) { return dst; }
+    if (dst.a == 0.0) { return src; }
+
+    vec4 a = src - src * dst.a;
+    vec4 b = dst - dst * src.a;
+
+    src.rgb /= src.a;
+    dst.rgb /= dst.a;
+
+    vec4 c = vec4(abs(src.rgb - dst.rgb), src.a * dst.a);
+    c.rgb *= c.a;
+
+    return a + b + c;
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const FUNCTION_INVERT = () => {
+    // [基本計算式]
+    // ((1.0 - dst) * src.a) + (dst * (1.0 - src.a))
+    return `
+vec4 blend (in vec4 src, in vec4 dst) {
+    if (src.a == 0.0) { return dst; }
+    if (dst.a == 0.0) { return src; }
+
+    vec4 b = dst - dst * src.a;
+    vec4 c = vec4(src.a - dst.rgb * src.a, src.a);
+
+    return b + c;
+}`;
+};
+/**
+ * @param  {string}  operation
+ * @param  {boolean} with_color_transform
+ * @return {string}
+ * @method
+ * @static
+ */
+export const BLEND_TEMPLATE = (operation, with_color_transform) => {
+    let blendFunction;
+    switch (operation) {
+        case "subtract":
+            blendFunction = FUNCTION_SUBTRACT();
+            break;
+        case "multiply":
+            blendFunction = FUNCTION_MULTIPLY();
+            break;
+        case "lighten":
+            blendFunction = FUNCTION_LIGHTEN();
+            break;
+        case "darken":
+            blendFunction = FUNCTION_DARKEN();
+            break;
+        case "overlay":
+            blendFunction = FUNCTION_OVERLAY();
+            break;
+        case "hardlight":
+            blendFunction = FUNCTION_HARDLIGHT();
+            break;
+        case "difference":
+            blendFunction = FUNCTION_DIFFERENCE();
+            break;
+        case "invert":
+            blendFunction = FUNCTION_INVERT();
+            break;
+        default:
+            blendFunction = FUNCTION_NORMAL();
+            break;
+    }
+    const colorTransformUniform = with_color_transform
+        ? "uniform vec4 u_mediump[2];"
+        : "";
+    const colorTransformStatement = with_color_transform
+        ? STATEMENT_COLOR_TRANSFORM_ON(0)
+        : "";
+    return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_textures[2];
+${colorTransformUniform}
+
+in vec2 v_coord;
+out vec4 o_color;
+
+${blendFunction}
+
+void main() {
+    vec4 dst = texture(u_textures[0], v_coord);
+    vec4 src = texture(u_textures[1], v_coord);
+    ${colorTransformStatement}
+    o_color = blend(src, dst);
+}`;
+};

package/src/Shader/Fragment/FragmentShaderSourceGradient.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @param  {number} highp_length
+ * @param  {number} fragment_index
+ * @param  {boolean} is_radial
+ * @param  {boolean} has_focal_point
+ * @param  {number} spread_method
+ * @return {string}
+ * @method
+ * @private
+ */
+export declare const GRADIENT_TEMPLATE: (highp_length: number, fragment_index: number, is_radial: boolean, has_focal_point: boolean, spread_method: number) => string;

package/src/Shader/Fragment/FragmentShaderSourceGradient.js

@@ -0,0 +1,102 @@
+/**
+ * @param  {number} index
+ * @return {string}
+ * @method
+ * @private
+ */
+const STATEMENT_FOCAL_POINT_ON = (index) => {
+    return `
+    vec2 focal = vec2(u_highp[${index}][1], 0.0);
+
+    vec2 dir = normalize(coord - focal);
+
+    float a = dot(dir, dir);
+    float b = 2.0 * dot(dir, focal);
+    float c = dot(focal, focal) - 1.0;
+    float x = (-b + sqrt(b * b - 4.0 * a * c)) / (2.0 * a);
+
+    float t = distance(focal, coord) / distance(focal, focal + dir * x);`;
+};
+/**
+ * @return {string}
+ * @method
+ * @private
+ */
+const STATEMENT_FOCAL_POINT_OFF = () => {
+    return "float t = length(coord);";
+};
+/**
+ * @param  {number} index
+ * @param  {boolean} has_focal_point
+ * @return {string}
+ * @method
+ * @private
+ */
+const STATEMENT_GRADIENT_TYPE_RADIAL = (index, has_focal_point) => {
+    const focalPointStatement = has_focal_point
+        ? STATEMENT_FOCAL_POINT_ON(index)
+        : STATEMENT_FOCAL_POINT_OFF();
+    return `
+    float radius = u_highp[${index}][0];
+    vec2 coord = p / radius;
+    ${focalPointStatement}
+`;
+};
+/**
+ * @param {number} index
+ * @return {string}
+ * @method
+ * @private
+ */
+const STATEMENT_GRADIENT_TYPE_LINEAR = (index) => {
+    return `
+    vec2 a = u_highp[${index}].xy;
+    vec2 b = u_highp[${index}].zw;
+
+    vec2 ab = b - a;
+    vec2 ap = p - a;
+
+    float t = dot(ab, ap) / dot(ab, ab);`;
+};
+/**
+ * @param  {number} highp_length
+ * @param  {number} fragment_index
+ * @param  {boolean} is_radial
+ * @param  {boolean} has_focal_point
+ * @param  {number} spread_method
+ * @return {string}
+ * @method
+ * @private
+ */
+export const GRADIENT_TEMPLATE = (highp_length, fragment_index, is_radial, has_focal_point, spread_method) => {
+    const gradientTypeStatement = is_radial
+        ? STATEMENT_GRADIENT_TYPE_RADIAL(fragment_index, has_focal_point)
+        : STATEMENT_GRADIENT_TYPE_LINEAR(fragment_index);
+    let spread_methodExpression;
+    switch (spread_method) {
+        case 0:
+            spread_methodExpression = "1.0 - abs(fract(t * 0.5) * 2.0 - 1.0)";
+            break;
+        case 1:
+            spread_methodExpression = "fract(t)";
+            break;
+        default:
+            spread_methodExpression = "clamp(t, 0.0, 1.0)";
+            break;
+    }
+    return `#version 300 es
+precision highp float;
+
+uniform sampler2D u_texture;
+uniform vec4 u_highp[${highp_length}];
+    
+in vec2 v_uv;
+out vec4 o_color;
+    
+void main() {
+    vec2 p = v_uv;
+    ${gradientTypeStatement}
+    t = ${spread_methodExpression};
+    o_color = texture(u_texture, vec2(t, 0.5));
+}`;
+};

package/src/Shader/Fragment/FragmentShaderSourceGradientLUT.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description グラデーションのLUTのフラグメントシェーダーソース
+ *              Fragment shader source of gradient LUT
+ *
+ * @param  {number} mediump_length
+ * @param  {number} stops_length
+ * @param  {number} is_linear_space
+ * @return {string}
+ * @method
+ * @protected
+ */
+export declare const GRADIENT_LUT_TEMPLATE: (mediump_length: number, stops_length: number, is_linear_space: boolean) => string;

package/src/Shader/Fragment/FragmentShaderSourceGradientLUT.js

@@ -0,0 +1,53 @@
+/**
+ * @description グラデーションのLUTのフラグメントシェーダーソース
+ *              Fragment shader source of gradient LUT
+ *
+ * @param  {number} mediump_length
+ * @param  {number} stops_length
+ * @param  {number} is_linear_space
+ * @return {string}
+ * @method
+ * @protected
+ */
+export const GRADIENT_LUT_TEMPLATE = (mediump_length, stops_length, is_linear_space) => {
+    let loopStatement = "";
+    for (let idx = 1; idx < stops_length; ++idx) {
+        const i0 = idx - 1;
+        const i1 = idx;
+        const t0 = `u_mediump[${stops_length + Math.floor(i0 / 4)}][${i0 % 4}]`;
+        const t1 = `u_mediump[${stops_length + Math.floor(i1 / 4)}][${i1 % 4}]`;
+        const c0 = `u_mediump[${i0}]`;
+        const c1 = `u_mediump[${i1}]`;
+        loopStatement += `
+    if (t <= ${t1}) {
+        return mix(${c0}, ${c1}, (t - ${t0}) / (${t1} - ${t0}));
+    }
+`;
+    }
+    const colorSpaceStatement = is_linear_space
+        ? "color = pow(color, vec4(0.45454545));"
+        : "";
+    return `#version 300 es
+precision mediump float;
+
+uniform vec4 u_mediump[${mediump_length}];
+
+in vec2 v_coord;
+out vec4 o_color;
+
+vec4 getGradientColor(in float t) {
+    if (t <= u_mediump[${stops_length}][0]) {
+        return u_mediump[0];
+    }
+    ${loopStatement}
+    return u_mediump[${stops_length - 1}];
+}
+
+void main() {
+    vec4 color = getGradientColor(v_coord.x);
+    ${colorSpaceStatement}
+    color.rgb *= color.a;
+
+    o_color = color;
+}`;
+};

package/src/Shader/Fragment/FragmentShaderSourceTexture.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @param  {boolean} with_color_transform
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const TEXTURE: (with_color_transform: boolean) => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const INSTANCE_TEXTURE: () => string;

package/src/Shader/Fragment/FragmentShaderSourceTexture.js

@@ -0,0 +1,59 @@
+import { STATEMENT_COLOR_TRANSFORM_ON } from "./FragmentShaderLibrary";
+/**
+ * @param  {boolean} with_color_transform
+ * @return {string}
+ * @method
+ * @static
+ */
+export const TEXTURE = (with_color_transform) => {
+    const colorTransformUniform = with_color_transform
+        ? "uniform vec4 u_mediump[2];"
+        : "";
+    const colorTransformStatement = with_color_transform
+        ? STATEMENT_COLOR_TRANSFORM_ON(0)
+        : "";
+    return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture;
+${colorTransformUniform}
+
+in vec2 v_coord;
+out vec4 o_color;
+
+void main() {
+    vec4 src = texture(u_texture, v_coord);
+    ${colorTransformStatement}
+    o_color = src;
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const INSTANCE_TEXTURE = () => {
+    return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture;
+
+in vec4 v_mul;
+in vec4 v_add;
+in vec2 v_coord;
+out vec4 o_color;
+
+void main() {
+    vec4 src = texture(u_texture, v_coord);
+
+    if (v_mul.x != 1.0 || v_mul.y != 1.0 || v_mul.z != 1.0 || v_mul.w != 1.0
+        || v_add.x != 0.0 || v_add.y != 0.0 || v_add.z != 0.0 || v_add.w != 0.0
+    ) {
+        src.rgb /= max(0.0001, src.a);
+        src = clamp(src * v_mul + v_add, 0.0, 1.0);
+        src.rgb *= src.a;
+    }
+    
+    o_color = src;
+}`;
+};

package/src/Shader/GradientLUTGenerator/service/GradientLUTSetFilterUniformService.d.ts

@@ -0,0 +1,16 @@
+import type { ShaderManager } from "../../ShaderManager";
+/**
+ * @description グラデーションフィルターのLUTのuniform変数を設定します。
+ *              Set the uniform variables of the gradient filter LUT.
+ *
+ * @param  {ShaderManager} shader_manager
+ * @param  {Float32Array} ratios
+ * @param  {Float32Array} colors
+ * @param  {Float32Array}alphas
+ * @param  {number} begin
+ * @param  {number} end
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (shader_manager: ShaderManager, ratios: Float32Array, colors: Float32Array, alphas: Float32Array, begin: number, end: number) => void;

package/src/Shader/GradientLUTGenerator/service/GradientLUTSetFilterUniformService.js

@@ -0,0 +1,30 @@
+/**
+ * @description グラデーションフィルターのLUTのuniform変数を設定します。
+ *              Set the uniform variables of the gradient filter LUT.
+ *
+ * @param  {ShaderManager} shader_manager
+ * @param  {Float32Array} ratios
+ * @param  {Float32Array} colors
+ * @param  {Float32Array}alphas
+ * @param  {number} begin
+ * @param  {number} end
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (shader_manager, ratios, colors, alphas, begin, end) => {
+    const mediump = shader_manager.mediump;
+    // fragment: u_gradient_color
+    let i = 0;
+    for (let j = begin; j < end; j++) {
+        const color = colors[j];
+        mediump[i++] = (color >> 16) / 255;
+        mediump[i++] = (color >> 8 & 0xff) / 255;
+        mediump[i++] = (color & 0xff) / 255;
+        mediump[i++] = alphas[j];
+    }
+    // fragment: u_gradient_t
+    for (let j = begin; j < end; j++) {
+        mediump[i++] = ratios[j] / 255;
+    }
+};

package/src/Shader/GradientLUTGenerator/service/GradientLUTSetUniformService.d.ts

@@ -0,0 +1,15 @@
+import { ShaderManager } from "../../ShaderManager";
+/**
+ * @description グラデーションLUTのuniform変数を設定します。
+ *              Set the uniform variables of the gradient LUT.
+ *
+ * @param  {ShaderManager} shader_manager
+ * @param  {array} stops
+ * @param  {number} begin
+ * @param  {number} end
+ * @param  {Float32Array} table
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (shader_manager: ShaderManager, stops: number[], begin: number, end: number, table: Float32Array) => void;

package/src/Shader/GradientLUTGenerator/service/GradientLUTSetUniformService.js

@@ -0,0 +1,29 @@
+/**
+ * @description グラデーションLUTのuniform変数を設定します。
+ *              Set the uniform variables of the gradient LUT.
+ *
+ * @param  {ShaderManager} shader_manager
+ * @param  {array} stops
+ * @param  {number} begin
+ * @param  {number} end
+ * @param  {Float32Array} table
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (shader_manager, stops, begin, end, table) => {
+    const mediump = shader_manager.mediump;
+    let index = 0;
+    // fragment: u_gradient_color
+    for (let idx = begin; idx < end; ++idx) {
+        const position = idx * 5;
+        mediump[index++] = table[stops[position + 1]];
+        mediump[index++] = table[stops[position + 2]];
+        mediump[index++] = table[stops[position + 3]];
+        mediump[index++] = table[stops[position + 4]];
+    }
+    // fragment: u_gradient_t
+    for (let idx = begin; idx < end; ++idx) {
+        mediump[index++] = stops[idx * 5];
+    }
+};

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

@@ -0,0 +1,13 @@
+import type { ITextureObject } from "../../../interface/ITextureObject";
+/**
+ * @description グラデーションフィルター用のテクスチャを生成します。
+ *              Generates a texture for the gradient filter.
+ *
+ * @param  {Float32Array} ratios
+ * @param  {Float32Array} colors
+ * @param  {Float32Array} alphas
+ * @return {ITextureObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (ratios: Float32Array, colors: Float32Array, alphas: Float32Array) => ITextureObject;

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

@@ -0,0 +1,37 @@
+import { $context } from "../../../WebGLUtil";
+import { execute as blendOneZeroService } from "../../../Blend/service/BlendOneZeroService";
+import { execute as blendResetService } from "../../../Blend/service/BlendResetService";
+import { execute as variantsGradientLUTShaderService } from "../../Variants/GradientLUT/service/VariantsGradientLUTShaderService";
+import { execute as gradientLUTSetFilterUniformService } from "../../GradientLUTGenerator/service/GradientLUTSetFilterUniformService";
+import { execute as gradientLUTGeneratorFillTextureUseCase } from "./GradientLUTGeneratorFillTextureUseCase";
+import { $getGradientAttachmentObject, $getGradientLUTGeneratorMaxLength } from "../../GradientLUTGenerator";
+/**
+ * @description グラデーションフィルター用のテクスチャを生成します。
+ *              Generates a texture for the gradient filter.
+ *
+ * @param  {Float32Array} ratios
+ * @param  {Float32Array} colors
+ * @param  {Float32Array} alphas
+ * @return {ITextureObject}
+ * @method
+ * @protected
+ */
+export const execute = (ratios, colors, alphas) => {
+    const currentAttachment = $context.currentAttachmentObject;
+    const gradientAttachmentObject = $getGradientAttachmentObject();
+    $context.bind(gradientAttachmentObject);
+    const stopsLength = ratios.length;
+    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, false);
+        gradientLUTSetFilterUniformService(shaderManager, ratios, colors, alphas, begin, end);
+        gradientLUTGeneratorFillTextureUseCase(shaderManager, ratios[begin] / 255, ratios[end - 1] / 255);
+    }
+    blendResetService();
+    if (currentAttachment) {
+        $context.bind(currentAttachment);
+    }
+    return gradientAttachmentObject.texture;
+};

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

@@ -0,0 +1,12 @@
+import type { ITextureObject } from "../../../interface/ITextureObject";
+/**
+ * @description グラデーションのテクスチャを生成します。
+ *              Generates a texture of the gradient.
+ *
+ * @param  {array} stops
+ * @param  {number} interpolation
+ * @return {ITextureObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (stops: number[], interpolation: number) => ITextureObject;