Feature/render pipeline (#232)
* refactor(engine): 重构2D渲染管线坐标系统 * feat(engine): 完善2D渲染管线和编辑器视口功能 * feat(editor): 实现Viewport变换工具系统 * feat(editor): 优化Inspector渲染性能并修复Gizmo变换工具显示 * feat(editor): 实现Run on Device移动预览功能 * feat(editor): 添加组件属性控制和依赖关系系统 * feat(editor): 实现动画预览功能和优化SpriteAnimator编辑器 * feat(editor): 修复SpriteAnimator动画预览功能并迁移CI到pnpm * feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm * feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm * feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm * feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm * feat(ci): 迁移项目到pnpm并修复CI构建问题 * chore: 迁移CI工作流到pnpm并添加WASM构建支持 * chore: 迁移CI工作流到pnpm并添加WASM构建支持 * chore: 迁移CI工作流到pnpm并添加WASM构建支持 * chore: 迁移CI工作流到pnpm并添加WASM构建支持 * chore: 迁移CI工作流到pnpm并添加WASM构建支持 * chore: 迁移CI工作流到pnpm并添加WASM构建支持 * chore: 移除 network 相关包 * chore: 移除 network 相关包
This commit is contained in:
YHH
GitHub
@@ -3,10 +3,10 @@
|
||||
* 用于ECS的引擎渲染系统。
|
||||
*/
|
||||
|
||||
import { EntitySystem, Matcher, Entity, ComponentType, ECSSystem, Component } from '@esengine/ecs-framework';
|
||||
import { EntitySystem, Matcher, Entity, ComponentType, ECSSystem, Component, Core } from '@esengine/ecs-framework';
|
||||
import { SpriteComponent, CameraComponent, TransformComponent } from '@esengine/ecs-components';
|
||||
import type { EngineBridge } from '../core/EngineBridge';
|
||||
import { RenderBatcher } from '../core/RenderBatcher';
|
||||
import { SpriteComponent } from '../components/SpriteComponent';
|
||||
import type { SpriteRenderData } from '../types';
|
||||
import type { ITransformComponent } from '../core/SpriteRenderHelper';
|
||||
|
||||
@@ -47,6 +47,13 @@ export class EngineRenderSystem extends EntitySystem {
|
||||
private bridge: EngineBridge;
|
||||
private batcher: RenderBatcher;
|
||||
private transformType: TransformComponentType;
|
||||
private showGizmos = true;
|
||||
private selectedEntityIds: Set<number> = new Set();
|
||||
private transformMode: 'select' | 'move' | 'rotate' | 'scale' = 'select';
|
||||
|
||||
// Reusable map to avoid allocation per frame
|
||||
// 可重用的映射以避免每帧分配
|
||||
private entityRenderMap: Map<number, SpriteRenderData> = new Map();
|
||||
|
||||
/**
|
||||
* Create a new engine render system.
|
||||
@@ -78,12 +85,13 @@ export class EngineRenderSystem extends EntitySystem {
|
||||
* Called before processing entities.
|
||||
* 处理实体之前调用。
|
||||
*/
|
||||
protected begin(): void {
|
||||
protected override onBegin(): void {
|
||||
|
||||
// Clear the batch | 清空批处理
|
||||
this.batcher.clear();
|
||||
|
||||
// Clear screen | 清屏
|
||||
this.bridge.clear(0, 0, 0, 1);
|
||||
// Clear screen with dark background | 用深色背景清屏
|
||||
this.bridge.clear(0.1, 0.1, 0.12, 1);
|
||||
|
||||
// Update input | 更新输入
|
||||
this.bridge.updateInput();
|
||||
@@ -95,19 +103,22 @@ export class EngineRenderSystem extends EntitySystem {
|
||||
*
|
||||
* @param entities - Entities to process | 要处理的实体
|
||||
*/
|
||||
protected process(entities: readonly Entity[]): void {
|
||||
protected override process(entities: readonly Entity[]): void {
|
||||
// Clear and reuse map for gizmo drawing
|
||||
// 清空并重用映射用于绘制gizmo
|
||||
this.entityRenderMap.clear();
|
||||
|
||||
for (const entity of entities) {
|
||||
const sprite = entity.getComponent(SpriteComponent);
|
||||
const transform = entity.getComponent(this.transformType) as unknown as ITransformComponent | null;
|
||||
|
||||
if (!sprite || !transform || !sprite.visible) {
|
||||
if (!sprite || !transform) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Calculate UV with flip | 计算带翻转的UV
|
||||
let uv = sprite.uv;
|
||||
const uv: [number, number, number, number] = [0, 0, 1, 1];
|
||||
if (sprite.flipX || sprite.flipY) {
|
||||
uv = [...sprite.uv] as [number, number, number, number];
|
||||
if (sprite.flipX) {
|
||||
[uv[0], uv[2]] = [uv[2], uv[0]];
|
||||
}
|
||||
@@ -116,35 +127,213 @@ export class EngineRenderSystem extends EntitySystem {
|
||||
}
|
||||
}
|
||||
|
||||
// Handle rotation as number or Vector3 (use z for 2D)
|
||||
const rotation = typeof transform.rotation === 'number'
|
||||
? transform.rotation
|
||||
: transform.rotation.z;
|
||||
|
||||
// Convert hex color string to packed RGBA | 将十六进制颜色字符串转换为打包的RGBA
|
||||
const color = this.hexToPackedColor(sprite.color, sprite.alpha);
|
||||
|
||||
// Get texture ID from sprite component
|
||||
// 从精灵组件获取纹理ID
|
||||
// Use Rust engine's path-based texture loading for automatic caching
|
||||
// 使用Rust引擎的基于路径的纹理加载实现自动缓存
|
||||
let textureId = 0;
|
||||
if (sprite.texture) {
|
||||
textureId = this.bridge.getOrLoadTextureByPath(sprite.texture);
|
||||
} else {
|
||||
// Debug: sprite has no texture
|
||||
console.warn(`[EngineRenderSystem] Entity ${entity.id} has no texture`);
|
||||
}
|
||||
|
||||
// Pass actual display dimensions (sprite size * transform scale)
|
||||
// 传递实际显示尺寸（sprite尺寸 * 变换缩放）
|
||||
const renderData: SpriteRenderData = {
|
||||
x: transform.position.x,
|
||||
y: transform.position.y,
|
||||
rotation: transform.rotation,
|
||||
scaleX: transform.scale.x,
|
||||
scaleY: transform.scale.y,
|
||||
originX: sprite.originX,
|
||||
originY: sprite.originY,
|
||||
textureId: sprite.textureId,
|
||||
rotation,
|
||||
scaleX: sprite.width * transform.scale.x,
|
||||
scaleY: sprite.height * transform.scale.y,
|
||||
originX: sprite.anchorX,
|
||||
originY: sprite.anchorY,
|
||||
textureId,
|
||||
uv,
|
||||
color: sprite.color
|
||||
color
|
||||
};
|
||||
|
||||
this.batcher.addSprite(renderData);
|
||||
this.entityRenderMap.set(entity.id, renderData);
|
||||
}
|
||||
|
||||
// Submit batch and render at the end of process | 在process结束时提交批处理并渲染
|
||||
if (!this.batcher.isEmpty) {
|
||||
const sprites = this.batcher.getSprites();
|
||||
this.bridge.submitSprites(sprites);
|
||||
}
|
||||
|
||||
// Draw gizmos for selected entities (always, even if no sprites)
|
||||
// 为选中的实体绘制Gizmo（始终绘制，即使没有精灵）
|
||||
if (this.showGizmos && this.selectedEntityIds.size > 0) {
|
||||
for (const entityId of this.selectedEntityIds) {
|
||||
const renderData = this.entityRenderMap.get(entityId);
|
||||
if (renderData) {
|
||||
this.bridge.addGizmoRect(
|
||||
renderData.x,
|
||||
renderData.y,
|
||||
renderData.scaleX,
|
||||
renderData.scaleY,
|
||||
renderData.rotation,
|
||||
renderData.originX,
|
||||
renderData.originY,
|
||||
0.0, 1.0, 0.5, 1.0, // Green color | 绿色
|
||||
true // Show transform handles for selection gizmo
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Draw camera frustum gizmos
|
||||
// 绘制相机视锥体 gizmo
|
||||
if (this.showGizmos) {
|
||||
this.drawCameraFrustums();
|
||||
}
|
||||
|
||||
this.bridge.render();
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw camera frustum gizmos for all cameras in scene.
|
||||
* 为场景中所有相机绘制视锥体 gizmo。
|
||||
*/
|
||||
private drawCameraFrustums(): void {
|
||||
const scene = Core.scene;
|
||||
if (!scene) return;
|
||||
|
||||
const cameraEntities = scene.entities.findEntitiesWithComponent(CameraComponent);
|
||||
|
||||
for (const entity of cameraEntities) {
|
||||
const camera = entity.getComponent(CameraComponent);
|
||||
const transform = entity.getComponent(TransformComponent);
|
||||
|
||||
if (!camera || !transform) continue;
|
||||
|
||||
// Calculate frustum size based on canvas size and orthographicSize
|
||||
// 根据 canvas 尺寸和 orthographicSize 计算视锥体大小
|
||||
// At runtime, zoom = 1 / orthographicSize
|
||||
// So visible area = canvas size * orthographicSize
|
||||
const canvas = document.getElementById('viewport-canvas') as HTMLCanvasElement;
|
||||
if (!canvas) continue;
|
||||
|
||||
// The actual visible world units when running
|
||||
// 运行时实际可见的世界单位
|
||||
const zoom = camera.orthographicSize > 0 ? 1 / camera.orthographicSize : 1;
|
||||
const width = canvas.width / zoom;
|
||||
const height = canvas.height / zoom;
|
||||
|
||||
// Handle rotation
|
||||
const rotation = typeof transform.rotation === 'number'
|
||||
? transform.rotation
|
||||
: transform.rotation.z;
|
||||
|
||||
// Draw frustum rectangle (white color for camera)
|
||||
// 绘制视锥体矩形（相机用白色）
|
||||
this.bridge.addGizmoRect(
|
||||
transform.position.x,
|
||||
transform.position.y,
|
||||
width,
|
||||
height,
|
||||
rotation,
|
||||
0.5, // origin center
|
||||
0.5,
|
||||
1.0, 1.0, 1.0, 0.8, // White color with some transparency
|
||||
false // Don't show transform handles for camera frustum
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called after processing entities.
|
||||
* 处理实体之后调用。
|
||||
* Set gizmo visibility.
|
||||
* 设置Gizmo可见性。
|
||||
*/
|
||||
protected end(): void {
|
||||
// Submit batch and render | 提交批处理并渲染
|
||||
if (!this.batcher.isEmpty) {
|
||||
this.bridge.submitSprites(this.batcher.getSprites());
|
||||
}
|
||||
this.bridge.render();
|
||||
setShowGizmos(show: boolean): void {
|
||||
this.showGizmos = show;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get gizmo visibility.
|
||||
* 获取Gizmo可见性。
|
||||
*/
|
||||
getShowGizmos(): boolean {
|
||||
return this.showGizmos;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set selected entity IDs.
|
||||
* 设置选中的实体ID。
|
||||
*/
|
||||
setSelectedEntityIds(ids: number[]): void {
|
||||
this.selectedEntityIds = new Set(ids);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get selected entity IDs.
|
||||
* 获取选中的实体ID。
|
||||
*/
|
||||
getSelectedEntityIds(): number[] {
|
||||
return Array.from(this.selectedEntityIds);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set transform tool mode.
|
||||
* 设置变换工具模式。
|
||||
*/
|
||||
setTransformMode(mode: 'select' | 'move' | 'rotate' | 'scale'): void {
|
||||
this.transformMode = mode;
|
||||
|
||||
// Convert string mode to u8 for Rust engine
|
||||
const modeMap: Record<string, number> = {
|
||||
'select': 0,
|
||||
'move': 1,
|
||||
'rotate': 2,
|
||||
'scale': 3
|
||||
};
|
||||
this.bridge.setTransformMode(modeMap[mode]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get transform tool mode.
|
||||
* 获取变换工具模式。
|
||||
*/
|
||||
getTransformMode(): 'select' | 'move' | 'rotate' | 'scale' {
|
||||
return this.transformMode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert hex color string to packed RGBA.
|
||||
* 将十六进制颜色字符串转换为打包的RGBA。
|
||||
*/
|
||||
private hexToPackedColor(hex: string, alpha: number): number {
|
||||
// Parse hex color like "#ffffff" or "#fff"
|
||||
let r = 255, g = 255, b = 255;
|
||||
if (hex.startsWith('#')) {
|
||||
const hexValue = hex.slice(1);
|
||||
if (hexValue.length === 3) {
|
||||
r = parseInt(hexValue[0] + hexValue[0], 16);
|
||||
g = parseInt(hexValue[1] + hexValue[1], 16);
|
||||
b = parseInt(hexValue[2] + hexValue[2], 16);
|
||||
} else if (hexValue.length === 6) {
|
||||
r = parseInt(hexValue.slice(0, 2), 16);
|
||||
g = parseInt(hexValue.slice(2, 4), 16);
|
||||
b = parseInt(hexValue.slice(4, 6), 16);
|
||||
}
|
||||
}
|
||||
const a = Math.round(alpha * 255);
|
||||
// Pack as 0xAABBGGRR for WebGL
|
||||
return ((a & 0xFF) << 24) | ((b & 0xFF) << 16) | ((g & 0xFF) << 8) | (r & 0xFF);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the number of sprites rendered.
|
||||
* 获取渲染的精灵数量。
|
||||
|
||||
Reference in New Issue
Block a user