ShaderLab support MRT

e2e/case/shaderLab-mrt.ts

@@ -0,0 +1,113 @@
+/**
+ * @title ShaderLab MRT
+ * @category Material
+ */
+
+import { Camera, Color, Logger, Material, MeshRenderer, PrimitiveMesh, Shader, WebGLEngine } from "@galacean/engine";
+import { ShaderLab } from "@galacean/engine-shader-lab";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+const shaderLab = new ShaderLab();
+
+const shaderSource = `Shader "/custom.gs" {
+          SubShader "Default" {
+            UsePass "pbr/Default/ShadowCaster"
+
+            Pass "Pass0" {
+              struct Attributes {
+                vec3 POSITION;
+                vec2 TEXCOORD_0;
+                vec4 JOINTS_0;
+  	            vec4 WEIGHTS_0;
+              };
+
+              struct Varyings {
+                vec2 uv;
+              };
+
+              mat4 renderer_MVPMat;
+
+              vec4 material_BaseColor;
+
+
+              VertexShader = vert;
+              FragmentShader = frag;
+
+              Varyings vert(Attributes attr) {
+                Varyings v;
+
+                vec4 position = vec4(attr.POSITION, 1.0);
+
+                // Skin
+                #ifdef RENDERER_HAS_SKIN
+                  mat4 skinMatrix = getSkinMatrix(attr);
+                  position = skinMatrix * position;
+                #endif
+
+                gl_Position = renderer_MVPMat * position;
+                v.uv = attr.TEXCOORD_0;
+
+                return v;
+              }
+
+              struct mrt {
+                layout(location = 0) vec4 fragColor0;
+                layout(location = 1) vec4 fragColor1;
+              };
+
+              mrt frag(Varyings v) {
+                mrt o;
+
+                vec4 baseColor = material_BaseColor;
+
+                #ifdef MATERIAL_HAS_BASETEXTURE
+                    vec4 textureColor = texture2D(material_BaseTexture, v.uv);
+                    #ifndef ENGINE_IS_COLORSPACE_GAMMA
+                        textureColor = gammaToLinear(textureColor);
+                    #endif
+                    baseColor *= textureColor;
+                #endif
+
+                #ifdef MATERIAL_IS_ALPHA_CUTOFF
+                    if( baseColor.a < material_AlphaCutoff ) {
+                        discard;
+                    }
+                #endif
+
+                o.fragColor0 = baseColor;
+                o.fragColor1 = baseColor;
+
+                return o;
+              }
+          }
+        }
+      }`;
+
+Logger.enable();
+WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => {
+  engine.canvas.resizeByClientSize();
+
+  const shader = Shader.create(shaderSource);
+  const scene = engine.sceneManager.activeScene;
+  const rootEntity = scene.createRootEntity();
+
+  // camera
+  const cameraEntity = rootEntity.createChild("cameraNode");
+  cameraEntity.transform.setPosition(0, 0, 5);
+  const camera = cameraEntity.addComponent(Camera);
+
+  // sphere
+  {
+    const sphere = rootEntity.createChild("sphere");
+    sphere.transform.position.x = -1;
+    const renderer = sphere.addComponent(MeshRenderer);
+    renderer.mesh = PrimitiveMesh.createSphere(engine);
+    const material = new Material(engine, shader);
+    material.shaderData.setColor("material_BaseColor", new Color(1, 0, 0, 0.2));
+    renderer.setMaterial(material);
+  }
+
+  updateForE2E(engine);
+
+  initScreenshot(engine, camera);
+});

e2e/config.ts

@@ -110,6 +110,11 @@
       caseFileName: "material-shaderLab",
       threshold: 0.2
     },
