Files
esengine/packages/material-system/src/MaterialManager.ts

789 lines
26 KiB
TypeScript
Raw Normal View History

feat: 添加跨平台运行时、资产系统和UI适配功能 (#256) * feat(platform-common): 添加WASM加载器和环境检测API * feat(rapier2d): 新增Rapier2D WASM绑定包 * feat(physics-rapier2d): 添加跨平台WASM加载器 * feat(asset-system): 添加运行时资产目录和bundle格式 * feat(asset-system-editor): 新增编辑器资产管理包 * feat(editor-core): 添加构建系统和模块管理 * feat(editor-app): 重构浏览器预览使用import maps * feat(platform-web): 添加BrowserRuntime和资产读取 * feat(engine): 添加材质系统和着色器管理 * feat(material): 新增材质系统和着色器编辑器 * feat(tilemap): 增强tilemap编辑器和动画系统 * feat(modules): 添加module.json配置 * feat(core): 添加module.json和类型定义更新 * chore: 更新依赖和构建配置 * refactor(plugins): 更新插件模板使用ModuleManifest * chore: 添加第三方依赖库 * chore: 移除BehaviourTree-ai和ecs-astar子模块 * docs: 更新README和文档主题样式 * fix: 修复Rust文档测试和添加rapier2d WASM绑定 * fix(tilemap-editor): 修复画布高DPI屏幕分辨率适配问题 * feat(ui): 添加UI屏幕适配系统(CanvasScaler/SafeArea) * fix(ecs-engine-bindgen): 添加缺失的ecs-framework-math依赖 * fix: 添加缺失的包依赖修复CI构建 * fix: 修复CodeQL检测到的代码问题 * fix: 修复构建错误和缺失依赖 * fix: 修复类型检查错误 * fix(material-system): 修复tsconfig配置支持TypeScript项目引用 * fix(editor-core): 修复Rollup构建配置添加tauri external * fix: 修复CodeQL检测到的代码问题 * fix: 修复CodeQL检测到的代码问题
2025-12-03 22:15:22 +08:00
/**
* Material manager service.
*
*
* Manages materials and shaders for the rendering system.
*
*/
import { Material } from './Material';
import {
Shader,
DEFAULT_VERTEX_SHADER,
DEFAULT_FRAGMENT_SHADER,
GRAYSCALE_FRAGMENT_SHADER,
TINT_FRAGMENT_SHADER,
FLASH_FRAGMENT_SHADER,
OUTLINE_FRAGMENT_SHADER
} from './Shader';
import { BuiltInMaterials, BuiltInShaders, UniformType } from './types';
import type { IAssetManager } from '@esengine/asset-system';
import { AssetType } from '@esengine/asset-system';
import { MaterialLoader, type IMaterialAssetData } from './loaders/MaterialLoader';
import { ShaderLoader, type IShaderAssetData } from './loaders/ShaderLoader';
import { createLogger } from '@esengine/ecs-framework';
/** Logger instance for MaterialManager. | MaterialManager的日志实例。 */
const logger = createLogger('MaterialManager');
/**
* Engine bridge interface for communicating with Rust engine.
* Rust引擎通信的引擎桥接接口
*/
export interface IEngineBridge {
compileShader(vertexSource: string, fragmentSource: string): Promise<number>;
compileShaderWithId(shaderId: number, vertexSource: string, fragmentSource: string): Promise<void>;
hasShader(shaderId: number): boolean;
removeShader(shaderId: number): boolean;
createMaterial(name: string, shaderId: number, blendMode: number): number;
createMaterialWithId(materialId: number, name: string, shaderId: number, blendMode: number): void;
hasMaterial(materialId: number): boolean;
removeMaterial(materialId: number): boolean;
setMaterialFloat(materialId: number, name: string, value: number): boolean;
setMaterialVec2(materialId: number, name: string, x: number, y: number): boolean;
setMaterialVec3(materialId: number, name: string, x: number, y: number, z: number): boolean;
setMaterialVec4(materialId: number, name: string, x: number, y: number, z: number, w: number): boolean;
setMaterialColor(materialId: number, name: string, r: number, g: number, b: number, a: number): boolean;
setMaterialBlendMode(materialId: number, blendMode: number): boolean;
}
/**
* Material manager service.
*
*
* Manages materials, shaders, and their GPU resources.
* GPU资源
*/
export class MaterialManager {
/** Registered shaders. | 已注册的着色器。 */
private shaders: Map<number, Shader> = new Map();
/** Shader name to ID mapping. | 着色器名称到ID的映射。 */
private shaderNameToId: Map<string, number> = new Map();
/** Registered materials. | 已注册的材质。 */
private materials: Map<number, Material> = new Map();
/** Material name to ID mapping. | 材质名称到ID的映射。 */
private materialNameToId: Map<string, number> = new Map();
/** Material path to ID mapping. | 材质路径到ID的映射。 */
private materialPathToId: Map<string, number> = new Map();
/** Shader path to ID mapping. | 着色器路径到ID的映射。 */
private shaderPathToId: Map<string, number> = new Map();
/** Pending material loads (path -> promise). | 等待加载的材质(路径 -> Promise。 */
private pendingMaterialLoads: Map<string, Promise<number>> = new Map();
/** Pending shader loads (path -> promise). | 等待加载的着色器(路径 -> Promise。 */
private pendingShaderLoads: Map<string, Promise<number>> = new Map();
/** Next shader ID for custom shaders. | 下一个自定义着色器ID。 */
private nextShaderId: number = 100;
/** Next material ID for custom materials. | 下一个自定义材质ID。 */
private nextMaterialId: number = 100;
/** Engine bridge for GPU operations. | 用于GPU操作的引擎桥接。 */
private engineBridge: IEngineBridge | null = null;
/** Asset manager for loading material files. | 用于加载材质文件的资产管理器。 */
private assetManager: IAssetManager | null = null;
constructor() {
// Register built-in shaders and materials.
// 注册内置着色器和材质。
this.registerBuiltInAssets();
}
/**
* Set the engine bridge for GPU operations.
* GPU操作的引擎桥接
*
* @param bridge - Engine bridge instance. |
*/
setEngineBridge(bridge: IEngineBridge): void {
this.engineBridge = bridge;
}
/**
* Set the asset manager for loading material files.
*
*
* Also registers Material and Shader loaders with the asset manager.
*
*
* @param manager - Asset manager instance. |
*/
setAssetManager(manager: IAssetManager): void {
this.assetManager = manager;
// Register loaders with asset manager.
// 向资产管理器注册加载器。
if (manager.registerLoader) {
manager.registerLoader(AssetType.Material, new MaterialLoader());
manager.registerLoader(AssetType.Shader, new ShaderLoader());
logger.info('Registered Material and Shader loaders');
}
}
private registerBuiltInAssets(): void {
// Built-in shaders
const builtInShaders = [
{ id: BuiltInShaders.DefaultSprite, name: 'DefaultSprite', vertex: DEFAULT_VERTEX_SHADER, fragment: DEFAULT_FRAGMENT_SHADER },
{ id: BuiltInShaders.Grayscale, name: 'Grayscale', vertex: DEFAULT_VERTEX_SHADER, fragment: GRAYSCALE_FRAGMENT_SHADER },
{ id: BuiltInShaders.Tint, name: 'Tint', vertex: DEFAULT_VERTEX_SHADER, fragment: TINT_FRAGMENT_SHADER },
{ id: BuiltInShaders.Flash, name: 'Flash', vertex: DEFAULT_VERTEX_SHADER, fragment: FLASH_FRAGMENT_SHADER },
{ id: BuiltInShaders.Outline, name: 'Outline', vertex: DEFAULT_VERTEX_SHADER, fragment: OUTLINE_FRAGMENT_SHADER },
];
for (const { id, name, vertex, fragment } of builtInShaders) {
const shader = new Shader(name, vertex, fragment);
shader.id = id;
this.shaders.set(id, shader);
this.shaderNameToId.set(name, id);
}
// Built-in materials
const builtInMaterials = [
{ id: BuiltInMaterials.Default, material: Material.sprite() },
{ id: BuiltInMaterials.Additive, material: Material.additive() },
{ id: BuiltInMaterials.Multiply, material: Material.multiply() },
{ id: BuiltInMaterials.Unlit, material: Material.unlit() },
];
for (const { id, material } of builtInMaterials) {
material.id = id;
this.materials.set(id, material);
this.materialNameToId.set(material.name, id);
}
}
// ============= Shader Management =============
// ============= 着色器管理 =============
/**
* Register a shader.
*
*
* # Arguments |
* * `shader` - Shader instance to register. |
*
* # Returns |
* Shader ID for referencing this shader. | ID
*/
async registerShader(shader: Shader): Promise<number> {
const shaderId = this.nextShaderId++;
shader.id = shaderId;
// Compile on GPU if engine bridge is available
if (this.engineBridge) {
await this.engineBridge.compileShaderWithId(
shaderId,
shader.vertexSource,
shader.fragmentSource
);
shader.markCompiled();
}
this.shaders.set(shaderId, shader);
this.shaderNameToId.set(shader.name, shaderId);
return shaderId;
}
/**
* Get a shader by ID.
* ID获取着色器
*
* # Arguments |
* * `shaderId` - Shader ID to look up. | ID
*
* # Returns |
* Shader instance or undefined if not found. | undefined
*/
getShader(shaderId: number): Shader | undefined {
return this.shaders.get(shaderId);
}
/**
* Get a shader by name.
*
*
* # Arguments |
* * `name` - Shader name to look up. |
*
* # Returns |
* Shader instance or undefined if not found. | undefined
*/
getShaderByName(name: string): Shader | undefined {
const id = this.shaderNameToId.get(name);
return id !== undefined ? this.shaders.get(id) : undefined;
}
/**
* Check if a shader exists.
*
*
* # Arguments |
* * `shaderId` - Shader ID to check. | ID
*/
hasShader(shaderId: number): boolean {
return this.shaders.has(shaderId);
}
/**
* Remove a shader.
*
*
* # Arguments |
* * `shaderId` - Shader ID to remove. | ID
*
* # Returns |
* True if shader was removed, false if not found or is built-in. | true false
*/
removeShader(shaderId: number): boolean {
if (shaderId < 100) {
logger.warn('Cannot remove built-in shader:', shaderId);
return false;
}
const shader = this.shaders.get(shaderId);
if (shader) {
this.shaderNameToId.delete(shader.name);
this.shaders.delete(shaderId);
if (this.engineBridge) {
this.engineBridge.removeShader(shaderId);
}
return true;
}
return false;
}
// ============= Path-based Shader Loading =============
// ============= 基于路径的着色器加载 =============
/**
* Get shader ID by file path.
* ID
*
* Returns 0 (default shader) if not loaded.
* 0
*
* # Arguments |
* * `path` - Shader file path (.shader). | .shader
*
* # Returns |
* Shader ID or 0 if not found. | ID0
*/
getShaderIdByPath(path: string): number {
if (!path) return 0;
return this.shaderPathToId.get(path) ?? 0;
}
/**
* Check if a shader is loaded from a path.
*
*
* # Arguments |
* * `path` - Shader file path to check. |
*/
hasShaderByPath(path: string): boolean {
return this.shaderPathToId.has(path);
}
/**
* Load a shader from a .shader file path.
* .shader
*
* Uses asset-system for file loading and caches the result.
* 使 asset-system
*
* # Arguments |
* * `path` - Shader file path. |
*
* # Returns |
* Shader ID (0 if load failed). | ID0
*/
async loadShaderFromPath(path: string): Promise<number> {
// Return cached ID if already loaded.
// 如果已加载则返回缓存的ID。
const existingId = this.shaderPathToId.get(path);
if (existingId !== undefined) {
return existingId;
}
// Return pending promise if already loading.
// 如果正在加载则返回等待中的 Promise。
const pendingLoad = this.pendingShaderLoads.get(path);
if (pendingLoad) {
return pendingLoad;
}
// Create loading promise.
// 创建加载 Promise。
const loadPromise = this.doLoadShaderFromPath(path);
this.pendingShaderLoads.set(path, loadPromise);
try {
const shaderId = await loadPromise;
return shaderId;
} finally {
this.pendingShaderLoads.delete(path);
}
}
/**
* Internal method to load shader from path.
*
*
* # Arguments |
* * `path` - Shader file path. |
*
* # Returns |
* Shader ID, or 0 if load failed. | ID0
*/
private async doLoadShaderFromPath(path: string): Promise<number> {
if (!this.assetManager) {
logger.warn('No asset manager set, cannot load shader from path:', path);
return 0;
}
try {
// Use asset-system to load shader file.
// 使用 asset-system 加载着色器文件。
const result = await this.assetManager.loadAssetByPath<IShaderAssetData>(path);
// Get shader from asset data.
// 从资产数据获取着色器。
const shader = result.asset.shader;
if (!shader) {
logger.error('Shader asset is null for path:', path);
return 0;
}
// Register the shader.
// 注册着色器。
const shaderId = await this.registerShader(shader);
// Cache path -> ID mapping.
// 缓存路径到ID的映射。
this.shaderPathToId.set(path, shaderId);
return shaderId;
} catch (error) {
logger.error('Failed to load shader from path:', path, error);
return 0;
}
}
/**
* Unload a shader loaded from a path.
*
*
* # Arguments |
* * `path` - Shader file path to unload. |
*
* # Returns |
* True if unloaded successfully. | true
*/
unloadShaderByPath(path: string): boolean {
const shaderId = this.shaderPathToId.get(path);
if (shaderId === undefined) {
return false;
}
this.shaderPathToId.delete(path);
return this.removeShader(shaderId);
}
// ============= Material Management =============
// ============= 材质管理 =============
/**
* Register a material.
*
*
* # Arguments |
* * `material` - Material instance to register. |
*
* # Returns |
* Material ID for referencing this material. | ID
*/
registerMaterial(material: Material): number {
const materialId = this.nextMaterialId++;
material.id = materialId;
// Create on GPU if engine bridge is available
if (this.engineBridge) {
this.engineBridge.createMaterialWithId(
materialId,
material.name,
material.shaderId,
material.blendMode
);
this.syncMaterialUniforms(material);
}
this.materials.set(materialId, material);
this.materialNameToId.set(material.name, materialId);
return materialId;
}
/**
* Get a material by ID.
* ID获取材质
*
* # Arguments |
* * `materialId` - Material ID to look up. | ID
*
* # Returns |
* Material instance or undefined if not found. | undefined
*/
getMaterial(materialId: number): Material | undefined {
return this.materials.get(materialId);
}
/**
* Get a material by name.
*
*
* # Arguments |
* * `name` - Material name to look up. |
*
* # Returns |
* Material instance or undefined if not found. | undefined
*/
getMaterialByName(name: string): Material | undefined {
const id = this.materialNameToId.get(name);
return id !== undefined ? this.materials.get(id) : undefined;
}
/**
* Check if a material exists.
*
*
* # Arguments |
* * `materialId` - Material ID to check. | ID
*/
hasMaterial(materialId: number): boolean {
return this.materials.has(materialId);
}
/**
* Remove a material.
*
*
* # Arguments |
* * `materialId` - Material ID to remove. | ID
*
* # Returns |
* True if material was removed, false if not found or is built-in. | true false
*/
removeMaterial(materialId: number): boolean {
if (materialId < 100) {
logger.warn('Cannot remove built-in material:', materialId);
return false;
}
const material = this.materials.get(materialId);
if (material) {
this.materialNameToId.delete(material.name);
this.materials.delete(materialId);
if (this.engineBridge) {
this.engineBridge.removeMaterial(materialId);
}
return true;
}
return false;
}
/**
* Sync material uniforms to GPU.
* uniform GPU
*
* # Arguments |
* * `material` - Material to sync. |
*/
syncMaterialUniforms(material: Material): void {
if (!this.engineBridge || material.id < 0) return;
for (const [name, uniform] of material.getUniforms()) {
switch (uniform.type) {
case UniformType.Float:
this.engineBridge.setMaterialFloat(material.id, name, uniform.value as number);
break;
case UniformType.Vec2: {
const v2 = uniform.value as number[];
this.engineBridge.setMaterialVec2(material.id, name, v2[0], v2[1]);
break;
}
case UniformType.Vec3: {
const v3 = uniform.value as number[];
this.engineBridge.setMaterialVec3(material.id, name, v3[0], v3[1], v3[2]);
break;
}
case UniformType.Vec4: {
const v4 = uniform.value as number[];
this.engineBridge.setMaterialVec4(material.id, name, v4[0], v4[1], v4[2], v4[3]);
break;
}
case UniformType.Color: {
const c = uniform.value as number[];
this.engineBridge.setMaterialColor(material.id, name, c[0], c[1], c[2], c[3]);
break;
}
}
}
material.markClean();
}
/**
* Update all dirty materials.
*
*
* Syncs all materials that have been modified since last sync.
*
*/
syncDirtyMaterials(): void {
for (const material of this.materials.values()) {
if (material.dirty) {
this.syncMaterialUniforms(material);
}
}
}
// ============= Path-based Material Loading =============
// ============= 基于路径的材质加载 =============
/**
* Get material ID by file path.
* ID
*
* Returns 0 (default material) if not loaded.
* 0
*
* # Arguments |
* * `path` - Material file path (.mat). | .mat
*
* # Returns |
* Material ID or 0 if not found. | ID0
*/
getMaterialIdByPath(path: string): number {
if (!path) return 0;
return this.materialPathToId.get(path) ?? 0;
}
/**
* Check if a material is loaded from a path.
*
*
* # Arguments |
* * `path` - Material file path to check. |
*/
hasMaterialByPath(path: string): boolean {
return this.materialPathToId.has(path);
}
/**
* Load a material from a .mat file path.
* .mat
*
* Uses asset-system for file loading and caches the result.
* 使 asset-system
*
* # Arguments |
* * `path` - Material file path. |
*
* # Returns |
* Material ID (0 if load failed). | ID0
*/
async loadMaterialFromPath(path: string): Promise<number> {
// Return cached ID if already loaded
const existingId = this.materialPathToId.get(path);
if (existingId !== undefined) {
return existingId;
}
// Return pending promise if already loading
const pendingLoad = this.pendingMaterialLoads.get(path);
if (pendingLoad) {
return pendingLoad;
}
// Create loading promise
const loadPromise = this.doLoadMaterialFromPath(path);
this.pendingMaterialLoads.set(path, loadPromise);
try {
const materialId = await loadPromise;
return materialId;
} finally {
this.pendingMaterialLoads.delete(path);
}
}
/**
* Internal method to load material from path.
*
*
* @param path - Material file path. |
* @returns Material ID, or 0 if load failed. | ID0
*/
private async doLoadMaterialFromPath(path: string): Promise<number> {
if (!this.assetManager) {
logger.warn('No asset manager set, cannot load material from path:', path);
return 0;
}
try {
// Use asset-system to load material file.
// 使用 asset-system 加载材质文件。
const result = await this.assetManager.loadAssetByPath<IMaterialAssetData>(path);
// Get material from asset data.
// 从资产数据获取材质。
const material = result.asset.material;
if (!material) {
logger.error('Material asset is null for path:', path);
return 0;
}
// Register the material.
// 注册材质。
const materialId = this.registerMaterial(material);
// Cache path -> ID mapping.
// 缓存路径到ID的映射。
this.materialPathToId.set(path, materialId);
return materialId;
} catch (error) {
logger.error('Failed to load material from path:', path, error);
return 0;
}
}
/**
* Preload multiple materials from paths.
*
*
* Loads all materials in parallel for better performance.
*
*
* # Arguments |
* * `paths` - Array of material file paths. |
*
* # Returns |
* Map of path to material ID. | ID的映射
*/
async preloadMaterials(paths: string[]): Promise<Map<string, number>> {
const results = new Map<string, number>();
await Promise.all(
paths.map(async (path) => {
const id = await this.loadMaterialFromPath(path);
results.set(path, id);
})
);
return results;
}
/**
* Unload a material loaded from a path.
*
*
* # Arguments |
* * `path` - Material file path to unload. |
*
* # Returns |
* True if unloaded successfully. | true
*/
unloadMaterialByPath(path: string): boolean {
const materialId = this.materialPathToId.get(path);
if (materialId === undefined) {
return false;
}
this.materialPathToId.delete(path);
return this.removeMaterial(materialId);
}
// ============= Convenience Methods =============
// ============= 便捷方法 =============
/**
* Create a sprite material with optional tint.
*
*
* # Arguments |
* * `name` - Material name. |
* * `tintR` - Red tint (0-1). | 0-1
* * `tintG` - Green tint (0-1). | 绿0-1
* * `tintB` - Blue tint (0-1). | 0-1
*
* # Returns |
* New Material instance. |
*/
createSpriteMaterial(name: string, tintR: number = 1, tintG: number = 1, tintB: number = 1): Material {
const material = new Material(name, BuiltInShaders.DefaultSprite);
material.setColor('u_tint', tintR, tintG, tintB, 1.0);
return material;
}
/**
* Get all shader IDs.
* ID
*
* # Returns |
* Array of all registered shader IDs. | ID的数组
*/
getShaderIds(): number[] {
return Array.from(this.shaders.keys());
}
/**
* Get all material IDs.
* ID
*
* # Returns |
* Array of all registered material IDs. | ID的数组
*/
getMaterialIds(): number[] {
return Array.from(this.materials.keys());
}
}
// Singleton instance.
// 单例实例。
let materialManagerInstance: MaterialManager | null = null;
/**
* Get the global MaterialManager instance.
* MaterialManager
*
* Creates a new instance if one doesn't exist.
*
*
* # Returns |
* The global MaterialManager instance. | MaterialManager
*/
export function getMaterialManager(): MaterialManager {
if (!materialManagerInstance) {
materialManagerInstance = new MaterialManager();
}
return materialManagerInstance;
}