65.9K
CodeProject 正在变化。 阅读更多。
Home

增强现实

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.81/5 (11投票s)

2013年8月13日

CPOL

22分钟阅读

viewsIcon

28738

Augmented World 是一个动画应用程序, 允许您通过将自己添加到场景中来创建动画电影

 

平台:一体化 
类别:娱乐  
编程语言:C#、WPF
特殊硬件:Creative交互手势摄像头、麦克风(可选) 
输入方式:触摸、语音、头部移动、手势、鼠标、键盘  

应用程序概述  


在此处免费下载应用程序

Augmented World 是您曾经使用过或想要使用过的最令人惊叹的应用程序,它可以让您通过探索自己的创造力来娱乐自己和他人。首先,我将简要概述该应用程序将要实现的功能。Augmented World 将为您提供一个选项,可以捕捉现实世界的动画并将其存储为动画对象。  

2. 它提供了一个库选项来创建和管理所有动画。 

 3. 动画编辑器是您可以构建动画时间轴的地方。  

4. 将动画录制成故事,然后观看和分享电影! 

所以您将拥有可以像全景一样导航的背景,放置会动的角色并使用事件触发器、规则或输入来制作动画。增强(插入您的直播流)到场景中,这样您就可以与会动的角色一起出现在场景中。您的脸可以被转换为独特的会动的脸部卡通(稍后解释)。它支持实时语音录制。您可以通过录制场景来制作任何长度的动画视频。您可以同时插入多个角色,自动化动画。然后查看和分享您的创作。将您的故事变为现实。  

为什么是一体化? 

还有什么?该应用程序将是虚拟现实的宏大史诗。它不像您玩完就丢弃的游戏。它是一个允许您进行创作的应用程序。屏幕越大,创建和体验增强世界的体验就越好。 但这意味着您应该剥夺与朋友一起玩角色的乐趣吗?不!永远不!游戏与朋友一起玩会更有趣。同样,当您的朋友加入时,创作会更有趣。断开设备连接。 将其放在桌子上,然后与角色一起玩。更令人惊叹的是,您仍然可以插入摄像头,以便您和您的朋友都在场景中增强。 当您看到自己在海边散步,蝴蝶在周围飞舞时,您会多么开心? 

为什么选择手势摄像头

整个目的是为了娱乐。设想并构思一个可行的想法,以提供最终的用户体验。手势摄像头和PerC本质上是一个强大的娱乐平台,如果使用得当。人们通常误解手势摄像头的目的,认为它只能用来移动手来控制。它绝不是鼠标的替代品,但肯定是一个能够提供更好体验的平台。一项创新应该总是与其他创新相结合,以产生令人惊叹的体验。 

调式 

桌面模式 

在桌面模式下,您可以捕捉动画,制作电影,使用手势和语音进行工作。想象一下您面前有一个宽大的屏幕,您只需移动双手即可控制角色,在场景中导航。手势为应用程序带来了令人惊叹的功能,没有它就会缺失。 如果您离屏幕很近,您就永远无法充分享受宽大的屏幕。您需要距离大约半米才能感受到真实感。手势能做到这一点。但手势并不总是那么有趣,因为在菜单中导航会变得更困难。所以语音就派上用场了。  如果您是传统用户,鼠标和键盘随时可用。该应用程序引擎的设计方式是没有半输入支持。所以您用鼠标能做的一切都可以用键盘、触摸 和手势来完成。所以没有人被迫以它的方式使用应用程序。应用程序的性能完全符合他们的期望。 

 平板模式 

平板模式将更多地成为一个创作模式,许多用户可以围坐在一起,用触摸来移动角色、制作动画、录制语音和回放动画。创建和分享包含您和您朋友的场景的动画。  

 

如果用户没有 Creative Camera,他还能享受这个应用程序吗?

是的,当然。这里的增强原理是头部视角。EmguCV用于头部跟踪,它可以在没有任何特殊摄像头的情况下分割面部,只需使用应用程序的前置摄像头即可。所以 Creative camera 永远不是应用程序“最基本”的部分。是的,有了它,用户就可以获得动画。 应用程序将预装数百种傀儡动画。所以捕捉动画是可选的。AIO的一个主要优点是它开箱即用支持多点触控和多用户。因此,许多用户可以同时控制角色。我们使用ffmpeg进行音频和视频录制。因此,PerC也是一个可选选项。一旦我有了设备,我就可以检查每个选项的可行性并相应地迭代设计。 

