项目概览
在此次信用卡双十一项目中，为了更好的还原视觉效果、提升开发效率，全程使用编辑器工作流程。本文将就编辑器工作流程、开发中常见问题、以及后续的资源优化进行介绍。
编辑器工作流程
编辑器工作流之所以能够提升效率，在于模型制作方、美术、开发分工明确，并且在同一个可视化平台工作。通常来说，互动开发在产品需求确定后就开始进行设计，协助搭建完成场景后负责把编辑器项目开发为前端工程中可以用的组件。对于开发来说，编辑器工程极大地便利了进行视觉还原、衔接后续开发。
编辑器项目到本地
在编辑器中，可以方便的将整个项目以 NPM 包的形式拉取至本地。
在编辑器中调整场景后更新项目 URL ，将 project 的 URL 地址替换本地项目 project.json 中的 url 即可在本地项目中同步更新。
需要注意的是，如果编辑器使用了插件，目前需要在下载到本地的项目中手动加载该插件，
typescript
import PbrFresnelMatComponent from "@alipay/galacean-material-library/PbrFresnelMatComponent";
// 加载插件
Loader.registerClass("PbrFresnelMatComponent", PbrFresnelMatComponent);同时在 package.json 中添加该依赖：
typescript
"dependencies": {
"@alipay/galacean-material-library": "dev.3",
},互动组件接入前端工程
互动部分通常以 React 组件的形式加入前端工程，与其他部分通过引擎的事件机制进行通讯。
typescript
<Galacean
config={
...
}
onComplete={(engine) => {
console.log("Game start.");
}}
onFail={(err: any) => {}}
onProcess={(process: number) => {
console.log("load process:", process);
}}
/>具体互动开发部分可以参见 Galacean 其他技术文章，本文不再赘述。
画布适配
适配问题是刚接触互动开发常常容易感到困惑的问题。在确定好画布的宽高 后，与普通的页面布局不同，我们需要知道使用的是正交相机或者透视相机。
- 正交相机：看到的大小无论距离相机远近都一致，用于 2D 项目。
- 透视相机：近大远小，用于 3D 项目。
前端页面中通常会要求按宽适配 ，或者按高适配。相同的要求转译为画布宽度/高度下能够容纳该场景，不会穿帮也不会有元素遮挡。
- 正交相机：调整 OrthoGraphic Size。
- 透视相机：FOV、相机位置都会影响。建议让技术美术决定 FOV，因为 FOV 的值越大，透视效果越弱，与视觉关系更为紧密。在确定 FOV 后可以调整相机的位置。
引擎会根据 canvas 元素的 css 样式自动适配。一般情况下这行代码已经可以满足适配的需求，如果你有更复杂的适配需求，请阅读画布适配。
typescript
engine.canvas.resizeByClientSize();例如，2D 项目，画布设计高度 900 px，设计宽度 750 px，背景图在场景中高 9.5 宽 15。要求按照高度适配，需要将正交相机的 OrthoGraphic Size 设为 4.75 ( OrthoGraphic Size 从定义上为正交模式下相机的一半尺寸)，engine.canvas.resizeByClientSize( 750 / 900 )。
优化资源
压缩资源
整体资源大小决定了加载速度。
在项目中直接观察 DevTools 资源加载量是不准确的，更可靠的方式是新建空项目，仅加载该组件对 transferred resources 进行观察。通常来说加载时长按照 0.5mb/s 进行估算。
按照大小进行排列后，优先压缩占比过大的资源。对于 2D 类型资源，包括贴图、Lottie、Spine，基础原则为：
- 减少贴图内空白像素
- 贴图大小尽量控制在 2n 内。例如，能在 512 * 512 大小，就不要使用 250 * 600 这样的大小
对于 3D 类的 glTF 类型，除模型贴图外，整体大小也和面数紧密相关，需要在模型制作时就进行预判。
使用编辑器工作流程时，编辑器项目对于资源是按需加载的，即场景中没有用到的资源不会加载。并且编辑器内置了针对贴图的图片压缩 KTX2，以及针对模型的压缩算法。在拉取项目时可以对整体资源进行压缩。
降低 Drawcall
Draw Call 是由 CPU 向 GPU 发送的一条命令，根据一个渲染状态去渲染一个网格（Mesh）。降低每帧的drawcall 数量有助于运行流畅。
通过引入引擎提供的 Stats 工具进行观察。drawcall 过高时可在场景通过排除法进行排查、定位问题。
编辑器项目预览中也集成了该统计面板，可以直接进行观察
typescript
import { Stats } from "@galacean/engine-toolkit-stats";
...
// 在具有相机的实体下挂载该组件
cameraEntity.addComponent(Stats);
glTF 模型
简单而言，如果一个模型有 N 种材质，那么它的 drawcall 是 N。从编辑器的观察器面板中可以方便的观察到这一信息。
材质数量是在模型制作时就决定的。比如在本次项目中，为了还原视觉效果，每个红包有 6 种材质，当场景中出现 12 个红包时仅红包就产生 72 个 drawcall。因此，模型制作的过程中需要与美术沟通，防止后期 drawcall 过高影响性能。
精灵图集
精灵图集是 2D 项目常用的优化手段。当资源中有众多碎图时，可以在编辑器中通过精灵图集进行打包。它在带来更少的绘制次数的同时，也减少了资源请求次数，从而大大提升渲染性能。
渲染顺序
帧率是指每秒钟渲染的图像帧数，单位为 fps。60 fps 是目前主流的显示器刷新率，也是大多数游戏和应用的理想帧率。在常见型号手机上是否能跑满帧是一个重要的指标。因为帧率关系到运行流畅度，需要
- 帧率不能过低（24 fps）
- 帧率稳定。如果波动大，即使在帧率很高的情况下也会出现卡顿
当出现明显帧率缺失时，可以通过排除法进行排查、定位。
以本次项目为例，场景搭建完成运行后未能满帧。依次去除场景中各个元素观察帧率，发现是由背景贴图造成的。因为引擎是由远及近进行渲染，判断远近是根据包围盒中心到相机的距离。而背景贴图与场景中其他半透明元素恰好距离相同，导致交叉渲染、贴图处理断合批，从而导致帧率下降。通过对该背景贴图指定渲染优先级，强制按照期望顺序进行渲染，保证合批。
小结
与传统前端开发不同，互动开发要求开发者在模型制作阶段就介入项目，与制作方、技术美术进行方案选型、判断性能及资源指标。编辑器不仅提供了一个合作的平台，并且能以内置的工具帮助开发者提高效率，衔接后期性能优化。
如何联系我们
Galacean 开源社区群 (钉钉)：
Galacean 开源社区群 (微信)：
添加群管理员微信：zengxinxin2010， 并备注 "galacean 加群"
网站
Engine 源码地址
github.com/galacean/en...
Engine Toolkit 源码地址
github.com/galacean/en...