@next2d/webgl 1.18.12 → 2.0.0

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

@@ -0,0 +1,72 @@
+import { FUNCTION_IS_INSIDE } from "../FragmentShaderLibrary";
+/**
+ * @param  {number}  mediump_length
+ * @param  {number}  x
+ * @param  {number}  y
+ * @param  {boolean} preserve_alpha
+ * @param  {boolean} clamp
+ * @return {string}
+ * @method
+ * @static
+ */
+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,10 @@
+/**
+ * @param  {number} mediump_length
+ * @param  {number} component_x
+ * @param  {number} component_y
+ * @param  {number} mode
+ * @return {string}
+ * @method
+ * @static
+ */
+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,99 @@
+import { FUNCTION_IS_INSIDE } from "../FragmentShaderLibrary";
+/**
+ * @param  {number} mediump_length
+ * @param  {number} component_x
+ * @param  {number} component_y
+ * @param  {number} mode
+ * @return {string}
+ * @method
+ * @static
+ */
+export const DISPLACEMENT_MAP_FILTER_TEMPLATE = (mediump_length, component_x, component_y, mode) => {
+    let cx;
+    let cy;
+    let modeStatement;
+    switch (component_x) {
+        case 1: // BitmapDataChannel.RED
+            cx = "map_color.r";
+            break;
+        case 2: // BitmapDataChannel.GREEN
+            cx = "map_color.g";
+            break;
+        case 4: // BitmapDataChannel.BLUE
+            cx = "map_color.b";
+            break;
+        case 8: // BitmapDataChannel.ALPHA
+            cx = "map_color.a";
+            break;
+        default:
+            cx = "0.5";
+            break;
+    }
+    switch (component_y) {
+        case 1: // BitmapDataChannel.RED
+            cy = "map_color.r";
+            break;
+        case 2: // BitmapDataChannel.GREEN
+            cy = "map_color.g";
+            break;
+        case 4: // BitmapDataChannel.BLUE
+            cy = "map_color.b";
+            break;
+        case 8: // BitmapDataChannel.ALPHA
+            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:
+            // 置き換え後の座標が範囲外なら、置き換え前の座標をとる（x軸とy軸を別々に判定する）
+            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,15 @@
+/**
+ * @param  {number}  textures_length
+ * @param  {number}  mediump_length
+ * @param  {boolean} transforms_base
+ * @param  {boolean} transforms_blur
+ * @param  {boolean} is_glow
+ * @param  {string}  type
+ * @param  {boolean} knockout
+ * @param  {boolean} applies_strength
+ * @param  {boolean} is_gradient
+ * @return {string}
+ * @method
+ * @static
+ */
+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,273 @@
+import { FUNCTION_IS_INSIDE } from "../FragmentShaderLibrary";
+/**
+ * @param  {number} index
+ * @return {string}
+ * @method
+ * @private
+ */
+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));
+`;
+};
+/**
+ * @return {string}
+ * @method
+ * @private
+ */
+const STATEMENT_BLUR_TEXTURE = () => {
+    return `
+    vec4 blur = texture(u_textures[0], v_coord);
+`;
+};
+/**
+ * @param  {number} index
+ * @return {string}
+ * @method
+ * @private
+ */
+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));
+`;
+};
+/**
+ * @param  {number} offset
+ * @return {string}
+ * @method
+ * @private
+ */
+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);
+`;
+};
+/**
+ * @param  {number} index
+ * @return {string}
+ * @method
+ * @static
+ */
+const STATEMENT_GLOW_SOLID_COLOR = (index) => {
+    return `
+    vec4 color = u_mediump[${index}];
+    blur = color * blur.a;
+`;
+};
+/**
+ * @param  {boolean} transforms_base
+ * @return {string}
+ * @method
+ * @static
+ */
+const STATEMENT_GLOW_GRADIENT_COLOR = (transforms_base) => {
+    return `
+    blur = texture(u_textures[${transforms_base ? 2 : 1}], vec2(blur.a, 0.5));
+`;
+};
+/**
+ * @param  {boolean} is_inner
+ * @param  {boolean} transforms_base
+ * @param  {boolean} applies_strength
+ * @param  {boolean} is_gradient
+ * @param  {number} color_index
+ * @param  {number} strength_offset
+ * @return {string}
+ * @method
+ * @private
+ */
+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}
+`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+const STATEMENT_BLUR_TEXTURE_2 = () => {
+    return `
+    vec4 blur2 = texture(u_textures[0], 1.0 - v_coord);
+`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+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));
+`;
+};
+/**
+ * @param  {boolean} offset
+ * @return {string}
+ * @method
+ * @static
+ */
+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;
+`;
+};
+/**
+ * @param  {number} index
+ * @return {string}
+ * @method
+ * @static
+ */
+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;
+`;
+};
+/**
+ * @param  {boolean} transforms_base
+ * @return {string}
+ * @method
+ * @static
+ */
+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
+    ));
+`;
+};
+/**
+ * @param  {number}  textures_length
+ * @param  {number}  mediump_length
+ * @param  {boolean} transforms_base
+ * @param  {boolean} transforms_blur
+ * @param  {boolean} is_glow
+ * @param  {string}  type
+ * @param  {boolean} knockout
+ * @param  {boolean} applies_strength
+ * @param  {boolean} is_gradient
+ * @return {string}
+ * @method
+ * @static
+ */
+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};
+}`;
+};
+/**
+ * @param  {string}  transforms_base
+ * @param  {boolean} transforms_blur
+ * @param  {boolean} applies_strength
+ * @param  {boolean} is_gradient
+ * @param  {number}  color_index
+ * @param  {number}  strength_offset
+ * @return {string}
+ * @method
+ * @static
+ */
+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,19 @@
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const FUNCTION_IS_INSIDE: () => string;
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const STATEMENT_INSTANCED_COLOR_TRANSFORM_ON: () => string;
+/**
+ * @param  {number} mediump_index
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const STATEMENT_COLOR_TRANSFORM_ON: (mediump_index: number) => string;

package/src/Shader/Fragment/FragmentShaderLibrary.js

@@ -0,0 +1,34 @@
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+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)));
+}`;
+};
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const STATEMENT_INSTANCED_COLOR_TRANSFORM_ON = () => {
+    return `
+    src.rgb /= max(0.0001, src.a);
+    src = clamp(src * mul + add, 0.0, 1.0);
+    src.rgb *= src.a;`;
+};
+/**
+ * @param  {number} mediump_index
+ * @return {string}
+ * @method
+ * @static
+ */
+export const STATEMENT_COLOR_TRANSFORM_ON = (mediump_index) => {
+    return `
+    vec4 mul = u_mediump[${mediump_index}];
+    vec4 add = u_mediump[${mediump_index + 1}];
+${STATEMENT_INSTANCED_COLOR_TRANSFORM_ON()}`;
+};

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

