feat: 纹理路径稳定 ID 与架构改进 (#305)
* feat(asset-system): 实现路径稳定 ID 生成器 使用 FNV-1a hash 算法为纹理生成稳定的运行时 ID： - 新增 _pathIdCache 静态缓存，跨 Play/Stop 循环保持稳定 - 新增 getStableIdForPath() 方法，相同路径永远返回相同 ID - 修改 loadTextureForComponent/loadTextureByGuid 使用稳定 ID - clearTextureMappings() 不再清除 _pathIdCache 这解决了 Play/Stop 后纹理 ID 失效的根本问题。 * fix(runtime-core): 移除 Play/Stop 循环中的 clearTextureMappings 调用 使用路径稳定 ID 后，不再需要在快照保存/恢复时清除纹理缓存： - saveSceneSnapshot() 移除 clearTextureMappings() 调用 - restoreSceneSnapshot() 移除 clearTextureMappings() 调用 - 组件保存的 textureId 在 Play/Stop 后仍然有效 * fix(editor-core): 修复场景切换时的资源泄漏 在 openScene() 加载新场景前先卸载旧场景资源： - 调用 sceneResourceManager.unloadSceneResources() 释放旧资源 - 使用引用计数机制，仅卸载不再被引用的资源 - 路径稳定 ID 缓存不受影响，保持 ID 稳定性 * fix(runtime-core): 修复 PluginManager 组件注册类型错误 将 ComponentRegistry 类改为 GlobalComponentRegistry 实例： - registerComponents() 期望 IComponentRegistry 接口实例 - GlobalComponentRegistry 是 ComponentRegistry 的全局实例 * refactor(core): 提取 IComponentRegistry 接口 将组件注册表抽象为接口，支持场景级组件注册： - 新增 IComponentRegistry 接口定义 - Scene 持有独立的 componentRegistry 实例 - 支持从 GlobalComponentRegistry 克隆 - 各系统支持传入自定义注册表 * refactor(engine-core): 改进插件服务注册机制 - 更新 IComponentRegistry 类型引用 - 优化 PluginServiceRegistry 服务管理 * refactor(modules): 适配新的组件注册接口 更新各模块 RuntimeModule 使用 IComponentRegistry 接口： - audio, behavior-tree, camera - sprite, tilemap, world-streaming * fix(physics-rapier2d): 修复物理插件组件注册 - PhysicsEditorPlugin 添加 runtimeModule 引用 - 适配 IComponentRegistry 接口 - 修复物理组件在场景加载时未注册的问题 * feat(editor-core): 添加 UserCodeService 就绪信号机制 - 新增 waitForReady()/signalReady() API - 支持等待用户脚本编译完成 - 解决场景加载时组件未注册的时序问题 * fix(editor-app): 在编译完成后调用 signalReady() 确保用户脚本编译完成后发出就绪信号： - 编译成功后调用 userCodeService.signalReady() - 编译失败也要发出信号，避免阻塞场景加载 * feat(editor-core): 改进编辑器核心服务 - EntityStoreService 添加调试日志 - AssetRegistryService 优化资产注册 - PluginManager 改进插件管理 - IFileAPI 添加 getFileMtime 接口 * feat(engine): 改进 Rust 纹理管理器 - 支持任意 ID 的纹理加载（非递增） - 添加纹理状态追踪 API - 优化纹理缓存清理机制 - 更新 TypeScript 绑定 * feat(ui): 添加场景切换和文本闪烁组件 新增组件： - SceneLoadTriggerComponent: 场景切换触发器 - TextBlinkComponent: 文本闪烁效果 新增系统： - SceneLoadTriggerSystem: 处理场景切换逻辑 - TextBlinkSystem: 处理文本闪烁动画 其他改进： - UIRuntimeModule 适配新组件注册接口 - UI 渲染系统优化 * feat(editor-app): 添加外部文件修改检测 - 新增 ExternalModificationDialog 组件 - TauriFileAPI 支持 getFileMtime - 场景文件被外部修改时提示用户 * feat(editor-app): 添加渲染调试面板 - 新增 RenderDebugService 和调试面板 UI - App/ContentBrowser 添加调试日志 - TitleBar/Viewport 优化 - DialogManager 改进 * refactor(editor-app): 编辑器服务和组件优化 - EngineService 改进引擎集成 - EditorEngineSync 同步优化 - AssetFileInspector 改进 - VectorFieldEditors 优化 - InstantiatePrefabCommand 改进 * feat(i18n): 更新国际化翻译 - 添加新功能相关翻译 - 更新中文、英文、西班牙文 * feat(tauri): 添加文件修改时间查询命令 - 新增 get_file_mtime 命令 - 支持检测文件外部修改 * refactor(particle): 粒子系统改进 - 适配新的组件注册接口 - ParticleSystem 优化 - 添加单元测试 * refactor(platform): 平台适配层优化 - BrowserRuntime 改进 - 新增 RuntimeSceneManager 服务 - 导出优化 * refactor(asset-system-editor): 资产元数据改进 - AssetMetaFile 优化 - 导出调整 * fix(asset-system): 移除未使用的 TextureLoader 导入 * fix(tests): 更新测试以使用 GlobalComponentRegistry 实例 修复多个测试文件以适配 ComponentRegistry 从静态类变为实例类的变更： - ComponentStorage.test.ts: 使用 GlobalComponentRegistry.reset() - EntitySerializer.test.ts: 使用 GlobalComponentRegistry 实例 - IncrementalSerialization.test.ts: 使用 GlobalComponentRegistry 实例 - SceneSerializer.test.ts: 使用 GlobalComponentRegistry 实例 - ComponentRegistry.extended.test.ts: 使用 GlobalComponentRegistry，同时注册到 scene.componentRegistry - SystemTypes.test.ts: 在 Scene 创建前注册组件 - QuerySystem.test.ts: mockScene 添加 componentRegistry
This commit is contained in:
YHH
GitHub
142
packages/particle/src/__tests__/uv-calculation.test.ts
Normal file
142
packages/particle/src/__tests__/uv-calculation.test.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* UV 计算测试
|
||||
* UV Calculation Test
|
||||
*
|
||||
* 用于验证 TextureSheetAnimation 的 UV 坐标计算是否正确
|
||||
* Used to verify TextureSheetAnimation UV coordinate calculation
|
||||
*/
|
||||
|
||||
/**
|
||||
* 模拟 ParticleRenderDataProvider 中的 UV 计算
|
||||
* Simulate UV calculation from ParticleRenderDataProvider
|
||||
*/
|
||||
function calculateUV(frame: number, tilesX: number, tilesY: number) {
|
||||
const col = frame % tilesX;
|
||||
const row = Math.floor(frame / tilesX);
|
||||
const uWidth = 1 / tilesX;
|
||||
const vHeight = 1 / tilesY;
|
||||
|
||||
const u0 = col * uWidth;
|
||||
const u1 = (col + 1) * uWidth;
|
||||
const v0 = row * vHeight;
|
||||
const v1 = (row + 1) * vHeight;
|
||||
|
||||
return { u0, v0, u1, v1, col, row };
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试 4x4 spritesheet (16帧)
|
||||
*
|
||||
* 预期布局（标准 spritesheet，从左上角开始）：
|
||||
* ┌────┬────┬────┬────┐
|
||||
* │ 0 │ 1 │ 2 │ 3 │ row=0, v: 0.00 - 0.25
|
||||
* ├────┼────┼────┼────┤
|
||||
* │ 4 │ 5 │ 6 │ 7 │ row=1, v: 0.25 - 0.50
|
||||
* ├────┼────┼────┼────┤
|
||||
* │ 8 │ 9 │ 10 │ 11 │ row=2, v: 0.50 - 0.75
|
||||
* ├────┼────┼────┼────┤
|
||||
* │ 12 │ 13 │ 14 │ 15 │ row=3, v: 0.75 - 1.00
|
||||
* └────┴────┴────┴────┘
|
||||
*/
|
||||
function test4x4Spritesheet() {
|
||||
console.log('=== 4x4 Spritesheet UV Test ===\n');
|
||||
|
||||
const tilesX = 4;
|
||||
const tilesY = 4;
|
||||
|
||||
console.log('Expected layout (standard spritesheet, top-left origin):');
|
||||
console.log('Frame 0 should be at TOP-LEFT (v: 0.00-0.25)');
|
||||
console.log('Frame 12 should be at BOTTOM-LEFT (v: 0.75-1.00)\n');
|
||||
|
||||
// 测试关键帧
|
||||
const testFrames = [0, 1, 4, 5, 12, 15];
|
||||
|
||||
for (const frame of testFrames) {
|
||||
const uv = calculateUV(frame, tilesX, tilesY);
|
||||
console.log(`Frame ${frame.toString().padStart(2)}: col=${uv.col}, row=${uv.row}`);
|
||||
console.log(` UV: [${uv.u0.toFixed(2)}, ${uv.v0.toFixed(2)}, ${uv.u1.toFixed(2)}, ${uv.v1.toFixed(2)}]`);
|
||||
console.log('');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试 2x2 spritesheet (4帧) - 最简单的情况
|
||||
*/
|
||||
function test2x2Spritesheet() {
|
||||
console.log('=== 2x2 Spritesheet UV Test ===\n');
|
||||
|
||||
const tilesX = 2;
|
||||
const tilesY = 2;
|
||||
|
||||
console.log('Layout:');
|
||||
console.log('┌─────┬─────┐');
|
||||
console.log('│ 0 │ 1 │ v: 0.0 - 0.5');
|
||||
console.log('├─────┼─────┤');
|
||||
console.log('│ 2 │ 3 │ v: 0.5 - 1.0');
|
||||
console.log('└─────┴─────┘\n');
|
||||
|
||||
for (let frame = 0; frame < 4; frame++) {
|
||||
const uv = calculateUV(frame, tilesX, tilesY);
|
||||
console.log(`Frame ${frame}: col=${uv.col}, row=${uv.row}`);
|
||||
console.log(` UV: [${uv.u0.toFixed(2)}, ${uv.v0.toFixed(2)}, ${uv.u1.toFixed(2)}, ${uv.v1.toFixed(2)}]`);
|
||||
}
|
||||
console.log('');
|
||||
}
|
||||
|
||||
/**
|
||||
* WebGL 纹理坐标系说明
|
||||
*/
|
||||
function explainWebGLTextureCoords() {
|
||||
console.log('=== WebGL Texture Coordinate System ===\n');
|
||||
|
||||
console.log('Without UNPACK_FLIP_Y_WEBGL:');
|
||||
console.log('- Image row 0 (top of image file) -> stored at texture row 0');
|
||||
console.log('- Texture coordinate V=0 samples texture row 0');
|
||||
console.log('- Therefore: V=0 = image top, V=1 = image bottom');
|
||||
console.log('');
|
||||
|
||||
console.log('sprite_batch.rs vertex mapping:');
|
||||
console.log('- Vertex 0 (top-left on screen, high Y) uses tex_coords[0] = [u0, v0]');
|
||||
console.log('- Vertex 2 (bottom-right on screen, low Y) uses tex_coords[2] = [u1, v1]');
|
||||
console.log('');
|
||||
|
||||
console.log('Expected behavior:');
|
||||
console.log('- Frame 0 UV [0, 0, 0.25, 0.25] should show TOP-LEFT quarter of spritesheet');
|
||||
console.log('- If frame 0 shows BOTTOM-LEFT, the image is being rendered upside down');
|
||||
console.log('');
|
||||
}
|
||||
|
||||
/**
|
||||
* 诊断当前问题
|
||||
*/
|
||||
function diagnoseIssue() {
|
||||
console.log('=== Diagnosis ===\n');
|
||||
|
||||
console.log('If TextureSheetAnimation shows wrong frames, check:');
|
||||
console.log('');
|
||||
console.log('1. Is frame 0 showing the TOP-LEFT of the spritesheet?');
|
||||
console.log(' - YES: UV calculation is correct');
|
||||
console.log(' - NO (shows bottom-left): Image is flipped vertically in WebGL');
|
||||
console.log('');
|
||||
console.log('2. Are frames playing in wrong ORDER (e.g., 3,2,1,0 instead of 0,1,2,3)?');
|
||||
console.log(' - Check animation frame index calculation');
|
||||
console.log('');
|
||||
console.log('3. Is the spritesheet itself laid out correctly?');
|
||||
console.log(' - Frame 0 should be at TOP-LEFT of the image file');
|
||||
console.log('');
|
||||
}
|
||||
|
||||
// 运行所有测试
|
||||
export function runUVTests() {
|
||||
explainWebGLTextureCoords();
|
||||
test2x2Spritesheet();
|
||||
test4x4Spritesheet();
|
||||
diagnoseIssue();
|
||||
}
|
||||
|
||||
// 如果直接运行此文件
|
||||
if (typeof window !== 'undefined') {
|
||||
runUVTests();
|
||||
}
|
||||
|
||||
export { calculateUV, test2x2Spritesheet, test4x4Spritesheet };
|
||||
Reference in New Issue
Block a user