diff --git a/package-lock.json b/package-lock.json
index 9ab929e8..56b285df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,12 +16,12 @@
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "^9.9.1",
-        "@types/node": "^22.5.3",
+        "@eslint/js": "^9.10.0",
+        "@types/node": "^22.5.4",
         "@typescript-eslint/eslint-plugin": "^8.4.0",
         "@typescript-eslint/parser": "^8.4.0",
         "@vitest/web-worker": "^2.0.5",
-        "eslint": "^9.9.1",
+        "eslint": "^9.10.0",
         "eslint-plugin-unused-imports": "^4.1.3",
         "fflate": "^0.8.2",
         "globals": "^15.9.0",
@@ -495,30 +495,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@eslint/config-array/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/@eslint/eslintrc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
@@ -543,17 +519,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -567,23 +532,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/@eslint/js": {
-      "version": "9.9.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.1.tgz",
-      "integrity": "sha512-xIDQRsfg5hNBqHz04H1R3scSVwmI+KUbqjsQKHKQ1DAUSaUjYPReZZmS/5PNiKu1fUvzDd6H7DEDKACSEhu+TQ==",
+      "version": "9.10.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.10.0.tgz",
+      "integrity": "sha512-fuXtbiP5GWIn8Fz+LWoOMVf/Jxm+aajZYkhi6CuEm4SxymFM+eUWzbO9qXT+L0iCkL5+KGYMCSGxo686H19S1g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -600,6 +552,19 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.1.0.tgz",
+      "integrity": "sha512-autAXT203ixhqei9xt+qkYOvY8l6LAFIdT2UXc/RPNeUVfqRF1BV94GTJyVPFKT8nFM6MyVJhjLj9E8JWvf5zQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -1015,9 +980,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.5.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.3.tgz",
-      "integrity": "sha512-njripolh85IA9SQGTAqbmnNZTdxv7X/4OYGPz8tgy5JDr8MP+uDBa921GpYEoDDnwm0Hmn5ZPeJgiiSTPoOzkQ==",
+      "version": "22.5.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz",
+      "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1173,6 +1138,32 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@typescript-eslint/utils": {
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.4.0.tgz",
@@ -1428,13 +1419,14 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
     "node_modules/braces": {
@@ -1570,25 +1562,18 @@
       }
     },
     "node_modules/cssstyle": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
-      "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
+      "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "rrweb-cssom": "^0.6.0"
+        "rrweb-cssom": "^0.7.1"
       },
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/cssstyle/node_modules/rrweb-cssom": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-      "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -1604,13 +1589,13 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -1775,9 +1760,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.9.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.9.1.tgz",
-      "integrity": "sha512-dHvhrbfr4xFQ9/dq+jcVneZMyRYLjggWjk6RVsIiHsP8Rz6yZ8LvZ//iU4TrZF+SXWG+JkNF2OyiZRvzgRDqMg==",
+      "version": "9.10.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.10.0.tgz",
+      "integrity": "sha512-Y4D0IgtBZfOcOUAIQTSXBKoNGfY0REGqHJG6+Q81vNippW5YlKjHFj4soMxamKK1NXHUWuBZTLdU3Km+L/pcHw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1785,7 +1770,8 @@
         "@eslint-community/regexpp": "^4.11.0",
         "@eslint/config-array": "^0.18.0",
         "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.9.1",
+        "@eslint/js": "9.10.0",
+        "@eslint/plugin-kit": "^0.1.0",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.3.0",
         "@nodelib/fs.walk": "^1.2.8",
@@ -1808,7 +1794,6 @@
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
         "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
@@ -1880,17 +1865,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
     "node_modules/eslint/node_modules/eslint-visitor-keys": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz",
@@ -1904,19 +1878,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/espree": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz",
@@ -2656,25 +2617,22 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": "*"
       }
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true,
       "license": "MIT"
     },
@@ -2890,9 +2848,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.44",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.44.tgz",
-      "integrity": "sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==",
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "dev": true,
       "funding": [
         {
@@ -3145,9 +3103,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
@@ -3262,9 +3220,9 @@
       }
     },
     "node_modules/tinyspy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
-      "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
diff --git a/package.json b/package.json
index 72c0862f..45078792 100644
--- a/package.json
+++ b/package.json
@@ -46,12 +46,12 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.9.1",
-    "@types/node": "^22.5.3",
+    "@eslint/js": "^9.10.0",
+    "@types/node": "^22.5.4",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
     "@typescript-eslint/parser": "^8.4.0",
     "@vitest/web-worker": "^2.0.5",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "eslint-plugin-unused-imports": "^4.1.3",
     "fflate": "^0.8.2",
     "globals": "^15.9.0",
