ShaderLab support MRT

e2e/case/shaderLab-mrt.ts

@@ -0,0 +1,111 @@
+/**
+ * @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;
+              }
+          }
+        }
+      }`;
+
+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/codeGen/CodeGenVisitor.ts

@@ -11,7 +11,6 @@
 // #if _VERBOSE
 import { GSError } from "../GSError";
 // #endif
-import { ShaderLabUtils } from "../ShaderLabUtils";
 import { Logger, ReturnableObjectPool } from "@galacean/engine";
 import { TempArray } from "../TempArray";
 
@@ -23,6 +22,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,36 +44,55 @@
   }
 
   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) {
         if (context.isAttributeStruct(<string>postExpr.type)) {
           const error = context.referenceAttribute(prop);
-          // #if _VERBOSE
           if (error) {
+            // #if _VERBOSE
             this.errors.push(<GSError>error);
+            // #endif
           }
-          // #endif
           return prop.lexeme;
         } else if (context.isVaryingStruct(<string>postExpr.type)) {
           const error = context.referenceVarying(prop);
-          // #if _VERBOSE
           if (error) {
+            // #if _VERBOSE
+            this.errors.push(<GSError>error);
+            // #endif
+          }
+          return prop.lexeme;
+        } else if (context.isMRTStruct(<string>postExpr.type)) {
+          const error = context.referenceMRTProp(prop);
+          if (error) {
+            // #if _VERBOSE
             this.errors.push(<GSError>error);
+            // #endif
           }
-          // #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") {
+        const mrtLexeme = this.getFragDataCodeGen(indexLexeme);
+        context._referencedMRTList[mrtLexeme] = this.getReferencedMRTPropText(indexLexeme, mrtLexeme);
+        return mrtLexeme;
+      }
+      return `${identLexeme}[${indexLexeme}]`;
     }
     return this.defaultCodeGen(node.children);
   }
@@ -134,12 +156,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);
   }
@@ -198,6 +220,10 @@
     return this.defaultCodeGen(node.children);
   }
 
+  visitLayoutQualifier(node: ASTNode.LayoutQualifier): string {
+    return this.defaultCodeGen(node.children);
+  }
+
   protected _reportError(loc: ShaderRange | ShaderPosition, message: string): void {
     // #if _VERBOSE
     this.errors.push(new GSError(GSErrorName.CompilationError, message, loc, ShaderLab._processingPassText));

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,6 +23,14 @@
     return this._singleton;
   }
 
+  override getFragDataCodeGen(index: string | number): string {
+    return `gl_FragData[${index}]`;
+  }
+
+  override getReferencedMRTPropText(index: string | number, ident: string): string {
+    return "";
+  }
+
   override getAttributeDeclare(): ICodeSegment[] {
     const ret: ICodeSegment[] = [];
     for (const item of Object.values(VisitorContext.context._referencedAttributeList)) {
@@ -42,4 +52,32 @@
     }
     return ret;
   }
+
+  override getMRTDeclare(): ICodeSegment[] | undefined {
+    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);
+  }
 }

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

@@ -9,6 +9,7 @@
 import { ShaderLab } from "../ShaderLab";
 
 const V3_GL_FragColor = "GS_glFragColor";
+const V3_GL_FragData = "GS_glFragData";
 
 export class GLES300Visitor extends GLESVisitor {
   override _versionText: string = "#version 300 es";
@@ -21,6 +22,14 @@
     return this._singleton;
   }
 
+  override getFragDataCodeGen(index: string | number): string {
+    return `${V3_GL_FragData}_${index}`;
+  }
+
+  override getReferencedMRTPropText(index: string | number, ident: string): string {
+    return `layout(location = ${index}) out vec4 ${ident};`;
+  }
+
   override getAttributeDeclare(): ICodeSegment[] {
     const ret: ICodeSegment[] = [];
     for (const item of Object.values(VisitorContext.context._referencedAttributeList)) {
@@ -46,6 +55,26 @@
     return ret;
   }
 
+  override getMRTDeclare(): ICodeSegment[] {
+    const ret: ICodeSegment[] = [];
+    const referencedMRTList = VisitorContext.context._referencedMRTList;
+    for (let ident in referencedMRTList) {
+      const info = referencedMRTList[ident];
+      if (typeof info === "string") {
+        ret.push({
+          text: info,
+          index: Number.MAX_SAFE_INTEGER
+        });
+      } else {
+        ret.push({
+          text: this.getReferencedMRTPropText(info.mrtIndex, ident),
+          index: info.ident.location.start.index
+        });
+      }
+    }
+    return ret;
+  }
+
   override visitFunctionIdentifier(node: ASTNode.FunctionIdentifier): string {
     const typeSpecifier = node.children[0] as ASTNode.TypeSpecifier;
     if (typeSpecifier.children.length !== 1) {
@@ -81,11 +110,15 @@
   }
 
   override visitVariableIdentifier(node: ASTNode.VariableIdentifier): string {
-    if (VisitorContext.context.stage === EShaderStage.FRAGMENT && node.lexeme === "gl_FragColor") {
-      if (!VisitorContext.context._referencedVaryingList[V3_GL_FragColor]) {
+    const { context } = VisitorContext;
+    if (context.stage === EShaderStage.FRAGMENT && node.lexeme === "gl_FragColor") {
+      if (context.mrtStruct) {
+        this._reportError(node.location, "gl_FragColor cannot be used with MRT (Multiple Render Targets).");
+      }
+      if (!context._referencedVaryingList[V3_GL_FragColor]) {
         const token = Token.pool.get();
         token.set(ETokenType.ID, V3_GL_FragColor, ShaderLab.createPosition(0, 0, 0));
-        VisitorContext.context._referencedVaryingList[V3_GL_FragColor] = {
+        context._referencedVaryingList[V3_GL_FragColor] = {
           ident: token,
           typeInfo: new SymbolType(EKeyword.VEC4, "vec4"),
           qualifier: "out",
@@ -96,4 +129,24 @@
     }
     return super.visitVariableIdentifier(node);
   }
+
+  override visitJumpStatement(node: ASTNode.JumpStatement): string {
+    if (node.isFragReturnStatement) {
+      const { _referencedVaryingList } = VisitorContext.context;
+      if (!_referencedVaryingList[V3_GL_FragColor]) {
+        const token = Token.pool.get();
+        token.set(ETokenType.ID, V3_GL_FragColor, ShaderLab.createPosition(0, 0, 0));
+        _referencedVaryingList[V3_GL_FragColor] = {
+          ident: token,
+          typeInfo: new SymbolType(EKeyword.VEC4, "vec4"),
+          qualifier: "out",
+          astNode: node
+        };
+      }
+
+      const expression = node.children[1] as ASTNode.Expression;
+      return `${V3_GL_FragColor} = ${expression.codeGen(this)};`;
+    }
+    return super.visitJumpStatement(node);
+  }
 }