Editor

Editor {
    Properties {
        material_BaseColor("Offset unit scale", Color) = (1,1,1,1);
        ...
        Header("Emissive")
        {
            material_EmissiveColor("Emissive color", Color) = (1,1,1,1);
            ...
        }
        ...
    }
    ...
    Macros {
        [On] UV_OFFSET("UV Offset", Range(1,100)) = 10;
        ...
        Header("") {
            SOME_MACRO("label", Int) = 1;
        }
    }
    ...
    // Specify the path of bound UIScript.
    UIScript "./shaderScript.ts";
}

/**
 * @language zh
 * Comments description
 */
 
/**
 * @language en
 * 注释描述
 */
propertyName("Description", EditType) = [DefaultValue];

propertyName("Property Description", Enum(Item1: 1, Item2: 2, Item3: 3)) = 1;

[On/Off]macroName("MacroLabel", EditType) = [DefaultValue];

Editor {
    ...
    UIScript "/path/to/script";
    ...
}

import { Color, Material, Texture, Vector2, Vector3, Vector4 } from "@galacean/engine";
 
type ShaderPropertyValue = number | Vector2 | Vector3 | Vector4 | Color | Texture;
type ShaderMacroValue = number | Vector2 | Vector3 | Vector4 | Color;
 
/**
 * Script for extending `Shader` UI logic.
 */
export abstract class ShaderUIScript {
  /** @internal */
  _propertyCallBacks: Map<string, (material: Material, value: ShaderPropertyValue) => void> = new Map();
 
  /** @internal */
  _macroCallBacks: Map<string, (material: Material, defined: boolean, value: ShaderMacroValue) => void> = new Map();
 
  /**
   * The method is called when then shader is switched.
   * @param material - The material which the shader is bound to
   */
  onMaterialShaderSwitched(material: Material): void {}
 
  /**
   * Register property change callback.
   * @parma propertyName - Property name
   * @parma onChanged - Fired on property changed
   */
  protected onPropertyChanged(
    propertyName: string,
    onChanged: (material: Material, value: ShaderPropertyValue) => void
  ): void {
    this._propertyCallBacks.set(propertyName, onChanged);
  }
 
  /**
   * Register macro change callback.
   * @parma macroName - Macro name
   * @parma onChanged - Fired on macro changed
   */
  protected onMacroChanged(
    macroName: string,
    onChanged: (material: Material, defined: boolean, value: ShaderMacroValue) => void
  ): void {
    this._macroCallBacks.set(macroName, onChanged);
  }
}

import { Material, RenderQueueType, Vector3, BlendFactor, RenderFace, CullMode, BlendMode } from "@galacean/engine";
 
export default class extends ShaderUIScript {
  constructor() {
    super();
 
    ......
    // Register change callbacks in constructor.
    this.onPropertyChanged("material_NormalTexture", (material: Material, value) => {
      const shaderData = material.shaderData;
      if (value) {
        shaderData.enableMacro("MATERIAL_HAS_NORMALTEXTURE");
      } else {
        shaderData.disableMacro("MATERIAL_HAS_NORMALTEXTURE");
      }
    })
 
    ......
 
  }
 
  // Specify callback on shader switch.
  override onMaterialShaderSwitched(material: Material) {
    const shaderData = material.shaderData;
 
    shaderData.disableMacro("MATERIAL_OMIT_NORMAL");
    shaderData.enableMacro("MATERIAL_NEED_WORLD_POS");
    shaderData.enableMacro("MATERIAL_NEED_TILING_OFFSET");
 
    // default value
    const anisotropyInfo = shaderData.getVector3("material_AnisotropyInfo");
 
    if (!anisotropyInfo) {
      shaderData.setVector3("material_AnisotropyInfo", new Vector3(1, 0, 0));
    } else {
      shaderData.setFloat("anisotropy", anisotropyInfo.z);
      const PI2 = Math.PI * 2;
      const rotationRad = (Math.atan2(anisotropyInfo.y, anisotropyInfo.x) + PI2 ) % PI2;
      shaderData.setFloat("anisotropyRotation", rotationRad * (180 / Math.PI))
    }
  }
}