Author Topic: 海尔科技展墙项目经验分享(Unity+Kinect+OF)  (Read 6684 times)

spotlightor

  • Newbie
  • *
  • Posts: 4
    • spotlightor.com
海尔科技展墙项目经验分享(Unity+Kinect+OF)
« on: August 16, 2012, 07:49:04 PM »
海尔科技展墙的概念是,使用所有产品科技名词组成字符流,营造科技感,观众在屏幕前时,字符流自动组成人形,同时组成人形的科技名词变化为该科技为用户带来利益的解释,例如“无霜风冷”变换为“方便快捷”,表示“科技以人为本,为用户创造价值”的概念。
视频如下:
http://player.youku.com/player.php/sid/XMzQ3MDg4Mzc2/v.swf
经验分享:

叠加Unity自带的ImageEffects
短暂的开发周期迫使我们需要在有限的时间调试出漂亮的视觉效果,此时Unity充分发挥了自身“快速,易用”的特点,通过叠加组合Unity自带的一系列ImageEffect(全屏Shader特效),我们顺利调试出了带有足够科技感的视觉画面,通过下图可以清楚地看到一幅平淡无奇的字符流画面如何被一层层ImageEffect装饰成最终的效果:

其中特别值得一提的是Fish Eye特效在这里发挥了非常神奇的功效——扭曲的画面创造出一种曲线字符流的错觉,但实际上所有的字符流在场景中都是平行直线移动的(见图1),省去了编写曲线运动程序的时间。
最后一个Sun Shafts特效是由音频控制的,随着节奏跳跃的光芒是在测试时一边听着音乐一边左右拖动参数滑竿而找到的灵感——所见即所得、实时调试不仅仅是快,而且能够让人发现更多可能性。
最后加入运动模糊特效,不仅增强动态,而且可以用来强调静态的前景:

灵活组合Unity自带的一系列ImageEffects可以带来意想不到的结果,而且关键是这个过程够快、够直观,对于周期普遍较短的商业项目而言非常实用。
除此之外Color Correction等颜色调校ImageEffect还可以用来在展会现场的设备上进行色彩调试,让画面色彩不再因为设备质量问题而产生过大偏差。

变色,而且不破坏Dynamic Batching
画面中所有的字符流都是通过Unity的三维文字(TextMesh)来实现的,其支持动态绑定(Dynamic Batching),使得数万的Draw Call可以被减少到几百——但前提是大家共享同一材质。科技展墙中我们设计了两版主题颜色(绿色科技)和(VI配色),如下图:

两个配色之间需要平滑过渡,当每一个字符都调用renderer.material.color来改变颜色的时候,Draw Call迅速上升至几万,FPS惨不忍睹——因为renderer.material在调用时会自动创建一个副本,造成每个字符之间的材质不再相同,动态绑定无法执行。而renderer.sharedmaterial虽然不创建副本,直接改变共享材质的属性——但是“牵一发而动全局”导致我们失去了对每一个字符的单独控制能力。
为了解决动态绑定和独立颜色控制间的矛盾,我们不再通过修改材质颜色来变色,而是通过为文字设置不同颜色的材质来实现变色的效果,具体如下:
  • 为渐变过程中每一个颜色创建一个对应的材质并缓存起来(30个)
  • 渐变时根据渐变的进度来为文字设置其中某一个材质。
如此一来场景中最多同时存在的材质实例也只有30个,这使我们在色彩切换时也可以把Draw Call控制在3000左右,在高清画面下实现60FPS已经足够了。

Unity与OpenFrameworks通信
这个项目中有两件事不是Unity做的:
  • Kinect画面处理
  • 音乐播放与频谱分析
当时Unity还没有能够读取Kinect画面的Plugin,我们需要通过OpenFrameworks来读取Kinect画面,处理完毕后再回传给Unity。首先想到的解决方案是osc,因为此前osc已经用过多次——但显然osc不是为这种不间断、大量原始数据传输而设计的,不是慢的问题,而是丢数据。于是换用UDP,轻松胜任,分享接收UDP数据的脚本:UDPReceiver.zip
音乐播放Unity虽然可以,但是频谱分析不了,所以还是请OpenFrameworks代劳。由于回传的数据只是声音强度(一个整数足以),osc是不二之选,分享当时Unity端使用的OSC脚本:OSC.zip
综上,Unity的Plugin功能已经使得它的可扩展性达到极高的水平,但网络仍然不失为一种很好的数据传输方式,毕竟开发Plugin的时间一般会更长,而且将程序功能分开在后期的调试中也更容易一些。

