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 @@
 
 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 _hasOutInFragReg = /\bout\s+(?:\w+\s+)?(?:float|vec4)\s+(?:\w+)\s*;/; // [layout(location = 0)] out [highp] [vec4|float] [color|gl_FragDepth];
+
   static parseCustomMacros(macros: string[]) {
     return macros.map((m) => `#define ${m}\n`).join("");
   }
@@ -47,28 +54,42 @@
    * @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._hasOutput(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");
+        }
       }
     }
 
     return shader;
   }
 
+  /**
+   * The temporary solution for checking whether the fragment shader is GLSL 300 es.
+   * @internal
+   */
+  static _hasOutput(fragmentShader: string) {
+    return ShaderFactory._hasOutInFragReg.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)));