所以基本上,这个应用程序纯粹是为多点触控和多用户设计的。增强功能在有或没有PerC的情况下都可以工作。 但PerC是对系统的补充。 

我创建了上图,以便您更好地从视觉上理解该应用程序的趣味性。  

 

目标用户 

每个人都喜欢动画和创作。动画就像一间黑屋子。出来的东西总是受到欢呼,但很少有人敢于走进去。有了各种物理学、复杂的技术模块和术语,动画就成了专业人士的事情。它需要大量的耐心和艺术理解才能接近解决方案。但是等等!如果您被告知可以在2分钟内学会制作动画电影,您不想这样做吗?您不想为您的孩子制作那个很棒的木偶戏和动画吗?是的,我们都会。所以 Augmented World 应用程序针对的是每一个热爱微笑、想要分享微笑、想要富有创造力的个人。没有年龄限制,因为没有学习曲线。Augmented World 将彻底重新定义动画和娱乐,每一个用户都会从中受益。因此,“八岁到八十岁”,从学校到家庭, everywhere this would be used.   

 

开发应用程序所采取的方法  

 

功能模块概述 

看起来很简单?嗯,这就是应用程序的总体目标。动画是一个被所有人喜爱但人们因为学习曲线和细节而无法制作动画的概念。 这一切都将随着 Augmented World 改变。  

该应用程序建立在我开发的一个强大的动画引擎之上,用于增强场景中的对象。我们很快就会看到,任何复杂的理论或物理学都可以被简化,如果这样做是为了考虑最终用户,而不是展示概念可以做的数百万件事情。   

 动画理论 

每个人都知道什么是动画。而我们大多数人都喜欢动画,因为它具有娱乐性,并且给了我们一个重温童年的机会。早期的动画被认为是连续的绘画, 你很容易就能从“帧”这个词理解。所以当一个物体比前一帧移动了很小的距离,并且这种模式在几帧中持续下去,就会创建一个动画序列。当我们非常快速地将帧显示在眼前时(技术上称为每秒帧数),我们的心智就无法将它们检测为独立的物体,而是将它们视为一个整体。这就是基本的动画。现在,当物体不仅在帧内发生变化,而且在帧的位置矢量上也有变化时,这就是动画的时间轴。例如,假设您想看到一个角色将一只手从静止位置移动到顶部的动画,您需要绘制几张 “帧”。在每一帧中,手的位置都必须稍微向上绘制。 

当您想让角色在场景中移动或“行走”时,仅仅在不同的位置重绘手的位置将无济于事。它需要被重绘在场景的不同部分。当您的角色在移动其顶部的同时移动时,这被称为复合动画。 (帧内以及场景内的变化)。 

现在考虑有两个角色从场景的不同部分接近对方。它们是不同的角色,所以在每张图片中,您不仅需要绘制两个角色,同时您还需要为两个角色保持一个完美的顺序。这对于艺术家来说工作量太大了。想象一下,如果您可以在一张透明的纸上(比如塑料或玻璃框)绘画,并将角色绘制在单独的玻璃框中,并将它们放置在场景的不同位置,那么您可以多次使用相同的序列(当我们移动我们的手时,它会移动到一定的距离,然后回到第一个位置,然后再次开始相同的位移)。 您不会称这种覆盖在场景绘画上的玻璃为一个图层吗?绝对是一个图层。但那个图层中有两个物体。如果您将一个物体稍微放高一点?它会看起来有点大。所以这是另一个图层。而独立的物体被称为什么?单元格。 

所以现在一帧将包含多个单元格,每个单元格代表一个独立的动画序列,单元格放置在不同的图层上,图层覆盖在场景之上。几个这样的连续帧将产生一个动画。 

 所以我们学习了帧、图层和位移,还有 FPS 和时间轴。这些是任何动画的基本组成部分。 