+    shaderLabMRT: {
+      category: "Material",
+      caseFileName: "shaderLab-mrt",
+      threshold: 0.2
+    },
     shaderReplacement: {
       category: "Material",
       caseFileName: "material-shaderReplacement",

packages/shader-lab/src/GSError.ts

@@ -47,7 +47,8 @@ export class GSError extends Error {
       if (i === start.line) {
         remarkStart = start.column;
         paddingLength += start.column;
-      } else if (i === end.line) {
+      }
+      if (i === end.line) {
         remarkEnd = end.column;
       }
       const remarkLength = Math.max(remarkEnd - remarkStart, 1);

packages/shader-lab/src/ShaderLabUtils.ts

@@ -1,4 +1,4 @@
-import { ClearableObjectPool, IPoolElement } from "@galacean/engine";
+import { ClearableObjectPool, IPoolElement, Logger } from "@galacean/engine";
 import { GSErrorName } from "./GSError";
 import { ShaderRange } from "./common/ShaderRange";
 import { ShaderPosition } from "./common/ShaderPosition";
@@ -27,11 +27,11 @@ export class ShaderLabUtils {
     source: string,
     location: ShaderRange | ShaderPosition,
     file?: string
-  ): Error {
+  ): Error | undefined {
     // #if _VERBOSE
     return new GSError(errorName, message, location, source, file);
     // #else
-    return new Error(`[${errorName}]: ${message}`);
+    Logger.error(message);
     // #endif
   }
 }

packages/shader-lab/src/codeGen/CodeGenVisitor.ts

@@ -11,10 +11,12 @@
 // #if _VERBOSE
 import { GSError } from "../GSError";
 // #endif
-import { ShaderLabUtils } from "../ShaderLabUtils";
 import { Logger, ReturnableObjectPool } from "@galacean/engine";
 import { TempArray } from "../TempArray";
 
+export const V3_GL_FragColor = "GS_glFragColor";
+export const V3_GL_FragData = "GS_glFragData";
+
 /**
  * @internal
  * The code generator
@@ -23,6 +25,10 @@
   // #if _VERBOSE
   readonly errors: Error[] = [];
   // #endif
+
+  abstract getFragDataCodeGen(index: string | number): string;
+  abstract getReferencedMRTPropText(index: string | number, ident: string): string;
+
   protected static _tmpArrayPool = new ReturnableObjectPool(TempArray<string>, 10);
 
   defaultCodeGen(children: NodeChild[]) {
@@ -41,11 +47,11 @@
   }
 
   visitPostfixExpression(node: ASTNode.PostfixExpression) {
-    if (node.children.length === 3) {
-      const context = VisitorContext.context;
+    const derivationLength = node.children.length;
+    const context = VisitorContext.context;
 
+    if (derivationLength === 3) {
       const postExpr = node.children[0] as ASTNode.PostfixExpression;
-
       const prop = node.children[2];
 
       if (prop instanceof Token) {
@@ -65,12 +71,36 @@
           }
           // #endif
           return prop.lexeme;
+        } else if (context.isMRTStruct(<string>postExpr.type)) {
+          const error = context.referenceMRTProp(prop);
+          // #if _VERBOSE
+          if (error) {
+            this.errors.push(<GSError>error);
+          }
+          // #endif
+          return prop.lexeme;
         }
 
         return `${postExpr.codeGen(this)}.${prop.lexeme}`;
       } else {
         return `${postExpr.codeGen(this)}.${prop.codeGen(this)}`;
       }
+    } else if (derivationLength === 4) {
+      const identNode = node.children[0] as ASTNode.PostfixExpression;
+      const indexNode = node.children[2] as ASTNode.Expression;
+      const identLexeme = identNode.codeGen(this);
+      const indexLexeme = indexNode.codeGen(this);
+      if (identLexeme === "gl_FragData") {
+        // #if _VERBOSE
+        if (context._referencedVaryingList[V3_GL_FragColor]) {
+          this._reportError(identNode.location, "cannot use both gl_FragData and gl_FragColor");
+        }
+        // #endif
+        const mrtLexeme = this.getFragDataCodeGen(indexLexeme);
+        context._referencedMRTList[mrtLexeme] = this.getReferencedMRTPropText(indexLexeme, mrtLexeme);
+        return mrtLexeme;
+      }
+      return `${identLexeme}[${indexLexeme}]`;
     }
     return this.defaultCodeGen(node.children);
   }
@@ -134,12 +164,12 @@
   }
 
   visitDeclaration(node: ASTNode.Declaration): string {
+    const { context } = VisitorContext;
     const child = node.children[0];
-    if (
-      child instanceof ASTNode.InitDeclaratorList &&
-      child.typeInfo.typeLexeme === VisitorContext.context.varyingStruct?.ident?.lexeme
-    ) {
-      return "";
+
+    if (child instanceof ASTNode.InitDeclaratorList) {
+      const typeLexeme = child.typeInfo.typeLexeme;
+      if (context.isVaryingStruct(typeLexeme) || context.isMRTStruct(typeLexeme)) return "";
     }
     return this.defaultCodeGen(node.children);
   }

packages/shader-lab/src/codeGen/GLES100.ts

@@ -1,3 +1,5 @@
+import { BaseToken } from "../common/BaseToken";
+import { ASTNode } from "../parser/AST";
 import { GLESVisitor } from "./GLESVisitor";
 import { VisitorContext } from "./VisitorContext";
 import { ICodeSegment } from "./types";
@@ -21,25 +23,57 @@
     return this._singleton;
   }
 
-  override getAttributeDeclare(): ICodeSegment[] {
-    const ret: ICodeSegment[] = [];
+  override getFragDataCodeGen(index: string | number): string {
+    return `gl_FragData[${index}]`;
+  }
+
+  override getReferencedMRTPropText(index: string | number, ident: string): string {
+    return "";
+  }
+
+  override getAttributeDeclare(out: ICodeSegment[]): void {
     for (const item of Object.values(VisitorContext.context._referencedAttributeList)) {
-      ret.push({
+      out.push({
         text: `attribute ${item.typeInfo.typeLexeme} ${item.ident.lexeme};`,
         index: item.ident.location.start.index
       });
     }
-    return ret;
   }
 
-  override getVaryingDeclare(): ICodeSegment[] {
-    const ret: ICodeSegment[] = [];
+  override getVaryingDeclare(out: ICodeSegment[]): void {
     for (const item of Object.values(VisitorContext.context._referencedVaryingList)) {
-      ret.push({
+      out.push({
         text: `varying ${item.typeInfo.typeLexeme} ${item.ident.lexeme};`,
         index: item.ident.location.start.index
       });
     }
-    return ret;
+  }
+
+  override getMRTDeclare(out: ICodeSegment[]): void {
+    return;
+  }
+
+  override visitPostfixExpression(node: ASTNode.PostfixExpression): string {
+    const { children } = node;
+    const postExpr = children[0];
+    const { context } = VisitorContext;
+    if (postExpr instanceof ASTNode.PostfixExpression && context.isMRTStruct(<string>postExpr.type)) {
+      const propReferenced = children[2] as BaseToken;
+      const prop = context.mrtStruct!.propList.find((item) => item.ident.lexeme === propReferenced.lexeme);
+      if (!prop) {
+        this._reportError(propReferenced.location, `not found mrt property: ${propReferenced.lexeme}`);
+        return "";
+      }
+      return `gl_FragData[${prop.mrtIndex!}]`;
+    }
+    return super.visitPostfixExpression(node);
+  }
+
+  override visitJumpStatement(node: ASTNode.JumpStatement): string {
+    if (node.isFragReturnStatement) {
+      const expression = node.children[1] as ASTNode.Expression;
+      return `gl_FragColor = ${expression.codeGen(this)}`;
+    }
+    return super.visitJumpStatement(node);
   }
 }