博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
亮相SIGGRAPH 太极拳三维教学App制作揭秘
阅读量:5162 次
发布时间:2019-06-13

本文共 3153 字,大约阅读时间需要 10 分钟。

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》的成功之处在于模式的原创性开发和建设,这使得实验室里数据化的信息可以在这个模式平台上被传播得更广,现代科技的成果可以被更多的人享用。

转载于:https://www.cnblogs.com/xuejinhui/p/4568970.html

你可能感兴趣的文章
visual studio 一直显示正在准备解决方案
查看>>
子查询二(在HAVING子句中使用子查询)
查看>>
OracleHelper 动软生成
查看>>
SQL 注入教程
查看>>
AtCoder Regular Contest 100 E - Or Plus Max
查看>>
08CMS Variable Override Write Arbitrarily WEBSHELL Into Arbitrarily Path
查看>>
调用UEditor的图片上传组件进行图片上传,并解决多编辑器共存的取值问题
查看>>
修改jquery.automeplete,使其支持value匹配
查看>>
linux curl的使用
查看>>
linux运维、架构之路-Hadoop完全分布式集群搭建
查看>>
redis学习系列——redis主从同步配置及原理介绍
查看>>
titanium开发教程-02-11增加交互性,在任何view
查看>>
Unity3d 小游戏从入门到???
查看>>
关于API设计规范
查看>>
【WPF】OpacityMask作用于Button的一点体会
查看>>
ant构建工具
查看>>
Alpha项目冲刺(团队作业5)
查看>>
codeforce830A. Office Keys
查看>>
CF 480 E. Parking Lot
查看>>
一个屌丝程序猿的人生(九十)
查看>>