Support GUI

.github/workflows/release.yml

@@ -46,7 +46,7 @@ jobs:
         run: |
           git clone https://github.com/galacean/engine-toolkit.git
           git clone https://github.com/galacean/engine-lottie.git
-          git clone https://github.com/galacean/engine-spine.git
+          git clone https://github.com/galacean/engine-spine.git -b dev/4.2
 
       - name: Install and Link Engine and Build for Toolkit
         working-directory: ./engine-toolkit
@@ -65,7 +65,7 @@ jobs:
       - name: Install and Link Engine and Build for Spine
         working-directory: ./engine-spine
         run: |
-          pnpm install --ignore-workspace
+          pnpm install --ignore-workspace --frozen-lockfile=false
           pnpm link ../packages/galacean
           pnpm build
 
@@ -121,6 +121,9 @@ jobs:
                 "${{ github.workspace }}/temp/@galacean/engine-lottie/dist/browser.js",
                 "${{ github.workspace }}/temp/@galacean/engine-spine/dist/browser.js"
               ],
+              "wasm": [
+                "${{ github.workspace }}/packages/physics-physx/libs/physx.release.wasm"
+              ],
               "jsWASMLoader": [
                 "${{ github.workspace }}/packages/physics-physx/libs/physx.release.js"
               ],

e2e/case/material-LUT.ts

@@ -0,0 +1,55 @@
+/**
+ * @title LUT Test
+ * @category Material
+ */
+import { Camera, Material, MeshRenderer, PrimitiveMesh, Shader, Vector3, WebGLEngine } from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+// Create engine
+WebGLEngine.create({ canvas: "canvas" })
+  .then((engine) => {
+    engine.canvas.resizeByClientSize(2);
+
+    const scene = engine.sceneManager.activeScene;
+    const rootEntity = scene.createRootEntity();
+    // engine.run();
+
+    // Create camera
+    const cameraEntity = rootEntity.createChild("Camera");
+    cameraEntity.transform.position = new Vector3(0, 0, 3);
+    const camera = cameraEntity.addComponent(Camera);
+
+    const entity = rootEntity.createChild("Entity");
+    entity.transform.setRotation(90, 0, 0);
+    const renderer = entity.addComponent(MeshRenderer);
+    renderer.mesh = PrimitiveMesh.createPlane(engine, 1, 1);
+
+    const shader = Shader.create(
+      "LUT-test",
+      `
+    attribute vec3 POSITION;
+    attribute vec2 TEXCOORD_0;
+    uniform mat4 renderer_MVPMat;
+    varying vec2 v_uv;
+
+    void main(){
+      gl_Position = renderer_MVPMat * vec4(POSITION, 1.0);
+      v_uv = TEXCOORD_0;
+    }`,
+      `
+    varying vec2 v_uv;
+    uniform sampler2D scene_PrefilteredDFG;
+
+    void main(){
+      gl_FragColor = texture2D(scene_PrefilteredDFG, v_uv);
+    }
+    `
+    );
+    const material = new Material(engine, shader);
+    renderer.setMaterial(material);
+    updateForE2E(engine);
+    initScreenshot(engine, camera);
+  })
+  .catch((e) => {
+    console.log(e);
+  });

e2e/case/material-shaderLab.ts

@@ -18,7 +18,7 @@ import {
   VertexElementFormat,
   WebGLEngine
 } from "@galacean/engine";
-import { ShaderLab } from "@galacean/engine-shader-lab";
+import { ShaderLab } from "@galacean/engine-shaderlab";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 const shaderLab = new ShaderLab();

e2e/case/postProcess-customPass.ts