@@ -0,0 +1,45 @@
+/**
+ * @description 頂点シェーダから受け取ったカラー情報をそのまま出力。
+ *              Outputs the color information received from the vertex shader as it is.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const SOLID_FILL_COLOR: () => string;
+/**
+ * @description ビットマップの繰り返しではない場合の塗りつぶし。
+ *              Filling when the bitmap is not repeated.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const BITMAP_CLIPPED: () => string;
+/**
+ * @description ビットマップの繰り返しの場合の塗りつぶし。
+ *              Filling in the case of repeating the bitmap.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const BITMAP_PATTERN: () => string;
+/**
+ * @description マスク専用のシェーダ。
+ *              Shader dedicated to masks.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const MASK: () => string;
+/**
+ * @description 矩形の塗りつぶし、カラーは固定。
+ *              Fill the rectangle, the color is fixed.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const FILL_RECT_COLOR: () => string;

package/src/Shader/Fragment/FragmentShaderSource.js

@@ -0,0 +1,114 @@
+/**
+ * @description 頂点シェーダから受け取ったカラー情報をそのまま出力。
+ *              Outputs the color information received from the vertex shader as it is.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+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);
+}`;
+};
+/**
+ * @description ビットマップの繰り返しではない場合の塗りつぶし。
+ *              Filling when the bitmap is not repeated.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+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;
+}`;
+};
+/**
+ * @description ビットマップの繰り返しの場合の塗りつぶし。
+ *              Filling in the case of repeating the bitmap.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+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;
+}`;
+};
+/**
+ * @description マスク専用のシェーダ。
+ *              Shader dedicated to masks.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+export const MASK = () => {
+    return `#version 300 es
+precision mediump float;
+
+in vec2 v_bezier;
+out vec4 o_color;
+
+void main() {
+    vec2 px = dFdx(v_bezier);
+    vec2 py = dFdy(v_bezier);
+
+    vec2 f = (2.0 * v_bezier.x) * vec2(px.x, py.x) - vec2(px.y, py.y);
+    float alpha = 0.5 - (v_bezier.x * v_bezier.x - v_bezier.y) / length(f);
+
+    if (alpha > 0.0) {
+        o_color = vec4(min(alpha, 1.0));
+    } else {
+        discard;
+    }    
+}`;
+};
+/**
+ * @description 矩形の塗りつぶし、カラーは固定。
+ *              Fill the rectangle, the color is fixed.
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+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,8 @@
+/**
+ * @param  {string}  operation
+ * @param  {boolean} with_color_transform
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const BLEND_TEMPLATE: (operation: string, with_color_transform: boolean) => string;