效果

目标！画出蒙皮动画的骨架。

视频

https://www.bilibili.com/video/BV1pM411m7Yw

PPT

https://zfxdvouj61.feishu.cn/file/boxcnwgESO6zdQetO7oNhKboNsd
以下为PPT文字稿，建议还是看视频

讲讲自己对蒙皮骨骼动画的理解，并在 Cocos Creator 3.6 中绘制出骨架~希望对大家有帮助~

这是我们今天实现效果，在 Cocos Creator 中把骨架画出来，图中绿色的线就是绘制的骨架

在开始之前，我们介绍一下如何导入模型？长按3d资源拖入到资源管理器中.

让我们看看gltf资源包括什么(介绍最下方），mesh 网格，texture 贴图，material 材质，animation 动画 ，skeleton 骨架数据。根节点有个动画组件，cips是动画列表，default clip 是默认动画， play on load 是加载后自动播放。Sockets 是挂点系统。启用 useBakedAnimation 时会使用预烘焙骨骼动画系统（所有动画数据都会按照指定帧率提前预采样、烘焙到全局复用的骨骼动画贴图合集上），禁用 useBakedAnimation 后会使用实时计算骨骼动画系统（动画数据会输出到场景的骨骼节点树中）。

mesh 就是网格，由三角形拼成的网格，可以看到这个网格有7325个顶点，和11186个三角形，minpos 就是包围盒最小值， maxpos 就是包围盒最大的值

关于网格，这张图会看的清楚一点，由多个三角形构成。

材质就像是给刚才的网格穿上的衣服，贴图就像是衣服上好看的图案

可以在这个模型上看到贴图的部件，是通过纹理映射的方式显示这张图片。例如手套映射到贴图的右下角。

还有一种常见的贴图叫法线贴图，简单来说这张贴图可以让模型更有凹凸感

骨架，就像是人体的骨骼一样。蒙皮，蒙的就是网格相对于骨架的位置

事实上，在实现中并没有骨架，并不是一条一条的线，而是一个一个的点。叫做关节或者说骨骼点。蒙皮就是根据根据这个点，计算网格点的位置。

选中场景中的3d模型，点击动画编辑器，进入动画编辑模式。可以预览动画效果。

点击播放按钮就可以播放了。可以看到右上角的属性面板并没有变化，那么这个动画是移动的是什么呢？

前面几个点的 postion rotation 并没有发生变化

可以看到后面几个点位移旋转发生了变化，这些点就是骨骼（关节）。蒙皮动画的本质是改变骨骼的节点信息，网格再根据骨骼点实时计算网格的形状。

材质，网格，骨架是由蒙皮网格渲染器（skinmeshrenderer) 组织在一起。

总结一下，一个3d资源拖入到场景中的结构是怎么样的。根节点有一个骨骼动画组件。他的儿子中包含了骨骼蒙皮渲染组件（将材质，网格，骨骼组织在一起）。还有种儿子是骨骼（关节），蒙皮动画实际上是对这些骨骼点进去移动旋转，然后网格再根据这个点的信息，再计算网格的形状（蒙皮）。

了解了上面的知识，我们现在开始实战吧。我们的目标是画出这个骨骼！

我们该如何绘制骨架呢？只要在这些骨骼点和其父节点画一条线就行了。

我们要画的是这些骨骼，这些骨骼的数据应该在哪里获取呢？是的，就在骨架数据中获取，骨架数据就是在蒙皮网格渲染器中。

model 就是对应这初始节点。先拿到蒙皮网格渲染器的组件，找到骨架数据，再找到骨骼点，并做上标记。最后再递归按深度优先的顺序把所有骨骼点保存起来。这个bones就是所有的关节点了。

那么我们应该用什么组件画骨架呢？这里用了 Cocos Creator 的线段组件。对有爸爸的骨骼们创建线段组件。把每个骨骼和他爸爸的世界坐标告诉线段组件，就能画出骨架了。

还需要注意的是，要想把这东西画到最前！需做到 透 深 优！透是指透明渲染队列。在 Cocos Creator 默认的前向渲染管线中，是先渲染不透明队列再渲染透明队列。选择透明队列就可以再更后的阶段绘制。深 指的是 深度读写都关闭，深度写是影响之后东西的绘画，深度读是只被之前绘画的深度影响，当然我们都不想影响就都关了。优 是只 优先级，要在最后画！

最后，介绍一下这个脚本怎么使用。将这个脚本拖入到场景中，再挂上场景中的3D模型就可以了。

小结~ 1.动画驱动骨骼 2.骨骼决定网格 3.画最前，透深优

代码

import { _decorator, Component, Node, SkinnedMeshRenderer, Line, SkeletalAnimation, Color, gfx, GradientRange, log } from 'cc';
const { ccclass, property } = _decorator;@ccclass('SkeletonHelper')
export class SkeletonHelper extends Component {@property(Node)model: Node = null!private bones: Node[] = []private lines: Line[] = []start() {log('欢迎关注微信公众号【白玉无冰】 https://mp.weixin.qq.com/s/-I6I6nG2Hnk6d1zqR-Gu2g')const skeletalAnimation = this.model.getComponent(SkeletalAnimation)skeletalAnimation.useBakedAnimation = false; // maybe todoconst skinMeshRds = this.model.getComponentsInChildren(SkinnedMeshRenderer)skinMeshRds.forEach(element => {const skinningRoot = element.skinningRootelement.skeleton.joints.forEach((v) => {const node = skinningRoot.getChildByPath(v)node['isBone'] = true;})});const bones = this.getBoneList(this.model);this.bones = bones;for (let i = 0; i < bones.length; i++) {const bone = bones[i];if (bone.parent && bone.parent['isBone']) {const line = this.addComponent(Line);const state = { priority: 255, depthStencilState: new gfx.DepthStencilState(false, false) }// @ts-ignoreline._materialInstance.overridePipelineStates(state)line.worldSpace = true;line.width.constant = 0.01;line.color.mode = GradientRange.Mode.TwoColors //there are some bugs in cocos creator // engine\cocos\particle\models\line-model.ts   // engine\cocos\particle\animator\gradient.tsline.color.colorMin = Color.BLUEline.color.colorMax = Color.GREENline.positions = [bone.worldPosition, bone.parent.worldPosition] as never[]this.lines.push(line)}}}showSkeleton(show: boolean) {this.lines.forEach(l => l.enabled = show)}private getBoneList(object: Node) {const boneList: Node[] = [];if (object['isBone']) {boneList.push(object);}for (let i = 0; i < object.children.length; i++) {boneList.push.apply(boneList, this.getBoneList(object.children[i]));}return boneList;}lateUpdate(deltaTime: number) {let lineIndex = 0;for (let i = 0; i < this.bones.length; i++) {const bone = this.bones[i];if (bone.parent && bone.parent['isBone']) {const line = this.lines[lineIndex++];line.positions = [bone.worldPosition, bone.parent.worldPosition] as never[]}}}
}

视频

“点赞“ ”在看” 鼓励一下▼