@next2d/webgl 1.15.0 → 1.17.0

package/dist/shader/GradientLUTGenerator.js

@@ -60,6 +60,10 @@ export class GradientLUTGenerator {
             ._$context
             .frameBuffer
             .currentAttachment;
+        const cachePosition = this._$context.cachePosition;
+        if (cachePosition) {
+            this._$gl.disable(this._$gl.SCISSOR_TEST);
+        }
         this._$context._$bind(this._$attachment);
         const stopsLength = stops.length;
         const variants = this
@@ -83,6 +87,9 @@ export class GradientLUTGenerator {
         if (!this._$attachment.texture) {
             throw new Error("the texture is null.");
         }
+        if (cachePosition) {
+            this._$context.bindRenderBuffer(cachePosition);
+        }
         return this._$attachment.texture;
     }
     /**

package/dist/shader/WebGLShaderInstance.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @class
+ */
+export declare class WebGLShaderInstance {
+    private readonly _$attributes;
+    private _$count;
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @constructor
+     * @public
+     */
+    constructor();
+    /**
+     * @member {array}
+     * @readonly
+     * @public
+     */
+    get attributes(): number[];
+    /**
+     * @member {number}
+     * @public
+     */
+    get count(): number;
+    set count(count: number);
+    /**
+     * @method
+     * @public
+     */
+    clear(): void;
+}

package/dist/shader/WebGLShaderInstance.js

@@ -0,0 +1,48 @@
+/**
+ * @class
+ */
+export class WebGLShaderInstance {
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @constructor
+     * @public
+     */
+    constructor() {
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$attributes = [];
+        /**
+         * @type {number}
+         * @private
+         */
+        this._$count = 0;
+    }
+    /**
+     * @member {array}
+     * @readonly
+     * @public
+     */
+    get attributes() {
+        return this._$attributes;
+    }
+    /**
+     * @member {number}
+     * @public
+     */
+    get count() {
+        return this._$count;
+    }
+    set count(count) {
+        this._$count = count;
+    }
+    /**
+     * @method
+     * @public
+     */
+    clear() {
+        this._$attributes.length = 0;
+        this._$count = 0;
+    }
+}

package/dist/shader/WebGLShaderUniform.js

@@ -28,16 +28,10 @@ export class WebGLShaderUniform {
         const activeUniforms = this._$gl.getProgramParameter(program, this._$gl.ACTIVE_UNIFORMS);
         for (let i = 0; i < activeUniforms; i++) {
             const info = this._$gl.getActiveUniform(program, i);
-            if (!info) {
-                throw new Error("the WebGLActiveInfo is null.");
-            }
             const name = info.name.endsWith("[0]")
                 ? info.name.slice(0, -3)
                 : info.name;
             const location = this._$gl.getUniformLocation(program, name);
-            if (!location) {
-                throw new Error("the WebGLUniformLocation is null.");
-            }
             // WebGLの仕様でuniformのint型のデフォルト値は0に設定されるため、
             // sampler2D（size=1）の値の更新は不要
             if (info.type === this._$gl.SAMPLER_2D && info.size === 1) {

package/dist/shader/fragment/FragmentShaderLibrary.d.ts

@@ -8,6 +8,12 @@ export declare class FragmentShaderLibrary {
      * @static
      */
     static FUNCTION_IS_INSIDE(): string;
+    /**
+     * @return {string}
+     * @method
+     * @static
+     */
+    static STATEMENT_INSTANCED_COLOR_TRANSFORM_ON(): string;
     /**
      * @param  {number} mediump_index
      * @return {string}

package/dist/shader/fragment/FragmentShaderLibrary.js

@@ -14,6 +14,18 @@ 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
+     */
+    static 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;
 `;
     }
     /**
@@ -26,10 +38,7 @@ float isInside(in vec2 uv) {
         return `
     vec4 mul = u_mediump[${mediump_index}];
     vec4 add = u_mediump[${mediump_index + 1}];
-
-    src.rgb /= max(0.0001, src.a);
-    src = clamp(src * mul + add, 0.0, 1.0);
-    src.rgb *= src.a;
+${FragmentShaderLibrary.STATEMENT_INSTANCED_COLOR_TRANSFORM_ON()}
 `;
     }
 }

package/dist/shader/fragment/FragmentShaderSourceBlend.d.ts

@@ -10,6 +10,14 @@ export declare class FragmentShaderSourceBlend {
      * @static
      */
     static TEMPLATE(operation: string, with_color_transform: boolean): string;
+    /**
+     * @param  {string}  operation
+     * @param  {boolean} with_color_transform
+     * @return {string}
+     * @method
+     * @static
+     */
+    static INSTANCE_TEMPLATE(operation: string, with_color_transform: boolean): string;
     /**
      * @return {string}
      * @method

package/dist/shader/fragment/FragmentShaderSourceBlend.js

@@ -65,6 +65,71 @@ void main() {
     o_color = blend(src, dst);
 }
 
+`;
+    }
+    /**
+     * @param  {string}  operation
+     * @param  {boolean} with_color_transform
+     * @return {string}
+     * @method
+     * @static
+     */
+    static INSTANCE_TEMPLATE(operation, with_color_transform) {
+        let blendFunction;
+        switch (operation) {
+            case "subtract":
+                blendFunction = this.FUNCTION_SUBTRACT();
+                break;
+            case "multiply":
+                blendFunction = this.FUNCTION_MULTIPLY();
+                break;
+            case "lighten":
+                blendFunction = this.FUNCTION_LIGHTEN();
+                break;
+            case "darken":
+                blendFunction = this.FUNCTION_DARKEN();
+                break;
+            case "overlay":
+                blendFunction = this.FUNCTION_OVERLAY();
+                break;
+            case "hardlight":
+                blendFunction = this.FUNCTION_HARDLIGHT();
+                break;
+            case "difference":
+                blendFunction = this.FUNCTION_DIFFERENCE();
+                break;
+            case "invert":
+                blendFunction = this.FUNCTION_INVERT();
+                break;
+            default:
+                blendFunction = this.FUNCTION_NORMAL();
+                break;
+        }
+        const colorTransformUniform = with_color_transform
+            ? "uniform vec4 u_mediump[2];"
+            : "";
+        const colorTransformStatement = with_color_transform
+            ? FragmentShaderLibrary.STATEMENT_COLOR_TRANSFORM_ON(0)
+            : "";
+        return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_textures[2];
+${colorTransformUniform}
+
+in vec2 v_src_coord;
+in vec2 v_dst_coord;
+out vec4 o_color;
+
+${blendFunction}
+
+void main() {
+    vec4 dst = texture(u_textures[0], v_dst_coord);
+    vec4 src = texture(u_textures[1], v_src_coord);
+    ${colorTransformStatement}
+    o_color = blend(src, dst);
+}
+
 `;
     }
     /**

package/dist/shader/fragment/FragmentShaderSourceTexture.d.ts

@@ -9,4 +9,10 @@ export declare class FragmentShaderSourceTexture {
      * @static
      */
     static TEMPLATE(with_color_transform: boolean): string;
+    /**
+     * @return {string}
+     * @method
+     * @static
+     */
+    static INSTANCE_TEMPLATE(): string;
 }

package/dist/shader/fragment/FragmentShaderSourceTexture.js

@@ -31,6 +31,38 @@ void main() {
     o_color = src;
 }
 
+`;
+    }
+    /**
+     * @return {string}
+     * @method
+     * @static
+     */
+    static INSTANCE_TEMPLATE() {
+        return `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture;
+
+in vec4 mul;
+in vec4 add;
+in vec2 v_coord;
+out vec4 o_color;
+
+void main() {
+    vec4 src = texture(u_texture, v_coord);
+
+    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 || add.w != 0.0
+    ) {
+        src.rgb /= max(0.0001, src.a);
+        src = clamp(src * mul + add, 0.0, 1.0);
+        src.rgb *= src.a;
+    }
+    
+    o_color = src;
+}
+
 `;
     }
 }

package/dist/shader/variants/BlendShaderVariantCollection.d.ts

@@ -1,6 +1,7 @@
 import { CanvasToWebGLShader } from "../CanvasToWebGLShader";
 import type { CanvasToWebGLContext } from "../../CanvasToWebGLContext";
 import type { WebGLShaderUniform } from "../WebGLShaderUniform";
+import type { WebGLShaderInstance } from "../WebGLShaderInstance";
 /**
  * @class
  */
@@ -15,6 +16,12 @@ export declare class BlendShaderVariantCollection {
      * @public
      */
     constructor(context: CanvasToWebGLContext, gl: WebGL2RenderingContext);
+    /**
+     * @return {CanvasToWebGLShader}
+     * @method
+     * @public
+     */
+    getInstanceShader(): CanvasToWebGLShader;
     /**
      * @param  {boolean} with_color_transform
      * @return {CanvasToWebGLShader}
@@ -36,6 +43,14 @@ export declare class BlendShaderVariantCollection {
      * @public
      */
     getBlendShader(operation: string, with_color_transform: boolean): CanvasToWebGLShader;
+    /**
+     * @param  {string}  operation
+     * @param  {boolean} with_color_transform
+     * @return {CanvasToWebGLShader}
+     * @method
+     * @public
+     */
+    getInstanceBlendShader(operation: string, with_color_transform: boolean): CanvasToWebGLShader;
     /**
      * @param  {WebGLShaderUniform} uniform
      * @param  {number}  x
@@ -59,6 +74,28 @@ export declare class BlendShaderVariantCollection {
      * @public
      */
     setNormalBlendUniform(uniform: WebGLShaderUniform, x: number, y: number, w: number, h: number, matrix: Float32Array, render_width: number, render_height: number, with_color_transform: boolean, ct0: number, ct1: number, ct2: number, ct3: number, ct4: number, ct5: number, ct6: number, ct7: number): void;
+    /**
+     * @param  {WebGLShaderUniform} uniform
+     * @param  {number}  x
+     * @param  {number}  y
+     * @param  {number}  w
+     * @param  {number}  h
+     * @param  {Float32Array} matrix
+     * @param  {number}  render_width
+     * @param  {number}  render_height
+     * @param  {number}  ct0
+     * @param  {number}  ct1
+     * @param  {number}  ct2
+     * @param  {number}  ct3
+     * @param  {number}  ct4
+     * @param  {number}  ct5
+     * @param  {number}  ct6
+     * @param  {number}  ct7
+     * @return {void}
+     * @method
+     * @public
+     */
+    pushNormalBlend(instance: WebGLShaderInstance, x: number, y: number, w: number, h: number, matrix: Float32Array, render_width: number, render_height: number, ct0?: number, ct1?: number, ct2?: number, ct3?: number, ct4?: number, ct5?: number, ct6?: number, ct7?: number): void;
     /**
      * @param  {WebGLShaderUniform} uniform
      * @param  {number} x
@@ -95,5 +132,28 @@ export declare class BlendShaderVariantCollection {
      * @method
      * @public
      */
+    setInstanceBlendUniform(uniform: WebGLShaderUniform, x: number, y: number, w: number, h: number, texture_width: number, texture_height: number, matrix: Float32Array, render_width: number, render_height: number, with_color_transform: boolean, ct0: number, ct1: number, ct2: number, ct3: number, ct4: number, ct5: number, ct6: number, ct7: number): void;
+    /**
+     * @param  {WebGLShaderUniform} uniform
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} w
+     * @param  {number} h
+     * @param  {Float32Array} matrix
+     * @param  {number} render_width
+     * @param  {number} render_height
+     * @param  {Float32Array} with_color_transform
+     * @param  {number} ct0
+     * @param  {number} ct1
+     * @param  {number} ct2
+     * @param  {number} ct3
+     * @param  {number} ct4
+     * @param  {number} ct5
+     * @param  {number} ct6
+     * @param  {number} ct7
+     * @return {void}
+     * @method
+     * @public
+     */
     setBlendUniform(uniform: WebGLShaderUniform, x: number, y: number, w: number, h: number, matrix: Float32Array, render_width: number, render_height: number, with_color_transform: boolean, ct0: number, ct1: number, ct2: number, ct3: number, ct4: number, ct5: number, ct6: number, ct7: number): void;
 }

package/dist/shader/variants/BlendShaderVariantCollection.js

@@ -3,6 +3,7 @@ import { VertexShaderSource } from "../vertex/VertexShaderSource";
 import { FragmentShaderSourceTexture } from "../fragment/FragmentShaderSourceTexture";
 import { FragmentShaderSourceBlend } from "../fragment/FragmentShaderSourceBlend";
 import { $getMap } from "@next2d/share";
+import { $RENDER_SIZE } from "../../Const";
 /**
  * @class
  */
@@ -30,6 +31,23 @@ export class BlendShaderVariantCollection {
          */
         this._$collection = $getMap();
     }
+    /**
+     * @return {CanvasToWebGLShader}
+     * @method
+     * @public
+     */
+    getInstanceShader() {
+        const key = "i";
+        if (this._$collection.has(key)) {
+            const shader = this._$collection.get(key);
+            if (shader) {
+                return shader;
+            }
+        }
+        const shader = new CanvasToWebGLShader(this._$gl, this._$context, VertexShaderSource.INSTANCE(), FragmentShaderSourceTexture.INSTANCE_TEMPLATE());
+        this._$collection.set(key, shader);
+        return shader;
+    }
     /**
      * @param  {boolean} with_color_transform
      * @return {CanvasToWebGLShader}
@@ -84,6 +102,25 @@ export class BlendShaderVariantCollection {
         this._$collection.set(key, shader);
         return shader;
     }
+    /**
+     * @param  {string}  operation
+     * @param  {boolean} with_color_transform
+     * @return {CanvasToWebGLShader}
+     * @method
+     * @public
+     */
+    getInstanceBlendShader(operation, with_color_transform) {
+        const key = `i${operation}${with_color_transform ? "y" : "n"}`;
+        if (this._$collection.has(key)) {
+            const shader = this._$collection.get(key);
+            if (shader) {
+                return shader;
+            }
+        }
+        const shader = new CanvasToWebGLShader(this._$gl, this._$context, VertexShaderSource.INSTANCE_BLEND(), FragmentShaderSourceBlend.INSTANCE_TEMPLATE(operation, with_color_transform));
+        this._$collection.set(key, shader);
+        return shader;
+    }
     /**
      * @param  {WebGLShaderUniform} uniform
      * @param  {number}  x
@@ -141,6 +178,44 @@ export class BlendShaderVariantCollection {
             mediump[7] = ct7;
         }
     }
+    /**
+     * @param  {WebGLShaderUniform} uniform
+     * @param  {number}  x
+     * @param  {number}  y
+     * @param  {number}  w
+     * @param  {number}  h
+     * @param  {Float32Array} matrix
+     * @param  {number}  render_width
+     * @param  {number}  render_height
+     * @param  {number}  ct0
+     * @param  {number}  ct1
+     * @param  {number}  ct2
+     * @param  {number}  ct3
+     * @param  {number}  ct4
+     * @param  {number}  ct5
+     * @param  {number}  ct6
+     * @param  {number}  ct7
+     * @return {void}
+     * @method
+     * @public
+     */
+    pushNormalBlend(instance, x, y, w, h, matrix, render_width, render_height, ct0 = 1, ct1 = 1, ct2 = 1, ct3 = 1, ct4 = 0, ct5 = 0, ct6 = 0, ct7 = 0) {
+        // texture rectangle
+        instance.attributes.push(
+        // texture rectangle
+        x / $RENDER_SIZE, y / $RENDER_SIZE, w / $RENDER_SIZE, h / $RENDER_SIZE, 
+        // texture width, height and viewport width, height
+        w, h, render_width, render_height, 
+        // matrix tx, ty and with_color_transform
+        matrix[6], matrix[7], 
+        // matrix scale0, rotate0, scale1, rotate1
+        matrix[0], matrix[1], matrix[3], matrix[4], 
+        // mulColor
+        ct0, ct1, ct2, ct3, 
+        // addColor
+        ct4, ct5, ct6, ct7);
+        instance.count++;
+    }
     /**
      * @param  {WebGLShaderUniform} uniform
      * @param  {number} x
@@ -198,6 +273,68 @@ export class BlendShaderVariantCollection {
      * @method
      * @public
      */
+    setInstanceBlendUniform(uniform, x, y, w, h, texture_width, texture_height, matrix, render_width, render_height, with_color_transform, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7) {
+        const textures = uniform.textures;
+        textures[0] = 0;
+        textures[1] = 1;
+        const highp = uniform.highp;
+        // vertex: u_rect
+        highp[0] = x;
+        highp[1] = y;
+        highp[2] = w;
+        highp[3] = h;
+        // vertex: u_matrix
+        highp[4] = matrix[0];
+        highp[5] = matrix[1];
+        highp[6] = matrix[2];
+        highp[8] = matrix[3];
+        highp[9] = matrix[4];
+        highp[10] = matrix[5];
+        highp[12] = matrix[6];
+        highp[13] = matrix[7];
+        highp[14] = matrix[8];
+        // vertex: u_viewport
+        highp[7] = render_width;
+        highp[11] = render_height;
+        // vertex: u_size
+        highp[16] = texture_width;
+        highp[17] = texture_height;
+        if (with_color_transform) {
+            const mediump = uniform.mediump;
+            // fragment: u_color_transform_mul
+            mediump[0] = ct0;
+            mediump[1] = ct1;
+            mediump[2] = ct2;
+            mediump[3] = ct3;
+            // fragment: u_color_transform_add
+            mediump[4] = ct4;
+            mediump[5] = ct5;
+            mediump[6] = ct6;
+            mediump[7] = ct7;
+        }
+    }
+    /**
+     * @param  {WebGLShaderUniform} uniform
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} w
+     * @param  {number} h
+     * @param  {Float32Array} matrix
+     * @param  {number} render_width
+     * @param  {number} render_height
+     * @param  {Float32Array} with_color_transform
+     * @param  {number} ct0
+     * @param  {number} ct1
+     * @param  {number} ct2
+     * @param  {number} ct3
+     * @param  {number} ct4
+     * @param  {number} ct5
+     * @param  {number} ct6
+     * @param  {number} ct7
+     * @return {void}
+     * @method
+     * @public
+     */
     setBlendUniform(uniform, x, y, w, h, matrix, render_width, render_height, with_color_transform, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7) {
         const textures = uniform.textures;
         textures[0] = 0;

package/dist/shader/vertex/VertexShaderSource.d.ts

@@ -14,6 +14,18 @@ export declare class VertexShaderSource {
      * @static
      */
     static BLEND(): string;
+    /**
+     * @return {string}
+     * @method
+     * @static
+     */
+    static INSTANCE_BLEND(): string;
+    /**
+     * @return {string}
+     * @method
+     * @static
+     */
+    static INSTANCE(): string;
     /**
      * @return {string}
      * @method

package/dist/shader/vertex/VertexShaderSource.js

@@ -54,6 +54,78 @@ void main() {
     gl_Position = vec4(position.x, -position.y, 0.0, 1.0);
 }
 
+`;
+    }
+    /**
+     * @return {string}
+     * @method
+     * @static
+     */
+    static INSTANCE_BLEND() {
+        return `#version 300 es
+
+layout (location = 0) in vec2 a_vertex;
+
+uniform vec4 u_highp[5];
+
+out vec2 v_src_coord;
+out vec2 v_dst_coord;
+
+void main() {
+    vec4 rect     = vec4(u_highp[0].x, u_highp[0].y, u_highp[0].z, u_highp[0].w);
+    vec2 size     = vec2(u_highp[4].x, u_highp[4].y);
+    mat3 matrix   = mat3(u_highp[1].xyz, u_highp[2].xyz, u_highp[3].xyz);
+    vec2 viewport = vec2(u_highp[1].w, u_highp[2].w);
+
+    v_src_coord = a_vertex * rect.zw + rect.xy;
+    v_dst_coord = a_vertex;
+
+    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
+     */
+    static INSTANCE() {
+        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 mul;
+out vec4 add;
+
+void main() {
+    v_coord = a_vertex * a_rect.zw + a_rect.xy;
+    mul = a_mul;
+    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/dist/shader/vertex/VertexShaderSourceFill.js

@@ -16,11 +16,15 @@ export class VertexShaderSourceFill {
         const bezierAttribute = for_mask
             ? this.ATTRIBUTE_BEZIER_ON()
             : "";
-        const uvVarying = for_mask ? this.VARYING_BEZIER_ON()
-            : with_uv ? this.VARYING_UV_ON()
+        const uvVarying = for_mask
+            ? this.VARYING_BEZIER_ON()
+            : with_uv
+                ? this.VARYING_UV_ON()
                 : "";
-        const uvStatement = for_mask ? this.STATEMENT_BEZIER_ON()
-            : with_uv ? this.STATEMENT_UV_ON()
+        const uvStatement = for_mask
+            ? this.STATEMENT_BEZIER_ON()
+            : with_uv
+                ? this.STATEMENT_UV_ON()
                 : "";
         const gridFunction = has_grid
             ? VertexShaderLibrary.FUNCTION_GRID_ON(with_uv ? 5 : 0)