CSharpGL(50)使用Assimp加载骨骼动画

在(http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html)介绍了C++用Asismp库加载骨骼动画的原理和流程。

在(http://wiki.jikexueyuan.com/project/modern-opengl-tutorial/tutorial45.html)是其中文版译文。

本文用CSharpGL借助Assimp库实现加载和渲染骨骼动画的功能。

下载

CSharpGL已在GitHub开源,欢迎对OpenGL有兴趣的同学加入(https://github.com/bitzhuwei/CSharpGL

在.NET下使用Assimp

三维模型解析库Assimp本身是用C++编写的,所幸有一个C#的封装(https://github.com/assimp/assimp-net)。使用此封装即可直接在CSharpGL中调用Assimp了。

将Assimp32.dll、Assimp64.dll和AssimpNet.dll都放到项目所在目录下,在Reference中添加对AssimpNet.dll的引用即可。

渲染骨骼动画

Assimp加载模型后得到的数据结构如下:

1 public sealed class Scene
2 {
3     public Animation[] Animations { get; }
4     public Material[] Materials { get; }
5     public Mesh[] Meshes { get; }
6     public Node RootNode { get; }
7 }

按我的理解,其中的RootNode就是骨骼的根结点。整个骨骼构成一个树结构。每个结点都包含一个mat4 Transform矩阵,用于描述自己相对于父结点的方位变化。子结点代表的骨骼,其绝对方位由根结点的Transform逐步地乘到自己的Transform来得到。“绝对方位”指的就是在Model Space中的方位。

如图所示,红色的小方块描述了骨骼所在的绝对位置(这里的骨骼对应人体的关节)。从红到白渐变的线条描述了骨骼之间的父子关系,红色一端为父结点,白色一端为子结点。两脚之间的那个红色小方块,就是根结点RootNode。用半透明方式渲染的两臂水平摆放的,就是模型的默认位置。

上图这个模型,只有一个“拿起灯左右查看”的动作(Animation)。其他模型可能有多个动作,它们构成一个数组(Assimp.Animation[])。每个Animation都指定了这个模型的所有骨骼在所有关键帧上的Transform值。这样,通过按时间顺序依次经历各个关键帧(更准确地说,是在2个相邻的关键帧之间插值),就可以得到骨骼在各个时刻的Transform。再让模型的顶点依附于骨骼而动,就实现了骨骼动画。

模型上的一个顶点,要记录自己都依附于哪几个骨骼,自己对这几个骨骼依附的权重分别是多少(权重之和为1)。然后,就可以从默认的初始位置(用半透明方式渲染的两臂水平摆放的那个位置)变换到骨骼要求的位置。

顶点的这一变换过程我还没弄明白。这里需要的Offset Matrix到底是什么。据我查资料,外加计算,Offset Matrix就是那个让骨骼结点变换到绝对方位的矩阵的逆矩阵。但是总觉得有点想不通的地方,确不知道是哪里。

(暂留空白,来日补充。)

总结

骨骼动画的原理网上有很多介绍了。我还没有透彻理解,所以不对本文的原理部分负责。

原文地址:https://www.cnblogs.com/bitzhuwei/p/csharpgl-50-bones-animation.html

时间: 2024-11-08 20:13:55

CSharpGL(50)使用Assimp加载骨骼动画的相关文章

cocos2dx加载骨骼动画

2015/05/13 需求: (1)希望在骨骼上绑定一个粒子特效 (2)获取骨骼的位置 (3)获取骨骼动画的大小 (4)lua 1. cocostudio动画编辑器 (1)绑定粒子特效(跟随骨骼的移动移动) local boneNew = ccs.Bone:create("particle") boneNew:addDisplay(particle, 0) --设置是否跟随骨骼一起移动 boneNew:setIgnoreMovementBoneData(true) --显示骨骼上绑定的

Android 自定义View修炼-自定义加载进度动画LoadingImageView

一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. 直接看下面的效果图吧. 二.效果图 废话不说,先来看看效果图吧~~ 三.实现原理方案 1.自定义View-XCLoadingImageView,继承ImageVIew来实现,这样就不用自己再处理drawable和测量的工作内容. 2.根据蒙层颜色创建一个蒙层bitmap,然后根据这个bitmap来

使用CSS3实现超炫的Loading(加载)动画效果(转)

使用CSS3实现超炫的Loading(加载)动画效果 SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) Loading 动画效果一 HTML 代码: 1 2 3 4 5 6 7 <

CSS3实现加载数据动画2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3实现加载数据动画</title> <style type="text/css"> .box{ width: 100%; padding: 3%; -webkit-box-sizing: border-box; -moz

安卓加载listview动画

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"           android:delay="30%"           android:animationOrder="reverse"           android:animation="@anim/slide_right" />          

iOS 直接加载gif动画

<pre name="code" class="objc">// iOS 加载gif动画,不用一帧帧切图,直接实现加载.gif图片 </pre><pre name="code" class="objc">// 首先我们定义了一个<span style="font-family: Arial, Helvetica, sans-serif;">NTVGifAnim

12种炫酷html5 svg加载loading动画特效

这是一款使用html5 svg制作的加载loading动画特效插件.该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片.关于在页面中使用SVG的方法可以参考这篇文章:<如何在网页中使用SVG>. 所有的现代浏览器都支持SVG(IE8及以下浏览器除外),你可以点的这里查看支持SVG的浏览器. 在线演示:http://www.htmleaf.com/Demo/201501071122.html 下载地址:http://www.htmleaf.com

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画.当你点击页面的任何一个地方时,loading动画就会被隐藏. 这30种loading动画分为3组:方形加载动画特效.圆形加载动画特效和长条形加载动画特效.每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码. 效果演示:http://www.htmleaf.com/Demo/201504151683.ht

《H5 App开发》MUI框架显示加载中动画

最近使用MUI框架比较多,现在有个需求就是在每个页面加上一个加载中动画 如图: 在百度上找到两个MUI框架的加载中样式, 第一种是需要引用一个js库,在这里不多做解释,小编推荐第二种方式, 只需要一串代码就可以实现 <div class="mui-loading" v-if="loading"> <div class="mui-spinner"></div> </div> 可以利用vue中v-if来