理论读起来很简单。那么为什么动画被称为一种困难的艺术,而动画电影却是预算最高的电影之一呢?自己尝试一个简单的技巧。拿一本空白的白纸笔记本。在第一页写一个简单的图画。在第二页重复这个图画,但做一点改变,一直这样持续到最后一页。现在如果你快速翻动页面,你会看到你的第一个动画栩栩如生。但这需要多长时间?几个小时,甚至可能是几天。而这只是一个简单的图画。想象一下构建复杂的纹理背景和在其上操纵角色需要多长时间。无论您使用的是数字绘画还是颜料和画笔,这都是耗时的。因此,动画电影通常每分钟动画收费数千到数百万美元,具体取决于场景的复杂程度。 

 这就是为什么不是每个人都能制作出有趣的动画。它需要时间和大量的耐心,而由于我们日常紧张的生活,我们大多数人都没有。但是,别担心!我们很快就会改变这一切。  

 冲一杯黑咖啡,或者最好打开一罐啤酒,开始这场快乐之旅吧!  

 

介绍 Augmented World 

1. 动画概念化  

想象一下您手中有一个木偶,您想为它制作动画。您会怎么做?您可以通过一个称为“定格动画”的过程来完成。将物体放在白色背景前,稍微移动它,然后不断拍摄木偶的静态照片。最后将它们组合起来制作完整的动画。以下是我儿子称之为“Poo”的角色木偶的四张静态照片。  

 

 

 您能在 Poo 系列中找到任何动画的痕迹或线索吗?我找不到,您也不会。现在看看下面的图片。 

 

是的。这就是动画。不是很专业,因为我将一个27帧的动画剪辑成了4帧,但这足以让您明白这个意思。  给自己或您的想法一个机会。您猜这个小动画需要花费多长时间才能完成定格摄影?拍摄它们,然后删除Photoshop中的背景,将它们制作成png,最后将它们组合起来?不知道?根据您的技能,这需要30分钟到两个小时不等。而我花了多长时间才捕捉到它?10秒。这绝对令人惊叹,不是吗?

2. 增强现实世界对象 

 您不想知道算法吗?它通过 Perceptual Computing Camera 和 Intel Perceptual Computing SDK 实现。摄像头有两个传感器,一个是普通的 RGB 传感器,另一个是杰作:深度传感器。深度传感器是红外传感器。它包含一个发射器和一个接收器。传输的波遇到物体后会被反射回来。它在撞击物体之前传播的距离越长,光能损失的能量就越多。因此,接收器可以计算出物体上每一点到摄像头的深度或距离。因此,如果我们能找到一个简单的机制来告诉系统我们期望物体在摄像头前确切的距离,那么我们就可以去除称为背景的其他部分。这种技术也称为背景分离。但是,等等,我有没有告诉您深度摄像头和 RGB 摄像头的分辨率完全不同?标准的 RGB 流返回 640x480 帧,而深度摄像头返回 320x240 帧。 因此,即使您使用距离阈值来裁剪屏幕的一部分并能够捕捉背景分离,它仍然是无用的。因为深度图像不会产生任何真实世界的视觉数据。这是我从深度摄像头捕获的深度图。  

 

 那么您打算怎么做?很简单!调整图像大小并将其放在 RGB 图像上以裁剪 RGB 图像中的部分。但我希望理论像这个一样简单。不幸的是,事实并非如此。为什么?仅仅因为深度传感器与 RGB 传感器相距一英寸。就像我们的眼睛看到深度一样。做一个简单的测试。将一个物体放在您面前。闭上一只眼睛观察它。现在闭上另一只眼睛观察它。睁开双眼看看。如果您能快速重复这个序列,您就会明白,即使是人类大脑也会感知到几英寸 apart 的图像。然后大脑会用最复杂的算法来映射它们。我不知道是谁写的!    

 回到 SDK,它已经做得相当不错了,正如您将在下面的图片中看到的。 

仔细观察较大的图像。您没有看到投影偏离了几毫米吗?这种偏差不是恒定的。所以您越靠近图像中心,它就越小,您离得越远,它就越大。 所以如果我用投影图裁剪 RGB 图像,图像的右侧就会变成纯粹的垃圾数据。幸运的是,存在一种物理学。光线在发射器和接收器之间形成一个角度。 我们知道传感器之间的距离,以及通过深度图的距离。 所以整个传输和接收形成一个三角形。看看下面的示意图。 

   

绿色元素是已知的,红色元素是未知的。现在是简单的三角学。上面的投影图像之所以失效,是因为它假设接收器在传感器处。如果我们以如上计算的角度位移深度数据,它就能准确映射。 

 