diff --git a/packages/webgl/src/Context/usecase/ContextClipUseCase.ts b/packages/webgl/src/Context/usecase/ContextClipUseCase.ts
index c0f7b544..21f0dd7b 100644
--- a/packages/webgl/src/Context/usecase/ContextClipUseCase.ts
+++ b/packages/webgl/src/Context/usecase/ContextClipUseCase.ts
@@ -23,7 +23,7 @@ export const execute = (has_grid: boolean): void =>
 
     const vertexArrayObject = vertexArrayObjectCreateFillObjectUseCase(vertices);
     const shaderManager = variantsShapeMaskShaderService(false, has_grid);
-    shaderManagerSetMaskUniformService(shaderManager, has_grid);
+    // shaderManagerSetMaskUniformService(shaderManager, has_grid);
     shaderManagerFillUseCase(shaderManager, vertexArrayObject);
 
     // release vertex array
diff --git a/packages/webgl/src/Context/usecase/ContextFillUseCase.ts b/packages/webgl/src/Context/usecase/ContextFillUseCase.ts
index fc05d819..022eb3ad 100644
--- a/packages/webgl/src/Context/usecase/ContextFillUseCase.ts
+++ b/packages/webgl/src/Context/usecase/ContextFillUseCase.ts
@@ -38,7 +38,7 @@ export const execute = (has_grid: boolean): void =>
     $gl.colorMask(false, false, false, false);
 
     const coverageShader = variantsShapeMaskShaderService(false, has_grid);
-    shaderManagerSetMaskUniformService(coverageShader, has_grid);
+    // shaderManagerSetMaskUniformService(coverageShader, has_grid);
     shaderManagerFillUseCase(coverageShader, vertexArrayObject);
     $gl.disable($gl.SAMPLE_ALPHA_TO_COVERAGE);
 
@@ -48,7 +48,7 @@ export const execute = (has_grid: boolean): void =>
     $gl.colorMask(true, true, true, true);
 
     const shaderManager = variantsShapeSolidColorShaderService(false, has_grid);
-    shaderManagerSetFillUniformService(shaderManager, has_grid);
+    // shaderManagerSetFillUniformService(shaderManager, has_grid);
     shaderManagerFillUseCase(shaderManager, vertexArrayObject);
 
     // mask off
diff --git a/packages/webgl/src/Mesh/service/MeshFillGenerateService.ts b/packages/webgl/src/Mesh/service/MeshFillGenerateService.ts
index 5b4b7ad0..656c4c9c 100644
--- a/packages/webgl/src/Mesh/service/MeshFillGenerateService.ts
+++ b/packages/webgl/src/Mesh/service/MeshFillGenerateService.ts
@@ -1,4 +1,9 @@
 import type { IPath } from "../../interface/IPath";
