亮相SIGGRAPH 太极拳三维教学App制作揭秘
http://news.hxsd.com/CG-animation/201208/663303.html
编者按:《My Tai Chi》是一系列基于移动平台的三维互动产品,由北京七星汇工作室和清华大学课题组用了两年时间联合开发完成。该APP获选2012年ACM SIGGRAPH。SIGGRAPH大会于8月8日为该APP做了专门的DAMO展示,是中国本土创意团队和开发团队首次借助移动平台结合三维动画、信息互动技术推广中国传统功夫文化的成功尝试。

主创团队
选题锁定功夫 采集太极大师动作数据
随着智能手机、平板电脑的逐渐普及,越来越多的人希望通过移动设备来获取信息,而移动设备特有的触摸式交互方式也给人们带来了更直观的操作体验。比如众多交互式教学APP的涌现,正是体现了这一趋势。在功夫类文化中,最有中国特色,同时在海外流传最广的当属太极拳,太极拳中又以陈氏太极拳最为古老和权威,所以制作陈氏太极拳的移动应用成了项目课题的首选。
SIGGRAPHASIA展示短片
此APP将三维运动捕捉采集下来的太极大师的准确数据,通过三维动画的形式展现在移动平台上,借助最新的交互技术增强学习者的学习体验,以弥补传统教学的不足,同时增加学习和分享的乐趣,同时在潜移默化中传承中国传统文化。

曲志远老师在采集动作

田秋信老师在采集动作
为了保证太极拳教学的质量,项目组联系到了70岁的“中国陈氏太极第一人”的太极大师田秋信老师,项目的想法得到了田老师的大力支持,他亲自参与到数据采集工作中,为大家展示了陈氏太极行云流水的几个完整套路。田老师的高徒曲志远老师(现为中国武术段位七段,国家一级教练,国家级社会指导员),为大家进行了招式分解动作的采集。在二位老师的支持下,项目组采集了陈氏太极一路、二路、十三式及步法的专家动作数据。
之后项目组开始着手陈氏太极拳的数据整理工作。考虑到将来制作时,数据量会越来越庞大,项目组建立了专家动作数据库,用于数据的管理。同时又同步开始了三维模型、材质灯光、三维特效、三维动画的建设。根据陈氏太极招式,总设计师精心设计并制作了160个太极动作图标,将中国象形文字、太极阴阳等传统文化艺术元素融入到现代标识设计中,为数字化的呈现融入了具有中国特色的艺术设计。

motioncap
按部就班 项目的流程表揭秘
动作数据采集
修补动作捕捉数据,并将其转换为c3d文件。
利用Maya等三维制作软件制作三维人物模型,进行材质贴图、绑定。
在Motionbuilder软件中导入c3d文件和Maya的人物模型,进行动作匹配。
将匹配好的动画倒回到Maya中,参看原始的动作视频,进行动画调整,修正。

太极动作图标手稿设计

太极动作图标示例
在Maya中制作场景文件
应用的整体UI设计制作
音乐、音效的编辑制作
导入已制作好的各种素材,利用三维引擎进行交互制作,编写代码,调用照相机、摄像机等ios移动设备的原生功能。
应用的测试工作
发布到苹果商店
应用的宣传推广

83式太极拳示意图(点击可看大图)
制作与开发 移动平台三维动画难点解析
模型制作—控制面数适应移动平台
考虑到各方面人群的喜好,项目组一共制作了三套模型。男性教练角色、女性教练角色和骨点教练角色。骨点教练角色一开始是为了增加趣味性引入的,但是其骨骼的简洁性使得学习者能更清晰的看到动作的分解,反而在一定程度上加强了教学效果。
由于在移动平台上的限制,模型面数不能过高。过高会使得人物动作变得很卡,而且会面临设备内存不足的限制。在最开始的时候,项目组经验不足,所以制作的模型的面数超过了一万。后来采取了各种方法,例如人物在运动的过程中一直是着装的,所以衣服下面的身体部分没有必要建模。另外采用了法线贴图等技术,保证在低模的情况下也能达到满意的效果。

为人物模型刷权重(点击可看大图)
动画修补—修正穿帮保证准确性
由于采集设备的限制,APP中有部分的动作出现了穿帮现象。动画师根据现场的录像资料一帧帧的,对穿帮的部分进行了动画修正。这个工作虽然艰苦,而且单调,但是保证了最终动作的准确性,是整个项目最核心的基础。

