亮相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开发得益于大家的分 ...
随机推荐
- C++学习007-使用exit退出进程
使用exit可以实现退出当前进程. 如下 在程序接收到一个字符后,就退出进程 编写环境 vs2015 int main() { int a = 10, b = 20; std::cout <&l ...
- COJ 2192: Wells弹键盘 (dp)
2192: Wells弹键盘 Description Wells十分羡慕和佩服那些会弹钢琴的人比如子浩君,然而Wells只会弹键盘…… Wells的键盘只有10个键,从1,2,3,……,9,0,如下图 ...
- Cassandra 常见错误索引
类型错误 类型错误调试的技巧 有时候,类型错误提示比较不友好,比如不知道哪个字段出错. 在php中可以用 //过滤几个数据进行操作,逐个检查,或者折半查找错误 $data = array_splice ...
- NO11——01背包
# include <stdio.h> # include <stdlib.h> # include <string.h> # define max(x,y) x& ...
- linux tcpdump抓包,wireshark实时解析
转自: http://www.freebuf.com/articles/wireless/6517.html 由于CentOS7上yum安装的wireshark对CoAP的解析支持不太完善,而我w ...
- 小C的记事本(栈记录字符串)
链接:https://www.nowcoder.com/acm/contest/122/D来源:牛客网 题目描述 小C最近学会了java小程序的开发,他很开心,于是想做一个简单的记事本程序练练手. 他 ...
- element-ui的el-tabel组件怎么使用type=“expand”实现表格嵌套并且在子表格没有数据的时候隐藏展开按钮
效果如下: 试过很多种办法,思路都在怎么控制<el-table-column type="expand">里面的type上,比如使用v-show等等,但是发现,要不就是 ...
- windows下Memcached 架设及java应用(转)
1 Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力. 它可 ...
- vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
- bzoj 1977 洛谷P4180 严格次小生成树
Description: 给定一张N个节点M条边的无向图,求该图的严格次小生成树.设最小生成树边权之和为sum,那么严格次小生成树就是边权之和大于sum的最小的一个 Input: 第一行包含两个整数N ...