@next2d/webgl 1.18.12 → 2.0.0

package/src/Shader/Variants/Filter/service/VariantsBitmapFilterShaderService.js

@@ -0,0 +1,48 @@
+import { BITMAP_FILTER_TEMPLATE } from "../../../Fragment/Filter/FragmentShaderSourceFilter";
+import { ShaderManager } from "../../../ShaderManager";
+import { TEXTURE_TEMPLATE } from "../../../Vertex/VertexShaderSource";
+import { $collection } from "../../FilterVariants";
+/**
+ * @description BitmapFilterShaderを生成する
+ *              Create BitmapFilterShader
+ *
+ * @param  {boolean} transforms_base
+ * @param  {boolean} transforms_blur
+ * @param  {boolean} is_glow
+ * @param  {boolean} type
+ * @param  {string} transforms_base
+ * @param  {boolean} knockout
+ * @param  {boolean} applies_strength
+ * @param  {boolean} is_gradient
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = (transforms_base, transforms_blur, is_glow, type, knockout, applies_strength, is_gradient) => {
+    const key1 = transforms_base ? "y" : "n";
+    const key2 = transforms_blur ? "y" : "n";
+    const key3 = is_glow ? "y" : "n";
+    const key4 = knockout ? "y" : "n";
+    const key5 = applies_strength ? "y" : "n";
+    const key = `f${key1}${key2}${key3}${type}${key4}${key5}`;
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    let texturesLength = 1;
+    if (transforms_base) {
+        texturesLength++;
+    }
+    if (is_gradient) {
+        texturesLength++;
+    }
+    let mediumpLength = (transforms_base ? 4 : 0)
+        + (transforms_blur ? 4 : 0)
+        + (applies_strength ? 1 : 0);
+    if (!is_gradient) {
+        mediumpLength += is_glow ? 4 : 8;
+    }
+    mediumpLength = Math.ceil(mediumpLength / 4);
+    const shaderManager = new ShaderManager(TEXTURE_TEMPLATE(), BITMAP_FILTER_TEMPLATE(texturesLength, mediumpLength, transforms_base, transforms_blur, is_glow, type, knockout, applies_strength, is_gradient));
+    $collection.set(key, shaderManager);
+    return shaderManager;
+};

package/src/Shader/Variants/Filter/service/VariantsBlurFilterShaderService.d.ts

@@ -0,0 +1,11 @@
+import { ShaderManager } from "../../../ShaderManager";
+/**
+ * @description BlurFilterShaderを生成する
+ *              Create BlurFilterShader
+ *
+ * @param  {number} half_blur
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export declare const execute: (half_blur: number) => ShaderManager;

package/src/Shader/Variants/Filter/service/VariantsBlurFilterShaderService.js

@@ -0,0 +1,22 @@
+import { BLUR_FILTER_TEMPLATE } from "../../../Fragment/Filter/FragmentShaderSourceBlurFilter";
+import { ShaderManager } from "../../../ShaderManager";
+import { TEXTURE_TEMPLATE } from "../../../Vertex/VertexShaderSource";
+import { $collection } from "../../FilterVariants";
+/**
+ * @description BlurFilterShaderを生成する
+ *              Create BlurFilterShader
+ *
+ * @param  {number} half_blur
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = (half_blur) => {
+    const key = `b${half_blur}`;
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    const shaderManager = new ShaderManager(TEXTURE_TEMPLATE(), BLUR_FILTER_TEMPLATE(half_blur));
+    $collection.set(key, shaderManager);
+    return shaderManager;
+};

package/src/Shader/Variants/Filter/service/VariantsColorMatrixFilterShaderService.d.ts

@@ -0,0 +1,10 @@
+import { ShaderManager } from "../../../ShaderManager";
+/**
+ * @description ColorMatrixFilterShaderを生成する
+ *              Create ColorMatrixFilterShader
+ *
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export declare const execute: () => ShaderManager;

package/src/Shader/Variants/Filter/service/VariantsColorMatrixFilterShaderService.js

@@ -0,0 +1,21 @@
+import { COLOR_MATRIX_FILTER_TEMPLATE } from "../../../Fragment/Filter/FragmentShaderSourceColorMatrixFilter";
+import { ShaderManager } from "../../../ShaderManager";
+import { TEXTURE_TEMPLATE } from "../../../Vertex/VertexShaderSource";
+import { $collection } from "../../FilterVariants";
+/**
+ * @description ColorMatrixFilterShaderを生成する
+ *              Create ColorMatrixFilterShader
+ *
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const key = "m";
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    const shaderManager = new ShaderManager(TEXTURE_TEMPLATE(), COLOR_MATRIX_FILTER_TEMPLATE());
+    $collection.set(key, shaderManager);
+    return shaderManager;
+};

package/src/Shader/Variants/Filter/service/VariantsConvolutionFilterShaderService.d.ts

@@ -0,0 +1,14 @@
+import { ShaderManager } from "../../../ShaderManager";
+/**
+ * @description ConvolutionFilterShaderを生成する
+ *              Create ConvolutionFilterShader
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {boolean} preserve_alpha
+ * @param  {boolean} clamp
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number, preserve_alpha: boolean, clamp: boolean) => ShaderManager;

package/src/Shader/Variants/Filter/service/VariantsConvolutionFilterShaderService.js

@@ -0,0 +1,30 @@
+import { CONVOLUTION_FILTER_TEMPLATE } from "../../../Fragment/Filter/FragmentShaderSourceConvolutionFilter";
+import { ShaderManager } from "../../../ShaderManager";
+import { TEXTURE_TEMPLATE } from "../../../Vertex/VertexShaderSource";
+import { $collection } from "../../FilterVariants";
+/**
+ * @description ConvolutionFilterShaderを生成する
+ *              Create ConvolutionFilterShader
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {boolean} preserve_alpha
+ * @param  {boolean} clamp
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = (x, y, preserve_alpha, clamp) => {
+    const key1 = ("0" + x).slice(-2);
+    const key2 = ("0" + y).slice(-2);
+    const key3 = preserve_alpha ? "y" : "n";
+    const key4 = clamp ? "y" : "n";
+    const key = `c${key1}${key2}${key3}${key4}`;
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    const mediumpLength = (clamp ? 1 : 2) + Math.ceil(x * y / 4);
+    const shaderManager = new ShaderManager(TEXTURE_TEMPLATE(), CONVOLUTION_FILTER_TEMPLATE(mediumpLength, x, y, preserve_alpha, clamp));
+    $collection.set(key, shaderManager);
+    return shaderManager;
+};

package/src/Shader/Variants/Filter/service/VariantsDisplacementMapFilterShaderService.d.ts

@@ -0,0 +1,13 @@
+import { ShaderManager } from "../../../ShaderManager";
+/**
+ * @description ディスプレイスメントマップ・フィルタのシェーダーマネージャを取得する
+ *              Get the shader manager of the displacement map filter
+ *
+ * @param  {number} component_x
+ * @param  {number} component_y
+ * @param  {number} mode
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export declare const execute: (component_x: number, component_y: number, mode: number) => ShaderManager;

package/src/Shader/Variants/Filter/service/VariantsDisplacementMapFilterShaderService.js

@@ -0,0 +1,25 @@
+import { ShaderManager } from "../../../ShaderManager";
+import { $collection } from "../../FilterVariants";
+import { TEXTURE_TEMPLATE } from "../../../Vertex/VertexShaderSource";
+import { DISPLACEMENT_MAP_FILTER_TEMPLATE } from "../../../Fragment/Filter/FragmentShaderSourceDisplacementMapFilter";
+/**
+ * @description ディスプレイスメントマップ・フィルタのシェーダーマネージャを取得する
+ *              Get the shader manager of the displacement map filter
+ *
+ * @param  {number} component_x
+ * @param  {number} component_y
+ * @param  {number} mode
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = (component_x, component_y, mode) => {
+    const key = `d${component_x}${component_y}${mode}`;
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    const mediumpLength = mode === 1 ? 3 : 2;
+    const shaderManager = new ShaderManager(TEXTURE_TEMPLATE(), DISPLACEMENT_MAP_FILTER_TEMPLATE(mediumpLength, component_x, component_y, mode));
+    $collection.set(key, shaderManager);
+    return shaderManager;
+};

package/src/Shader/Variants/FilterVariants.d.ts

@@ -0,0 +1,9 @@
+import type { ShaderManager } from "../ShaderManager";
+/**
+ * @description フィルターのシェーダー管理クラスのコレクション
+ *              Collection of filter shader management classes
+ *
+ * @type {Map<string, ShaderInstancedManager>}
+ * @public
+ */
+export declare const $collection: Map<string, ShaderManager>;

