打造炫酷3D可视化ACE—— 动画曲线编辑器

收藏

本帖最后由 nimotea 于 2024-1-11 17:28 编辑

背景

在制作3D可视化看板时候，除了精细的模型结构，炫酷的动画效果也是必不可少的。当然，动画效果有复杂的和简单之分，动画效果,要做到100%的自然平滑，不管是物理引擎的计算能力，还是要对动画效果做数学建模分析，抑或是模型网格复杂程度，都会是极具挑战性的工作。相信除了专业的3D建模从业人员，几乎无法完成这项挑战。但回到实际情况，当我们对动画精细程度的要求没有那么高的情况下，我们还是能借助一些外部工具来实现一些比如巡检，移动，旋转的组合动画。今天介绍的工具就是 BABYLONJS 中提供的动画曲线编辑器，通过 ui 拖拽点击，就能自定义设计动画效果了。（文末有示例代码可以参考）

动画编辑器.gif125350951.png

前置说明
要使用动画曲线编辑器，就得先使用 BABYLON Inspector，后者是 BABYLONJS 提供的一个强大的模型检查工具，不仅可以查看模型网格对象的各种属性，还可以提供 gizmo 工具来让用户手动拖拽缩放平移网格体，实现和3D模型的实时交互，最后还具备像动画曲线编辑器等强大工具，让用户可以通过 ui 操作就能自定义设计动画效果。那要使用 BABYLON Inspector 又需要哪些操作呢?
① babylon playground 站点这个站点提供了一个在线的 babylonjs 代码运行环境，用户可以在这个平台上协同创建3D场景, 缺点: 要引入外部资源(模型，图片)，只能通过 web url 方式载入。
② babylon sandbox 站点这个站点提供了一个在线的模型运行检查环境，用户可以在这个平台上检查自己的模型文件是否正常运行，参数设定是否如预期，缺点: 不能同时引入多个模型文件(比如，先引入园区模型，再引入人物模型，这在 sandbox 环境是无法实现的。)
③ 代码方式引入，因为babylonjs 毕竟是前端工具， insepector 也提供了对应的前端开发包

npm install @babylonjs/core
npm install @babylonjs/inspector

复制代码

引入依赖包之后，只需要通过

import { Inspector } from "@babylonjs/inspector";
function createScene(){
// create babylonjs scene
return scene;
}
const scene = createScene();
Inspector.Show(scene);

复制代码

即可对指定的 3D 场景应用 Inspector 查看器了。缺点：需要一定的前端开发基础。

动画须知
在使用动画编辑器之前，首先需要了解，babylonjs 中的动画其实就是按顺序执行的一系列帧画面，所以，如果了解了每一帧模型对象的属性值，就可以制作出对应的动画。

动画编辑器场景
使用动画编辑器有两种场景

选中一个模型对象，选择右侧对象的 Animations 属性，点击 Editor 就可以新增或修改动画

选中一个模型的 AnimationGroup ,即可编辑 Group 中每个单独动画

动画编辑器菜单说明
curve_editor_menu.jpg282757567.png

"+" 按钮即为创建动画按钮，一个动画编辑器中可以对对象创建多个动画

其中创建菜单中的选项如下

Display Name 为动画名称

Mode 为 List 即为内置的模型属性，Custom 即为自定义的模型属性
Property 取决于 Mode 的选择模式，一般List 情况下就能够下拉选择到 position rotation 等常用属性
Type 即 property 的数据类型，这个也和代码创建动画的参数是一致的

第二个箭头符号则表示用户可以上传动画内容，和下一个保存按钮中的保存为 json 文件中的格式保持对应
保存按钮，可以保存到 babylon 的在线服务器也可以保存为 json 文件
编辑按钮，可以编辑现有的动画内容
每秒显示帧数, fps 支持用户自定义修改

接下来是编辑器主题部分顶部的 key 控制面板
keyControls.jpg350886534.png

其中按钮分别是

当前 key 帧数，当用户选中一个 key 时,可以通过这个输入框来修改当前 key 的帧号 （选中一个key时）
当前 key value 当用户选中一个 key 时，可以通过这个输入框来修改当前 key 的属性具体值 （选中一个key时）
创建关键 key, 这个按钮将会再整个播放轴上创建一个新的关键 key，并且将渲染画布此时网格对象的对应属性值作为新创建 key 的属性值，(换句话说，可以在 inspect 页面通过 gizmo 工具拖动旋转物体到指定位置，点击创建关键 key 按钮就能创建一个新的关键 key , 并将手动拖动的网格对象的属性值作为该关键 key 的value 值)
帧画布，这个按钮会自适应当前设定的关键 key，当在设定的 key value 超出画布时，可以使用该按钮来重置画布。

接下来的 5 个按钮都是用来控制每个关键 key 和前后帧的 value 之间的变化关系，也就是关键 key 的左右切线

平铺切线，会让当前关键 key 的左右切线都变成水平线，在这种情况下，由于左右斜率一致，我们可以做出一些更加平滑的曲线效果出来
线性切线，会让当前关键 key 的左右切线都变成指向前后关键 key 的一次线条，一般用来展示一些匀速变化关系
切分左右切线模式，可以单独的控制关键 key 的左右切线
整合左右切线模型，如上，切分模式的反面
阶梯式切线，在从当前 key 到下一个 key 之间的帧，value 值保持不变，在下一个关键 key 到来时，value 瞬间切换到该 key value，可以用来制作一些转身，旋转的瞬时动画

最后是动画播放面板

按钮分别如下

第一帧和最后一帧

前一帧和后一帧

前一个和后一个关键 key

播放和倒放动画

播放范围，需要指定动画开始和结束播放帧数

正常情况下，指定了动画属性值和播放模式之后，就可以点击创建关键 key 来设定关键动画值，一方面可以在 inspector 中手动拖动网格对象，让新建key来获取指定 value, 另一方面也可以在动画播放面板反复查看修改动画属性，制作好动画之后，就可以使用保存按钮来将制作好的动画导入了。对于历史动画也可以通过导入按钮来对动画做细节调整。

动画制作(实战)
当动画路线比较复杂，而且对动画速度时机的展示要求比较高得情况下，就需要先提前大概算出来动画得关键参数。这里以绕场一周动画为例，说明下步骤:

首先需要获取到总帧数，以及特定行为(转向移动)的对应帧数。(这一步是动画制作最重要的一步，总体上可以参考物理位移原理位移 = 速度 * 时间来合理设计帧数。)