是的!现在您已经开始可视化整个概念了,对吧? 我们实际上可以在场景前移动一个物体并捕捉该视图,而没有任何背景的痕迹。那么这会导致我们什么?我们实际上可以通过运动传感器来模拟定格动画的概念。现在不需要 Photoshop,也不需要制作 png 图像。 基本理念已经构思,现在让我们继续下一节,称为动画管理器。 

 

3. 图层   

我们拥有与第一节讨论的完全相同的原理。场景、图层、帧和单元格。首先,我们将捕捉您在摄像头前动画化对象或木偶时的序列的静态照片。整个序列将保存在一个文件夹中,并通过简单的 xml 数据库架构映射到主程序,以便快速轻松地访问序列。它可以是一个简单的列表或数组,或者一个包含更多数据的类。   

 在运行时,它将根据速度逐帧显示给用户。 但是!可能有许多这样的序列,并且它们不应该(可能不)在屏幕上的同一位置或以相同的速度动画。所以应该有一个管理器来监控它们。我们将称之为 AnimationBehevior。在深入研究动画行为之前,我想稍微阐述一下视觉物理学。动画应该是由摄像头捕获的帧。所以实际上某处必须有一个摄像头!我们假设摄像头位于底部中心。现在,如果一个物体远离摄像头,它的大小必须显示得更小。  

   

看上图。我的手比我的脸大。那是因为它离摄像头更近。但是,在捕捉动画时,您只会动画化 x-y-z 平面中的对象,并且无法实际改变大小,因为对象捕获摄像头的透视或视图将与电影摄像头不同。 

 

所以 AnimationBehevior 必须具有根据对象位置调整大小的机制。 而且,并非所有角色都是正面朝向的。它们可能旋转了某个角度,或者可能是侧面朝向的。当角色移动到另一端时,您可能想要反转视图。因此,管理器应该能够生成反转和非反转的图像。请参见下面的示意图。  

  

动画永远不会是连续的。有时动画事件将由键盘、触摸鼠标、语音等输入触发,或者有时可能是自主的。自主动画是指对象通过跟随提供的路径或自行计算的路径从场景的一个部分移动到另一个部分。随着它的移动,与摄像头的距离肯定会变化。因此,管理器必须自动调整其大小。正如您在阅读路径时所提到的,管理器还必须能够记住提供的路径。管理器必须是一个实例。因此,我们需要将其作为后台工作程序运行。它将通过自身或由输入或其他动画事件触发的事件来呈现其下一帧或图像。 

4.  场景管理器

这是控制背景的。嗯?背景应该只是一个简单的图像,对吧?是也不是。部分正确。背景绝对是一张图像,但不是展示给摄像头的全部。它有点像全景。考虑一个大的风景。您能一举捕捉整个风景吗?不行,但如果您走得足够远,您就能捕捉到它。但是当您远离一个场景时,事物会变小,对吧? 

   

这是摄像头可以看到的场景部分 

这实际上是整个场景。仔细观察,这些小屋看起来更小,因为我们离原来的位置更远了。所以您现在可以轻松地构思出管理器不仅必须展示场景,还必须通知摄像头到场景的距离以及位移。那么什么是位移呢?观察第一张图片。您看到天空了吗?不!但实际上,图像中存在天空。所以,如果您想在不离开场景的情况下看到天空和云,您需要做什么?向上移动摄像头。但请记住,您的坐标系没有改变。背景是一个图层。如果您只移动背景,前景对象将保持在相同位置。这将是一个完全死寂的局面。 想象一下,有些鸟在飞,而您降低了摄像头,鸟儿在相同的位置。您会看到什么?它们在地面上。如何解决这个问题?  我希望您手里还拿着啤酒杯。把它放在桌子上,看着它。现在,在不改变头的位置的情况下从椅子上站起来。您没有看到物体相对于您的眼睛向下移动吗?这正是我们的 SceneManager 要使用的逻辑。它必须显示场景的一部分,当您移动虚拟摄像头时,必须通过 AnimationBehevior 将位置传播给所有对象,以便它们改变相对比例和位置。  

5. 特殊效果

