Refactor AST code in ShaderLab for performance

e2e/case/material-shaderLab.ts

@@ -18,7 +18,7 @@
   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/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 @@
   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();

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

@@ -18,10 +18,10 @@
   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 @@
   }
 
   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 @@
     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 @@
   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 @@
   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 @@
 
 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];
     });
   }

examples/shader-lab.ts

@@ -18,32 +18,32 @@
   AmbientLight,
   AssetType,
   SkyBoxMaterial,
-  BackgroundMode,
-} from '@galacean/engine';
-import { OrbitControl } from '@galacean/engine-toolkit-controls';
-import { ShaderLab } from '@galacean/engine-shader-lab';
+  BackgroundMode
+} from "@galacean/engine";
+import { OrbitControl } from "@galacean/engine-toolkit-controls";
+import { ShaderLab } from "@galacean/engine-shaderlab";
 
 // Create ShaderLab
 const shaderLab = new ShaderLab();
 
 Logger.enable();
-WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => {
+WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => {
   engine.canvas.resizeByClientSize();
   const scene = engine.sceneManager.activeScene;
   const { background } = scene;
   const rootEntity = scene.createRootEntity();
 
-  const cameraEntity = rootEntity.createChild('camera_node');
+  const cameraEntity = rootEntity.createChild("camera_node");
   cameraEntity.transform.setPosition(5, 5, 10);
   cameraEntity.addComponent(Camera);
   cameraEntity.addComponent(OrbitControl).target = new Vector3(0, 1, 0);
 
-  const lightEntity = rootEntity.createChild('light_node');
+  const lightEntity = rootEntity.createChild("light_node");
   lightEntity.addComponent(DirectLight);
   lightEntity.transform.setPosition(-10, 10, 10);
   lightEntity.transform.lookAt(new Vector3(0, 0, 0));
 
-  const planeEntity = rootEntity.createChild('plane_node');
+  const planeEntity = rootEntity.createChild("plane_node");
   const renderer = planeEntity.addComponent(MeshRenderer);
   renderer.mesh = PrimitiveMesh.createPlane(engine, 10, 10);
   const planeMaterial = new BlinnPhongMaterial(engine);
@@ -60,9 +60,7 @@
 
   Promise.all([
     engine.resourceManager
-      .load<GLTFResource>(
-        'https://gw.alipayobjects.com/os/bmw-prod/150e44f6-7810-4c45-8029-3575d36aff30.gltf'
-      )
+      .load<GLTFResource>("https://gw.alipayobjects.com/os/bmw-prod/150e44f6-7810-4c45-8029-3575d36aff30.gltf")
       .then((asset) => {
         const { defaultSceneRoot } = asset;
         rootEntity.addChild(defaultSceneRoot);
@@ -74,30 +72,30 @@
         const renderers = new Array<MeshRenderer>();
         defaultSceneRoot.getComponentsIncludeChildren(MeshRenderer, renderers);
 
-        const shadowShader = Shader.find('PlanarShadow');
+        const shadowShader = Shader.find("PlanarShadow");
 
         for (let i = 0, n = renderers.length; i < n; i++) {
           const material = renderers[i].getMaterial();
           if (!material) continue;
           material.shader = shadowShader;
           const shaderData = material.shaderData;
 
-          shaderData.setFloat('u_planarShadowFalloff', 0.2);
-          shaderData.setFloat('u_planarHeight', 0.01);
-          shaderData.setColor('u_planarShadowColor', new Color(0, 0, 0, 1));
-          shaderData.setVector3('u_lightDir', lightDirection);
+          shaderData.setFloat("u_planarShadowFalloff", 0.2);
+          shaderData.setFloat("u_planarHeight", 0.01);
+          shaderData.setColor("u_planarShadowColor", new Color(0, 0, 0, 1));
+          shaderData.setVector3("u_lightDir", lightDirection);
         }
       }),
     engine.resourceManager
       .load<AmbientLight>({
         type: AssetType.Env,
-        url: 'https://gw.alipayobjects.com/os/bmw-prod/f369110c-0e33-47eb-8296-756e9c80f254.bin',
+        url: "https://gw.alipayobjects.com/os/bmw-prod/f369110c-0e33-47eb-8296-756e9c80f254.bin"
       })
       .then((ambientLight) => {
         scene.ambientLight = ambientLight;
         skyMaterial.texture = ambientLight.specularTexture;
         skyMaterial.textureDecodeRGBM = true;
-      }),
+      })
   ]);
 
   engine.run();