package/src/Shader/Variants/FilterVariants.js

@@ -0,0 +1,8 @@
+/**
+ * @description フィルターのシェーダー管理クラスのコレクション
+ *              Collection of filter shader management classes
+ *
+ * @type {Map<string, ShaderInstancedManager>}
+ * @public
+ */
+export const $collection = new Map();

package/src/Shader/Variants/Gradient/service/VariantsGradientCreateCollectionKeyService.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description グラデーションのマップキーを生成
+ *              Generates a map key for the gradient
+ *
+ * @param  {boolean} has_grid
+ * @param  {boolean} is_radial
+ * @param  {boolean} has_focal_point
+ * @param  {number} spread_method
+ * @return {string}
+ * @method
+ * @protected
+ */
+export declare const execute: (has_grid: boolean, is_radial: boolean, has_focal_point: boolean, spread_method: number) => string;

package/src/Shader/Variants/Gradient/service/VariantsGradientCreateCollectionKeyService.js

@@ -0,0 +1,19 @@
+/**
+ * @description グラデーションのマップキーを生成
+ *              Generates a map key for the gradient
+ *
+ * @param  {boolean} has_grid
+ * @param  {boolean} is_radial
+ * @param  {boolean} has_focal_point
+ * @param  {number} spread_method
+ * @return {string}
+ * @method
+ * @protected
+ */
+export const execute = (has_grid, is_radial, has_focal_point, spread_method) => {
+    const key1 = has_grid ? "y" : "n";
+    const key2 = is_radial ? "y" : "n";
+    const key3 = is_radial && has_focal_point ? "y" : "n";
+    const key4 = `${spread_method}`;
+    return `${key1}${key2}${key3}${key4}`;
+};