让观众知道这里有互动内容在等着他
很遗憾,这是我们做得不够好的地方,虽然我们设计了有趣的互动内容和背后的隐喻,但是现场观众有时会误以为屏幕只是在播放视频,而难以想到他们可以参与其中进行互动。
如果整个展会并没有营造出一个整体的“多媒体交互氛围”,那么一枝独秀的多媒体展项恐怕需要花费更大的精力去引导观众注意、了解、最终参与进来,现场实施的时候我们通过更加频繁的演示来吸引观众一起参与进来,虽然累点但是效果也还不错。
由此我们认为一个公共空间的多媒体展项如何去展示、介绍自己给“不明真相”的观众是应该被提前到策划之初的,整个展项的体验开始于邂逅的一刹那,而不是在互动开始的时候。

原文地址:http://spotlightor.com/blog/tutorial/haier-kinect-interactive-wall-behind-the-scenes

Contra

  • SuperManager
  • Sr. Member
  • *****
  • Posts: 347
  • AC, game dev, new media art&tech.
    • i'm Contra
Re: 海尔科技展墙项目经验分享(Unity+Kinect+OF)
« Reply #1 on: August 16, 2012, 08:58:26 PM »
视频图片文字及原理说明,外带排版,还有code,有料!

easy

  • Newbie
  • *
  • Posts: 21
Re: 海尔科技展墙项目经验分享(Unity+Kinect+OF)
« Reply #2 on: August 16, 2012, 09:59:30 PM »
不错。

spotlightor

  • Newbie
  • *
  • Posts: 4
    • spotlightor.com
Re: 海尔科技展墙项目经验分享(Unity+Kinect+OF)
« Reply #3 on: August 16, 2012, 11:02:47 PM »
视频图片文字及原理说明,外带排版,还有code,有料!
呵呵,排版着实费点劲啊

kyy921

  • Full Member
  • ***
  • Posts: 101
Re: 海尔科技展墙项目经验分享(Unity+Kinect+OF)
« Reply #4 on: August 17, 2012, 01:23:27 AM »
很牛逼~ 那个人的外形是怎么在unity里面应用的?

spotlightor

  • Newbie
  • *
  • Posts: 4
    • spotlightor.com
Re: 海尔科技展墙项目经验分享(Unity+Kinect+OF)
« Reply #5 on: August 17, 2012, 09:37:02 AM »
很牛逼~ 那个人的外形是怎么在unity里面应用的?
OF把Kinect数据拿到后进行一些简单的处理然后把深度数据通过UDP连接传给Unity,Unity根据深度数据排列文字。

kyy921

  • Full Member
  • ***
  • Posts: 101
Re: 海尔科技展墙项目经验分享(Unity+Kinect+OF)
« Reply #6 on: August 17, 2012, 11:49:54 AM »
有意思 回头拿vvvv和unity试试

ChocolateUniverse

  • Jr. Member
  • **
  • Posts: 97
  • BigQ 勤劳勇敢,爱好艺术
Re: 海尔科技展墙项目经验分享(Unity+Kinect+OF)
« Reply #7 on: September 01, 2012, 08:15:49 PM »
不错的分享。unity果然多快好省啊
看起来, 海尔这个展台的屏,有点显小了。
BigQ 勤劳勇敢 爱好艺术

spotlightor

  • Newbie
  • *
  • Posts: 4
    • spotlightor.com
Re: 海尔科技展墙项目经验分享(Unity+Kinect+OF)
« Reply #8 on: September 04, 2012, 10:50:54 AM »
不错的分享。unity果然多快好省啊
看起来, 海尔这个展台的屏,有点显小了。
据称是国内可以找到的最大的等离子屏幕,和拼接没法比。