@next2d/webgl 1.18.12 → 3.0.0

package/src/Shader/Fragment/Filter/FragmentShaderSourceBlurFilter.d.ts

@@ -0,0 +1 @@
+export declare const BLUR_FILTER_TEMPLATE: (half_blur: number) => string;

package/{dist/shader/fragment/filter → src/Shader/Fragment/Filter}/FragmentShaderSourceBlurFilter.js

@@ -1,16 +1,6 @@
-/**
- * @class
- */
-export class FragmentShaderSourceBlurFilter {
-    /**
-     * @param  {number} half_blur
-     * @return {string}
-     * @method
-     * @static
-     */
-    static TEMPLATE(half_blur) {
-        const halfBlurFixed = half_blur.toFixed(1);
-        return `#version 300 es
+export const BLUR_FILTER_TEMPLATE = (half_blur) => {
+    const halfBlurFixed = half_blur.toFixed(1);
+    return `#version 300 es
 precision mediump float;
 
 uniform sampler2D u_texture;
@@ -35,8 +25,5 @@ void main() {
     color /= samples;
 
     o_color = color;
-}
-
-`;
-    }
-}
+}`;
+};

package/src/Shader/Fragment/Filter/FragmentShaderSourceColorMatrixFilter.d.ts

@@ -0,0 +1 @@
+export declare const COLOR_MATRIX_FILTER_TEMPLATE: () => string;

package/{dist/shader/fragment/filter → src/Shader/Fragment/Filter}/FragmentShaderSourceColorMatrixFilter.js

@@ -1,14 +1,5 @@
-/**
- * @class
- */
-export class FragmentShaderSourceColorMatrixFilter {
-    /**
-     * @return {string}
-     * @method
-     * @static
-     */
-    static TEMPLATE() {
-        return `#version 300 es
+export const COLOR_MATRIX_FILTER_TEMPLATE = () => {
+    return `#version 300 es
 precision mediump float;
 
 uniform sampler2D u_texture;
@@ -28,8 +19,5 @@ void main() {
     color.rgb *= color.a;
 
     o_color = color;
-}
-
-`;
-    }
-}
+}`;
+};

package/src/Shader/Fragment/Filter/FragmentShaderSourceConvolutionFilter.d.ts

@@ -0,0 +1 @@
+export declare const CONVOLUTION_FILTER_TEMPLATE: (mediump_length: number, x: number, y: number, preserve_alpha: boolean, clamp: boolean) => string;

package/src/Shader/Fragment/Filter/FragmentShaderSourceConvolutionFilter.js

@@ -0,0 +1,62 @@
+import { FUNCTION_IS_INSIDE } from "../FragmentShaderLibrary";
+export const CONVOLUTION_FILTER_TEMPLATE = (mediump_length, x, y, preserve_alpha, clamp) => {
+    const halfX = Math.floor(x * 0.5);
+    const halfY = Math.floor(y * 0.5);
+    const size = x * y;
+    let matrixStatement = "";
+    const matrixIndex = clamp ? 1 : 2;
+    for (let idx = 0; idx < size; ++idx) {
+        const index = matrixIndex + Math.floor(idx / 4);
+        const component = idx % 4;
+        matrixStatement += `
+    result += getWeightedColor(${idx}, u_mediump[${index}][${component}]);
+`;
+    }
+    const preserve_alphaStatement = preserve_alpha
+        ? "result.a = texture(u_texture, v_coord).a;"
+        : "";
+    const clampStatement = clamp
+        ? ""
+        : `
+    vec4 substitute_color = u_mediump[1];
+    color = mix(substitute_color, color, isInside(uv));
+`;
+    return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture;
+uniform vec4 u_mediump[${mediump_length}];
+
+in vec2 v_coord;
+out vec4 o_color;
+
+${FUNCTION_IS_INSIDE()}
+
+vec4 getWeightedColor (in int i, in float weight) {
+    vec2 rcp_size = u_mediump[0].xy;
+
+    int i_div_x = i / ${x};
+    int i_mod_x = i - ${x} * i_div_x;
+    vec2 offset = vec2(i_mod_x - ${halfX}, ${halfY} - i_div_x);
+    vec2 uv = v_coord + offset * rcp_size;
+
+    vec4 color = texture(u_texture, uv);
+    color.rgb /= max(0.0001, color.a);
+    ${clampStatement}
+
+    return color * weight;
+}
+
+void main() {
+    float rcp_divisor = u_mediump[0].z;
+    float bias        = u_mediump[0].w;
+
+    vec4 result = vec4(0.0);
+    ${matrixStatement}
+    result = clamp(result * rcp_divisor + bias, 0.0, 1.0);
+    ${preserve_alphaStatement}
+
+    result.rgb *= result.a;
+    o_color = result;
+}`;
+};

package/src/Shader/Fragment/Filter/FragmentShaderSourceDisplacementMapFilter.d.ts

@@ -0,0 +1 @@
+export declare const DISPLACEMENT_MAP_FILTER_TEMPLATE: (mediump_length: number, component_x: number, component_y: number, mode: number) => string;

package/src/Shader/Fragment/Filter/FragmentShaderSourceDisplacementMapFilter.js

@@ -0,0 +1,89 @@
+import { FUNCTION_IS_INSIDE } from "../FragmentShaderLibrary";
+export const DISPLACEMENT_MAP_FILTER_TEMPLATE = (mediump_length, component_x, component_y, mode) => {
+    let cx;
+    let cy;
+    let modeStatement;
+    switch (component_x) {
+        case 1:
+            cx = "map_color.r";
+            break;
+        case 2:
+            cx = "map_color.g";
+            break;
+        case 4:
+            cx = "map_color.b";
+            break;
+        case 8:
+            cx = "map_color.a";
+            break;
+        default:
+            cx = "0.5";
+            break;
+    }
+    switch (component_y) {
+        case 1:
+            cy = "map_color.r";
+            break;
+        case 2:
+            cy = "map_color.g";
+            break;
+        case 4:
+            cy = "map_color.b";
+            break;
+        case 8:
+            cy = "map_color.a";
+            break;
+        default:
+            cy = "0.5";
+            break;
+    }
+    switch (mode) {
+        case 0:
+            modeStatement = `
+    vec4 source_color = texture(u_textures[0], uv);
+`;
+            break;
+        case 3:
+            modeStatement = `
+    vec4 source_color =texture(u_textures[0], mix(v_coord, uv, step(abs(uv - vec2(0.5)), vec2(0.5))));
+`;
+            break;
+        case 1:
+            modeStatement = `
+    vec4 substitute_color = u_mediump[2];
+    vec4 source_color = mix(substitute_color, texture(u_textures[0], uv), isInside(uv));
+`;
+            break;
+        case 2:
+        default:
+            modeStatement = `
+    vec4 source_color = texture(u_textures[0], fract(uv));
+`;
+            break;
+    }
+    return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_textures[2];
+uniform vec4 u_mediump[${mediump_length}];
+
+in vec2 v_coord;
+out vec4 o_color;
+
+${FUNCTION_IS_INSIDE()}
+
+void main() {
+    vec2 uv_to_st_scale  = u_mediump[0].xy;
+    vec2 uv_to_st_offset = u_mediump[0].zw;
+    vec2 scale           = u_mediump[1].xy;
+
+    vec2 st = v_coord * uv_to_st_scale - uv_to_st_offset;
+    vec4 map_color = texture(u_textures[1], st);
+
+    vec2 offset = vec2(${cx}, ${cy}) - 0.5;
+    vec2 uv = v_coord + offset * scale;
+    ${modeStatement}
+
+    o_color = mix(texture(u_textures[0], v_coord), source_color, isInside(st));
+}`;
+};

package/src/Shader/Fragment/Filter/FragmentShaderSourceFilter.d.ts

@@ -0,0 +1 @@
+export declare const BITMAP_FILTER_TEMPLATE: (textures_length: number, mediump_length: number, transforms_base: boolean, transforms_blur: boolean, is_glow: boolean, type: string, knockout: boolean, applies_strength: boolean, is_gradient: boolean) => string;

package/src/Shader/Fragment/Filter/FragmentShaderSourceFilter.js

@@ -0,0 +1,174 @@
+import { FUNCTION_IS_INSIDE } from "../FragmentShaderLibrary";
+const STATEMENT_BASE_TEXTURE_TRANSFORM = (index) => {
+    return `
+    vec2 base_scale  = u_mediump[${index}].xy;
+    vec2 base_offset = u_mediump[${index}].zw;
+
+    vec2 uv = v_coord * base_scale - base_offset;
+    vec4 base = mix(vec4(0.0), texture(u_textures[1], uv), isInside(uv));
+`;
+};
+const STATEMENT_BLUR_TEXTURE = () => {
+    return `
+    vec4 blur = texture(u_textures[0], v_coord);
+`;
+};
+const STATEMENT_BLUR_TEXTURE_TRANSFORM = (index) => {
+    return `
+    vec2 blur_scale  = u_mediump[${index}].xy;
+    vec2 blur_offset = u_mediump[${index}].zw;
+
+    vec2 st = v_coord * blur_scale - blur_offset;
+    vec4 blur = mix(vec4(0.0), texture(u_textures[0], st), isInside(st));
+`;
+};
+const STATEMENT_GLOW_STRENGTH = (offset) => {
+    const index = Math.floor(offset / 4);
+    const component = offset % 4;
+    return `
+    float strength = u_mediump[${index}][${component}];
+    blur.a = clamp(blur.a * strength, 0.0, 1.0);
+`;
+};
+const STATEMENT_GLOW_SOLID_COLOR = (index) => {
+    return `
+    vec4 color = u_mediump[${index}];
+    blur = color * blur.a;
+`;
+};
+const STATEMENT_GLOW_GRADIENT_COLOR = (transforms_base) => {
+    return `
+    blur = texture(u_textures[${transforms_base ? 2 : 1}], vec2(blur.a, 0.5));
+`;
+};
+const STATEMENT_GLOW = (is_inner, transforms_base, applies_strength, is_gradient, color_index, strength_offset) => {
+    const innerStatement = is_inner
+        ? "blur.a = 1.0 - blur.a;"
+        : "";
+    const strengthStatement = applies_strength
+        ? STATEMENT_GLOW_STRENGTH(strength_offset)
+        : "";
+    const colorStatement = is_gradient
+        ? STATEMENT_GLOW_GRADIENT_COLOR(transforms_base)
+        : STATEMENT_GLOW_SOLID_COLOR(color_index);
+    return `
+    ${innerStatement}
+    ${strengthStatement}
+    ${colorStatement}
+`;
+};
+const STATEMENT_BLUR_TEXTURE_2 = () => {
+    return `
+    vec4 blur2 = texture(u_textures[0], 1.0 - v_coord);
+`;
+};
+const STATEMENT_BLUR_TEXTURE_TRANSFORM_2 = () => {
+    return `
+    vec2 pq = (1.0 - v_coord) * blur_scale - blur_offset;
+    vec4 blur2 = mix(vec4(0.0), texture(u_textures[0], pq), isInside(pq));
+`;
+};
+const STATEMENT_BEVEL_STRENGTH = (offset) => {
+    const index = Math.floor(offset / 4);
+    const component = offset % 4;
+    return `
+    float strength = u_mediump[${index}][${component}];
+    highlight_alpha *= strength;
+    shadow_alpha    *= strength;
+`;
+};
+const STATEMENT_BEVEL_SOLID_COLOR = (index) => {
+    return `
+    vec4 highlight_color = u_mediump[${index}];
+    vec4 shadow_color    = u_mediump[${index + 1}];
+    blur = highlight_color * highlight_alpha + shadow_color * shadow_alpha;
+`;
+};
+const STATEMENT_BEVEL_GRADIENT_COLOR = (transforms_base) => {
+    return `
+    blur = texture(u_textures[${transforms_base ? 2 : 1}], vec2(
+        0.5019607843137255 - 0.5019607843137255 * shadow_alpha + 0.4980392156862745 * highlight_alpha,
+        0.5
+    ));
+`;
+};
+export const BITMAP_FILTER_TEMPLATE = (textures_length, mediump_length, transforms_base, transforms_blur, is_glow, type, knockout, applies_strength, is_gradient) => {
+    let index = 0;
+    const baseStatement = transforms_base
+        ? STATEMENT_BASE_TEXTURE_TRANSFORM(index++)
+        : "";
+    const blurStatement = transforms_blur
+        ? STATEMENT_BLUR_TEXTURE_TRANSFORM(index++)
+        : STATEMENT_BLUR_TEXTURE();
+    const isInner = type === "inner";
+    const colorIndex = index;
+    let strengthOffset = index * 4;
+    let colorStatement;
+    if (is_gradient) {
+        colorStatement = is_glow
+            ? STATEMENT_GLOW(false, transforms_base, applies_strength, is_gradient, colorIndex, strengthOffset)
+            : STATEMENT_BEVEL(transforms_base, transforms_blur, applies_strength, is_gradient, colorIndex, strengthOffset);
+    }
+    else if (is_glow) {
+        strengthOffset += 4;
+        colorStatement = STATEMENT_GLOW(isInner, transforms_base, applies_strength, is_gradient, colorIndex, strengthOffset);
+    }
+    else {
+        strengthOffset += 8;
+        colorStatement = STATEMENT_BEVEL(transforms_base, transforms_blur, applies_strength, is_gradient, colorIndex, strengthOffset);
+    }
+    let modeExpression;
+    switch (type) {
+        case "outer":
+            modeExpression = knockout
+                ? "blur - blur * base.a"
+                : "base + blur - blur * base.a";
+            break;
+        case "full":
+            modeExpression = knockout
+                ? "blur"
+                : "base - base * blur.a + blur";
+            break;
+        case "inner":
+        default:
+            modeExpression = "blur";
+            break;
+    }
+    return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_textures[${textures_length}];
+uniform vec4 u_mediump[${mediump_length}];
+
+in vec2 v_coord;
+out vec4 o_color;
+
+${FUNCTION_IS_INSIDE()}
+
+void main() {
+    ${baseStatement}
+    ${blurStatement}
+    ${colorStatement}
+    o_color = ${modeExpression};
+}`;
+};
+const STATEMENT_BEVEL = (transforms_base, transforms_blur, applies_strength, is_gradient, color_index, strength_offset) => {
+    const blur2Statement = transforms_blur
+        ? STATEMENT_BLUR_TEXTURE_TRANSFORM_2()
+        : STATEMENT_BLUR_TEXTURE_2();
+    const strengthStatement = applies_strength
+        ? STATEMENT_BEVEL_STRENGTH(strength_offset)
+        : "";
+    const colorStatement = is_gradient
+        ? STATEMENT_BEVEL_GRADIENT_COLOR(transforms_base)
+        : STATEMENT_BEVEL_SOLID_COLOR(color_index);
+    return `
+    ${blur2Statement}
+    float highlight_alpha = blur.a - blur2.a;
+    float shadow_alpha    = blur2.a - blur.a;
+    ${strengthStatement}
+    highlight_alpha = clamp(highlight_alpha, 0.0, 1.0);
+    shadow_alpha    = clamp(shadow_alpha, 0.0, 1.0);
+    ${colorStatement}
+`;
+};

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

@@ -0,0 +1,2 @@
+export declare const FUNCTION_IS_INSIDE: () => string;
+export declare const STATEMENT_COLOR_TRANSFORM_ON: (mediump_index: number) => string;

package/src/Shader/Fragment/FragmentShaderLibrary.js

@@ -0,0 +1,20 @@
+export const FUNCTION_IS_INSIDE = () => {
+    return `
+float isInside(in vec2 uv) {
+    return step(4.0, dot(step(vec4(0.0, uv.x, 0.0, uv.y), vec4(uv.x, 1.0, uv.y, 1.0)), vec4(1.0)));
+}`;
+};
+export const STATEMENT_COLOR_TRANSFORM_ON = (mediump_index) => {
+    return `
+    vec4 mul = u_mediump[${mediump_index}];
+    vec4 add = u_mediump[${mediump_index + 1}];
+
+    if (mul.x != 1.0 || mul.y != 1.0 || mul.z != 1.0 || mul.w != 1.0
+        || add.x != 0.0 || add.y != 0.0 || add.z != 0.0
+    ) {
+        src.rgb /= max(0.0001, src.a);
+        src = clamp(src * mul + add, 0.0, 1.0);
+        src.rgb *= src.a;
+    }
+`;
+};

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

@@ -0,0 +1,5 @@
+export declare const SOLID_FILL_COLOR: () => string;
+export declare const BITMAP_CLIPPED: () => string;
+export declare const BITMAP_PATTERN: () => string;
+export declare const MASK: () => string;
+export declare const FILL_RECT_COLOR: () => string;

package/src/Shader/Fragment/FragmentShaderSource.js

@@ -0,0 +1,76 @@
+export const SOLID_FILL_COLOR = () => {
+    return `#version 300 es
+precision mediump float;
+
+in vec4 v_color;
+out vec4 o_color;
+
+void main() {
+    o_color = vec4(v_color.rgb * v_color.a, v_color.a);
+}`;
+};
+export const BITMAP_CLIPPED = () => {
+    return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture;
+uniform vec4 u_mediump[1];
+
+in vec2 v_uv;
+out vec4 o_color;
+
+void main() {
+    vec2 uv = vec2(v_uv.x, u_mediump[0].y - v_uv.y) / u_mediump[0].xy;
+
+    vec4 src = texture(u_texture, uv);
+    o_color = src;
+}`;
+};
+export const BITMAP_PATTERN = () => {
+    return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture;
+uniform vec4 u_mediump[1];
+
+in vec2 v_uv;
+out vec4 o_color;
+
+void main() {
+    vec2 uv = fract(vec2(v_uv.x, -v_uv.y) / u_mediump[0].xy);
+
+    vec4 src = texture(u_texture, uv);
+    o_color = src;
+}`;
+};
+export const MASK = () => {
+    return `#version 300 es
+precision mediump float;
+
+in vec2 v_bezier;
+out vec4 o_color;
+
+void main() {
+    float f_val = v_bezier.x * v_bezier.x - v_bezier.y;
+
+    float dx = dFdx(f_val);
+    float dy = dFdy(f_val);
+
+    float dist = f_val / length(vec2(dx, dy));
+    float alpha = smoothstep(0.5, -0.5, dist);
+
+    if (alpha > 0.001) {
+        o_color = vec4(min(alpha, 1.0));
+    } else {
+        discard;
+    }
+}`;
+};
+export const FILL_RECT_COLOR = () => {
+    return `#version 300 es
+precision mediump float;
+out vec4 o_color;
+void main() {
+    o_color = vec4(1.0);
+}`;
+};

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

@@ -0,0 +1 @@
+export declare const BLEND_TEMPLATE: (operation: string, with_color_transform: boolean) => string;