package/src/Shader/Variants/Gradient/usecase/VariantsGradientShapeShaderUseCase.d.ts

@@ -0,0 +1,14 @@
+import { ShaderManager } from "../../../ShaderManager";
+/**
+ * @description グラデーションのシェーダを生成して返却
+ *              Generate and return the shader of gradient
+ *
+ * @param  {boolean} is_radial
+ * @param  {boolean} has_focal_point
+ * @param  {number} spread_method
+ * @param  {boolean} use_grid
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export declare const execute: (is_radial: boolean, has_focal_point: boolean, spread_method: number, use_grid: boolean) => ShaderManager;

package/src/Shader/Variants/Gradient/usecase/VariantsGradientShapeShaderUseCase.js

@@ -0,0 +1,28 @@
+import { ShaderManager } from "../../../ShaderManager";
+import { $collection } from "../../GradientVariants";
+import { execute as variantsGradientCreateCollectionKeyService } from "../service/VariantsGradientCreateCollectionKeyService";
+import { FILL_TEMPLATE } from "../../../Vertex/VertexShaderSourceFill";
+import { GRADIENT_TEMPLATE } from "../../../Fragment/FragmentShaderSourceGradient";
+/**
+ * @description グラデーションのシェーダを生成して返却
+ *              Generate and return the shader of gradient
+ *
+ * @param  {boolean} is_radial
+ * @param  {boolean} has_focal_point
+ * @param  {number} spread_method
+ * @param  {boolean} use_grid
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = (is_radial, has_focal_point, spread_method, use_grid) => {
+    const key = variantsGradientCreateCollectionKeyService(use_grid, is_radial, has_focal_point, spread_method);
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    const highpLength = (use_grid ? 14 : 5) + 1;
+    const fragmentIndex = highpLength - 1;
+    const shaderManager = new ShaderManager(FILL_TEMPLATE(highpLength, true, false, use_grid), GRADIENT_TEMPLATE(highpLength, fragmentIndex, is_radial, has_focal_point, spread_method));
+    $collection.set(key, shaderManager);
+    return shaderManager;
+};

package/src/Shader/Variants/GradientLUT/service/VariantsGradientLUTShaderService.d.ts

@@ -0,0 +1,12 @@
+import { ShaderManager } from "../../../ShaderManager";
+/**
+ * @description グラデーションLUTのシェーダーを返却
+ *              Returns the shader of the gradient LUT
+ *
+ * @param  {number} stops_length
+ * @param  {boolean} is_linear_space
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export declare const execute: (stops_length: number, is_linear_space: boolean) => ShaderManager;

package/src/Shader/Variants/GradientLUT/service/VariantsGradientLUTShaderService.js

@@ -0,0 +1,26 @@
+import { $collection } from "../../GradientLUTVariants";
+import { ShaderManager } from "../../../ShaderManager";
+import { TEXTURE_TEMPLATE } from "../../../Vertex/VertexShaderSource";
+import { GRADIENT_LUT_TEMPLATE } from "../../../Fragment/FragmentShaderSourceGradientLUT";
+/**
+ * @description グラデーションLUTのシェーダーを返却
+ *              Returns the shader of the gradient LUT
+ *
+ * @param  {number} stops_length
+ * @param  {boolean} is_linear_space
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = (stops_length, is_linear_space) => {
+    const key1 = ("00" + stops_length).slice(-3);
+    const key2 = is_linear_space ? "y" : "n";
+    const key = `l${key1}${key2}`;
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    const mediumpLength = Math.ceil(stops_length * 5 / 4);
+    const shader = new ShaderManager(TEXTURE_TEMPLATE(), GRADIENT_LUT_TEMPLATE(mediumpLength, stops_length, is_linear_space));
+    $collection.set(key, shader);
+    return shader;
+};

package/src/Shader/Variants/GradientLUTVariants.d.ts

@@ -0,0 +1,9 @@
+import type { ShaderManager } from "../ShaderManager";
+/**
+ * @description グラデーションLUTのシェーダー管理クラスのコレクション
+ *              Collection of gradient LUT shader management classes
+ *
+ * @type {Map<string, ShaderManager>}
+ * @public
+ */
+export declare const $collection: Map<string, ShaderManager>;

