Optimize shader sources build (cocos#7998)

* Optimize shader sources build

* Linting

* HTML5, WeChat branch

* Comment

.eslintrc.yaml

@@ -55,6 +55,8 @@ rules:
     # allow underscores, we still widely use pre-dangle naming in our naming convention
     # e.g. private properties, private functions, module scope shared variables etc.
     no-underscore-dangle: off 
+    quotes: [warn, single, { allowTemplateLiterals: true }] # force single, but allow template literal
+    no-else-return: off # else-return is a common pattern which clearly expresses the control flow
 
     ##### AIRBNB-SPECIFIC RULE OVERRIDES #####
 

@types/consts.d.ts

@@ -43,6 +43,8 @@ declare module 'internal:constants' {
      */
     export const JSB: boolean;
 
+    export const HTML5: boolean;
+
     /**
      * Running in the Wechat's mini game.
      */

cocos/core/3d/builtin/init.ts

@@ -32,13 +32,14 @@ import { Device } from '../../gfx';
 import effects from './effects';
 import { legacyCC } from '../../global-exports';
 import { getDeviceShaderVersion } from '../../renderer/core/program-lib';
+import shaderSourceAssembly from './shader-source-assembly';
 
 class BuiltinResMgr {
     protected _device: Device | null = null;
     protected _resources: Record<string, Asset> = {};
 
     // this should be called after renderer initialized
-    public initBuiltinRes (device: Device) {
+    public initBuiltinRes (device: Device): Promise<void> {
         this._device = device;
         const resources = this._resources;
         const canvas = document.createElement('canvas');
@@ -156,12 +157,20 @@ class BuiltinResMgr {
         spriteFrame._uuid = 'default-spriteframe';
         resources[spriteFrame._uuid] = spriteFrame;
 
-        // builtin effects
         const shaderVersionKey = getDeviceShaderVersion(device);
         if (!shaderVersionKey) {
             return Promise.reject(Error('Failed to initialize builtin shaders: unknown device.'));
         }
-        return import(`./shader-sources/${shaderVersionKey}.js`).then(({ default: shaderSources }) => {
+
+        const shaderSources = shaderSourceAssembly[shaderVersionKey];
+        if (!shaderSources) {
+            return Promise.reject(Error(
+                `Current device is requiring builtin shaders of version ${shaderVersionKey} `
+                + `but shaders of that version are not assembled in this build.`,
+            ));
+        }
+
+        return Promise.resolve().then(() => {
             effects.forEach((e, effectIndex) => {
                 const effect = Object.assign(new legacyCC.EffectAsset(), e);
                 effect.shaders.forEach((shaderInfo, shaderIndex) => {
@@ -289,7 +298,14 @@ class BuiltinResMgr {
         // ui spine two color material
         const spineTwoColorMtl = new legacyCC.Material();
         spineTwoColorMtl._uuid = 'ui-spine-two-colored-material';
-        spineTwoColorMtl.initialize({ defines: { USE_TEXTURE: true, CC_USE_EMBEDDED_ALPHA: false, IS_GRAY: false }, effectName: 'spine-two-colored' });
+        spineTwoColorMtl.initialize({
+            defines: {
+                USE_TEXTURE: true,
+                CC_USE_EMBEDDED_ALPHA: false,
+                IS_GRAY: false,
+            },
+            effectName: 'spine-two-colored',
+        });
         resources[spineTwoColorMtl._uuid] = spineTwoColorMtl;
     }
 }

cocos/core/3d/builtin/shader-source-assembly.ts

@@ -0,0 +1,36 @@
+import { HTML5, MINIGAME, RUNTIME_BASED, WECHAT } from 'internal:constants';
+import glsl1 from './shader-sources/glsl1';
+import glsl3 from './shader-sources/glsl3';
+import glsl4 from './shader-sources/glsl4';
+
+type ShaderVersion =
+    | 'glsl1'
+    | 'glsl3'
+    | 'glsl4'
+    ;
+
+type ShaderSource = unknown[][];
+
+/**
+ * The shader sources assembled in this build.
+ */
+const assembly: Partial<Record<ShaderVersion, ShaderSource>> = (() => {
+    if (HTML5 || WECHAT) {
+        return {
+            glsl1,
+            glsl3,
+        };
+    } else if (MINIGAME || RUNTIME_BASED) {
+        return {
+            glsl1,
+        };
+    } else {
+        return {
+            glsl1,
+            glsl3,
+            glsl4,
+        };
+    }
+})();
+
+export default assembly;

cocos/core/default-constants.ts

@@ -46,6 +46,7 @@ export const PREVIEW = tryDefineGlobal('CC_PREVIEW', !EDITOR);
 export const DEV = tryDefineGlobal('CC_DEV', true); // (CC_EDITOR && !CC_BUILD) || CC_PREVIEW || CC_TEST
 export const DEBUG = tryDefineGlobal('CC_DEBUG', true); // CC_DEV || Debug Build
 export const JSB = tryDefineGlobal('CC_JSB', defined('jsb'));
+export const HTML5 = false;
 // @ts-expect-error
 export const WECHAT = tryDefineGlobal('CC_WECHAT', !!(defined('wx') && (wx.getSystemInfoSync || wx.getSharedCanvas)));
 export const MINIGAME = tryDefineGlobal('CC_MINIGAME', false);