@@ -9,6 +9,7 @@ import {
   Engine,
   Material,
   PostProcess,
+  PostProcessEffectFloatParameter,
   PostProcessPass,
   PostProcessPassEvent,
   RenderTarget,
@@ -43,9 +44,7 @@ void main() {
 class CustomPass extends PostProcessPass {
   private _blitMaterial: Material;
 
-  set intensity(value) {
-    this._blitMaterial.shaderData.setFloat("intensity", value);
-  }
+  intensity = new PostProcessEffectFloatParameter(0.7, 0, 1);
 
   constructor(engine: Engine) {
     super(engine);

e2e/case/project-loader.ts

@@ -3,27 +3,27 @@
  * @category Advance
  */
 import { Logger, WebGLEngine, AssetType, Camera } from "@galacean/engine";
-import { ShaderLab } from "@galacean/engine-shader-lab";
+import { ShaderLab } from "@galacean/engine-shaderlab";
 import { registerIncludes } from "@galacean/engine-toolkit";
-import { initScreenshot, updateForE2E } from './.mockForE2E';
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 // Create ShaderLab
 const shaderLab = new ShaderLab();
 registerIncludes();
 
 Logger.enable();
-WebGLEngine.create({ canvas: "canvas", shaderLab }).then( (engine) => {
+WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => {
   engine.canvas.resizeByClientSize(2);
   engine.resourceManager
     .load({
       type: AssetType.Project,
       url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*o15SSopTBh0AAAAAAAAAAAAADkp5AQ/project.json"
-    }).then(() => {
+    })
+    .then(() => {
       updateForE2E(engine);
 
-      const cameraEntity =
-        engine.sceneManager.activeScene.findEntityByName('Camera');
-      const camera = cameraEntity.getComponent(Camera)
-      initScreenshot(engine, camera)
-    })
+      const cameraEntity = engine.sceneManager.activeScene.findEntityByName("Camera");
+      const camera = cameraEntity.getComponent(Camera);
+      initScreenshot(engine, camera);
+    });
 });

e2e/case/shaderLab-mrt.ts

@@ -4,7 +4,7 @@
  */
 
 import { Camera, Color, Logger, Material, MeshRenderer, PrimitiveMesh, Shader, WebGLEngine } from "@galacean/engine";
-import { ShaderLab } from "@galacean/engine-shader-lab";
+import { ShaderLab } from "@galacean/engine-shaderlab";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 const shaderLab = new ShaderLab();

e2e/case/shaderLab-renderState.ts

@@ -16,7 +16,7 @@ import {
   Shader,
   WebGLEngine
 } from "@galacean/engine";
-import { ShaderLab } from "@galacean/engine-shader-lab";
+import { ShaderLab } from "@galacean/engine-shaderlab";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 const shaderLab = new ShaderLab();

e2e/config.ts

@@ -129,6 +129,11 @@ export const E2E_CONFIG = {
       category: "Material",
       caseFileName: "shaderLab-renderState",
       threshold: 0.2
+    },
+    LUT: {
+      category: "Material",
+      caseFileName: "material-LUT",
+      threshold: 0.2
     }
   },
   Shadow: {

examples/buffer-mesh-particle-shader-effect.ts

@@ -18,10 +18,10 @@ import {
   Shader,
   BaseMaterial,
   Script,
-  WebGLEngine,
-} from '@galacean/engine';
-import { OrbitControl } from '@galacean/engine-toolkit-controls';
-import { ShaderLab } from '@galacean/engine-shader-lab';
+  WebGLEngine
+} from "@galacean/engine";
+import { OrbitControl } from "@galacean/engine-toolkit-controls";
+import { ShaderLab } from "@galacean/engine-shaderlab";
 
 const shaderLab = new ShaderLab();
 
@@ -97,37 +97,35 @@ class ParticleMeshMaterial extends BaseMaterial {
   }
 
   get texture1(): Texture2D {
-    return <Texture2D>this.shaderData.getTexture('texture1');
+    return <Texture2D>this.shaderData.getTexture("texture1");
   }
 
   set texture1(value: Texture2D) {
-    this.shaderData.setTexture('texture1', value);
+    this.shaderData.setTexture("texture1", value);
   }
 
   get texture2(): Texture2D {
-    return <Texture2D>this.shaderData.getTexture('texture2');
+    return <Texture2D>this.shaderData.getTexture("texture2");
   }
 
   set texture2(value: Texture2D) {
-    this.shaderData.setTexture('texture2', value);
+    this.shaderData.setTexture("texture2", value);
   }
 
   get progress(): number {
-    return <number>this.shaderData.getFloat('progress');
+    return <number>this.shaderData.getFloat("progress");
   }
 
   set progress(value: number) {
-    this.shaderData.setFloat('progress', value);
+    this.shaderData.setFloat("progress", value);
   }
 }
 
 class AnimationComponent extends Script {
   time = 0;
   mtl: ParticleMeshMaterial | undefined;
   onAwake() {
-    this.mtl = this.entity
-      .getComponent(MeshRenderer)!
-      .getMaterial() as ParticleMeshMaterial;
+    this.mtl = this.entity.getComponent(MeshRenderer)!.getMaterial() as ParticleMeshMaterial;
   }
   onUpdate(time: number) {
     this.time += time;
@@ -232,38 +230,38 @@ function createPlaneParticleMesh(
     new VertexBufferBinding(
       new Buffer(engine, BufferBindFlag.VertexBuffer, indexBuffer),
       3 * Float32Array.BYTES_PER_ELEMENT
-    ),
+    )
   ]);
 
   mesh.setVertexElements([
-    new VertexElement('POSITION', 0, VertexElementFormat.Vector3, 0),
-    new VertexElement('UV', 0, VertexElementFormat.Vector2, 1),
-    new VertexElement('INDEX', 0, VertexElementFormat.Vector3, 2),
+    new VertexElement("POSITION", 0, VertexElementFormat.Vector3, 0),
+    new VertexElement("UV", 0, VertexElementFormat.Vector2, 1),
+    new VertexElement("INDEX", 0, VertexElementFormat.Vector3, 2)
   ]);
 
   mesh.addSubMesh(0, vertexCount);
   return mesh;
 }
 
-WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => {
+WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => {
   engine.canvas.resizeByClientSize();
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 
   const particleMeshShader = Shader.create(shaderSource);
 
-  const cameraEntity = rootEntity.createChild('camera');
+  const cameraEntity = rootEntity.createChild("camera");
   cameraEntity.addComponent(Camera);
   cameraEntity.transform.position.set(0, 0, 50);
   cameraEntity.addComponent(OrbitControl);
 
   engine.resourceManager
     .load([
-      'https://gw.alipayobjects.com/zos/OasisHub/440001901/3736/spring.jpeg',
-      'https://gw.alipayobjects.com/zos/OasisHub/440001901/9546/winter.jpeg',
+      "https://gw.alipayobjects.com/zos/OasisHub/440001901/3736/spring.jpeg",
+      "https://gw.alipayobjects.com/zos/OasisHub/440001901/9546/winter.jpeg"
     ])
     .then((assets) => {
-      const entity = rootEntity.createChild('plane');
+      const entity = rootEntity.createChild("plane");
       const renderer = entity.addComponent(MeshRenderer);
       const mesh = createPlaneParticleMesh(engine, 20, 20, 80, 80, true);
       const mtl = new ParticleMeshMaterial(engine, particleMeshShader);

examples/shader-lab-multi-pass.ts

@@ -20,7 +20,7 @@ import {
   Vector4,
   WebGLEngine
 } from "@galacean/engine";
-import { ShaderLab } from "@galacean/engine-shader-lab";
+import { ShaderLab } from "@galacean/engine-shaderlab";
 import { OrbitControl } from "@galacean/engine-toolkit-controls";
 import * as dat from "dat.gui";
 

examples/shader-lab-simple.ts

@@ -4,8 +4,8 @@
  * @thumbnail https://mdn.alipayobjects.com/merchant_appfe/afts/img/A*C7Y1RaI_ZJEAAAAAAAAAAAAADiR2AQ/original
  */
 
-import { GUI } from 'dat.gui';
-import { OrbitControl } from '@galacean/engine-toolkit-controls';
+import { GUI } from "dat.gui";
+import { OrbitControl } from "@galacean/engine-toolkit-controls";
 import {
   BufferMesh,
   Camera,
@@ -19,9 +19,9 @@ import {
   MeshRenderer,
   Shader,
   Material,
-  Color,
-} from '@galacean/engine';
-import { ShaderLab } from '@galacean/engine-shader-lab';
+  Color
+} from "@galacean/engine";
+import { ShaderLab } from "@galacean/engine-shaderlab";
 
 const shaderLab = new ShaderLab();
 
@@ -108,59 +108,50 @@ Shader "Lines" {
 
 function createPlaneMesh(engine: WebGLEngine) {
   const mesh = new BufferMesh(engine);
-  const vertices = new Float32Array([
-    -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1,
-  ]);
-  const vertexBuffer = new Buffer(
-    engine,
-    BufferBindFlag.VertexBuffer,
-    vertices,
-    BufferUsage.Static
-  );
+  const vertices = new Float32Array([-1, -1, 1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1]);
+  const vertexBuffer = new Buffer(engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static);
   mesh.setVertexBufferBinding(vertexBuffer, 12);
-  mesh.setVertexElements([
-    new VertexElement('POSITION', 0, VertexElementFormat.Vector3, 0),
-  ]);
+  mesh.setVertexElements([new VertexElement("POSITION", 0, VertexElementFormat.Vector3, 0)]);
   mesh.addSubMesh(0, 6);
   return mesh;
 }
 
 Logger.enable();
-WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => {
+WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => {
   engine.canvas.resizeByClientSize();
 
   const shaderMap = {
     normal: Shader.create(normalShaderSource),
-    lines: Shader.create(linesShaderSource),
+    lines: Shader.create(linesShaderSource)
   };
 
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 
   // camera
-  const cameraEntity = rootEntity.createChild('cameraNode');
+  const cameraEntity = rootEntity.createChild("cameraNode");
   cameraEntity.transform.setPosition(0, 0, 5);
   cameraEntity.addComponent(Camera);
   cameraEntity.addComponent(OrbitControl);
 
   // create plane
-  const triangle = rootEntity.createChild('plane');
+  const triangle = rootEntity.createChild("plane");
   const renderer = triangle.addComponent(MeshRenderer);
   renderer.mesh = createPlaneMesh(engine);
   const shader = shaderMap.lines;
   const material = new Material(engine, shader);
-  material.shaderData.setColor('u_color', new Color(1.0, 1.0, 0));
+  material.shaderData.setColor("u_color", new Color(1.0, 1.0, 0));
   renderer.setMaterial(material);
 
   engine.run();
 
   const state = {
-    shader: 'lines',
+    shader: "lines"
   };
 
   function addGUI() {
-    const gui = new GUI({ name: 'Switch Shader' });
-    gui.add(state, 'shader', Object.keys(shaderMap)).onChange((v) => {
+    const gui = new GUI({ name: "Switch Shader" });
+    gui.add(state, "shader", Object.keys(shaderMap)).onChange((v) => {
       material.shader = shaderMap[v];
     });
   }