Improve GLSL ES3.00 shader syntax compatibility

packages/core/src/base/Constant.ts

@@ -106,6 +106,7 @@ export enum GLCapabilityType {
   colorBufferHalfFloat = "EXT_color_buffer_half_float",
   textureFilterAnisotropic = "EXT_texture_filter_anisotropic",
   blendMinMax = "EXT_blend_minmax",
+  fragDepth = "EXT_frag_depth",
 
   astc = "WEBGL_compressed_texture_astc",
   astc_webkit = "WEBKIT_WEBGL_compressed_texture_astc",

packages/core/src/shaderlib/ShaderFactory.ts

@@ -3,10 +3,17 @@ import { ShaderLib } from "./ShaderLib";
 
 export class ShaderFactory {
   /** @internal */
-  static readonly _shaderExtension = ["GL_EXT_shader_texture_lod", "GL_OES_standard_derivatives", "GL_EXT_draw_buffers"]
+  static readonly _shaderExtension = [
+    "GL_EXT_shader_texture_lod",
+    "GL_OES_standard_derivatives",
+    "GL_EXT_draw_buffers",
+    "GL_EXT_frag_depth"
+  ]
     .map((e) => `#extension ${e} : enable\n`)
     .join("");
 
+  private static readonly _has300OutInFragReg = /\bout\s+(?:\w+\s+)?(?:vec4)\s+(?:\w+)\s*;/; // [layout(location = 0)] out [highp] vec4 [color];
+
   static parseCustomMacros(macros: string[]) {
     return macros.map((m) => `#define ${m}\n`).join("");
   }
@@ -47,28 +54,39 @@ export class ShaderFactory {
    * @param isFrag - Whether it is a fragment shader.
    * */
   static convertTo300(shader: string, isFrag?: boolean) {
-    /** replace attribute and in */
-    shader = shader.replace(/\battribute\b/g, "in");
     shader = shader.replace(/\bvarying\b/g, isFrag ? "in" : "out");
-
-    /** replace api */
     shader = shader.replace(/\btexture(2D|Cube)\b/g, "texture");
-    shader = shader.replace(/\btexture(2D|Cube)LodEXT\b/g, "textureLod");
+    shader = shader.replace(/\btexture2DProj\b/g, "textureProj");
+
     if (isFrag) {
-      const isMRT = /\bgl_FragData\[.+?\]/g.test(shader);
-      if (isMRT) {
-        shader = shader.replace(/\bgl_FragColor\b/g, "gl_FragData[0]");
-        const result = shader.match(/\bgl_FragData\[.+?\]/g);
-        shader = this._replaceMRTShader(shader, result);
-      } else {
-        shader = shader.replace(/void\s+?main\s*\(/g, `out vec4 glFragColor;\nvoid main(`);
-        shader = shader.replace(/\bgl_FragColor\b/g, "glFragColor");
+      shader = shader.replace(/\btexture(2D|Cube)LodEXT\b/g, "textureLod");
+      shader = shader.replace(/\btexture(2D|Cube)GradEXT\b/g, "textureGrad");
+      shader = shader.replace(/\btexture2DProjLodEXT\b/g, "textureProjLod");
+      shader = shader.replace(/\btexture2DProjGradEXT\b/g, "textureProjGrad");
+      shader = shader.replace(/\bgl_FragDepthEXT\b/g, "gl_FragDepth");
+
+      if (!ShaderFactory._has300Output(shader)) {
+        const isMRT = /\bgl_FragData\[.+?\]/g.test(shader);
+        if (isMRT) {
+          shader = shader.replace(/\bgl_FragColor\b/g, "gl_FragData[0]");
+          const result = shader.match(/\bgl_FragData\[.+?\]/g);
+          shader = this._replaceMRTShader(shader, result);
+        } else {
+          shader = shader.replace(/void\s+?main\s*\(/g, `out vec4 glFragColor;\nvoid main(`);
+          shader = shader.replace(/\bgl_FragColor\b/g, "glFragColor");
+        }
       }
+    } else {
+      shader = shader.replace(/\battribute\b/g, "in");
     }
 
     return shader;
   }
 
+  private static _has300Output(fragmentShader: string): boolean {
+    return ShaderFactory._has300OutInFragReg.test(fragmentShader);
+  }
+
   private static _replaceMRTShader(shader: string, result: string[]): string {
     let declaration = "";
     const mrtIndexSet = new Set();

packages/rhi-webgl/src/GLCapability.ts

@@ -175,7 +175,8 @@ export class GLCapability {
       WEBGL_colorBufferFloat,
       colorBufferFloat,
       colorBufferHalfFloat,
-      textureFilterAnisotropic
+      textureFilterAnisotropic,
+      fragDepth
     } = GLCapabilityType;
     cap.set(shaderVertexID, isWebGL2);
     cap.set(standardDerivatives, isWebGL2 || !!requireExtension(standardDerivatives));
@@ -200,6 +201,7 @@ export class GLCapability {
       (isWebGL2 && !!requireExtension(colorBufferFloat)) || !!requireExtension(colorBufferHalfFloat)
     );
     cap.set(textureFilterAnisotropic, !!requireExtension(textureFilterAnisotropic));
+    cap.set(fragDepth, isWebGL2 || !!requireExtension(fragDepth));
 
     cap.set(astc, !!(requireExtension(astc) || requireExtension(astc_webkit)));
     cap.set(etc, !!(requireExtension(etc) || requireExtension(etc_webkit)));

tests/src/core/Shader.test.ts

@@ -2,16 +2,16 @@ import {
   BlinnPhongMaterial,
   Camera,
   DirectLight,
+  Material,
   MeshRenderer,
   PrimitiveMesh,
   Shader,
+  ShaderFactory,
   ShaderMacro,
   ShaderPass,
   ShaderProperty,
   ShaderTagKey,
-  SubShader,
-  RenderQueueType,
-  Material
+  SubShader
 } from "@galacean/engine-core";
 import { WebGLEngine } from "@galacean/engine-rhi-webgl";
 import { ShaderLab } from "@galacean/engine-shader-lab";
@@ -198,6 +198,145 @@ describe("Shader", () => {
       expect(Shader.getMacroByName("SET_TEXTURE_GRAY")).to.be.equal(macro);
     });
   });
+
+  describe("GLSL Convert test", () => {
+    it("Shader api vertex replace test", async () => {
+      expect(
+        ShaderFactory.convertTo300(
+          `
+        attribute vec3 POSITION;
+        attribute vec2 TEXCOORD_0;
+        varying vec2 v_uv;
+        uniform sampler2D u_texture;
+        uniform samplerCube u_textureCube;
+
+        void main(){
+          gl_Position = vec4(POSITION, 1.0);
+          v_uv = TEXCOORD_0;
+          vec4 color1 = texture2D(u_texture, TEXCOORD_0);
+          vec4 color2 = textureCube(u_textureCube, POSITION);
+          vec4 color3 = texture2DProj(u_texture, POSITION);
+        }
+    `
+        )
+      ).to.be.equal(`
+        in vec3 POSITION;
+        in vec2 TEXCOORD_0;
+        out vec2 v_uv;
+        uniform sampler2D u_texture;
+        uniform samplerCube u_textureCube;
+
+        void main(){
+          gl_Position = vec4(POSITION, 1.0);
+          v_uv = TEXCOORD_0;
+          vec4 color1 = texture(u_texture, TEXCOORD_0);
+          vec4 color2 = texture(u_textureCube, POSITION);
+          vec4 color3 = textureProj(u_texture, POSITION);
+        }
+    `);
+    });
+
+    it("Shader api fragment replace test", async () => {
+      expect(
+        ShaderFactory.convertTo300(
+          `
+        varying vec2 v_uv; 
+        uniform sampler2D u_texture;
+        uniform samplerCube u_textureCube;
+
+        void main(){
+          gl_FragColor = texture2D(u_texture, v_uv);
+          vec4 color1 = textureCube(u_textureCube, vec3(1));
+          vec4 color2 = texture2DProj(u_textureCube, vec3(1));
+          vec4 color3 = texture2DLodEXT(u_texture, v_uv, 1.0);
+          vec4 color4 = textureCubeLodEXT(u_textureCube, vec3(1), 1.0);
+          vec4 color5 = texture2DGradEXT(u_texture, v_uv, vec2(1), vec2(1));
+          vec4 color6 = textureCubeGradEXT(u_textureCube, v_uv, vec2(1), vec2(1));
+          vec4 color7 = texture2DProjGradEXT(u_texture, vec3(1), vec2(1), vec2(1));
+          vec4 color8 = texture2DProjLodEXT(u_texture, vec3(1), 1.0);
+          gl_FragDepthEXT = 0.5;
+        }
+    `,
+          true
+        )
+      ).to.be.equal(
+        `
+        in vec2 v_uv; 
+        uniform sampler2D u_texture;
+        uniform samplerCube u_textureCube;\n
+        out vec4 glFragColor;\nvoid main(){
+          glFragColor = texture(u_texture, v_uv);
+          vec4 color1 = texture(u_textureCube, vec3(1));
+          vec4 color2 = textureProj(u_textureCube, vec3(1));
+          vec4 color3 = textureLod(u_texture, v_uv, 1.0);
+          vec4 color4 = textureLod(u_textureCube, vec3(1), 1.0);
+          vec4 color5 = textureGrad(u_texture, v_uv, vec2(1), vec2(1));
+          vec4 color6 = textureGrad(u_textureCube, v_uv, vec2(1), vec2(1));
+          vec4 color7 = textureProjGrad(u_texture, vec3(1), vec2(1), vec2(1));
+          vec4 color8 = textureProjLod(u_texture, vec3(1), 1.0);
+          gl_FragDepth = 0.5;
+        }
+    `
+      );
+    });
+
+    it("Shader api fragment layout test", async () => {
+      // original shader has out
+      expect(
+        ShaderFactory.convertTo300(
+          `
+        varying vec2 v_uv; 
+        uniform sampler2D u_texture;
+
+        out vec4 color;
+        void main(){
+          color = texture2D(u_texture, v_uv);
+        }
+    `,
+          true
+        )
+      ).to.be.equal(
+        `
+        in vec2 v_uv; 
+        uniform sampler2D u_texture;
+
+        out vec4 color;
+        void main(){
+          color = texture(u_texture, v_uv);
+        }
+    `
+      );
+
+      // mrt
+      expect(
+        ShaderFactory.convertTo300(
+          `
+        varying vec2 v_uv; 
+        uniform sampler2D u_texture;
+
+        void main(){
+          gl_FragData[0] = texture2D(u_texture, v_uv);
+          gl_FragColor.rgb += vec3(0.1);
+          gl_FragData[1] = texture2D(u_texture, v_uv);
+          gl_FragData[2] = texture2D(u_texture, v_uv);
+        }
+    `,
+          true
+        )
+      ).to.be.equal(
+        `
+        in vec2 v_uv; 
+        uniform sampler2D u_texture;\n
+        layout(location=0) out vec4 fragOutColor0;\nlayout(location=1) out vec4 fragOutColor1;\nlayout(location=2) out vec4 fragOutColor2;\nvoid main(){
+          fragOutColor0 = texture(u_texture, v_uv);
+          fragOutColor0.rgb += vec3(0.1);
+          fragOutColor1 = texture(u_texture, v_uv);
+          fragOutColor2 = texture(u_texture, v_uv);
+        }
+    `
+      );
+    });
+  });
 });
 
 const customVS = `