加来森效应核心
Galacean Effects的核心运行时间库,负责资产加载,场景管理和渲染.
基本概念
这个 组成 是Galacean Effects中动画回放的基本单位. 这个 Composition 类管理从数据解析(JSON - > VFX 项目 - > 渲染器组件)到渲染框架的创建、更新和销毁的整个生命周期(RenderFrame颁发通行证RenderPass) (中文(简体) ).
核心结构
Engine
├── Composition
│ ├── VFXItem (Element)
│ │ ├── Component
│ │ │ └── RendererComponent
│ │ └── Transform
│ ├── RenderFrame
│ │ └── RenderPass
│ └── Camera
└── Resource Management
├── Texture
├── Material
└── Geometry
每种构成包含不同类型的要素(VFXItem及其组成部分Component),包括:
- 相机组件
- Sprite( 层) 组件
- 颗粒系统
- 文本组件
- 互动部分
当一个组成被创建时,它会完成:
- 装入数据资产
- 要素的产生(
VFXItem及其组成部分 - 装入并创建纹理( E)
Texture(中文(简体) ) - 初始化
RenderFrame财务报告和审定财务报表RenderPass
核心单元
1. 发动机 发动机
Engine 是核心切入点,负责管理所有GPU资源和组成物的生命周期.
import { Engine } from '@galacean/effects-core';
// Create engine
const engine = Engine.create(canvas, {
fps: 60,
pixelRatio: window.devicePixelRatio,
});
主要特点:
- 管理渲染器(
Renderer(中文(简体) ) - 管理 GPU 资源( 文字、 材料、 几何等)
- 管理成分的创建和销毁
- 提供计数器( E)
Ticker驱动渲染回路 - 处理交互式活动
2. 资产管理 资产管理人
负责装入效果所需的所有资源:
import { AssetManager } from '@galacean/effects-core';
const assetManager = new AssetManager(options);
支持的特性 :
- 正在装入 JSON 和 二进制资源
- 正在装入图像和视频资源
- 根据渲染级别选择资源下载
- 图像/文本模板替换
- 字体装入( 通过)
AssetManager.loadFontFamily(中文(简体) )
3. 组成 组成
管理用于动画回放的数据处理和渲染:
const composition = new Composition(props, scene);
// Playback control
composition.play();
composition.pause();
composition.resume();
// Update
composition.update(deltaTime);
// Dispose
composition.dispose();
主要属性 :
renderFrame: 当前框架的渲染数据对象rootItem: 构成的根要素camera: 相机组件speed: 回放速度
4. VFX 元素 VFX 项目
所有效果元素的基础类,支持基于组件的架构:
// Get component
const component = item.getComponent(SpriteComponent);
// Iterate children
item.children.forEach(child => {
// ...
});
// Transform operations
item.transform.setPosition(x, y, z);
主要属性 :
transform: 位置、旋转、比例转换components: 构成部分清单children: 儿童要素清单
5. 组件系统 构成部分
项目:
abstract class Component extends EffectsObject {
item: VFXItem; // Owner element
enabled: boolean; // Whether enabled
onAwake() {} // Initialization
onEnable() {} // On enable
onDisable() {} // On disable
onStart() {} // Before first update
onUpdate(dt: number) {} // Per-frame update
onLateUpdate(dt: number) {} // Late update
onDestroy() {} // On destroy
}
6. 渲染器组件 渲染器组件
所有渲染元件的基等,负责添加可渲染出物来渲染出传:
class RendererComponent extends Component {
material: Material; // Material
materials: Material[]; // Material list
priority: number; // Render priority
render(renderer: Renderer): void {} // Render method
}
当一个组件被启用时,它会自动被添加到默认渲染通过 RenderFrame。 。 。 .
7. 渲染框架 发光灯
每个帧的渲染数据对象,管理渲染口和全局制服:
interface RenderFrameOptions {
camera: Camera,
renderer: Renderer,
globalVolume?: PostProcessVolume,
postProcessingEnabled?: boolean,
}
主要特点:
- 管理
RenderPass列表 - 存储相机属性
- 管理全局统一变量( E)
GlobalUniforms(中文(简体) ) - 支持后处理( Bloom, ToneMapping)
主要方法:
addMeshToDefaultRenderPass(mesh: RendererComponent): 将渲染器组件添加到默认渲染通过中removeMeshFromDefaultRenderPass(mesh: RendererComponent): 从默认渲染器组件中去除渲染器组件
8. 通行证 渲染纸
管理一组要渲染的对象 :
interface RenderPassClearAction {
clearColor?: vec4,
colorAction?: TextureLoadAction,
clearDepth?: number,
depthAction?: TextureLoadAction,
}
特征 :
- 管理渲染对象列表
- 配置颜色、 深度、 质地附件
- 设定清晰的行为
9. 几何学 几何
用于管理顶点和索引数据的摘要类:
const geometry = Geometry.create(engine, {
attributes: {
aPosition: { size: 3, data: positions },
aTexCoord: { size: 2, data: texCoords },
},
indices: { data: indices },
mode: WebGLRenderingContext.TRIANGLES,
});
// Update data
geometry.setAttributeData('aPosition', newPositions);
geometry.setAttributeSubData('aPosition', offset, partialData);
geometry.setIndexData(newIndices);
geometry.setDrawCount(count);
10. 材料 材料
用于管理阴影和渲染的文摘类:
const material = Material.create(engine, {
shader: shaderSource,
uniformValues: {
uColor: [1, 0, 0, 1],
},
});
// Set render states
material.blending = true;
material.depthTest = true;
material.depthMask = true;
渲染状态属性 :
blending: 颜色混合开关blendFunction: 混合函数depthTest: 深度测试开关depthMask: 深度写入开关stencilTest: Stencil 测试开关culling: 后相摇动开关
11. 纹理 纹理
管理 GPU 纹理资源的摘要类 :
// From image
const texture = await Texture.fromImage(url, engine);
// From video
const texture = await Texture.fromVideo(url, engine);
// From data
const texture = Texture.create(engine, {
sourceType: TextureSourceType.data,
data: {
width: 256,
height: 256,
data: pixelData,
},
});
插件系统
支持通过插件扩展功能 :
import { registerPlugin } from '@galacean/effects-core';
registerPlugin('custom', CustomLoader);
内建插件 :
sprite: 图层渲染particle: 粒子系统text: 文本渲染interact: 交互处理camera: 相机控制器
安装
npm install @galacean/effects-core
依赖关系
@galacean/effects-specification: 数据规格定义@galacean/effects-math: 数学库