如果没有特殊效果,动画有时会变得非常无聊。两个角色在场景中移动,用动画声音说话,对娱乐性没有多大帮助。特殊效果很吸引人。特殊效果是使用一个叫做粒子效果的概念形成的。你们大多数人都听说过或使用过它!它是游戏开发者的宝藏。但开发者很少在动画引擎中像在游戏引擎中那样有效地使用它。苹果商店里有很多优秀的动画应用程序。但很少有人使用全面的粒子引擎来达到良好的效果。您想模拟一个下雨场景,但却没有雨。那会是什么样子?或者您有一个房子着火的场景,却没有火可以玩?两个角色相遇并“坠入爱河”,空中却没有飞舞的心形。您会被像动画师希望的那样吸引吗?永远不会。所以我们巧妙地使用 Neon 粒子引擎来实现这些效果。为什么是 Neon?它是一个专门用 wpf 编写的粒子引擎。它的灵感来自于 XNA 最著名的粒子引擎 Mercury particles。最重要的是,它通过将渲染与主引擎分离,出色地完成了它的用途。粒子是随着时间根据预定义的路径变化的點,这些路径遵循物理定律。当使用带有纹理或颜色的适当画笔绘制这些点时,累积起来会产生特殊的视觉效果。 这个绘图称为渲染。由于我们有不同的图层和管理器进行绘图,因此任何自行绘制的粒子引擎都将无法使用。所以我们做什么?我们允许它在内存中绘制,然后根据允许我们控制粒子位置、速度、生命周期的控件,将内存缓冲区直接复制到场景中。   

 看看 Neon 生成的一些效果。  

 

6. Facetoons 

我们将实时用户与动画角色一起增强到场景中,这样用户就感觉自己身处场景之中,而不是在控制。这是完美的,但您不想看到一些有趣的添加吗?如果您的脸以相同的状态出现,那有什么乐趣呢?增强必须具有改变和变形您脸部的能力。变形有两种类型。您可以选择一个预定义的角色,并将您的面部特征,如  嘴巴、眼睛、鼻子放到角色上,或者反过来,即将角色的特征实时放到您的脸部馈送中。 

 

这些图像不是很漂亮。那是因为我还在研究变形算法。一旦它们变得完美,这些卡通就会让您笑得更多。 增强功能并不仅仅止步于变形。它更进一步,允许将您的脸部放到一个动画角色的肩膀上。这样,角色就会以所有尺寸、比例和光照物理学以及您的实时脸部进行动画。 

 

随着越来越多的打磨,这一切都会变得更好。 

7. 角色控制: 

这是整个引擎经过测试的地方。您可能希望一个角色持续自动动画,或者翻转,或者逐渐消失。您如何做到这一点?您在场景中有多个角色。所以您需要选择它们。您如何选择?很简单!双击角色或用手势。 由于场景中的每个角色都是 AnimationBehevior 的对象,并且类存储了角色的当前比例和位置,当我们双击场景时,将检查该点是否在每个动画对象的边界内,当它与一个对象匹配时,将为该对象填充菜单。您可以通过菜单定义各种操作,如自动动画、沿路径移动、跳跃。 

8. 界面 

该应用程序将采用 WPF 和 metro 设计原则。无边框设计,具有大量灵活的布局更改是预期的。它将采用四窗格布局,左侧提供控件和资源供您使用,中间是场景和增强窗格,底部是帧和当前角色控件,右侧窗格照常显示属性。 WPF 的图像控件将用于渲染,而不是 Canvas。渲染将在后台使用 GDI+ 和 directshow 进行,帧将转换为 WPF 兼容的 BitmapImage。   

 

应用程序的其他组件 

除了电影录制,该应用程序还将附带多种实用功能,用于语音录制、音频混合、播放库等等。  

 

总体设计 

 

对于 无法离开 UML 的纯粹主义者来说,上面的类图应该会有帮助。它展示了项目所需的大部分主要类。 

代码在哪里?   

 所有代码和详细算法将在比赛的第二轮中讨论。  

我的一些成就:  

* App Innovation Contest 1 决赛选手 

* Codeproject Ultrabook 文章竞赛二等奖 

* Perceptual Computing Challenge I 三项二等奖。 

* Perceptual Computing Challenge II 决赛选手(进行中) 

* 发布了多个 Intel AppUp 应用程序  

* 在嵌入式、DSP、图像处理、生物识别和机器人领域原型设计超过 1000 种产品的经验 

* 十多篇国际出版物的作者 

© . All rights reserved.