package/src/Shader/Variants/GradientLUTVariants.js

@@ -0,0 +1,8 @@
+/**
+ * @description グラデーションLUTのシェーダー管理クラスのコレクション
+ *              Collection of gradient LUT shader management classes
+ *
+ * @type {Map<string, ShaderManager>}
+ * @public
+ */
+export const $collection = new Map();

package/src/Shader/Variants/GradientVariants.d.ts

@@ -0,0 +1,9 @@
+import type { ShaderManager } from "../ShaderManager";
+/**
+ * @description グラデーションLUTのシェーダー管理クラスのコレクション
+ *              Collection of gradient LUT shader management classes
+ *
+ * @type {Map<string, ShaderManager>}
+ * @public
+ */
+export declare const $collection: Map<string, ShaderManager>;

package/src/Shader/Variants/GradientVariants.js

@@ -0,0 +1,8 @@
+/**
+ * @description グラデーションLUTのシェーダー管理クラスのコレクション
+ *              Collection of gradient LUT shader management classes
+ *
+ * @type {Map<string, ShaderManager>}
+ * @public
+ */
+export const $collection = new Map();

package/src/Shader/Variants/Shape/service/VariantsShapeMaskShaderService.d.ts

@@ -0,0 +1,11 @@
+import { ShaderManager } from "../../../ShaderManager";
+/**
+ * @description Shapeのマスクのシェーダを返却
+ *              Returns the mask shader of Shape
+ *
+ * @param  {boolean} use_grid
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export declare const execute: (use_grid: boolean) => ShaderManager;

package/src/Shader/Variants/Shape/service/VariantsShapeMaskShaderService.js

@@ -0,0 +1,22 @@
+import { ShaderManager } from "../../../ShaderManager";
+import { $collection } from "../../ShapeVariants";
+import { FILL_TEMPLATE } from "../../../Vertex/VertexShaderSourceFill";
+import { MASK } from "../../../Fragment/FragmentShaderSource";
+/**
+ * @description Shapeのマスクのシェーダを返却
+ *              Returns the mask shader of Shape
+ *
+ * @param  {boolean} use_grid
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = (use_grid) => {
+    const key = `m${use_grid ? "y" : "n"}`;
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    const shaderManager = new ShaderManager(FILL_TEMPLATE(use_grid ? 9 : 0, false, true, use_grid), MASK());
+    $collection.set(key, shaderManager);
+    return shaderManager;
+};

package/src/Shader/Variants/Shape/service/VariantsShapeRectShaderService.d.ts

@@ -0,0 +1,10 @@
+import { ShaderManager } from "../../../ShaderManager";
+/**
+ * @description 画面全体の矩形専用のシェーダを返却
+ *              Returns a shader dedicated to the entire screen rectangle
+ *
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export declare const execute: () => ShaderManager;

package/src/Shader/Variants/Shape/service/VariantsShapeRectShaderService.js

@@ -0,0 +1,21 @@
+import { ShaderManager } from "../../../ShaderManager";
+import { $collection } from "../../ShapeVariants";
+import { FILL_RECT_TEMPLATE } from "../../../Vertex/VertexShaderSourceFill";
+import { FILL_RECT_COLOR } from "../../../Fragment/FragmentShaderSource";
+/**
+ * @description 画面全体の矩形専用のシェーダを返却
+ *              Returns a shader dedicated to the entire screen rectangle
+ *
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const key = "rmnn";
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    const shaderManager = new ShaderManager(FILL_RECT_TEMPLATE(), FILL_RECT_COLOR());
+    $collection.set(key, shaderManager);
+    return shaderManager;
+};

package/src/Shader/Variants/Shape/service/VariantsShapeSolidColorShaderService.d.ts

@@ -0,0 +1,11 @@
+import { ShaderManager } from "../../../ShaderManager";
+/**
+ * @description Shapeのノーマルな塗りのシェーダを返却
+ *              Returns the normal fill shader of Shape
+ *
+ * @param  {boolean} use_grid
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export declare const execute: (use_grid: boolean) => ShaderManager;

package/src/Shader/Variants/Shape/service/VariantsShapeSolidColorShaderService.js

@@ -0,0 +1,22 @@
+import { ShaderManager } from "../../../ShaderManager";
+import { $collection } from "../../ShapeVariants";
+import { FILL_TEMPLATE } from "../../../Vertex/VertexShaderSourceFill";
+import { SOLID_FILL_COLOR } from "../../../Fragment/FragmentShaderSource";
+/**
+ * @description Shapeのノーマルな塗りのシェーダを返却
+ *              Returns the normal fill shader of Shape
+ *
+ * @param  {boolean} use_grid
+ * @return {ShaderManager}
+ * @method
+ * @protected
+ */
+export const execute = (use_grid) => {
+    const key = `s${use_grid ? "y" : "n"}`;
+    if ($collection.has(key)) {
+        return $collection.get(key);
+    }
+    const shaderManager = new ShaderManager(FILL_TEMPLATE(use_grid ? 9 : 0, false, false, use_grid), SOLID_FILL_COLOR());
+    $collection.set(key, shaderManager);
+    return shaderManager;
+};

