Replace ui shader

packages/core/src/BasicResources.ts

@@ -115,7 +115,6 @@ export class BasicResources {
   readonly spriteDefaultMaterial: Material;
   readonly textDefaultMaterial: Material;
   readonly spriteMaskDefaultMaterial: Material;
-  readonly uiDefaultMaterial: Material;
 
   constructor(engine: Engine) {
     // prettier-ignore
@@ -166,7 +165,6 @@ export class BasicResources {
     this.spriteDefaultMaterial = this._create2DMaterial(engine, Shader.find("Sprite"));
     this.textDefaultMaterial = this._create2DMaterial(engine, Shader.find("Text"));
     this.spriteMaskDefaultMaterial = this._createSpriteMaskMaterial(engine);
-    this.uiDefaultMaterial = this._createUIMaterial(engine);
   }
 
   private _createBlitMesh(engine: Engine, vertices: Float32Array): ModelMesh {
@@ -267,23 +265,6 @@ export class BasicResources {
     material.isGCIgnored = true;
     return material;
   }
-
-  private _createUIMaterial(engine: Engine): Material {
-    const material = new Material(engine, Shader.find("ui"));
-    const renderState = material.renderState;
-    const target = renderState.blendState.targetBlendState;
-    target.enabled = true;
-    target.sourceColorBlendFactor = BlendFactor.SourceAlpha;
-    target.destinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha;
-    target.sourceAlphaBlendFactor = BlendFactor.One;
-    target.destinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
-    target.colorBlendOperation = target.alphaBlendOperation = BlendOperation.Add;
-    renderState.depthState.writeEnabled = false;
-    renderState.rasterState.cullMode = CullMode.Off;
-    renderState.renderQueueType = RenderQueueType.Transparent;
-    material.isGCIgnored = true;
-    return material;
-  }
 }
 
 enum TextureType {

packages/core/src/RenderPipeline/index.ts

@@ -1,5 +1,5 @@
 export { BasicRenderPipeline, RenderQueueFlags } from "./BasicRenderPipeline";
 export { BatchUtils } from "./BatchUtils";
 export { Blitter } from "./Blitter";
-export { PipelineStage } from "./enums/PipelineStage";
 export { RenderQueue } from "./RenderQueue";
+export { PipelineStage } from "./enums/PipelineStage";

packages/core/src/shader/ShaderPool.ts

@@ -25,8 +25,6 @@ import spriteFs from "../shaderlib/extra/sprite.fs.glsl";
 import spriteVs from "../shaderlib/extra/sprite.vs.glsl";
 import textFs from "../shaderlib/extra/text.fs.glsl";
 import textVs from "../shaderlib/extra/text.vs.glsl";
-import uiDefaultFs from "../shaderlib/extra/uiDefault.fs.glsl";
-import uiDefaultVs from "../shaderlib/extra/uiDefault.vs.glsl";
 import unlitFs from "../shaderlib/extra/unlit.fs.glsl";
 import unlitVs from "../shaderlib/extra/unlit.vs.glsl";
 import { Shader } from "./Shader";
@@ -71,7 +69,6 @@ export class ShaderPool {
     Shader.create("particle-shader", [new ShaderPass("Forward", particleVs, particleFs, forwardPassTags)]);
     Shader.create("SpriteMask", [new ShaderPass("Forward", spriteMaskVs, spriteMaskFs, forwardPassTags)]);
     Shader.create("Sprite", [new ShaderPass("Forward", spriteVs, spriteFs, forwardPassTags)]);
-    Shader.create("ui", [new ShaderPass("Forward", uiDefaultVs, uiDefaultFs, forwardPassTags)]);
     Shader.create("Text", [new ShaderPass("Forward", textVs, textFs, forwardPassTags)]);
     Shader.create("background-texture", [
       new ShaderPass("Forward", backgroundTextureVs, backgroundTextureFs, forwardPassTags)

packages/ui/src/component/advanced/Image.ts

@@ -151,8 +151,7 @@ export class Image extends UIRenderer implements ISpriteRenderer {
     super(entity);
 
     this.drawMode = SpriteDrawMode.Simple;
-    // @ts-ignore
-    this.setMaterial(this._engine._basicResources.uiDefaultMaterial);
+    this.setMaterial(this._engine._getUIDefaultMaterial());
     this._onSpriteChange = this._onSpriteChange.bind(this);
     //@ts-ignore
     this._color._onValueChanged = this._onColorChange.bind(this);
@@ -223,8 +222,7 @@ export class Image extends UIRenderer implements ISpriteRenderer {
     }
     // @todo: This question needs to be raised rather than hidden.
     if (material.destroyed) {
-      // @ts-ignore
-      material = this._engine._basicResources.uiDefaultMaterial;
+      material = this._engine._getUIDefaultMaterial();
     }
 
     if (this._color.a * this._alpha <= 0) {

packages/ui/src/index.ts

@@ -1,4 +1,18 @@
-import { Entity } from "@galacean/engine";
+import {
+  BlendFactor,
+  BlendOperation,
+  CullMode,
+  Engine,
+  Entity,
+  Material,
+  PipelineStage,
+  RenderQueueType,
+  Shader,
+  ShaderPass
+} from "@galacean/engine";
+import uiDefaultFs from "./shader/uiDefault.fs.glsl";
+import uiDefaultVs from "./shader/uiDefault.vs.glsl";
+
 export { UICanvas } from "./component/UICanvas";
 export { UIGroup } from "./component/UIGroup";
 export { UIRenderer } from "./component/UIRenderer";
@@ -14,6 +28,37 @@ export { CanvasRenderMode } from "./enums/CanvasRenderMode";
 export { ResolutionAdaptationStrategy } from "./enums/ResolutionAdaptationStrategy";
 export { UIPointerEventEmitter } from "./input/UIPointerEventEmitter";
 
+export class EngineExtension {
+  _uiDefaultMaterial: Material;
+  _getUIDefaultMaterial(): Material {
+    if (!this._uiDefaultMaterial) {
+      const shader =
+        Shader.find("ui") ??
+        Shader.create("ui", [
+          new ShaderPass("Forward", uiDefaultVs, uiDefaultFs, {
+            pipelineStage: PipelineStage.Forward
+          })
+        ]);
+      // @ts-ignore
+      const material = new Material(this, shader);
+      const renderState = material.renderState;
+      const target = renderState.blendState.targetBlendState;
+      target.enabled = true;
+      target.sourceColorBlendFactor = BlendFactor.SourceAlpha;
+      target.destinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha;
+      target.sourceAlphaBlendFactor = BlendFactor.One;
+      target.destinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
+      target.colorBlendOperation = target.alphaBlendOperation = BlendOperation.Add;
+      renderState.depthState.writeEnabled = false;
+      renderState.rasterState.cullMode = CullMode.Off;
+      renderState.renderQueueType = RenderQueueType.Transparent;
+      material.isGCIgnored = true;
+      this._uiDefaultMaterial = material;
+    }
+    return this._uiDefaultMaterial;
+  }
+}
+
 export class EntityExtension {
   _uiHierarchyVersion = 0;
   _updateUIHierarchyVersion(version: number): void {
@@ -26,6 +71,12 @@ export class EntityExtension {
 }
 
 declare module "@galacean/engine" {
+  interface Engine {
+    // @internal
+    _uiDefaultMaterial: Material;
+    // @internal
+    _getUIDefaultMaterial(): Material;
+  }
   interface Entity {
     // @internal
     _uiHierarchyVersion: number;
@@ -46,4 +97,5 @@ function ApplyMixins(derivedCtor: any, baseCtors: any[]): void {
   });
 }
 
+ApplyMixins(Engine, [EngineExtension]);
 ApplyMixins(Entity, [EntityExtension]);

packages/ui/src/shader/global.d.ts

@@ -0,0 +1,9 @@
+declare module "*.glsl" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.gs" {
+  const value: string;
+  export default value;
+}