+import {
+    $context,
+    $getViewportWidth,
+    $getViewportHeight
+} from "../../WebGLUtil";
 
 /**
  * @description 塗りのメッシュを生成する
@@ -13,10 +18,25 @@ import type { IPath } from "../../interface/IPath";
  */
 export const execute = (vertex: IPath, buffer: Float32Array, index: number): number =>
 {
+    const red   = $context.$fillStyle[0];
+    const green = $context.$fillStyle[1];
+    const blue  = $context.$fillStyle[2];
+    const alpha = $context.$fillStyle[3];
+
+    const matrix = $context.$matrix.slice();
+    const width  = $getViewportWidth();
+    const height = $getViewportHeight();
+    matrix[0] /= width;
+    matrix[1] /= width;
+    matrix[3] /= height;
+    matrix[4] /= height;
+    matrix[6] /= width;
+    matrix[7] /= height;
+
     const length: number = vertex.length - 5;
     for (let idx: number = 3; idx < length; idx += 3) {
 
-        let position: number = index * 4;
+        let position: number = index * 17;
         if (vertex[idx + 2]) {
 
             buffer[position++] = vertex[idx - 3] as number;
@@ -24,16 +44,61 @@ export const execute = (vertex: IPath, buffer: Float32Array, index: number): num
             buffer[position++] = 0;
             buffer[position++] = 0;
 
+            buffer[position++] = red;
+            buffer[position++] = green;
+            buffer[position++] = blue;
+            buffer[position++] = alpha;
+
+            buffer[position++] = matrix[0];
+            buffer[position++] = matrix[1];
+            buffer[position++] = matrix[2];
+            buffer[position++] = matrix[3];
+            buffer[position++] = matrix[4];
+            buffer[position++] = matrix[5];
+            buffer[position++] = matrix[6];
+            buffer[position++] = matrix[7];
+            buffer[position++] = matrix[8];
+
             buffer[position++] = vertex[idx] as number;
             buffer[position++] = vertex[idx + 1] as number;
             buffer[position++] = 0.5;
             buffer[position++] = 0;
 
+            buffer[position++] = red;
+            buffer[position++] = green;
+            buffer[position++] = blue;
+            buffer[position++] = alpha;
+
+            buffer[position++] = matrix[0];
+            buffer[position++] = matrix[1];
+            buffer[position++] = matrix[2];
+            buffer[position++] = matrix[3];
+            buffer[position++] = matrix[4];
+            buffer[position++] = matrix[5];
+            buffer[position++] = matrix[6];
+            buffer[position++] = matrix[7];
+            buffer[position++] = matrix[8];
+
             buffer[position++] = vertex[idx + 3] as number;
             buffer[position++] = vertex[idx + 4] as number;
             buffer[position++] = 1;
             buffer[position++] = 1;
 
+            buffer[position++] = red;
+            buffer[position++] = green;
+            buffer[position++] = blue;
+            buffer[position++] = alpha;
+
+            buffer[position++] = matrix[0];
+            buffer[position++] = matrix[1];
+            buffer[position++] = matrix[2];
+            buffer[position++] = matrix[3];
+            buffer[position++] = matrix[4];
+            buffer[position++] = matrix[5];
+            buffer[position++] = matrix[6];
+            buffer[position++] = matrix[7];
+            buffer[position++] = matrix[8];
+
         } else if (vertex[idx + 5]) {
 
             buffer[position++] = vertex[0] as number;
@@ -41,16 +106,61 @@ export const execute = (vertex: IPath, buffer: Float32Array, index: number): num
             buffer[position++] = 0.5;
             buffer[position++] = 0.5;
 
+            buffer[position++] = red;
+            buffer[position++] = green;
+            buffer[position++] = blue;
+            buffer[position++] = alpha;
+
+            buffer[position++] = matrix[0];
+            buffer[position++] = matrix[1];
+            buffer[position++] = matrix[2];
+            buffer[position++] = matrix[3];
+            buffer[position++] = matrix[4];
+            buffer[position++] = matrix[5];
+            buffer[position++] = matrix[6];
+            buffer[position++] = matrix[7];
+            buffer[position++] = matrix[8];
+
             buffer[position++] = vertex[idx] as number;
             buffer[position++] = vertex[idx + 1] as number;
             buffer[position++] = 0.5;
             buffer[position++] = 0.5;
 
+            buffer[position++] = red;
+            buffer[position++] = green;
+            buffer[position++] = blue;
+            buffer[position++] = alpha;
+
+            buffer[position++] = matrix[0];
+            buffer[position++] = matrix[1];
+            buffer[position++] = matrix[2];
+            buffer[position++] = matrix[3];
+            buffer[position++] = matrix[4];
+            buffer[position++] = matrix[5];
+            buffer[position++] = matrix[6];
+            buffer[position++] = matrix[7];
+            buffer[position++] = matrix[8];
+
             buffer[position++] = vertex[idx + 6] as number;
             buffer[position++] = vertex[idx + 7] as number;
             buffer[position++] = 0.5;
             buffer[position++] = 0.5;
 
+            buffer[position++] = red;
+            buffer[position++] = green;
+            buffer[position++] = blue;
+            buffer[position++] = alpha;
+
+            buffer[position++] = matrix[0];
+            buffer[position++] = matrix[1];
+            buffer[position++] = matrix[2];
+            buffer[position++] = matrix[3];
+            buffer[position++] = matrix[4];
+            buffer[position++] = matrix[5];
+            buffer[position++] = matrix[6];
+            buffer[position++] = matrix[7];
+            buffer[position++] = matrix[8];
+
         } else {
 
             buffer[position++] = vertex[0] as number;
@@ -58,16 +168,60 @@ export const execute = (vertex: IPath, buffer: Float32Array, index: number): num
             buffer[position++] = 0.5;
             buffer[position++] = 0.5;
 
+            buffer[position++] = red;
+            buffer[position++] = green;
+            buffer[position++] = blue;
+            buffer[position++] = alpha;
+
+            buffer[position++] = matrix[0];
+            buffer[position++] = matrix[1];
+            buffer[position++] = matrix[2];
+            buffer[position++] = matrix[3];
+            buffer[position++] = matrix[4];
+            buffer[position++] = matrix[5];
+            buffer[position++] = matrix[6];
+            buffer[position++] = matrix[7];
+            buffer[position++] = matrix[8];
+
             buffer[position++] = vertex[idx] as number;
             buffer[position++] = vertex[idx + 1] as number;
             buffer[position++] = 0.5;
             buffer[position++] = 0.5;
 
+            buffer[position++] = red;
+            buffer[position++] = green;
+            buffer[position++] = blue;
+            buffer[position++] = alpha;
+
+            buffer[position++] = matrix[0];
+            buffer[position++] = matrix[1];
+            buffer[position++] = matrix[2];
+            buffer[position++] = matrix[3];
+            buffer[position++] = matrix[4];
+            buffer[position++] = matrix[5];
+            buffer[position++] = matrix[6];
+            buffer[position++] = matrix[7];
+            buffer[position++] = matrix[8];
+
             buffer[position++] = vertex[idx + 3] as number;
             buffer[position++] = vertex[idx + 4] as number;
             buffer[position++] = 0.5;
             buffer[position++] = 0.5;
 
+            buffer[position++] = red;
+            buffer[position++] = green;
+            buffer[position++] = blue;
+            buffer[position++] = alpha;
+
+            buffer[position++] = matrix[0];
+            buffer[position++] = matrix[1];
+            buffer[position++] = matrix[2];
+            buffer[position++] = matrix[3];
+            buffer[position++] = matrix[4];
+            buffer[position++] = matrix[5];
+            buffer[position++] = matrix[6];
+            buffer[position++] = matrix[7];
+            buffer[position++] = matrix[8];
         }
 
         index += 3;
diff --git a/packages/webgl/src/Mesh/usecase/MeshFillGenerateUseCase.ts b/packages/webgl/src/Mesh/usecase/MeshFillGenerateUseCase.ts
index 0aeb1b89..f26ed3b8 100644
--- a/packages/webgl/src/Mesh/usecase/MeshFillGenerateUseCase.ts
+++ b/packages/webgl/src/Mesh/usecase/MeshFillGenerateUseCase.ts
@@ -1,8 +1,5 @@
 import type { IPath } from "../../interface/IPath";
-import type { IIndexRange } from "../../interface/IIndexRange";
 import type { IFillMesh } from "../../interface/IFillMesh";
-import { $objectPool } from "../../Mesh";
-import { $getArray } from "../../WebGLUtil";
 import { execute as meshFillGenerateService } from "../service/MeshFillGenerateService";
 
 /**
@@ -18,27 +15,18 @@ export const execute = (vertices: IPath[]): IFillMesh =>
 {
     let length = 0;
     for (let idx = 0; idx < vertices.length; ++idx) {
-        length += (vertices[idx].length / 3 - 2) * 12;
+        length += (vertices[idx].length / 3 - 2) * 51;
     }
 
     const buffer = new Float32Array(length);
-    const indexRanges: IIndexRange[] = $getArray();
 
     let currentIndex = 0;
     for (let idx = 0; idx < vertices.length; ++idx) {
-
-        const first = currentIndex;
         currentIndex = meshFillGenerateService(vertices[idx], buffer, currentIndex);
-        const count = currentIndex - first;
-
-        const indexRange = $objectPool.pop() || { "first": 0, "count": 0 };
-        indexRange.first = first;
-        indexRange.count = count;
-        indexRanges.push(indexRange);
     }
 
     return {
         "buffer": buffer,
-        "indexRanges": indexRanges
+        "indexCount": currentIndex
     };
 };
\ No newline at end of file
diff --git a/packages/webgl/src/VertexArrayObject/service/VertexArrayObjectCreateStrokeObjectService.ts b/packages/webgl/src/VertexArrayObject/service/VertexArrayObjectCreateStrokeObjectService.ts
index 041a7292..5b793897 100644
--- a/packages/webgl/src/VertexArrayObject/service/VertexArrayObjectCreateStrokeObjectService.ts
+++ b/packages/webgl/src/VertexArrayObject/service/VertexArrayObjectCreateStrokeObjectService.ts
@@ -19,6 +19,7 @@ export const execute = (): IStrokeVertexArrayObject =>
         "vertexBuffer": $gl.createBuffer() as NonNullable<WebGLBuffer>,
         "vertexLength": 0,
         "indexBuffer": $gl.createBuffer() as NonNullable<WebGLBuffer>,
-        "indexLength": 0
+        "indexLength": 0,
+        "indexCount": 0
     };
 };
\ No newline at end of file
diff --git a/packages/webgl/src/VertexArrayObject/service/VertexArrayObjectReleaseVertexArrayObjectService.ts b/packages/webgl/src/VertexArrayObject/service/VertexArrayObjectReleaseVertexArrayObjectService.ts
index 6981020b..f5b6d2a8 100644
--- a/packages/webgl/src/VertexArrayObject/service/VertexArrayObjectReleaseVertexArrayObjectService.ts
+++ b/packages/webgl/src/VertexArrayObject/service/VertexArrayObjectReleaseVertexArrayObjectService.ts
@@ -1,8 +1,5 @@
 import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
-import type { IIndexRange } from "../../interface/IIndexRange";
-import { $objectPool as $meshObjectPool } from "../../Mesh";
 import { $objectPool } from "../../VertexArrayObject";
-import { $poolArray } from "../../WebGLUtil";
 
 /**
  * @description VertexArrayObjectをオブジェクトプールに保管、サイズオーバー時は削除します。
@@ -18,16 +15,5 @@ export const execute = (vertex_array_object: IVertexArrayObject): void =>
     if ($objectPool.indexOf(vertex_array_object) > -1) {
         return ;
     }
-
-    // object pool
-    const indexRanges = vertex_array_object.indexRanges as IIndexRange[];
-    for (let idx = 0; idx < indexRanges.length; ++idx) {
-        $meshObjectPool.push(indexRanges[idx]);
-    }
-    $poolArray(indexRanges);
-
-    // dispose
-    vertex_array_object.indexRanges = null;
-
     $objectPool.push(vertex_array_object);
 };
\ No newline at end of file
diff --git a/packages/webgl/src/VertexArrayObject/usecase/VertexArrayObjectBindFillMeshUseCase.ts b/packages/webgl/src/VertexArrayObject/usecase/VertexArrayObjectBindFillMeshUseCase.ts
index 6aa11459..6e0ea3c5 100644
--- a/packages/webgl/src/VertexArrayObject/usecase/VertexArrayObjectBindFillMeshUseCase.ts
+++ b/packages/webgl/src/VertexArrayObject/usecase/VertexArrayObjectBindFillMeshUseCase.ts
@@ -32,6 +32,6 @@ export const execute = (vertices: IPath[]): IVertexArrayObject =>
 
     $gl.bufferSubData($gl.ARRAY_BUFFER, 0, fillMesh.buffer);
 
-    vertexArrayObject.indexRanges = fillMesh.indexRanges;
+    vertexArrayObject.indexCount = fillMesh.indexCount;
     return vertexArrayObject;
 };
\ No newline at end of file
diff --git a/packages/webgl/src/VertexArrayObject/usecase/VertexArrayObjectGetFillObjectUseCase.ts b/packages/webgl/src/VertexArrayObject/usecase/VertexArrayObjectGetFillObjectUseCase.ts
index f50c21e2..79478b2b 100644
--- a/packages/webgl/src/VertexArrayObject/usecase/VertexArrayObjectGetFillObjectUseCase.ts
+++ b/packages/webgl/src/VertexArrayObject/usecase/VertexArrayObjectGetFillObjectUseCase.ts
@@ -25,8 +25,16 @@ export const execute = (): IVertexArrayObject =>
 
     $gl.enableVertexAttribArray(0);
     $gl.enableVertexAttribArray(1);
-    $gl.vertexAttribPointer(0, 2, $gl.FLOAT, false, 16, 0);
-    $gl.vertexAttribPointer(1, 2, $gl.FLOAT, false, 16, 8);
+    $gl.enableVertexAttribArray(2);
+    $gl.enableVertexAttribArray(3);
+    $gl.enableVertexAttribArray(4);
+    $gl.enableVertexAttribArray(5);
+    $gl.vertexAttribPointer(0, 2, $gl.FLOAT, false, 68, 0);
+    $gl.vertexAttribPointer(1, 2, $gl.FLOAT, false, 68, 8);
+    $gl.vertexAttribPointer(2, 4, $gl.FLOAT, false, 68, 16);
+    $gl.vertexAttribPointer(3, 3, $gl.FLOAT, false, 68, 32);
+    $gl.vertexAttribPointer(4, 3, $gl.FLOAT, false, 68, 44);
+    $gl.vertexAttribPointer(5, 3, $gl.FLOAT, false, 68, 56);
 
     return vertexArrayObject;
 };
\ No newline at end of file
diff --git a/packages/webgl/src/interface/IFillMesh.ts b/packages/webgl/src/interface/IFillMesh.ts
index 5874510b..51dda0fa 100644
--- a/packages/webgl/src/interface/IFillMesh.ts
+++ b/packages/webgl/src/interface/IFillMesh.ts
@@ -1,6 +1,4 @@
-import type { IIndexRange } from "./IIndexRange";
-
 export interface IFillMesh {
     buffer: Float32Array;
-    indexRanges: IIndexRange[];
+    indexCount: number;
 }
\ No newline at end of file
diff --git a/packages/webgl/src/interface/IVertexArrayObject.ts b/packages/webgl/src/interface/IVertexArrayObject.ts
index e4ac4326..7c6e462a 100644
--- a/packages/webgl/src/interface/IVertexArrayObject.ts
+++ b/packages/webgl/src/interface/IVertexArrayObject.ts
@@ -3,7 +3,7 @@ import type { IIndexRange } from "./IIndexRange";
 export interface IVertexArrayObject {
     id: number;
     resource: WebGLVertexArrayObject;
-    indexRanges: IIndexRange[] | null;
+    indexCount: number;
     vertexBuffer: WebGLBuffer;
     vertexLength: number;
 }
\ No newline at end of file
diff --git a/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetFillUniformService.ts b/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetFillUniformService.ts
index c9e6fe26..f9824388 100644
--- a/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetFillUniformService.ts
+++ b/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetFillUniformService.ts
@@ -16,35 +16,35 @@ import {
  */
 export const execute = (shader_manager: ShaderManager, has_grid: boolean): void =>
 {
-    const highp  = shader_manager.highp;
-    const matrix = $context.$matrix;
+    // const highp  = shader_manager.highp;
+    // const matrix = $context.$matrix;
 
     if (!has_grid) {
-        highp[0]  = matrix[0];
-        highp[1]  = matrix[1];
-        highp[2]  = matrix[2];
+        // highp[0]  = matrix[0];
+        // highp[1]  = matrix[1];
+        // highp[2]  = matrix[2];
 
-        highp[4]  = matrix[3];
-        highp[5]  = matrix[4];
-        highp[6]  = matrix[5];
+        // highp[4]  = matrix[3];
+        // highp[5]  = matrix[4];
+        // highp[6]  = matrix[5];
 
-        highp[8]  = matrix[6];
-        highp[9]  = matrix[7];
-        highp[10] = matrix[8];
+        // highp[8]  = matrix[6];
+        // highp[9]  = matrix[7];
+        // highp[10] = matrix[8];
 
-        // vertex: u_viewport
-        highp[3] = $RENDER_MAX_SIZE;
-        highp[7] = $RENDER_MAX_SIZE;
+        // // vertex: u_viewport
+        // highp[3] = $RENDER_MAX_SIZE;
+        // highp[7] = $RENDER_MAX_SIZE;
     } else {
         // todo
     }
 
     // fragment: u_color
-    const fillStyle = $context.$fillStyle;
-    const mediump   = shader_manager.mediump;
+    // const fillStyle = $context.$fillStyle;
+    // const mediump   = shader_manager.mediump;
 
-    mediump[0] = fillStyle[0];
-    mediump[1] = fillStyle[1];
-    mediump[2] = fillStyle[2];
-    mediump[3] = fillStyle[3];
+    // mediump[0] = fillStyle[0];
+    // mediump[1] = fillStyle[1];
+    // mediump[2] = fillStyle[2];
+    // mediump[3] = fillStyle[3];
 };
\ No newline at end of file
diff --git a/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetMaskUniformService.ts b/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetMaskUniformService.ts
index 2492664d..b55d3e21 100644
--- a/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetMaskUniformService.ts
+++ b/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetMaskUniformService.ts
@@ -17,26 +17,26 @@ import {
  */
 export const execute = (shader_manager: ShaderManager, has_grid: boolean): void =>
 {
-    const highp  = shader_manager.highp;
-    const matrix = $context.$matrix;
+    // const highp  = shader_manager.highp;
+    // const matrix = $context.$matrix;
 
-    if (!has_grid) {
-        highp[0]  = matrix[0];
-        highp[1]  = matrix[1];
-        highp[2]  = matrix[2];
+    // if (!has_grid) {
+    //     highp[0]  = matrix[0];
+    //     highp[1]  = matrix[1];
+    //     highp[2]  = matrix[2];
 
-        highp[4]  = matrix[3];
-        highp[5]  = matrix[4];
-        highp[6]  = matrix[5];
+    //     highp[4]  = matrix[3];
+    //     highp[5]  = matrix[4];
+    //     highp[6]  = matrix[5];
 
-        highp[8]  = matrix[6];
-        highp[9]  = matrix[7];
-        highp[10] = matrix[8];
+    //     highp[8]  = matrix[6];
+    //     highp[9]  = matrix[7];
+    //     highp[10] = matrix[8];
 
-        // vertex: u_viewport
-        highp[3] = $getViewportWidth();
-        highp[7] = $getViewportHeight();
-    } else {
-        // todo
-    }
+    //     // vertex: u_viewport
+    //     highp[3] = $getViewportWidth();
+    //     highp[7] = $getViewportHeight();
+    // } else {
+    //     // todo
+    // }
 };
\ No newline at end of file
diff --git a/packages/webgl/src/shader/ShaderManager/usecase/ShaderManagerFillUseCase.ts b/packages/webgl/src/shader/ShaderManager/usecase/ShaderManagerFillUseCase.ts
index b30f6523..7064cde7 100644
--- a/packages/webgl/src/shader/ShaderManager/usecase/ShaderManagerFillUseCase.ts
+++ b/packages/webgl/src/shader/ShaderManager/usecase/ShaderManagerFillUseCase.ts
@@ -1,6 +1,5 @@
 import type { ShaderManager } from "../../ShaderManager";
 import type { IVertexArrayObject } from "../../../interface/IVertexArrayObject";
-import type { IIndexRange } from "../../../interface/IIndexRange";
 import { execute as vertexArrayObjectBindService } from "../../../VertexArrayObject/service/VertexArrayObjectBindService";
 import { $gl } from "../../../WebGLUtil";
 import { execute as blendResetService } from "../../../Blend/service/BlendResetService";
@@ -31,7 +30,5 @@ export const execute = (
     vertexArrayObjectBindService(vertex_array_object);
 
     // draw fill
-    const indexRanges = vertex_array_object.indexRanges as IIndexRange[];
-    const range = indexRanges[indexRanges.length - 1];
-    $gl.drawArrays($gl.TRIANGLES, 0, range.first + range.count);
+    $gl.drawArrays($gl.TRIANGLES, 0, vertex_array_object.indexCount);
 };
\ No newline at end of file
diff --git a/packages/webgl/src/shader/fragment/FragmentShaderSource.ts b/packages/webgl/src/shader/fragment/FragmentShaderSource.ts
index a80b9aa9..a05f3927 100644
--- a/packages/webgl/src/shader/fragment/FragmentShaderSource.ts
+++ b/packages/webgl/src/shader/fragment/FragmentShaderSource.ts
@@ -9,10 +9,11 @@ export const SOLID_COLOR = (): string =>
 precision mediump float;
 
 uniform vec4 u_mediump;
+in vec4 v_color;
 out vec4 o_color;
 
 void main() {
-    o_color = vec4(u_mediump.rgb * u_mediump.a, u_mediump.a);
+    o_color = vec4(v_color.rgb * v_color.a, v_color.a);
 }`;
 };
 
diff --git a/packages/webgl/src/shader/variants/Bitmap/service/VariantsBitmapShaderService.ts b/packages/webgl/src/shader/variants/Bitmap/service/VariantsBitmapShaderService.ts
index 4b725377..fd736c9b 100644
--- a/packages/webgl/src/shader/variants/Bitmap/service/VariantsBitmapShaderService.ts
+++ b/packages/webgl/src/shader/variants/Bitmap/service/VariantsBitmapShaderService.ts
@@ -43,6 +43,7 @@ export const execute = (
         vertexShaderSource = FILL_TEMPLATE(
             highpLength, true, false, has_grid
         );
+        console.log(vertexShaderSource);
     }
 
     const fragmentShaderSource = repeat
diff --git a/packages/webgl/src/shader/variants/Shape/service/VariantsShapeMaskShaderService.ts b/packages/webgl/src/shader/variants/Shape/service/VariantsShapeMaskShaderService.ts
index b06d6bc1..e3b72d23 100644
--- a/packages/webgl/src/shader/variants/Shape/service/VariantsShapeMaskShaderService.ts
+++ b/packages/webgl/src/shader/variants/Shape/service/VariantsShapeMaskShaderService.ts
@@ -22,7 +22,7 @@ export const execute = (is_stroke: boolean, has_grid: boolean): ShaderManager =>
         return $collection.get(key) as NonNullable<ShaderManager>;
     }
 
-    const highpLength   = (has_grid ? 8 : 3) + (is_stroke ? 1 : 0);
+    const highpLength   = (has_grid ? 8 : 0) + (is_stroke ? 1 : 0);
     const fragmentIndex = highpLength;
 
     let vertexShaderSource: string;
diff --git a/packages/webgl/src/shader/variants/Shape/service/VariantsShapeSolidColorShaderService.ts b/packages/webgl/src/shader/variants/Shape/service/VariantsShapeSolidColorShaderService.ts
index bf258502..11c9f069 100644
--- a/packages/webgl/src/shader/variants/Shape/service/VariantsShapeSolidColorShaderService.ts
+++ b/packages/webgl/src/shader/variants/Shape/service/VariantsShapeSolidColorShaderService.ts
@@ -21,7 +21,7 @@ export const execute = (is_stroke: boolean, has_grid: boolean): ShaderManager =>
         return $collection.get(key) as NonNullable<ShaderManager>;
     }
 
-    const highpLength: number = (has_grid ? 8 : 3) + (is_stroke ? 1 : 0);
+    const highpLength: number = (has_grid ? 8 : 0) + (is_stroke ? 1 : 0);
     const fragmentIndex: number = highpLength;
 
     let vertexShaderSource: string;
@@ -30,6 +30,7 @@ export const execute = (is_stroke: boolean, has_grid: boolean): ShaderManager =>
             highpLength, fragmentIndex,
             false, has_grid
         );
+        console.log(vertexShaderSource);
     } else {
         vertexShaderSource = FILL_TEMPLATE(
             highpLength, false, false, has_grid
diff --git a/packages/webgl/src/shader/vertex/VertexShaderLibrary.ts b/packages/webgl/src/shader/vertex/VertexShaderLibrary.ts
index e358c6ab..04bfa549 100644
--- a/packages/webgl/src/shader/vertex/VertexShaderLibrary.ts
+++ b/packages/webgl/src/shader/vertex/VertexShaderLibrary.ts
@@ -10,15 +10,8 @@ export const FUNCTION_GRID_OFF = (): string =>
 {
     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;
+    mat3 matrix = mat3(a_matrix0, a_matrix1, a_matrix2);
+    return (matrix * vec3(vertex, 1.0)).xy;
 }`;
 };
 
diff --git a/packages/webgl/src/shader/vertex/VertexShaderSourceFill.ts b/packages/webgl/src/shader/vertex/VertexShaderSourceFill.ts
index 3f3f2255..3e4eacea 100644
--- a/packages/webgl/src/shader/vertex/VertexShaderSourceFill.ts
+++ b/packages/webgl/src/shader/vertex/VertexShaderSourceFill.ts
@@ -65,6 +65,36 @@ export const STATEMENT_BEZIER_ON = (): string =>
     return "v_bezier = a_bezier;";
 };
 
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const ATTRIBUTE_COLOR_ON = (): string =>
+{
+    return "layout (location = 2) in vec4 a_color;";
+};
+
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const VARYING_COLOR_ON = (): string =>
+{
+    return "out vec4 v_color;";
+};
+
+/**
+ * @return {string}
+ * @method
+ * @static
+ */
+export const STATEMENT_COLOR_ON = (): string =>
+{
+    return "v_color = a_color;";
+};
+
 /**
  * @param  {number}  highp_length
  * @param  {boolean} with_uv
@@ -101,22 +131,40 @@ export const FILL_TEMPLATE = (
         ? FUNCTION_GRID_ON(with_uv ? 5 : 0)
         : FUNCTION_GRID_OFF();
 
+    const colorAttribute: string = for_mask
+        ? ""
+        : ATTRIBUTE_COLOR_ON();
+
+    const colorVarying: string = for_mask
+        ? ""
+        : VARYING_COLOR_ON();
+
+    const colorStatement: string = for_mask
+        ? ""
+        : STATEMENT_COLOR_ON();
+    
+    const uniform = highp_length > 1
+        ? `uniform vec4 u_highp[${highp_length}];`
+        : "";
+
     return `#version 300 es
 
 layout (location = 0) in vec2 a_vertex;
 ${bezierAttribute}
+${colorAttribute}
+layout (location = 3) in vec3 a_matrix0;
+layout (location = 4) in vec3 a_matrix1;
+layout (location = 5) in vec3 a_matrix2;
 
-uniform vec4 u_highp[${highp_length}];
-
+${uniform}
 ${uvVarying}
+${colorVarying}
 ${gridFunction}
 
 void main() {
-    vec2 viewport = vec2(u_highp[0].w, u_highp[1].w);
-
+    ${colorStatement}
     ${uvStatement}
-
-    vec2 pos = applyMatrix(a_vertex) / viewport;
+    vec2 pos = applyMatrix(a_vertex) ;
     pos = pos * 2.0 - 1.0;
     gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0);
 }`;