efactor(shader): migrate GLSL shaders to ShaderLab and clean up shader infrastructure

docs/en/graphics/material/shader.mdx

@@ -372,14 +372,7 @@ Include code snippets using the `#include` directive:
 
 ## Registering Code Snippets
 
-The framework provides many built-in code snippets; developers can register them directly for use:
-
-```ts showLineNumbers {4} filename="Typescript"
-import { registerIncludes } from "@galacean/engine-shader";
-
-// Register the built-in ShaderLab code snippets.
-registerIncludes();
-```
+Built-in code snippets are automatically registered when the engine is created — no manual registration is needed.
 
 For custom snippets, you can register them manually through an interface...
 

docs/zh/graphics/material/shader.mdx

@@ -376,14 +376,7 @@ MRT frag(Varyings input) {
 
 ## 注册代码片段
 
-官方提供了很多内置代码段，开发者可以直接注册后使用:
-
-```ts showLineNumbers {4} filename="Typescript"
-import { registerIncludes } from "@galacean/engine-shader";
-
-// 对内置 ShaderLab 代码段注册。
-registerIncludes();
-```
+内置代码段会在引擎创建时自动注册，无需手动调用。
 
 如果是自定义的片段，可以通过接口进行手动注册:
 ```ts

e2e/case/camera-ssao.ts

@@ -22,14 +22,12 @@ import {
   WebGLEngine,
   WebGLMode
 } from "@galacean/engine";
-import { PBRSource, registerIncludes } from "@galacean/engine-shader";
+import { PBRSource } from "@galacean/engine-shader";
 import { ShaderLab } from "@galacean/engine-shaderlab";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 
-registerIncludes();
-
 // Create engine
 WebGLEngine.create({
   canvas: "canvas",

e2e/case/material-pbr-specular.ts

@@ -14,14 +14,12 @@ import {
   Vector3,
   WebGLEngine
 } from "@galacean/engine";
-import { PBRSource, registerIncludes } from "@galacean/engine-shader";
+import { PBRSource } from "@galacean/engine-shader";
 import { ShaderLab } from "@galacean/engine-shaderlab";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 
-registerIncludes();
-
 // Create engine
 WebGLEngine.create({ canvas: "canvas", shaderLab: new ShaderLab() }).then((engine) => {
   engine.canvas.resizeByClientSize();

e2e/case/shaderlab-pbr.ts

@@ -18,14 +18,12 @@ import {
   Vector3
 } from "@galacean/engine";
 import { WebGLEngine } from "@galacean/engine-rhi-webgl";
-import { registerIncludes } from "@galacean/engine-shader";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 import { ShaderLab } from "@galacean/engine-shaderlab";
 
 Logger.enable();
 
 const shaderLab = new ShaderLab();
-registerIncludes();
 
 // const pbrShaderSource = `Shader "Water" {
 

examples/src/project-loader.ts

@@ -4,13 +4,9 @@
  */
 import { AssetType, Logger, WebGLEngine } from "@galacean/engine";
 import { ShaderLab } from "@galacean/engine-shaderlab";
-import { registerIncludes } from "@galacean/engine-shader";
 
 Logger.enable();
 
-const shaderLab = new ShaderLab();
-registerIncludes();
-
 WebGLEngine.create({
   canvas: document.getElementById("canvas") as HTMLCanvasElement,
   shaderLab

examples/src/shaderlab-05-advance.ts

@@ -14,7 +14,6 @@ import {
   Vector3,
   WebGLEngine
 } from "@galacean/engine";
-import { registerIncludes } from "@galacean/engine-shader";
 import { ShaderLab } from "@galacean/engine-shaderlab";
 
 // 使用引擎内置Shader片段的骨骼动画Unlit着色器
@@ -81,9 +80,6 @@ Shader "Tutorial/05-SkinnedUnlit" {
 // 主程序
 Logger.enable();
 
-// 注册引擎内置的Shader代码片段
-registerIncludes();
-
 WebGLEngine.create({ canvas: "canvas", shaderLab: new ShaderLab() }).then(async (engine) => {
   engine.canvas.resizeByClientSize();
 

packages/core/package.json

@@ -21,7 +21,8 @@
     "types/**/*"
   ],
   "dependencies": {
-    "@galacean/engine-math": "workspace:*"
+    "@galacean/engine-math": "workspace:*",
+    "@galacean/engine-shader": "workspace:*"
   },
   "devDependencies": {
     "@galacean/engine-design": "workspace:*"

packages/core/src/Background.ts

@@ -31,8 +31,8 @@ export class Background {
 
   /** @internal */
   _mesh: ModelMesh;
-  /** @internal */
-  _material: Material;
+
+  private __material: Material;
 
   private _solidColor = new Color(0.05087608817155679, 0.05087608817155679, 0.05087608817155679, 1.0);
   private _texture: Texture2D = null;
@@ -93,18 +93,34 @@ export class Background {
     this.texture = null;
     this._mesh._addReferCount(-1);
     this._mesh = null;
-    this._material._addReferCount(-1);
-    this._material = null;
+    if (this.__material) {
+      this.__material._addReferCount(-1);
+      this.__material = null;
+    }
     this.sky.destroy();
   }
 
   /**
    * Constructor of Background.
    * @param _engine Engine Which the background belongs to.
    */
+  /** @internal */
+  get _material(): Material {
+    if (!this.__material) {
+      const material = new Material(this._engine, Shader.find("Sky/BackgroundTexture"));
+      material.renderState.depthState.compareFunction = CompareFunction.LessEqual;
+      material._addReferCount(1);
+      this.__material = material;
+    }
+    return this.__material;
+  }
+
+  set _material(value: Material) {
+    this.__material = value;
+  }
+
   constructor(private _engine: Engine) {
     this._initMesh(_engine);
-    this._initMaterial(_engine);
   }
 
   /**
@@ -162,12 +178,6 @@ export class Background {
     this._mesh._addReferCount(1);
   }
 
-  private _initMaterial(engine: Engine): void {
-    const material = (this._material = new Material(engine, Shader.find("background-texture")));
-    material.renderState.depthState.compareFunction = CompareFunction.LessEqual;
-    material._addReferCount(1);
-  }
-
   private _createPlane(engine: Engine): ModelMesh {
     const mesh = new ModelMesh(engine);
     const indices = new Uint8Array([1, 2, 0, 1, 3, 2]);

packages/core/src/BasicResources.ts

@@ -107,24 +107,50 @@ export class BasicResources {
    */
   readonly blitMesh: ModelMesh;
   readonly flipYBlitMesh: ModelMesh;
-  readonly blitMaterial: Material;
-  readonly blitScreenMaterial: Material;
 
   readonly whiteTexture2D: Texture2D;
   readonly whiteTextureCube: TextureCube;
   readonly whiteTexture2DArray: Texture2DArray;
   readonly uintWhiteTexture2D: Texture2D;
 
-  readonly spriteDefaultMaterial: Material;
-  readonly textDefaultMaterial: Material;
-  readonly spriteMaskDefaultMaterial: Material;
-
-  readonly meshMagentaMaterial: Material;
-  readonly particleMagentaMaterial: Material;
-
+  private _blitMaterial: Material;
+  private _blitScreenMaterial: Material;
+  private _spriteDefaultMaterial: Material;
+  private _textDefaultMaterial: Material;
+  private _spriteMaskDefaultMaterial: Material;
+  private _meshMagentaMaterial: Material;
+  private _particleMagentaMaterial: Material;
   private _blinnPhongMaterial: BlinnPhongMaterial;
   private _prefilteredDFGTexture: Texture2D;
 
+  get blitMaterial(): Material {
+    return (this._blitMaterial ||= this._createBlitMaterial("Utility/Blit"));
+  }
+
+  get blitScreenMaterial(): Material {
+    return (this._blitScreenMaterial ||= this._createBlitMaterial("Utility/BlitScreen"));
+  }
+
+  get spriteDefaultMaterial(): Material {
+    return (this._spriteDefaultMaterial ||= this._create2DMaterial(this.engine, Shader.find("2D/Sprite")));
+  }
+
+  get textDefaultMaterial(): Material {
+    return (this._textDefaultMaterial ||= this._create2DMaterial(this.engine, Shader.find("2D/Text")));
+  }
+
+  get spriteMaskDefaultMaterial(): Material {
+    return (this._spriteMaskDefaultMaterial ||= this._createSpriteMaskMaterial(this.engine));
+  }
+
+  get meshMagentaMaterial(): Material {
+    return (this._meshMagentaMaterial ||= this._createMagentaMaterial(this.engine, "Unlit"));
+  }
+
+  get particleMagentaMaterial(): Material {
+    return (this._particleMagentaMaterial ||= this._createMagentaMaterial(this.engine, "Particle"));
+  }
+
   get prefilteredDFGTexture(): Texture2D {
     return this._prefilteredDFGTexture;
   }
@@ -142,19 +168,6 @@ export class BasicResources {
       -1, -1, 0, 0, // left-bottom
       -1, 3, 0, 2]); // left-top
 
-    const blitMaterial = new Material(engine, Shader.find("blit"));
-    blitMaterial._addReferCount(1);
-    blitMaterial.renderState.depthState.enabled = false;
-    blitMaterial.renderState.depthState.writeEnabled = false;
-
-    const blitScreenMaterial = new Material(engine, Shader.find("blit-screen"));
-    blitScreenMaterial._addReferCount(1);
-    blitScreenMaterial.renderState.depthState.enabled = false;
-    blitScreenMaterial.renderState.depthState.writeEnabled = false;
-
-    this.blitMaterial = blitMaterial;
-    this.blitScreenMaterial = blitScreenMaterial;
-
     this.blitMesh = this._createBlitMesh(engine, vertices);
     this.flipYBlitMesh = this._createBlitMesh(engine, flipYVertices);
 
@@ -195,13 +208,6 @@ export class BasicResources {
         false
       );
     }
-
-    this.spriteDefaultMaterial = this._create2DMaterial(engine, Shader.find("Sprite"));
-    this.textDefaultMaterial = this._create2DMaterial(engine, Shader.find("Text"));
-    this.spriteMaskDefaultMaterial = this._createSpriteMaskMaterial(engine);
-
-    this.meshMagentaMaterial = this._createMagentaMaterial(engine, "unlit");
-    this.particleMagentaMaterial = this._createMagentaMaterial(engine, "particle-shader");
   }
 
   /**
@@ -326,8 +332,16 @@ export class BasicResources {
     return material;
   }
 
+  private _createBlitMaterial(shaderName: string): Material {
+    const material = new Material(this.engine, Shader.find(shaderName));
+    material._addReferCount(1);
+    material.renderState.depthState.enabled = false;
+    material.renderState.depthState.writeEnabled = false;
+    return material;
+  }
+
   private _createSpriteMaskMaterial(engine: Engine): Material {
-    const material = new Material(engine, Shader.find("SpriteMask"));
+    const material = new Material(engine, Shader.find("2D/SpriteMask"));
     material.isGCIgnored = true;
     return material;
   }

packages/core/src/Engine.ts

@@ -633,6 +633,7 @@ export class Engine extends EventDispatcher {
 
     if (shaderLab && !Shader._shaderLab) {
       Shader._shaderLab = shaderLab;
+      ShaderPool.registerShaders();
     }
 
     const initializePromises = new Array<Promise<any>>();

packages/core/src/lighting/ambientOcclusion/ScalableAmbientObscurancePass.ts

@@ -6,19 +6,16 @@ import { Blitter } from "../../RenderPipeline/Blitter";
 import { PipelinePass } from "../../RenderPipeline/PipelinePass";
 import { PipelineUtils } from "../../RenderPipeline/PipelineUtils";
 import { RenderContext } from "../../RenderPipeline/RenderContext";
-import { Shader, ShaderData, ShaderPass, ShaderProperty } from "../../shader";
-import blitVs from "../../shaderlib/extra/Blit.vs.glsl";
+import { Shader, ShaderData, ShaderProperty } from "../../shader";
 import { RenderTarget, Texture2D, TextureFilterMode, TextureFormat, TextureWrapMode } from "../../texture";
 import { AmbientOcclusionQuality } from "../enums/AmbientOcclusionQuality";
-import bilateralBlurFS from "./shaders/Blur/BilateralBlur.glsl";
-import scalableAmbientOcclusionFS from "./shaders/ScalableAmbientOcclusion.glsl";
 
 /**
  * @internal
  * Scalable Ambient Obscurance render pass.
  */
 export class ScalableAmbientObscurancePass extends PipelinePass {
-  static readonly SHADER_NAME = "ScalableAmbientOcclusion";
+  static readonly SHADER_NAME = "AO/ScalableAmbientOcclusion";
 
   private static _invRadiusSquaredProp = ShaderProperty.getByName("material_invRadiusSquared");
   private static _intensityProp = ShaderProperty.getByName("material_intensity");
@@ -222,8 +219,3 @@ export class ScalableAmbientObscurancePass extends PipelinePass {
     this._quality = quality;
   }
 }
-
-Shader.create(ScalableAmbientObscurancePass.SHADER_NAME, [
-  new ShaderPass("ScalableAmbientOcclusion", blitVs, scalableAmbientOcclusionFS),
-  new ShaderPass("BilateralBlur", blitVs, bilateralBlurFS)
-]);

packages/core/src/material/BlinnPhongMaterial.ts

@@ -160,7 +160,7 @@ export class BlinnPhongMaterial extends BaseMaterial {
    * @param engine - Engine to which the material belongs
    */
   constructor(engine: Engine) {
-    super(engine, Shader.find("blinn-phong"));
+    super(engine, Shader.find("BlinnPhong"));
 
     const shaderData = this.shaderData;
 

packages/core/src/material/PBRMaterial.ts

@@ -757,7 +757,7 @@ export class PBRMaterial extends BaseMaterial {
    * @param engine - Engine to which the material belongs
    */
   constructor(engine: Engine) {
-    super(engine, Shader.find("pbr"));
+    super(engine, Shader.find("PBR"));
 
     const shaderData = this.shaderData;
 

packages/core/src/material/UnlitMaterial.ts

@@ -57,7 +57,7 @@ export class UnlitMaterial extends BaseMaterial {
    * @param engine - Engine to which the material belongs
    */
   constructor(engine: Engine) {
-    super(engine, Shader.find("unlit"));
+    super(engine, Shader.find("Unlit"));
 
     const shaderData = this.shaderData;
 

packages/core/src/particle/ParticleMaterial.ts

@@ -11,7 +11,7 @@ export class ParticleMaterial extends EffectMaterial {
    * @param engine - Engine to which the material belongs
    */
   constructor(engine: Engine) {
-    super(engine, Shader.find("particle-shader"));
+    super(engine, Shader.find("Particle"));
   }
 
   /**