From 0eec20b0fa5a8fdf6646b5fbb05ee4fbb6786f09 Mon Sep 17 00:00:00 2001 From: ienaga Date: Wed, 11 Sep 2024 00:55:58 +0900 Subject: [PATCH] =?UTF-8?q?#154=20webgl=E3=83=91=E3=83=83=E3=82=B1?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=82=92v2=E3=81=B8=E7=A7=BB=E8=A1=8C(WIP)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 208 +++++++----------- package.json | 6 +- .../src/Context/usecase/ContextClipUseCase.ts | 2 +- .../src/Context/usecase/ContextFillUseCase.ts | 4 +- .../Mesh/service/MeshFillGenerateService.ts | 156 ++++++++++++- .../Mesh/usecase/MeshFillGenerateUseCase.ts | 16 +- ...texArrayObjectCreateStrokeObjectService.ts | 3 +- ...ayObjectReleaseVertexArrayObjectService.ts | 14 -- .../VertexArrayObjectBindFillMeshUseCase.ts | 2 +- .../VertexArrayObjectGetFillObjectUseCase.ts | 12 +- packages/webgl/src/interface/IFillMesh.ts | 4 +- .../webgl/src/interface/IVertexArrayObject.ts | 2 +- .../ShaderManagerSetFillUniformService.ts | 40 ++-- .../ShaderManagerSetMaskUniformService.ts | 36 +-- .../usecase/ShaderManagerFillUseCase.ts | 5 +- .../shader/fragment/FragmentShaderSource.ts | 3 +- .../service/VariantsBitmapShaderService.ts | 1 + .../service/VariantsShapeMaskShaderService.ts | 2 +- .../VariantsShapeSolidColorShaderService.ts | 3 +- .../src/shader/vertex/VertexShaderLibrary.ts | 11 +- .../shader/vertex/VertexShaderSourceFill.ts | 60 ++++- 21 files changed, 362 insertions(+), 228 deletions(-) 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, "vertexLength": 0, "indexBuffer": $gl.createBuffer() as NonNullable, - "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; } - 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; } - 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); }`;