package/src/Shader/Variants/ShapeVariants.d.ts

@@ -0,0 +1,9 @@
+import type { ShaderManager } from "../ShaderManager";
+/**
+ * @description シェイプのシェーダー管理クラスのコレクション
+ *              Collection of shape shader management classes
+ *
+ * @type {Map<string, ShaderManager>}
+ * @public
+ */
+export declare const $collection: Map<string, ShaderManager>;

package/src/Shader/Variants/ShapeVariants.js

@@ -0,0 +1,8 @@
+/**
+ * @description シェイプのシェーダー管理クラスのコレクション
+ *              Collection of shape shader management classes
+ *
+ * @type {Map<string, ShaderManager>}
+ * @public
+ */
+export const $collection = new Map();

package/src/Shader/Vertex/VertexShaderLibrary.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @description グリッドがオフの場合の頂点シェーダー
+ *              Vertex shader when grid is off
+ *
+ * @return {string}
+ * @method
+ * @static
+ */
+export declare const FUNCTION_GRID_OFF: () => string;
+/**
+ * @description グリッドがオンの場合の頂点シェーダー
+ *              Vertex shader when grid is on
+ *
+ * @param  {number} index
+ * @return {STRing}
+ * @method
+ * @static
+ */
+export declare const FUNCTION_GRID_ON: (index: number) => string;