maya中进行动画修补(点击可看大图)

maya中进行动画修补(点击可看大图)
程序制作—采用多技术丰富功能性
考虑到目前苹果的ipad,iphone在移动设备中处于领先的地位,所以本应用首先基于苹果平台上开发,在将来预计会拓展到安卓、window phone平台。
程序上采用已有成熟的三维引擎,并加入objective-c编制的代码调用ios设备的原生功能,例如摄像头设备等,使得程序在功能上进一步丰富。

motionbuilder中进行数据和模型的动作匹配(点击可看大图)
提高用户黏着度 UI界面设计经验
为了提高用户黏着度,我们在界面设计和触摸操控上做了调查和测试,调查发现,太极的目标用户大多数为35岁以上对太极感兴趣的都市人群。他们选择太极应用的原因大多数是为了追求健康和生活品质。所以如何突显健康意境、提高教学的便利、以及如何在教学中融入趣味性和社交性是我们考虑的核心。

录像对比示意图
首先,界面要让用户觉得轻松、健康。经过反复修改,最终设计师决定用回归大自然的气氛和色调来设计界面。在菜单图标上,采用图形与文字相结合的方式以减少用户思考的负担。为了提高教学的便利,除了能让用户360度实时观看角色动画外,还提供了录像对比的功能。这就使得不熟悉影片编辑的用户,也能很轻松地调出自己的太极录像,实时地与三维角色的太极动作进行对照。同时,界面设计师增加了一些交互设计元素。除了点击三维角色可实现实时地动态地换装,更换三维教练形象、教学场景外,为了增加趣味性,应用增加了混合现实的元素,使得用户可以实时地将自己真实的脸更换在三维角色上,这样即使一个不会打太极的用户,也可以通过换脸的途径来欣赏自己打太极的样子,进而与朋友家人分享这样有趣的场景画面。

换脸示意图

换脸示意图
艺术风格 视听设计体现太极意韵
太极拳柔中有刚,相互对立又相互转换。因此在界面设计上,追求图标与场景的融合。太极拳动作的开合非常吻合海浪潮汐的节奏,这也许是太极拳遵循自然规律的体现。因此,在这套应用的选曲、配音上,搭配了古琴与海浪潮汐的声音。
在造型设计上,追求圆而饱满的造型,避免尖锐的外形。比如《My Tai Chi》应用中招式分解的150个动作造型图,模仿汉代画像砖圆润而抽象的造型风格,显得古朴生动。

图标设计示例
在色彩设计上,由于传统太极图在静态时只有黑白两色,但在旋转时,黑白之间似乎产生出各种颜色。这种色彩视知觉被应用在应用中。应用里的图标常态时为黑白,点击呈现为彩色纹样。
火星网专稿,未经授权不得转载

应用教学画面

