refactor: migrate all shaders from raw GLSL to ShaderLab format

.github/workflows/nodejs.yml

@@ -9,20 +9,19 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
-      - uses: pnpm/action-setup@v2.0.1
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 7
           run_install: false
 
       - name: Get pnpm store directory

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm exec commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm exec lint-staged

package.json

@@ -11,19 +11,22 @@
   "bugs": "https://github.com/galacean/engine-toolkit/issues",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
+    "prepare": "husky install",
     "test": "cross-env TS_NODE_PROJECT=tsconfig.tests.json floss --path tests -r ts-node/register",
     "test-debug": "cross-env TS_NODE_PROJECT=tsconfig.tests.json floss --path tests -r ts-node/register --debug",
     "test-cov": "cross-env TS_NODE_PROJECT=tsconfig.tests.json nyc --reporter=lcov floss --path tests -r ts-node/register",
     "ci": "pnpm install && npm run build && npm run b:types && npm run test-cov",
     "lint": "eslint packages/*/src --ext .ts",
     "watch": "rollup -cw -m inline",
-    "b:types": "pnpm -r --filter=./packages/* run b:types",
-    "build": "rollup -c",
-    "b:all": "pnpm run b:types && cross-env BUILD_TYPE=ALL rollup -c",
+    "b:types": "pnpm -r --workspace-concurrency=1 --filter=./packages/* run b:types",
+    "precompile": "pnpm -r --filter=./packages/* --if-present run precompile",
+    "build": "npm run precompile && rollup -c",
+    "b:all": "npm run precompile && pnpm run b:types && cross-env BUILD_TYPE=ALL rollup -c",
     "clean": "pnpm -r exec rm -rf dist && pnpm -r exec rm -rf types",
     "release": "bumpp -r"
   },
   "devDependencies": {
+    "@galacean/engine-shader-compiler": "2.0.0-alpha.33",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
@@ -53,20 +56,12 @@
     "prettier": "^2.7.1",
     "rollup": "^3",
     "rollup-plugin-binary2base64": "1.0.3",
-    "rollup-plugin-glslify": "^1.3.1",
     "rollup-plugin-license": "^3.6.0",
     "rollup-plugin-modify": "^3.0.0",
-    "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-swc3": "^0.8.0",
     "ts-node": "^10",
     "typescript": "^4.8.3"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "lint-staged": {
     "*.{ts}": [
       "eslint --fix",

packages/controls/compiledShaders/box-selection/BoxSelection.shaderc

@@ -0,0 +1 @@
+{"name":"box","platformTarget":0,"subShaders":[{"name":"Default","tags":{},"passes":[{"name":"Forward","isUsePass":false,"tags":{},"renderStates":{"constantMap":{"0":true,"3":6,"4":1,"5":7,"6":7,"10":false,"28":2},"variableMap":{}},"vertexShaderInstructions":[[0,"\n"],[2,"COMMON_INCLUDED",30],[0,"\n\n"],[7,"COMMON_INCLUDED"],[0,"\n\n"],[8,"PI","3.14159265359"],[0,"\n\n"],[8,"RECIPROCAL_PI","0.31830988618"],[0,"\n\n"],[8,"EPSILON","1e-6"],[0,"\n\n"],[8,"LOG2","1.442695"],[0,"\n\n"],[8,"HALF_MIN","6.103515625e-5"],[0,"\n\n"],[8,"HALF_EPS","4.8828125e-4"],[0,"\n\n"],[9,"saturate",["a"],"clamp ( a , 0.0 , 1.0 )"],[0,"\n\n"],[1,"GRAPHICS_API_WEBGL2",24],[0,"\n\n"],[9,"INVERSE_MAT",["mat"],"inverse ( mat )"],[0,"\n\n"],[5,28],[0,"\nmat2 inverseMat ( mat2 m ) { return mat2 ( m[1][1] , - m[0][1] , - m[1][0] , m[0][0] ) / ( m[0][0] * m[1][1] - m[0][1] * m[1][0] ) ; }\nmat3 inverseMat ( mat3 m ) { float a00 = m[0][0] , a01 = m[0][1] , a02 = m[0][2] ;\nfloat a10 = m[1][0] , a11 = m[1][1] , a12 = m[1][2] ;\nfloat a20 = m[2][0] , a21 = m[2][1] , a22 = m[2][2] ;\nfloat b01 = a22 * a11 - a12 * a21 ;\nfloat b11 = - a22 * a10 + a12 * a20 ;\nfloat b21 = a21 * a10 - a11 * a20 ;\nfloat det = a00 * b01 + a01 * b11 + a02 * b21 ;\nreturn mat3 ( b01 , ( - a22 * a01 + a02 * a21 ) , ( a12 * a01 - a02 * a11 ) , b11 , ( a22 * a00 - a02 * a20 ) , ( - a12 * a00 + a02 * a10 ) , b21 , ( - a21 * a00 + a01 * a20 ) , ( a11 * a00 - a01 * a10 ) ) / det ; }\nmat4 inverseMat ( mat4 m ) { float a00 = m[0][0] , a01 = m[0][1] , a02 = m[0][2] , a03 = m[0][3] , a10 = m[1][0] , a11 = m[1][1] , a12 = m[1][2] , a13 = m[1][3] , a20 = m[2][0] , a21 = m[2][1] , a22 = m[2][2] , a23 = m[2][3] , a30 = m[3][0] , a31 = m[3][1] , a32 = m[3][2] , a33 = m[3][3] , b00 = a00 * a11 - a01 * a10 , b01 = a00 * a12 - a02 * a10 , b02 = a00 * a13 - a03 * a10 , b03 = a01 * a12 - a02 * a11 , b04 = a01 * a13 - a03 * a11 , b05 = a02 * a13 - a03 * a12 , b06 = a20 * a31 - a21 * a30 , b07 = a20 * a32 - a22 * a30 , b08 = a20 * a33 - a23 * a30 , b09 = a21 * a32 - a22 * a31 , b10 = a21 * a33 - a23 * a31 , b11 = a22 * a33 - a23 * a32 , det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06 ;\nreturn mat4 ( a11 * b11 - a12 * b10 + a13 * b09 , a02 * b10 - a01 * b11 - a03 * b09 , a31 * b05 - a32 * b04 + a33 * b03 , a22 * b04 - a21 * b05 - a23 * b03 , a12 * b08 - a10 * b11 - a13 * b07 , a00 * b11 - a02 * b08 + a03 * b07 , a32 * b02 - a30 * b05 - a33 * b01 , a20 * b05 - a22 * b02 + a23 * b01 , a10 * b10 - a11 * b08 + a13 * b06 , a01 * b08 - a00 * b10 - a03 * b06 , a30 * b04 - a31 * b02 + a33 * b00 , a21 * b02 - a20 * b04 - a23 * b00 , a11 * b07 - a10 * b09 - a12 * b06 , a00 * b09 - a01 * b07 + a02 * b06 , a31 * b01 - a30 * b03 - a32 * b00 , a20 * b03 - a21 * b01 + a22 * b00 ) / det ; }\n\n"],[9,"INVERSE_MAT",["mat"],"inverseMat(mat)"],[0,"\n\n"],[6],[0,"\n\n"],[6],[0,"\n\n"],[2,"TRANSFORM_INCLUDED",36],[0,"\n\n"],[7,"TRANSFORM_INCLUDED"],[0,"\n\n"],[6],[0,"\n\n"],[2,"ATTRIBUTES_INCLUDED",94],[0,"\n\n"],[7,"ATTRIBUTES_INCLUDED"],[0,"\nattribute vec3 POSITION;\n\n"],[1,"RENDERER_HAS_BLENDSHAPE",68],[0,"\n"],[2,"RENDERER_BLENDSHAPE_USE_TEXTURE",66],[0,"\n"],[4,{"t":"and","l":{"t":"def","m":"RENDERER_BLENDSHAPE_HAS_NORMAL"},"r":{"t":"def","m":"RENDERER_BLENDSHAPE_HAS_TANGENT"}},48],[0,"\n"],[5,64],[0,"\n"],[4,{"t":"or","l":{"t":"def","m":"RENDERER_BLENDSHAPE_HAS_NORMAL"},"r":{"t":"def","m":"RENDERER_BLENDSHAPE_HAS_TANGENT"}},60],[0,"\n"],[1,"RENDERER_BLENDSHAPE_HAS_NORMAL",54],[0,"\n"],[6],[0,"\n"],[1,"RENDERER_BLENDSHAPE_HAS_TANGENT",58],[0,"\n"],[6],[0,"\n"],[5,62],[0,"\n"],[6],[0,"\n"],[6],[0,"\n"],[6],[0,"\n"],[6],[0,"\n"],[1,"RENDERER_HAS_UV",72],[0,"\n"],[6],[0,"\n"],[1,"RENDERER_HAS_UV1",76],[0,"\n"],[6],[0,"\n"],[1,"RENDERER_HAS_SKIN",80],[0,"\n"],[6],[0,"\n"],[1,"RENDERER_ENABLE_VERTEXCOLOR",84],[0,"\n"],[6],[0,"\n"],[1,"RENDERER_HAS_NORMAL",88],[0,"\n"],[6],[0,"\n"],[1,"RENDERER_HAS_TANGENT",92],[0,"\n"],[6],[0,"\n\n"],[6],[0,"\nvoid main() { gl_Position = vec4 ( POSITION , 1.0 ) ; }"]],"fragmentShaderInstructions":[[0,"\n"],[2,"COMMON_INCLUDED",30],[0,"\n\n"],[7,"COMMON_INCLUDED"],[0,"\n\n"],[8,"PI","3.14159265359"],[0,"\n\n"],[8,"RECIPROCAL_PI","0.31830988618"],[0,"\n\n"],[8,"EPSILON","1e-6"],[0,"\n\n"],[8,"LOG2","1.442695"],[0,"\n\n"],[8,"HALF_MIN","6.103515625e-5"],[0,"\n\n"],[8,"HALF_EPS","4.8828125e-4"],[0,"\n\n"],[9,"saturate",["a"],"clamp ( a , 0.0 , 1.0 )"],[0,"\n\n"],[1,"GRAPHICS_API_WEBGL2",24],[0,"\n\n"],[9,"INVERSE_MAT",["mat"],"inverse ( mat )"],[0,"\n\n"],[5,28],[0,"\nmat2 inverseMat ( mat2 m ) { return mat2 ( m[1][1] , - m[0][1] , - m[1][0] , m[0][0] ) / ( m[0][0] * m[1][1] - m[0][1] * m[1][0] ) ; }\nmat3 inverseMat ( mat3 m ) { float a00 = m[0][0] , a01 = m[0][1] , a02 = m[0][2] ;\nfloat a10 = m[1][0] , a11 = m[1][1] , a12 = m[1][2] ;\nfloat a20 = m[2][0] , a21 = m[2][1] , a22 = m[2][2] ;\nfloat b01 = a22 * a11 - a12 * a21 ;\nfloat b11 = - a22 * a10 + a12 * a20 ;\nfloat b21 = a21 * a10 - a11 * a20 ;\nfloat det = a00 * b01 + a01 * b11 + a02 * b21 ;\nreturn mat3 ( b01 , ( - a22 * a01 + a02 * a21 ) , ( a12 * a01 - a02 * a11 ) , b11 , ( a22 * a00 - a02 * a20 ) , ( - a12 * a00 + a02 * a10 ) , b21 , ( - a21 * a00 + a01 * a20 ) , ( a11 * a00 - a01 * a10 ) ) / det ; }\nmat4 inverseMat ( mat4 m ) { float a00 = m[0][0] , a01 = m[0][1] , a02 = m[0][2] , a03 = m[0][3] , a10 = m[1][0] , a11 = m[1][1] , a12 = m[1][2] , a13 = m[1][3] , a20 = m[2][0] , a21 = m[2][1] , a22 = m[2][2] , a23 = m[2][3] , a30 = m[3][0] , a31 = m[3][1] , a32 = m[3][2] , a33 = m[3][3] , b00 = a00 * a11 - a01 * a10 , b01 = a00 * a12 - a02 * a10 , b02 = a00 * a13 - a03 * a10 , b03 = a01 * a12 - a02 * a11 , b04 = a01 * a13 - a03 * a11 , b05 = a02 * a13 - a03 * a12 , b06 = a20 * a31 - a21 * a30 , b07 = a20 * a32 - a22 * a30 , b08 = a20 * a33 - a23 * a30 , b09 = a21 * a32 - a22 * a31 , b10 = a21 * a33 - a23 * a31 , b11 = a22 * a33 - a23 * a32 , det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06 ;\nreturn mat4 ( a11 * b11 - a12 * b10 + a13 * b09 , a02 * b10 - a01 * b11 - a03 * b09 , a31 * b05 - a32 * b04 + a33 * b03 , a22 * b04 - a21 * b05 - a23 * b03 , a12 * b08 - a10 * b11 - a13 * b07 , a00 * b11 - a02 * b08 + a03 * b07 , a32 * b02 - a30 * b05 - a33 * b01 , a20 * b05 - a22 * b02 + a23 * b01 , a10 * b10 - a11 * b08 + a13 * b06 , a01 * b08 - a00 * b10 - a03 * b06 , a30 * b04 - a31 * b02 + a33 * b00 , a21 * b02 - a20 * b04 - a23 * b00 , a11 * b07 - a10 * b09 - a12 * b06 , a00 * b09 - a01 * b07 + a02 * b06 , a31 * b01 - a30 * b03 - a32 * b00 , a20 * b03 - a21 * b01 + a22 * b00 ) / det ; }\n\n"],[9,"INVERSE_MAT",["mat"],"inverseMat(mat)"],[0,"\n\n"],[6],[0,"\n\n"],[6],[0,"\n\n"],[2,"TRANSFORM_INCLUDED",36],[0,"\n\n"],[7,"TRANSFORM_INCLUDED"],[0,"\n\n"],[6],[0,"\n\n"],[2,"ATTRIBUTES_INCLUDED",42],[0,"\n\n"],[7,"ATTRIBUTES_INCLUDED"],[0,"\n\n"],[6],[0,"\nuniform vec2 u_min;\nuniform vec2 u_max;\nuniform vec4 u_boxColor;\nuniform vec4 u_borderColor;\nuniform float u_width;\nvoid main() { float vColor = step ( u_min.x + u_width , gl_FragCoord.x ) * step ( gl_FragCoord.x , u_max.x - u_width ) * step ( u_min.y + u_width , gl_FragCoord.y ) * step ( gl_FragCoord.y , u_max.y - u_width ) ;\nfloat vBorder = step ( u_min.x , gl_FragCoord.x ) * step ( gl_FragCoord.x , u_max.x ) * step ( u_min.y , gl_FragCoord.y ) * step ( gl_FragCoord.y , u_max.y ) ;\ngl_FragColor = u_boxColor * vColor + ( 1. - vColor ) * vBorder * u_borderColor ; }"]]}]}]}

packages/controls/compiledShaders/index.ts

@@ -0,0 +1,7 @@
+// Auto-generated by shader-compiler-precompile --emit-index — do not edit.
+import BoxSelectionSource from "./box-selection/BoxSelection.shaderc";
+
+// prettier-ignore
+export {
+  BoxSelectionSource
+};

packages/controls/package.json

@@ -14,9 +14,10 @@
   "bugs": "https://github.com/galacean/engine-toolkit/issues",
   "scripts": {
     "b:types": "tsc",
+    "precompile": "shader-compiler-precompile src compiledShaders --clean --emit-index",
     "lint:fix": "tslint --fix --project ./tsconfig.json"
   },
-  "types": "types/index.d.ts",
+  "types": "types/src/index.d.ts",
   "main": "dist/commonjs/browser.js",
   "module": "dist/es/index.js",
   "files": [

packages/controls/src/box-selection/BoxSelection.shader

@@ -0,0 +1,43 @@
+Shader "box" {
+  SubShader "Default" {
+    Pass "Forward" {
+      DepthState = {
+        Enabled = false;
+      }
+
+      BlendState = {
+        Enabled = true;
+        SourceColorBlendFactor = BlendFactor.SourceAlpha;
+        DestinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha;
+        SourceAlphaBlendFactor = BlendFactor.One;
+        DestinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
+      }
+
+      RenderQueueType = Transparent;
+
+      VertexShader = vert;
+      FragmentShader = frag;
+
+      #include "ShaderLibrary/Common/Common.glsl"
+      #include "ShaderLibrary/Common/Transform.glsl"
+
+      #include "ShaderLibrary/Common/Attributes.glsl"
+
+      void vert(Attributes attr) {
+        gl_Position = vec4(attr.POSITION, 1.0);
+      }
+
+      vec2 u_min;
+      vec2 u_max;
+      vec4 u_boxColor;
+      vec4 u_borderColor;
+      float u_width;
+
+      void frag() {
+        float vColor = step(u_min.x + u_width, gl_FragCoord.x) * step(gl_FragCoord.x, u_max.x - u_width) * step(u_min.y + u_width, gl_FragCoord.y) * step(gl_FragCoord.y, u_max.y - u_width);
+        float vBorder = step(u_min.x, gl_FragCoord.x) * step(gl_FragCoord.x, u_max.x) * step(u_min.y, gl_FragCoord.y) * step(gl_FragCoord.y, u_max.y);
+        gl_FragColor = u_boxColor * vColor + (1. - vColor) * vBorder * u_borderColor;
+      }
+    }
+  }
+}

packages/controls/src/box-selection/BoxSelectionSSMaterial.ts

@@ -1,5 +1,10 @@
 import { BaseMaterial, Engine, Shader, ShaderProperty, Vector2, Vector4 } from "@galacean/engine";
 
+import { BoxSelectionSource } from "../../compiledShaders";
+
+// @ts-ignore
+Shader.find("box") || Shader._createFromPrecompiled(BoxSelectionSource);
+
 export class BoxSelectionSSMaterial extends BaseMaterial {
   private static _borderWidth = ShaderProperty.getByName("u_width");
   private static _minPoint = ShaderProperty.getByName("u_min");
@@ -54,28 +59,3 @@ export class BoxSelectionSSMaterial extends BaseMaterial {
     this.shaderData.setFloat(BoxSelectionSSMaterial._borderWidth, value);
   }
 }
-
-Shader.create(
-  "box",
-  `
-#include <common>
-#include <common_vert>
-
-void main() {
-  gl_Position = vec4(POSITION, 1.0);
-}`,
-
-  `
-uniform vec2 u_min;
-uniform vec2 u_max;
-uniform vec4 u_boxColor;
-uniform vec4 u_borderColor;
-uniform float u_width;
-
-void main() {
-  float vColor = step(u_min.x + u_width, gl_FragCoord.x) * step(gl_FragCoord.x, u_max.x - u_width) * step(u_min.y + u_width, gl_FragCoord.y) * step(gl_FragCoord.y, u_max.y - u_width);
-  float vBorder = step(u_min.x, gl_FragCoord.x) * step(gl_FragCoord.x, u_max.x) * step(u_min.y, gl_FragCoord.y) * step(gl_FragCoord.y, u_max.y);
-  gl_FragColor = u_boxColor * vColor + (1. - vColor) * vBorder * u_borderColor;
-}
-`
-);

packages/controls/src/global.d.ts

@@ -0,0 +1,9 @@
+declare module "*.shader" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.shaderc" {
+  const value: object;
+  export default value;
+}

packages/controls/src/index.ts

@@ -10,3 +10,5 @@ export { ControlFreePointer } from "./inputDevice/ControlFreePointer";
 export { ControlHandlerType } from "./enums/ControlHandlerType";
 
 export type { IControlInput } from "./inputDevice/IControlInput";
+
+export * from "../compiledShaders";