feat(fairygui): FairyGUI 完整集成 (#314)
* feat(fairygui): FairyGUI ECS 集成核心架构 实现 FairyGUI 的 ECS 原生集成，完全替代旧 UI 系统： 核心类： - GObject: UI 对象基类，支持变换、可见性、关联、齿轮 - GComponent: 容器组件，管理子对象和控制器 - GRoot: 根容器，管理焦点、弹窗、输入分发 - GGroup: 组容器，支持水平/垂直布局 抽象层： - DisplayObject: 显示对象基类 - EventDispatcher: 事件分发 - Timer: 计时器 - Stage: 舞台，管理输入和缩放 布局系统： - Relations: 约束关联管理 - RelationItem: 24 种关联类型 基础设施： - Controller: 状态控制器 - Transition: 过渡动画 - ScrollPane: 滚动面板 - UIPackage: 包管理 - ByteBuffer: 二进制解析 * refactor(ui): 删除旧 UI 系统，使用 FairyGUI 替代 * feat(fairygui): 实现 UI 控件 - 添加显示类：Image、TextField、Graph - 添加基础控件：GImage、GTextField、GGraph - 添加交互控件：GButton、GProgressBar、GSlider - 更新 IRenderCollector 支持 Graph 渲染 - 扩展 Controller 添加 selectedPageId - 添加 STATE_CHANGED 事件类型 * feat(fairygui): 现代化架构重构 - 增强 EventDispatcher 支持类型安全、优先级和传播控制 - 添加 PropertyBinding 响应式属性绑定系统 - 添加 ServiceContainer 依赖注入容器 - 添加 UIConfig 全局配置系统 - 添加 UIObjectFactory 对象工厂 - 实现 RenderBridge 渲染桥接层 - 实现 Canvas2DBackend 作为默认渲染后端 - 扩展 IRenderCollector 支持更多图元类型 * feat(fairygui): 九宫格渲染和资源加载修复 - 修复 FGUIUpdateSystem 支持路径和 GUID 两种加载方式 - 修复 GTextInput 同时设置 _displayObject 和 _textField - 实现九宫格渲染展开为 9 个子图元 - 添加 sourceWidth/sourceHeight 用于九宫格计算 - 添加 DOMTextRenderer 文本渲染层（临时方案） * fix(fairygui): 修复 GGraph 颜色读取 * feat(fairygui): 虚拟节点 Inspector 和文本渲染支持 * fix(fairygui): 编辑器状态刷新和遗留引用修复 - 修复切换 FGUI 包后组件列表未刷新问题 - 修复切换组件后 viewport 未清理旧内容问题 - 修复虚拟节点在包加载后未刷新问题 - 重构为事件驱动架构，移除轮询机制 - 修复 @esengine/ui 遗留引用，统一使用 @esengine/fairygui * fix: 移除 tsconfig 中的 @esengine/ui 引用
This commit is contained in:
YHH
GitHub
@@ -7,7 +7,7 @@ use super::context::WebGLContext;
|
||||
use super::error::Result;
|
||||
use crate::backend::WebGL2Backend;
|
||||
use crate::input::InputManager;
|
||||
use crate::renderer::{Renderer2D, GridRenderer, GizmoRenderer, TransformMode, ViewportManager};
|
||||
use crate::renderer::{Renderer2D, GridRenderer, GizmoRenderer, TransformMode, ViewportManager, TextBatch, MeshBatch};
|
||||
use crate::resource::TextureManager;
|
||||
use es_engine_shared::traits::backend::GraphicsBackend;
|
||||
|
||||
@@ -96,6 +96,14 @@ pub struct Engine {
|
||||
/// and axis indicator are automatically hidden.
|
||||
/// 当为 false（运行时模式）时，编辑器专用 UI（如网格、gizmos、坐标轴指示器）会自动隐藏。
|
||||
is_editor: bool,
|
||||
|
||||
/// Text batch renderer for MSDF text.
|
||||
/// MSDF 文本批处理渲染器。
|
||||
text_batch: TextBatch,
|
||||
|
||||
/// Mesh batch renderer for arbitrary 2D geometry.
|
||||
/// 任意 2D 几何体的网格批处理渲染器。
|
||||
mesh_batch: MeshBatch,
|
||||
}
|
||||
|
||||
impl Engine {
|
||||
@@ -137,6 +145,10 @@ impl Engine {
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
let gizmo_renderer = GizmoRenderer::new(&mut backend)
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
let text_batch = TextBatch::new(&mut backend, 10000)
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
let mesh_batch = MeshBatch::new(&mut backend, 10000, 30000)
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
|
||||
log::info!("Engine created successfully | 引擎创建成功");
|
||||
|
||||
@@ -153,6 +165,8 @@ impl Engine {
|
||||
viewport_manager: ViewportManager::new(),
|
||||
show_gizmos: true,
|
||||
is_editor: true,
|
||||
text_batch,
|
||||
mesh_batch,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -194,6 +208,10 @@ impl Engine {
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
let gizmo_renderer = GizmoRenderer::new(&mut backend)
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
let text_batch = TextBatch::new(&mut backend, 10000)
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
let mesh_batch = MeshBatch::new(&mut backend, 10000, 30000)
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
|
||||
log::info!("Engine created from external context | 从外部上下文创建引擎");
|
||||
|
||||
@@ -210,6 +228,8 @@ impl Engine {
|
||||
viewport_manager: ViewportManager::new(),
|
||||
show_gizmos: true,
|
||||
is_editor: true,
|
||||
text_batch,
|
||||
mesh_batch,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -291,6 +311,91 @@ impl Engine {
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))
|
||||
}
|
||||
|
||||
/// Submit MSDF text batch for rendering.
|
||||
/// 提交 MSDF 文本批次进行渲染。
|
||||
///
|
||||
/// # Arguments | 参数
|
||||
/// * `positions` - Float32Array [x, y, ...] for each vertex (4 per glyph)
|
||||
/// * `tex_coords` - Float32Array [u, v, ...] for each vertex
|
||||
/// * `colors` - Float32Array [r, g, b, a, ...] for each vertex
|
||||
/// * `outline_colors` - Float32Array [r, g, b, a, ...] for each vertex
|
||||
/// * `outline_widths` - Float32Array [width, ...] for each vertex
|
||||
/// * `texture_id` - Font atlas texture ID
|
||||
/// * `px_range` - Pixel range for MSDF shader
|
||||
pub fn submit_text_batch(
|
||||
&mut self,
|
||||
positions: &[f32],
|
||||
tex_coords: &[f32],
|
||||
colors: &[f32],
|
||||
outline_colors: &[f32],
|
||||
outline_widths: &[f32],
|
||||
texture_id: u32,
|
||||
px_range: f32,
|
||||
) -> Result<()> {
|
||||
self.text_batch.add_glyphs(positions, tex_coords, colors, outline_colors, outline_widths)
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
|
||||
// Render text immediately with proper setup
|
||||
let projection = self.renderer.camera().projection_matrix();
|
||||
let shader = self.text_batch.shader();
|
||||
|
||||
self.backend.bind_shader(shader).ok();
|
||||
self.backend.set_blend_mode(es_engine_shared::types::blend::BlendMode::Alpha);
|
||||
self.backend.set_uniform_mat3("u_projection", &projection).ok();
|
||||
self.backend.set_uniform_i32("u_msdfTexture", 0).ok();
|
||||
self.backend.set_uniform_f32("u_pxRange", px_range).ok();
|
||||
|
||||
// Bind font atlas texture
|
||||
self.texture_manager.bind_texture_via_backend(&mut self.backend, texture_id, 0);
|
||||
|
||||
// Flush and render
|
||||
self.text_batch.flush(&mut self.backend);
|
||||
self.text_batch.clear();
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Submit mesh batch for rendering arbitrary 2D geometry.
|
||||
/// 提交网格批次进行任意 2D 几何体渲染。
|
||||
///
|
||||
/// # Arguments | 参数
|
||||
/// * `positions` - Float array [x, y, ...] for each vertex
|
||||
/// * `uvs` - Float array [u, v, ...] for each vertex
|
||||
/// * `colors` - Packed RGBA colors (one per vertex)
|
||||
/// * `indices` - Triangle indices
|
||||
/// * `texture_id` - Texture ID to use
|
||||
pub fn submit_mesh_batch(
|
||||
&mut self,
|
||||
positions: &[f32],
|
||||
uvs: &[f32],
|
||||
colors: &[u32],
|
||||
indices: &[u16],
|
||||
texture_id: u32,
|
||||
) -> Result<()> {
|
||||
self.mesh_batch.add_mesh(positions, uvs, colors, indices, 0.0, 0.0)
|
||||
.map_err(|e| crate::core::error::EngineError::WebGLError(e))?;
|
||||
|
||||
// Render mesh immediately with proper setup
|
||||
let projection = self.renderer.camera().projection_matrix();
|
||||
let shader_id = crate::renderer::shader::SHADER_ID_DEFAULT_SPRITE;
|
||||
|
||||
if let Some(shader) = self.renderer.get_shader_handle(shader_id) {
|
||||
self.backend.bind_shader(shader).ok();
|
||||
self.backend.set_blend_mode(es_engine_shared::types::blend::BlendMode::Alpha);
|
||||
self.backend.set_uniform_mat3("u_projection", &projection).ok();
|
||||
|
||||
// Bind texture
|
||||
self.texture_manager.bind_texture_via_backend(&mut self.backend, texture_id, 0);
|
||||
|
||||
// Flush and render
|
||||
self.mesh_batch.flush(&mut self.backend);
|
||||
}
|
||||
|
||||
self.mesh_batch.clear();
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
pub fn render(&mut self) -> Result<()> {
|
||||
let [r, g, b, a] = self.renderer.get_clear_color();
|
||||
self.context.clear(r, g, b, a);
|
||||
|
||||
@@ -170,6 +170,59 @@ impl GameEngine {
|
||||
.map_err(|e| JsValue::from_str(&e.to_string()))
|
||||
}
|
||||
|
||||
/// Submit MSDF text batch for rendering.
|
||||
/// 提交 MSDF 文本批次进行渲染。
|
||||
///
|
||||
/// # Arguments | 参数
|
||||
/// * `positions` - Float32Array [x, y, ...] for each vertex (4 per glyph)
|
||||
/// * `tex_coords` - Float32Array [u, v, ...] for each vertex
|
||||
/// * `colors` - Float32Array [r, g, b, a, ...] for each vertex
|
||||
/// * `outline_colors` - Float32Array [r, g, b, a, ...] for each vertex
|
||||
/// * `outline_widths` - Float32Array [width, ...] for each vertex
|
||||
/// * `texture_id` - Font atlas texture ID
|
||||
/// * `px_range` - Pixel range for MSDF shader
|
||||
#[wasm_bindgen(js_name = submitTextBatch)]
|
||||
pub fn submit_text_batch(
|
||||
&mut self,
|
||||
positions: &[f32],
|
||||
tex_coords: &[f32],
|
||||
colors: &[f32],
|
||||
outline_colors: &[f32],
|
||||
outline_widths: &[f32],
|
||||
texture_id: u32,
|
||||
px_range: f32,
|
||||
) -> std::result::Result<(), JsValue> {
|
||||
self.engine
|
||||
.submit_text_batch(positions, tex_coords, colors, outline_colors, outline_widths, texture_id, px_range)
|
||||
.map_err(|e| JsValue::from_str(&e.to_string()))
|
||||
}
|
||||
|
||||
/// Submit mesh batch for rendering arbitrary 2D geometry.
|
||||
/// 提交网格批次进行任意 2D 几何体渲染。
|
||||
///
|
||||
/// Used for rendering ellipses, polygons, and other complex shapes.
|
||||
/// 用于渲染椭圆、多边形和其他复杂形状。
|
||||
///
|
||||
/// # Arguments | 参数
|
||||
/// * `positions` - Float32Array [x, y, ...] for each vertex
|
||||
/// * `uvs` - Float32Array [u, v, ...] for each vertex
|
||||
/// * `colors` - Uint32Array of packed RGBA colors (one per vertex)
|
||||
/// * `indices` - Uint16Array of triangle indices
|
||||
/// * `texture_id` - Texture ID to use (0 for white pixel)
|
||||
#[wasm_bindgen(js_name = submitMeshBatch)]
|
||||
pub fn submit_mesh_batch(
|
||||
&mut self,
|
||||
positions: &[f32],
|
||||
uvs: &[f32],
|
||||
colors: &[u32],
|
||||
indices: &[u16],
|
||||
texture_id: u32,
|
||||
) -> std::result::Result<(), JsValue> {
|
||||
self.engine
|
||||
.submit_mesh_batch(positions, uvs, colors, indices, texture_id)
|
||||
.map_err(|e| JsValue::from_str(&e.to_string()))
|
||||
}
|
||||
|
||||
/// Render the current frame.
|
||||
/// 渲染当前帧。
|
||||
pub fn render(&mut self) -> std::result::Result<(), JsValue> {
|
||||
|
||||
@@ -108,8 +108,8 @@ impl Color {
|
||||
}
|
||||
}
|
||||
|
||||
/// Convert to packed u32 (ABGR format for WebGL).
|
||||
/// 转换为打包的u32（WebGL的ABGR格式）。
|
||||
/// Convert to packed u32 (0xRRGGBBAA format, industry standard).
|
||||
/// 转换为打包的 u32（0xRRGGBBAA 格式，行业标准）。
|
||||
#[inline]
|
||||
pub fn to_packed(&self) -> u32 {
|
||||
let r = (self.r.clamp(0.0, 1.0) * 255.0) as u32;
|
||||
@@ -117,21 +117,33 @@ impl Color {
|
||||
let b = (self.b.clamp(0.0, 1.0) * 255.0) as u32;
|
||||
let a = (self.a.clamp(0.0, 1.0) * 255.0) as u32;
|
||||
|
||||
(a << 24) | (b << 16) | (g << 8) | r
|
||||
(r << 24) | (g << 16) | (b << 8) | a
|
||||
}
|
||||
|
||||
/// Create from packed u32 (ABGR format).
|
||||
/// 从打包的u32创建（ABGR格式）。
|
||||
/// Create from packed u32 (0xRRGGBBAA format, industry standard).
|
||||
/// 从打包的 u32 创建（0xRRGGBBAA 格式，行业标准）。
|
||||
#[inline]
|
||||
pub fn from_packed(packed: u32) -> Self {
|
||||
Self::from_rgba8(
|
||||
(packed & 0xFF) as u8,
|
||||
((packed >> 8) & 0xFF) as u8,
|
||||
((packed >> 16) & 0xFF) as u8,
|
||||
((packed >> 24) & 0xFF) as u8,
|
||||
((packed >> 16) & 0xFF) as u8,
|
||||
((packed >> 8) & 0xFF) as u8,
|
||||
(packed & 0xFF) as u8,
|
||||
)
|
||||
}
|
||||
|
||||
/// Convert to GPU vertex format (ABGR for WebGL little-endian).
|
||||
/// 转换为 GPU 顶点格式（WebGL 小端序 ABGR）。
|
||||
#[inline]
|
||||
pub fn to_vertex_u32(&self) -> u32 {
|
||||
let r = (self.r.clamp(0.0, 1.0) * 255.0) as u32;
|
||||
let g = (self.g.clamp(0.0, 1.0) * 255.0) as u32;
|
||||
let b = (self.b.clamp(0.0, 1.0) * 255.0) as u32;
|
||||
let a = (self.a.clamp(0.0, 1.0) * 255.0) as u32;
|
||||
|
||||
(a << 24) | (b << 16) | (g << 8) | r
|
||||
}
|
||||
|
||||
/// Linear interpolation between two colors.
|
||||
/// 两个颜色之间的线性插值。
|
||||
#[inline]
|
||||
|
||||
243
packages/engine/src/renderer/batch/mesh_batch.rs
Normal file
243
packages/engine/src/renderer/batch/mesh_batch.rs
Normal file
@@ -0,0 +1,243 @@
|
||||
//! Mesh batch renderer for arbitrary 2D geometry.
|
||||
//! 用于任意 2D 几何体的网格批处理渲染器。
|
||||
//!
|
||||
//! Unlike SpriteBatch which only supports quads, MeshBatch can render
|
||||
//! arbitrary triangulated meshes (ellipses, polygons, rounded rectangles, etc.).
|
||||
//!
|
||||
//! 与仅支持四边形的 SpriteBatch 不同，MeshBatch 可以渲染
|
||||
//! 任意三角化的网格（椭圆、多边形、圆角矩形等）。
|
||||
|
||||
use es_engine_shared::{
|
||||
traits::backend::{GraphicsBackend, BufferUsage},
|
||||
types::{
|
||||
handle::{BufferHandle, VertexArrayHandle},
|
||||
vertex::{VertexLayout, VertexAttribute, VertexAttributeType},
|
||||
},
|
||||
};
|
||||
|
||||
/// Floats per mesh vertex: position(2) + texCoord(2) + color(4) = 8
|
||||
/// 每个网格顶点的浮点数：位置(2) + 纹理坐标(2) + 颜色(4) = 8
|
||||
const FLOATS_PER_VERTEX: usize = 8;
|
||||
|
||||
/// Mesh batch for rendering arbitrary 2D geometry.
|
||||
/// 用于渲染任意 2D 几何体的网格批处理。
|
||||
pub struct MeshBatch {
|
||||
vbo: BufferHandle,
|
||||
ibo: BufferHandle,
|
||||
vao: VertexArrayHandle,
|
||||
max_vertices: usize,
|
||||
max_indices: usize,
|
||||
vertex_data: Vec<f32>,
|
||||
index_data: Vec<u16>,
|
||||
vertex_count: usize,
|
||||
index_count: usize,
|
||||
}
|
||||
|
||||
impl MeshBatch {
|
||||
/// Create a new mesh batch.
|
||||
/// 创建新的网格批处理。
|
||||
///
|
||||
/// # Arguments | 参数
|
||||
/// * `backend` - Graphics backend
|
||||
/// * `max_vertices` - Maximum number of vertices
|
||||
/// * `max_indices` - Maximum number of indices
|
||||
pub fn new(
|
||||
backend: &mut impl GraphicsBackend,
|
||||
max_vertices: usize,
|
||||
max_indices: usize,
|
||||
) -> Result<Self, String> {
|
||||
let vertex_buffer_size = max_vertices * FLOATS_PER_VERTEX * 4;
|
||||
let vbo = backend.create_vertex_buffer(
|
||||
&vec![0u8; vertex_buffer_size],
|
||||
BufferUsage::Dynamic,
|
||||
).map_err(|e| format!("Mesh VBO: {:?}", e))?;
|
||||
|
||||
let ibo = backend.create_index_buffer(
|
||||
bytemuck::cast_slice(&vec![0u16; max_indices]),
|
||||
BufferUsage::Dynamic,
|
||||
).map_err(|e| format!("Mesh IBO: {:?}", e))?;
|
||||
|
||||
// Mesh vertex layout:
|
||||
// a_position: vec2 (location 0)
|
||||
// a_texCoord: vec2 (location 1)
|
||||
// a_color: vec4 (location 2)
|
||||
let layout = VertexLayout {
|
||||
attributes: vec![
|
||||
VertexAttribute {
|
||||
name: "a_position".into(),
|
||||
attr_type: VertexAttributeType::Float2,
|
||||
offset: 0,
|
||||
normalized: false,
|
||||
},
|
||||
VertexAttribute {
|
||||
name: "a_texcoord".into(),
|
||||
attr_type: VertexAttributeType::Float2,
|
||||
offset: 8,
|
||||
normalized: false,
|
||||
},
|
||||
VertexAttribute {
|
||||
name: "a_color".into(),
|
||||
attr_type: VertexAttributeType::Float4,
|
||||
offset: 16,
|
||||
normalized: false,
|
||||
},
|
||||
],
|
||||
stride: FLOATS_PER_VERTEX * 4,
|
||||
};
|
||||
|
||||
let vao = backend.create_vertex_array(vbo, Some(ibo), &layout)
|
||||
.map_err(|e| format!("Mesh VAO: {:?}", e))?;
|
||||
|
||||
Ok(Self {
|
||||
vbo,
|
||||
ibo,
|
||||
vao,
|
||||
max_vertices,
|
||||
max_indices,
|
||||
vertex_data: Vec::with_capacity(max_vertices * FLOATS_PER_VERTEX),
|
||||
index_data: Vec::with_capacity(max_indices),
|
||||
vertex_count: 0,
|
||||
index_count: 0,
|
||||
})
|
||||
}
|
||||
|
||||
/// Clear the batch.
|
||||
/// 清除批处理。
|
||||
pub fn clear(&mut self) {
|
||||
self.vertex_data.clear();
|
||||
self.index_data.clear();
|
||||
self.vertex_count = 0;
|
||||
self.index_count = 0;
|
||||
}
|
||||
|
||||
/// Add a mesh to the batch.
|
||||
/// 将网格添加到批处理。
|
||||
///
|
||||
/// # Arguments | 参数
|
||||
/// * `positions` - Float array [x, y, ...] for each vertex
|
||||
/// * `uvs` - Float array [u, v, ...] for each vertex
|
||||
/// * `colors` - Packed RGBA colors (one per vertex)
|
||||
/// * `indices` - Triangle indices
|
||||
/// * `offset_x` - X offset to apply to all positions
|
||||
/// * `offset_y` - Y offset to apply to all positions
|
||||
pub fn add_mesh(
|
||||
&mut self,
|
||||
positions: &[f32],
|
||||
uvs: &[f32],
|
||||
colors: &[u32],
|
||||
indices: &[u16],
|
||||
offset_x: f32,
|
||||
offset_y: f32,
|
||||
) -> Result<(), String> {
|
||||
let vertex_count = positions.len() / 2;
|
||||
|
||||
if self.vertex_count + vertex_count > self.max_vertices {
|
||||
return Err(format!(
|
||||
"Mesh batch vertex overflow: {} + {} > {}",
|
||||
self.vertex_count, vertex_count, self.max_vertices
|
||||
));
|
||||
}
|
||||
|
||||
if self.index_count + indices.len() > self.max_indices {
|
||||
return Err(format!(
|
||||
"Mesh batch index overflow: {} + {} > {}",
|
||||
self.index_count, indices.len(), self.max_indices
|
||||
));
|
||||
}
|
||||
|
||||
// Validate input sizes
|
||||
if uvs.len() != positions.len() {
|
||||
return Err(format!(
|
||||
"UV size mismatch: {} vs {}",
|
||||
uvs.len(), positions.len()
|
||||
));
|
||||
}
|
||||
if colors.len() != vertex_count {
|
||||
return Err(format!(
|
||||
"Color count mismatch: {} vs {}",
|
||||
colors.len(), vertex_count
|
||||
));
|
||||
}
|
||||
|
||||
// Build vertex data
|
||||
let base_index = self.vertex_count as u16;
|
||||
for v in 0..vertex_count {
|
||||
let pos_idx = v * 2;
|
||||
|
||||
// Position with offset (2 floats)
|
||||
self.vertex_data.push(positions[pos_idx] + offset_x);
|
||||
self.vertex_data.push(positions[pos_idx + 1] + offset_y);
|
||||
|
||||
// TexCoord (2 floats)
|
||||
self.vertex_data.push(uvs[pos_idx]);
|
||||
self.vertex_data.push(uvs[pos_idx + 1]);
|
||||
|
||||
// Color (4 floats from packed RGBA)
|
||||
let color = colors[v];
|
||||
let r = ((color >> 24) & 0xFF) as f32 / 255.0;
|
||||
let g = ((color >> 16) & 0xFF) as f32 / 255.0;
|
||||
let b = ((color >> 8) & 0xFF) as f32 / 255.0;
|
||||
let a = (color & 0xFF) as f32 / 255.0;
|
||||
self.vertex_data.push(r);
|
||||
self.vertex_data.push(g);
|
||||
self.vertex_data.push(b);
|
||||
self.vertex_data.push(a);
|
||||
}
|
||||
|
||||
// Add indices with base offset
|
||||
for &idx in indices {
|
||||
self.index_data.push(base_index + idx);
|
||||
}
|
||||
|
||||
self.vertex_count += vertex_count;
|
||||
self.index_count += indices.len();
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Get the vertex count.
|
||||
/// 获取顶点数量。
|
||||
#[inline]
|
||||
pub fn vertex_count(&self) -> usize {
|
||||
self.vertex_count
|
||||
}
|
||||
|
||||
/// Get the index count.
|
||||
/// 获取索引数量。
|
||||
#[inline]
|
||||
pub fn index_count(&self) -> usize {
|
||||
self.index_count
|
||||
}
|
||||
|
||||
/// Get the VAO handle.
|
||||
/// 获取 VAO 句柄。
|
||||
#[inline]
|
||||
pub fn vao(&self) -> VertexArrayHandle {
|
||||
self.vao
|
||||
}
|
||||
|
||||
/// Flush and render the batch.
|
||||
/// 刷新并渲染批处理。
|
||||
pub fn flush(&self, backend: &mut impl GraphicsBackend) {
|
||||
if self.vertex_data.is_empty() || self.index_data.is_empty() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Upload vertex data
|
||||
backend.update_buffer(self.vbo, 0, bytemuck::cast_slice(&self.vertex_data)).ok();
|
||||
|
||||
// Upload index data
|
||||
backend.update_buffer(self.ibo, 0, bytemuck::cast_slice(&self.index_data)).ok();
|
||||
|
||||
// Draw indexed
|
||||
backend.draw_indexed(self.vao, self.index_count as u32, 0).ok();
|
||||
}
|
||||
|
||||
/// Destroy the batch resources.
|
||||
/// 销毁批处理资源。
|
||||
pub fn destroy(self, backend: &mut impl GraphicsBackend) {
|
||||
backend.destroy_vertex_array(self.vao);
|
||||
backend.destroy_buffer(self.vbo);
|
||||
backend.destroy_buffer(self.ibo);
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,12 @@
|
||||
//! Sprite batch rendering system.
|
||||
//! 精灵批处理渲染系统。
|
||||
//! Batch rendering system.
|
||||
//! 批处理渲染系统。
|
||||
|
||||
mod sprite_batch;
|
||||
mod text_batch;
|
||||
mod mesh_batch;
|
||||
mod vertex;
|
||||
|
||||
pub use sprite_batch::{BatchKey, SpriteBatch};
|
||||
pub use text_batch::TextBatch;
|
||||
pub use mesh_batch::MeshBatch;
|
||||
pub use vertex::{SpriteVertex, VERTEX_SIZE};
|
||||
|
||||
262
packages/engine/src/renderer/batch/text_batch.rs
Normal file
262
packages/engine/src/renderer/batch/text_batch.rs
Normal file
@@ -0,0 +1,262 @@
|
||||
//! Text batch renderer for MSDF text rendering.
|
||||
//! MSDF 文本批处理渲染器。
|
||||
|
||||
use es_engine_shared::{
|
||||
traits::backend::{GraphicsBackend, BufferUsage},
|
||||
types::{
|
||||
handle::{BufferHandle, VertexArrayHandle, ShaderHandle},
|
||||
vertex::{VertexLayout, VertexAttribute, VertexAttributeType},
|
||||
},
|
||||
};
|
||||
|
||||
/// Number of vertices per glyph (quad).
|
||||
/// 每个字形的顶点数（四边形）。
|
||||
const VERTICES_PER_GLYPH: usize = 4;
|
||||
|
||||
/// Number of indices per glyph (2 triangles).
|
||||
/// 每个字形的索引数（2 个三角形）。
|
||||
const INDICES_PER_GLYPH: usize = 6;
|
||||
|
||||
/// Floats per text vertex: position(2) + texCoord(2) + color(4) + outlineColor(4) + outlineWidth(1) = 13
|
||||
/// 每个文本顶点的浮点数：位置(2) + 纹理坐标(2) + 颜色(4) + 描边颜色(4) + 描边宽度(1) = 13
|
||||
const FLOATS_PER_VERTEX: usize = 13;
|
||||
|
||||
/// Text batch for MSDF text rendering.
|
||||
/// MSDF 文本批处理。
|
||||
pub struct TextBatch {
|
||||
vbo: BufferHandle,
|
||||
ibo: BufferHandle,
|
||||
vao: VertexArrayHandle,
|
||||
shader: ShaderHandle,
|
||||
max_glyphs: usize,
|
||||
vertex_data: Vec<f32>,
|
||||
glyph_count: usize,
|
||||
}
|
||||
|
||||
impl TextBatch {
|
||||
/// Create a new text batch.
|
||||
/// 创建新的文本批处理。
|
||||
pub fn new(backend: &mut impl GraphicsBackend, max_glyphs: usize) -> Result<Self, String> {
|
||||
let vertex_buffer_size = max_glyphs * VERTICES_PER_GLYPH * FLOATS_PER_VERTEX * 4;
|
||||
let vbo = backend.create_vertex_buffer(
|
||||
&vec![0u8; vertex_buffer_size],
|
||||
BufferUsage::Dynamic,
|
||||
).map_err(|e| format!("Text VBO: {:?}", e))?;
|
||||
|
||||
let indices = Self::generate_indices(max_glyphs);
|
||||
let ibo = backend.create_index_buffer(
|
||||
bytemuck::cast_slice(&indices),
|
||||
BufferUsage::Static,
|
||||
).map_err(|e| format!("Text IBO: {:?}", e))?;
|
||||
|
||||
// MSDF text vertex layout:
|
||||
// a_position: vec2 (location 0)
|
||||
// a_texCoord: vec2 (location 1)
|
||||
// a_color: vec4 (location 2)
|
||||
// a_outlineColor: vec4 (location 3)
|
||||
// a_outlineWidth: float (location 4)
|
||||
let layout = VertexLayout {
|
||||
attributes: vec![
|
||||
VertexAttribute {
|
||||
name: "a_position".into(),
|
||||
attr_type: VertexAttributeType::Float2,
|
||||
offset: 0,
|
||||
normalized: false
|
||||
},
|
||||
VertexAttribute {
|
||||
name: "a_texCoord".into(),
|
||||
attr_type: VertexAttributeType::Float2,
|
||||
offset: 8,
|
||||
normalized: false
|
||||
},
|
||||
VertexAttribute {
|
||||
name: "a_color".into(),
|
||||
attr_type: VertexAttributeType::Float4,
|
||||
offset: 16,
|
||||
normalized: false
|
||||
},
|
||||
VertexAttribute {
|
||||
name: "a_outlineColor".into(),
|
||||
attr_type: VertexAttributeType::Float4,
|
||||
offset: 32,
|
||||
normalized: false
|
||||
},
|
||||
VertexAttribute {
|
||||
name: "a_outlineWidth".into(),
|
||||
attr_type: VertexAttributeType::Float,
|
||||
offset: 48,
|
||||
normalized: false
|
||||
},
|
||||
],
|
||||
stride: FLOATS_PER_VERTEX * 4,
|
||||
};
|
||||
|
||||
let vao = backend.create_vertex_array(vbo, Some(ibo), &layout)
|
||||
.map_err(|e| format!("Text VAO: {:?}", e))?;
|
||||
|
||||
// Compile MSDF text shader
|
||||
let shader = backend.compile_shader(
|
||||
crate::renderer::shader::MSDF_TEXT_VERTEX_SHADER,
|
||||
crate::renderer::shader::MSDF_TEXT_FRAGMENT_SHADER,
|
||||
).map_err(|e| format!("MSDF shader: {:?}", e))?;
|
||||
|
||||
Ok(Self {
|
||||
vbo,
|
||||
ibo,
|
||||
vao,
|
||||
shader,
|
||||
max_glyphs,
|
||||
vertex_data: Vec::with_capacity(max_glyphs * VERTICES_PER_GLYPH * FLOATS_PER_VERTEX),
|
||||
glyph_count: 0,
|
||||
})
|
||||
}
|
||||
|
||||
/// Generate indices for all glyphs.
|
||||
/// 为所有字形生成索引。
|
||||
fn generate_indices(max_glyphs: usize) -> Vec<u16> {
|
||||
(0..max_glyphs).flat_map(|i| {
|
||||
let base = (i * VERTICES_PER_GLYPH) as u16;
|
||||
// Two triangles: 0-1-2, 2-3-0
|
||||
[base, base + 1, base + 2, base + 2, base + 3, base]
|
||||
}).collect()
|
||||
}
|
||||
|
||||
/// Clear the batch.
|
||||
/// 清除批处理。
|
||||
pub fn clear(&mut self) {
|
||||
self.vertex_data.clear();
|
||||
self.glyph_count = 0;
|
||||
}
|
||||
|
||||
/// Add text glyphs to the batch.
|
||||
/// 将文本字形添加到批处理。
|
||||
///
|
||||
/// # Arguments | 参数
|
||||
/// * `positions` - Float32Array [x, y, ...] for each vertex (4 per glyph)
|
||||
/// * `tex_coords` - Float32Array [u, v, ...] for each vertex (4 per glyph)
|
||||
/// * `colors` - Float32Array [r, g, b, a, ...] for each vertex (4 per glyph)
|
||||
/// * `outline_colors` - Float32Array [r, g, b, a, ...] for each vertex
|
||||
/// * `outline_widths` - Float32Array [width, ...] for each vertex
|
||||
pub fn add_glyphs(
|
||||
&mut self,
|
||||
positions: &[f32],
|
||||
tex_coords: &[f32],
|
||||
colors: &[f32],
|
||||
outline_colors: &[f32],
|
||||
outline_widths: &[f32],
|
||||
) -> Result<(), String> {
|
||||
// Calculate glyph count from positions (2 floats per vertex, 4 vertices per glyph)
|
||||
let vertex_count = positions.len() / 2;
|
||||
let glyph_count = vertex_count / VERTICES_PER_GLYPH;
|
||||
|
||||
if self.glyph_count + glyph_count > self.max_glyphs {
|
||||
return Err(format!(
|
||||
"Text batch overflow: {} + {} > {}",
|
||||
self.glyph_count, glyph_count, self.max_glyphs
|
||||
));
|
||||
}
|
||||
|
||||
// Validate input sizes
|
||||
if tex_coords.len() != positions.len() {
|
||||
return Err(format!(
|
||||
"TexCoord size mismatch: {} vs {}",
|
||||
tex_coords.len(), positions.len()
|
||||
));
|
||||
}
|
||||
if colors.len() != vertex_count * 4 {
|
||||
return Err(format!(
|
||||
"Colors size mismatch: {} vs {}",
|
||||
colors.len(), vertex_count * 4
|
||||
));
|
||||
}
|
||||
if outline_colors.len() != vertex_count * 4 {
|
||||
return Err(format!(
|
||||
"OutlineColors size mismatch: {} vs {}",
|
||||
outline_colors.len(), vertex_count * 4
|
||||
));
|
||||
}
|
||||
if outline_widths.len() != vertex_count {
|
||||
return Err(format!(
|
||||
"OutlineWidths size mismatch: {} vs {}",
|
||||
outline_widths.len(), vertex_count
|
||||
));
|
||||
}
|
||||
|
||||
// Build vertex data
|
||||
for v in 0..vertex_count {
|
||||
let pos_idx = v * 2;
|
||||
let col_idx = v * 4;
|
||||
|
||||
// Position (2 floats)
|
||||
self.vertex_data.push(positions[pos_idx]);
|
||||
self.vertex_data.push(positions[pos_idx + 1]);
|
||||
|
||||
// TexCoord (2 floats)
|
||||
self.vertex_data.push(tex_coords[pos_idx]);
|
||||
self.vertex_data.push(tex_coords[pos_idx + 1]);
|
||||
|
||||
// Color (4 floats)
|
||||
self.vertex_data.push(colors[col_idx]);
|
||||
self.vertex_data.push(colors[col_idx + 1]);
|
||||
self.vertex_data.push(colors[col_idx + 2]);
|
||||
self.vertex_data.push(colors[col_idx + 3]);
|
||||
|
||||
// Outline color (4 floats)
|
||||
self.vertex_data.push(outline_colors[col_idx]);
|
||||
self.vertex_data.push(outline_colors[col_idx + 1]);
|
||||
self.vertex_data.push(outline_colors[col_idx + 2]);
|
||||
self.vertex_data.push(outline_colors[col_idx + 3]);
|
||||
|
||||
// Outline width (1 float)
|
||||
self.vertex_data.push(outline_widths[v]);
|
||||
}
|
||||
|
||||
self.glyph_count += glyph_count;
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Get the glyph count.
|
||||
/// 获取字形数量。
|
||||
#[inline]
|
||||
pub fn glyph_count(&self) -> usize {
|
||||
self.glyph_count
|
||||
}
|
||||
|
||||
/// Get the shader handle.
|
||||
/// 获取着色器句柄。
|
||||
#[inline]
|
||||
pub fn shader(&self) -> ShaderHandle {
|
||||
self.shader
|
||||
}
|
||||
|
||||
/// Get the VAO handle.
|
||||
/// 获取 VAO 句柄。
|
||||
#[inline]
|
||||
pub fn vao(&self) -> VertexArrayHandle {
|
||||
self.vao
|
||||
}
|
||||
|
||||
/// Flush and render the batch.
|
||||
/// 刷新并渲染批处理。
|
||||
pub fn flush(&self, backend: &mut impl GraphicsBackend) {
|
||||
if self.vertex_data.is_empty() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Upload vertex data
|
||||
backend.update_buffer(self.vbo, 0, bytemuck::cast_slice(&self.vertex_data)).ok();
|
||||
|
||||
// Draw indexed
|
||||
let index_count = (self.glyph_count * INDICES_PER_GLYPH) as u32;
|
||||
backend.draw_indexed(self.vao, index_count, 0).ok();
|
||||
}
|
||||
|
||||
/// Destroy the batch resources.
|
||||
/// 销毁批处理资源。
|
||||
pub fn destroy(self, backend: &mut impl GraphicsBackend) {
|
||||
backend.destroy_vertex_array(self.vao);
|
||||
backend.destroy_buffer(self.vbo);
|
||||
backend.destroy_buffer(self.ibo);
|
||||
backend.destroy_shader(self.shader);
|
||||
}
|
||||
}
|
||||
@@ -14,7 +14,7 @@ mod viewport;
|
||||
|
||||
pub use renderer2d::Renderer2D;
|
||||
pub use camera::Camera2D;
|
||||
pub use batch::SpriteBatch;
|
||||
pub use batch::{SpriteBatch, TextBatch, MeshBatch};
|
||||
pub use texture::{Texture, TextureManager};
|
||||
pub use grid::GridRenderer;
|
||||
pub use gizmo::{GizmoRenderer, TransformMode};
|
||||
|
||||
@@ -224,6 +224,19 @@ impl Renderer2D {
|
||||
id == 0 || self.custom_shaders.contains_key(&id)
|
||||
}
|
||||
|
||||
/// Get shader handle by ID.
|
||||
/// 按 ID 获取着色器句柄。
|
||||
///
|
||||
/// Returns the default shader for ID 0, or custom shader for other IDs.
|
||||
/// ID 0 返回默认着色器，其他 ID 返回自定义着色器。
|
||||
pub fn get_shader_handle(&self, id: u32) -> Option<ShaderHandle> {
|
||||
if id == 0 || id == crate::renderer::shader::SHADER_ID_DEFAULT_SPRITE {
|
||||
Some(self.default_shader)
|
||||
} else {
|
||||
self.custom_shaders.get(&id).copied()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn remove_shader(&mut self, id: u32) -> bool {
|
||||
if id < 100 { return false; }
|
||||
self.custom_shaders.remove(&id).is_some()
|
||||
|
||||
@@ -1,6 +1,90 @@
|
||||
//! Built-in shader source code.
|
||||
//! 内置Shader源代码。
|
||||
|
||||
// =============================================================================
|
||||
// MSDF Text Shaders
|
||||
// MSDF 文本着色器
|
||||
// =============================================================================
|
||||
|
||||
/// MSDF text vertex shader source.
|
||||
/// MSDF 文本顶点着色器源代码。
|
||||
pub const MSDF_TEXT_VERTEX_SHADER: &str = r#"#version 300 es
|
||||
precision highp float;
|
||||
|
||||
layout(location = 0) in vec2 a_position;
|
||||
layout(location = 1) in vec2 a_texCoord;
|
||||
layout(location = 2) in vec4 a_color;
|
||||
layout(location = 3) in vec4 a_outlineColor;
|
||||
layout(location = 4) in float a_outlineWidth;
|
||||
|
||||
uniform mat3 u_projection;
|
||||
|
||||
out vec2 v_texCoord;
|
||||
out vec4 v_color;
|
||||
out vec4 v_outlineColor;
|
||||
out float v_outlineWidth;
|
||||
|
||||
void main() {
|
||||
vec3 pos = u_projection * vec3(a_position, 1.0);
|
||||
gl_Position = vec4(pos.xy, 0.0, 1.0);
|
||||
v_texCoord = a_texCoord;
|
||||
v_color = a_color;
|
||||
v_outlineColor = a_outlineColor;
|
||||
v_outlineWidth = a_outlineWidth;
|
||||
}
|
||||
"#;
|
||||
|
||||
/// MSDF text fragment shader source.
|
||||
/// MSDF 文本片段着色器源代码。
|
||||
pub const MSDF_TEXT_FRAGMENT_SHADER: &str = r#"#version 300 es
|
||||
precision highp float;
|
||||
|
||||
in vec2 v_texCoord;
|
||||
in vec4 v_color;
|
||||
in vec4 v_outlineColor;
|
||||
in float v_outlineWidth;
|
||||
|
||||
uniform sampler2D u_msdfTexture;
|
||||
uniform float u_pxRange;
|
||||
|
||||
out vec4 fragColor;
|
||||
|
||||
float median(float r, float g, float b) {
|
||||
return max(min(r, g), min(max(r, g), b));
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec3 msdf = texture(u_msdfTexture, v_texCoord).rgb;
|
||||
float sd = median(msdf.r, msdf.g, msdf.b);
|
||||
|
||||
vec2 unitRange = vec2(u_pxRange) / vec2(textureSize(u_msdfTexture, 0));
|
||||
vec2 screenTexSize = vec2(1.0) / fwidth(v_texCoord);
|
||||
float screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);
|
||||
|
||||
float screenPxDistance = screenPxRange * (sd - 0.5);
|
||||
float opacity = clamp(screenPxDistance + 0.5, 0.0, 1.0);
|
||||
|
||||
if (v_outlineWidth > 0.0) {
|
||||
float outlineDistance = screenPxRange * (sd - 0.5 + v_outlineWidth);
|
||||
float outlineOpacity = clamp(outlineDistance + 0.5, 0.0, 1.0);
|
||||
vec4 outlineCol = vec4(v_outlineColor.rgb, v_outlineColor.a * outlineOpacity);
|
||||
vec4 fillCol = vec4(v_color.rgb, v_color.a * opacity);
|
||||
fragColor = mix(outlineCol, fillCol, opacity);
|
||||
} else {
|
||||
fragColor = vec4(v_color.rgb, v_color.a * opacity);
|
||||
}
|
||||
|
||||
if (fragColor.a < 0.01) {
|
||||
discard;
|
||||
}
|
||||
}
|
||||
"#;
|
||||
|
||||
// =============================================================================
|
||||
// Sprite Shaders
|
||||
// 精灵着色器
|
||||
// =============================================================================
|
||||
|
||||
/// Sprite vertex shader source.
|
||||
/// 精灵顶点着色器源代码。
|
||||
///
|
||||
|
||||
@@ -6,5 +6,8 @@ mod builtin;
|
||||
mod manager;
|
||||
|
||||
pub use program::ShaderProgram;
|
||||
pub use builtin::{SPRITE_VERTEX_SHADER, SPRITE_FRAGMENT_SHADER};
|
||||
pub use builtin::{
|
||||
SPRITE_VERTEX_SHADER, SPRITE_FRAGMENT_SHADER,
|
||||
MSDF_TEXT_VERTEX_SHADER, MSDF_TEXT_FRAGMENT_SHADER
|
||||
};
|
||||
pub use manager::{ShaderManager, SHADER_ID_DEFAULT_SPRITE};
|
||||
|
||||
Reference in New Issue
Block a user