应用教学画面
结语
工作室目前已经完成了陈氏太极十三式,八十三式、七十一式的制作与发行。接下来项目组计划完成陈氏太极其他套路的数字化过程,未来再把陈氏太极、八卦拳等其他中国传统武术项目数字化并发布到移动平台上。平台也会从单一的ios平台扩展到其他,例如基于安卓的移动设备、智能电视等。
纵观移动平台上的产品,虽然数量庞大,但三维类的不到1%,这是因为三维类的产品开发需要更多的时间投入和人力资源,需要一个较长期的开发期。《My Tai Chi》的成功之处在于模式的原创性开发和建设,这使得实验室里数据化的信息可以在这个模式平台上被传播得更广,现代科技的成果可以被更多的人享用。
亮相SIGGRAPH 太极拳三维教学App制作揭秘的更多相关文章
- 简单5步说清App软件在线开发、App制作多少钱?
开发制作一款App,所有人都会首先关心开发一款App多少钱这个问题.从网上的信息来看,花费个几十万是很正常的事情,甚至有人说要花上百万才能制作出一款App.那么App软件的开发制作到底和什么有关?怎么 ...
- 应用之星推出“图文app”制作工具,并附上教程
应用之星已推出的"图文"app制作工具,是高速制作图文电子书,图文杂志等一切有关图文资料的app生成工具,以下跟大家介绍"图文"制作教程,简单快捷,大致分三大步 ...
- ionic构建APP--简单操作实现APP制作
ionic--基于AngularJS的app框架 1安装ionic .HBuilder创建APP项目,导入ionic的css,js(fonts)文件. .导入ionic.css和ionic.bundl ...
- Web app制作细节:web app互动制作技巧
Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的制作, ...
- Python 爬取 热词并进行分类数据分析-[App制作]
日期:2020.02.14 博客期:154 星期五 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备] b.[云图制作+数据导入] c.[拓扑 ...
- spyder.app制作图标
安装了 anaconda3, 自带spyder, 但是只能在terminal 中打开, 非常不友好. 模仿 anaconda3/目录下 Anaconda-Navigator.app, 制作了 spyd ...
- Excel真的是三维地图可视化制作最好的选择吗?
随着数据在当下互联网快速发展下变的维度更广,数量更大.结构越来越复杂,人们想要更加清晰,快速的认知和理解一份数据,传统的二维平面图表已经不能满足需求,三维可视化技术越结合多媒体技术.网络技术以及三维镜 ...
- salesforce 零基础学习(二十)简单APP制作
本篇参考链接:https://developer.salesforce.com/trailhead/project/salesforce_developer_workshop 本篇讲述的是最简单的AP ...
- Mac下为我们开发的App制作gif动画演示(不仅仅针对开发者,想做gif图片的也可参考)
趁着工作不忙,就闲着倒腾自己的事情,把自己写的一个完整App<丁丁印记>整理了一番,总结其中用到的技术和实现的功能,并想把一些用到的技术分享给各位工友们,因为我自学iOS开发得益于大家的分 ...
随机推荐
- Python 3基础教程21-列表和元组
本文介绍列表也元组,先来看看他们的定义. # 元组和列表 # 元组的定义 x = 5,6,2,6 # 或者这样写 x = (5,6,2,6) # 列表定义 y = [5,6,2,6] # 元组的使用, ...
- 第三十五篇 类的内置属性(attr属性),包装和授权,__getattr__
双下划线开头的attr方法,都是类内置的方法. 一. 如果没有在类里定义这三个方法,调用的时候就调用类内置的默认的方法 class Too: pass # 类没有定义这三个属性,就用系统默认的方法 t ...
- 第五篇Python基本数据类型
运算符 1. 结果是具体的值:算数运算符和赋值运算符 算数运算符:+.-.*./.**(幂).%(取余).//(取商) print(3-2) # 减法 print(3*2) # 乘法 print(3/ ...
- 使用Scrapy自带的ImagesPipeline下载图片,并对其进行分类。
ImagesPipeline是scrapy自带的类,用来处理图片(爬取时将图片下载到本地)用的. 优势: 将下载图片转换成通用的JPG和RGB格式 避免重复下载 缩略图生成 图片大小过滤 异步下载 . ...
- 为 Ubuntu/Anaconda/pip 添加国内下载源
背景 正在看 tensorflow-lite 压缩模型的部分,结果 tutorial 一上来就要卸旧版安装 tf-nightly (新版?反正小白下就vans了) 然而好不容易才编译好源码舍不得删.又 ...
- JavaSE复习(六)函数式接口
函数式接口 有且仅有一个抽象方法的接口 @FunctionalInterface注解 一旦使用该注解来定义接口,编译器将会强制检查该接口是否确实有且仅有一个抽象方法,否则将会报错.需要注 意的是,即使 ...
- Android 实现异步加载图片
麦洛开通博客以来,有一段时间没有更新博文了.主要是麦洛这段时间因项目开发实在太忙了.今天周六还在公司加班,苦逼程序猿都是这样生活的. 今天在做项目的时候,有一个实现异步加载图片的功能,虽然比较简单但还 ...
- nodejs安装错误
network错误: npm ERR! network tunneling socket could not be established, cause=connect ECONNREFUSED 12 ...
- 【题解】【CF Round #278】Tourists
圆方树第二题…… 图中询问的是指定两点之间简单路径上点的最小权值.若我们建出圆方树,圆点的权值为自身权值,方点的权值为所连接的圆点的权值最小值(即点双连通分量中的最小权值).我们可以发现其实就是这两点 ...
- [Leetcode] String to integer atoi 字符串转换成整数
Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...