package/{dist/shader/vertex → src/Shader/Vertex}/VertexShaderLibrary.js

@@ -1,38 +1,29 @@
 /**
- * @class
+ * @description グリッドがオフの場合の頂点シェーダー
+ *              Vertex shader when grid is off
+ *
+ * @return {string}
+ * @method
+ * @static
  */
-export class VertexShaderLibrary {
-    /**
-     * @return {string}
-     * @method
-     * @static
-     */
-    static FUNCTION_GRID_OFF() {
-        return `
-
+export const FUNCTION_GRID_OFF = () => {
+    return `
 vec2 applyMatrix(in vec2 vertex) {
-    mat3 matrix = mat3(
-        u_highp[0].xyz,
-        u_highp[1].xyz,
-        u_highp[2].xyz
-    );
-
-    vec2 position = (matrix * vec3(vertex, 1.0)).xy;
-
-    return position;
-}
-
-`;
-    }
-    /**
-     * @param  {number} index
-     * @return {string}
-     * @method
-     * @static
-     */
-    static FUNCTION_GRID_ON(index) {
-        return `
-
+    mat3 matrix = mat3(a_matrix0, a_matrix1, a_matrix2);
+    return (matrix * vec3(vertex, 1.0)).xy;
+}`;
+};
+/**
+ * @description グリッドがオンの場合の頂点シェーダー
+ *              Vertex shader when grid is on
+ *
+ * @param  {number} index
+ * @return {STRing}
+ * @method
+ * @static
+ */
+export const FUNCTION_GRID_ON = (index) => {
+    return `
 vec2 applyMatrix(in vec2 vertex) {
     mat3 parent_matrix = mat3(
         u_highp[${index}].xyz,
@@ -44,11 +35,12 @@ vec2 applyMatrix(in vec2 vertex) {
         u_highp[${index + 4}].xyz,
         u_highp[${index + 5}].xyz
     );
+
     vec2 parent_offset = vec2(u_highp[${index + 2}].w, u_highp[${index + 3}].w);
     vec2 parent_size   = vec2(u_highp[${index + 4}].w, u_highp[${index + 5}].w);
     vec4 grid_min = u_highp[${index + 6}];
     vec4 grid_max = u_highp[${index + 7}];
-
+    
     vec2 position = (parent_matrix * vec3(vertex, 1.0)).xy;
     position = (position - parent_offset) / parent_size;
 
@@ -61,15 +53,13 @@ vec2 applyMatrix(in vec2 vertex) {
     vec2 pc = position - grid_max.st;
 
     position = (ga.pq / ga.st) * min(pa, ga.st)
-             + (gb.pq / gb.st) * clamp(pb, vec2(0.0), gb.st)
-             + (gc.pq / gc.st) * max(vec2(0.0), pc);
+                + (gb.pq / gb.st) * clamp(pb, vec2(0.0), gb.st)
+                + (gc.pq / gc.st) * max(vec2(0.0), pc);
 
     position = position * parent_size + parent_offset;
     position = (ancestor_matrix * vec3(position, 1.0)).xy;
 
-    return position;
-}
-
-`;
-    }
-}
+    position = position + vec2(u_highp[${index + 8}].x, u_highp[${index + 8}].y);
+    return position / vec2(u_highp[0].w, u_highp[1].w);
+}`;
+};