• 原文地址:https://tech.china.com/article/20170914/2017091459353.html就在本月13号,苹果在乔布斯剧院高调地召开了2017秋季新品发布会。本场发布会的最大亮点,也是此前外界最期待的,无疑是全新一代iPhone产品十...

    原文地址:https://tech.china.com/article/20170914/2017091459353.html

    就在本月13号,苹果在乔布斯剧院高调地召开了2017秋季新品发布会。本场发布会的最大亮点,也是此前外界最期待的,无疑是全新一代iPhone产品十周年献礼版iPhone X的发布。作为iPhone家族的高端版机型,iPhone X采用全新设计搭载OLED全面屏、配备升级后的相机、支持无线充电、采用Face ID即面部识别来实现解锁等是最大的卖点。相比硬件和配件的升级,此次Face ID(又称面容ID)面部识别技术无疑是技术上的一次革新。

    QQ图片20170914170817.png

    原深感摄像头系统

        被网友调侃和恶搞的“刘海”,苹果称之为“原深感摄像头系统”。有了它,你能随手拍摄精彩纷呈的照片,并能使用Face ID 功能。整个系统藏身于显示屏顶部一个极小的空间内,它体积虽小,却遍布着苹果精心研发的各种尖端技术,果然是让人惊叹的科技造就让人赞叹的简单。iPhoneX正上方的凹槽处从左到右依次是红外镜头、泛光感应元件、距离传感器、环境光传感器、扬声器、麦克风、700万像素摄像头、点阵投影器。点阵投影器通过将30,000多个肉眼不可见的光点投影在你脸部,绘制出你独一无二的面谱,而红外镜头则会读取点阵图案,扑捉它的红外图像,然后将数据发送给A11仿生这款芯片中的安全隔区,以确认是否匹配,如果一致,iPhoneX便会解锁,这便是大家津津乐道的Face ID功能,它是基于原深感摄像头采集的数据而运作的。因为人的面部并不是平坦的,所以这些采集到的人体面部3D数据能够分辨出的几何精度会非常高,Touch ID 的错识率是五万分之一,而Face ID 的则减少到了一百万分之一,还能准确区分人脸和照片,而且Face ID人脸识别功能的速度会比Touch ID指纹识别的速度更快。所以苹果此次用Face ID人脸识别功能取代之前的Touch ID指纹识别就不足为奇了。除了Face ID 功能外,原深感摄像头与A11仿生芯片结合还能拍摄出各种精彩的照片以及制作3D动画表情包。

    我们在惊叹苹果黑科技的同时,也有部分公司已经看到了iPhoneX Face ID人脸识别广泛的应用前景以及隐藏的巨大商业价值。

    Face ID(面容ID)广泛的应用场景

    就在这两天,在社交媒体上关于iPhone X Face ID的各种嘲讽此起彼伏,但这些并不影响业内人士对其发展前景的看好,毕竟其广泛的应用场景和背后隐藏的商业价值是巨大的。

    人脸识别表面看只是一个新的手机功能,但针对人脸建模数据量非常大,应用场景广泛。

    QQ图片20170914170836.jpg

    1.人脸识别

        从发布会的视频来看,Face ID功能此次主要是用来解锁手机和手机支付。尽管此前三星已经尝试面部解锁功能,但似乎并没有成功。此外,诸如努比亚、VIVO、金立、华为、夏普等想要进击到18:9的全面屏中来的计划也是异常明显,想要实现全屏,除了指纹解锁后置外,人脸识别无疑是最佳的选择。笔者了解到,落地创意公司在这块已经取得了不错的成绩,他们利用独有的3D扫描SDK技术为华为深度定制开发3D人脸扫描模块,提早苹果近1年时间成功商用。旗下的ipmaker提供web API接入方案和SDK方案,可以快速让手机及软件厂商拥有面容ID识别和人脸建模的功能。这对国内的手机厂商来说无疑是一件好事情,毕竟选择合作能够缩短面容ID识别技术的研发时间,加快全屏手机的研发速度。
    QQ图片20170913170415.jpg

    2.人脸三维建模+3D打印

        文章的开头已经提到原深感摄像头系统能够获取到人体面部的三维数据,将脸部特征,细节,甚至包括眼球和其他的信息搜集,这其实就相当于三维建模。相比传统技术需要依靠3D扫描仪来获取面部数据来说,这无疑是质的飞跃。除了手机厂商,国内的一些知名游戏公司诸如腾讯、网易等也看到了人脸数据的巨大价值。其中比较成功的案例是内置在荣耀手机中一同发布的IPMAKER造物家和3D偶吧APP应用,可以将手机采集到的玩家脸部数据与游戏角色身体结合起来,生成3D打印定制玩偶,不仅能够让玩家有更好地互动体验,还能产生额外的衍生品收入,提升品牌价值。可以预见,这样的跨界合作在未来会越来越多。

    QQ图片20170914170831.jpg

    3.AR/VR虚拟人物

        苹果的发布会上还展示了有趣的Animoji应用(3D动态表情包),这种基于AR开发的互动玩法还有很多,诸如AR定制互动产品包装、AR定制游戏玩偶、定制互动来电显示等。未来这样的应用在社交工具会越来越多,毕竟相比之前的2D照片,3D会有趣生动得多。

    此外基于人体面部的三维数据还有着其它广泛用途,比如虚拟试衣、医疗整容等,更多详情介绍以及合作方案建议浏览IPMAKER造物家官方网站:ipmaker.3deazer.net

    未来发展情景

        iPhoneX发布后,国内外手机厂商必然会加快人脸识别技术的研发速度,毕竟想要在全屏手机市场分一杯羹,需要突破人脸识别这一技术难点。而在看到人脸数据巨大的商用价值后,各大企业还会守株待兔吗,必然会加快布局与需求合作。未来又会有哪些新的应用,让我们拭目以待。


    展开全文
  • 基于3D人像复原技术的试衣平台 摘要 近年来,随着社会的进步与发展,人们的物质生活得到了极...2019年3月19日,根据官方消息,云从科技基于单帧图像的3D人体建模重建技术同时在Human3.6M、Surreal和UP-3D三大数据集...

    基于3D人像复原技术的试衣平台

    摘要

    近年来,随着社会的进步与发展,人们的物质生活得到了极大的丰富,对衣食住行的要求也越来越高,为了更好地适应现代化生活的需求,网上试衣软件、平台的研究也一直没有停止过,目前国内外都在积极的构建和完善自己国家的人体体型数据库。
    2019年3月19日,根据官方消息,云从科技基于单帧图像的3D人体建模重建技术同时在Human3.6M、Surreal和UP-3D三大数据集上创造了最新的世界纪录,将原有的最低误差纪录大幅降低了30%。从照片快速重建人体的三维模型,将传统的人体建模过程由三步降低到两步,极大程度上简化了三维建模的流程,节约的人力物力成本,对于游戏、电影、计算机视觉等领域具有重要的意义。
    本文从项目的研究背景和意义出发,搭建试衣平台:衣吧,可以应用于普通用户上传个人全身照进行提取人体模型以及模型试衣功能,研究了通过普通摄像头的二维图像为基础的人体三维模型的重建。最后,对下一步的工作进行了展望。本文的主要研究工作和贡献如下:
    1.衣吧试衣平台。基于Python、Django的搭建试衣平台:衣吧,该平台可通过用户上传的单张全身照实现对人体关键点的检测以及人体骨架的提取;
    2. 图像获取部分。通过用户上传单张个人全身照;
    3. 图像预处理部分。主要采用了OpenCV对图像的图像阈值、图像平滑、形态学转换进行了处理。
    4. 人体关键点检测。采用Harris角点检测、SIFT关键点检测、角点检测的FAST算法以及ORB算法分别对用户上传的图像进行人体关键点检测,选择特征提取与描述以及执行效率最优的算法。
    5. 人体骨架提取。采用OpenCV库计算生态骨架(morphological skeleton)。
    关键词:三维人体重建, ORB图像特征提取, 试衣平台, OpenCV

    Fitting Platform Based on 3D Human Image Restoration Technology

    ABSTRACT

    In recent years, with the progress and development of society, people’s material life has been greatly enriched, and the requirements for clothing, food, housing and transportation have become higher and higher. In order to better adapt to the needs of modern life, the research on online fitting software and platform has never stopped. At present, both at home and abroad are actively building and improving their own national body shape database.
    On March 19, 2019, according to the official news, the 3D human modeling and reconstruction technology based on single frame image of Yuncong technology has set the latest world record on three data sets of human3.6m, surreal and up-3d, greatly reducing the original minimum error record by 30%. The rapid reconstruction of three-dimensional human body model from photos reduces the traditional human body modeling process from three steps to two steps, greatly simplifies the process of three-dimensional modeling, saves the cost of human and material resources, and is of great significance in the fields of games, movies, computer vision, etc.
    Starting from the research background and significance of the project, this paper builds a fitting platform: clothing bar, which can be used for ordinary users to upload personal full body photos to extract the human body model and model fitting function, and studies the reconstruction of the three-dimensional human body model based on the two-dimensional image of the ordinary camera. Finally, the future work is prospected. The main research work and contributions of this paper are as follows:
    Dressing bar fitting platform. Build a fitting platform based on Python and Django: clothing bar, the platform can detect the key points of human body and extract the skeleton of human body through a single full body photo uploaded by users;
    Image acquisition part. Upload a single full body photo through the user;
    Image preprocessing part. Opencv is mainly used to process image threshold, image smoothing and morphological transformation.
    Detection of key points of human body. The fast algorithm of Harris corner detection, sift key point detection, corner point detection and orb algorithm are used to detect the human body key point of the image uploaded by the user, and the algorithm of feature extraction and description as well as the best execution efficiency is selected.
    Human skeleton extraction. Opencv library was used to calculate the ecological skeleton.

    Key words: 3D human reconstruction, orb image feature extraction, fitting platform, OpenCV

    目录

    第1章 绪论 7
    1.1 引言 7
    1.2 本文主要研究内容 8
    第2章 关键技术综述 9
    2.1 OpenCV 9
    2.2 Python 9
    2.2 Django 10
    第3章 图像特征获取与描述 11
    3.1 图像预处理技术 11
    3.1.1 图像阈值 11
    3.1.2 图像平滑 11
    3.1.3 形态学转换 11
    3.2 人体关键点检测技术 12
    3.2.1 Harris角点检测 12
    3.2.2 SIFT关键点检测 12
    3.2.3 FAST算法 13
    3.2.4 ORB算法 14
    3.3 人体骨架提取 15
    3.2.1 OpenCV库计算生态骨架 15
    3.2.2 算法步骤 15
    第4章 衣吧试衣平台设计与实现 16
    4.1 需求分析 16
    4.1.1 功能需求 16
    4.1.2 系统配置 16
    4.2 数据库设计 16
    4.3 系统实现与平台展示 18
    4.3.1 衣吧 照片建模 18
    4.3.2 衣吧 储衣间 19
    4.3.3 衣吧 模型试衣间 20
    第5章 21
    5.1 工作总结 21
    5.2 未来展望 21
    参考文献 23

    第一章 绪论

    1.1引言

    近年来愈发成熟和普及的AR、VR技术,无一不是依赖三维重建技术。目前网络购物愈发普及,这就导致很多的商家为了吸引顾客,减少顾客的差评率,让顾客的体验感达到极致,需要实现网上试衣的功能,网上试衣离不开三维建模。
    目前不管是基于视频流还是基于多图重建三维模型的技术都逐渐的走向成熟。2017年CVPR国际会议提出一种基于单张照片的三维模型预测网络,可以对单张图片中的物体进行三维预测,通过三维的点图绘制出照片中物体的三维模型。2018年全球人工智能与机器人峰会(CCF-GAIR)在深圳召开,峰会由中国计算机学会(CCF)主办,香港科技大学教授,ICCV 2011主席,IEEE Fellow权龙教授发表题为“计算机视觉,识别与三维重建”的精彩演讲中提到在识别的基础上,计算机视觉下一步必须走向三维重建。2019年3月19日,根据官方消息,云从科技基于单帧图像的3D人体建模重建技术同时在Human3.6M、Surreal和UP-3D三大数据集上创造了最新的世界纪录,将原有的最低误差纪录大幅降低了30%。从照片快速重建人体的三维模型,将传统的人体建模过程由三步降低到两步,极大程度上简化了三维建模的流程,节约的人力物力成本,对于游戏、电影、计算机视觉等领域具有重要的意义。
    通过传统的三维建模方法所需要的人力物力资源较为庞大,对于大规模的模型重建来说,具有极大的不便性。通过深度学习,机器学习进行三维模型的预测与重建所需要的先决条件较少,可以实现大规模重建。目前国内外都在积极的构建自己国家的人体体型数据库,为计算机下一步视觉走下三维重建做准备。
    目前,国内外对于网上虚拟试衣系统一直处于初级探索阶段,有些试衣软件在用户上传自己的照片之后,建立的模型只是将人脸更换了,并没有在人体体型上做任何改变。还有一些试衣网站有不同的体型的模特供消费者选择,消费者需要输入自己的身体关键部位的参数,就能够生成与自己的体型相似的模特,试穿衣服。

    1.2本文主要研究内容

    本文研究的具体内容如下:
    衣吧试衣平台。设计实现基于Python,Django的试衣平台,该平台主要通过接收用户上传的图片,对上传的图片进行处理之后,将建立的模型在该平台进行显示,用于之后进行模型试衣。
    图像预处理。主要采用了OpenCV对图像的图像阈值、图像平滑、形态学转换进行了处理。
    人体关键点检测。采用Harris角点检测、SIFT关键点检测、角点检测的FAST算法以及ORB算法分别对用户上传的图像进行人体关键点检测,选择特征提取与描述以及执行效率最优的算法。
    人体骨架提取。采用OpenCV库计算生态骨架(morphological skeleton)。

    第2章 关键技术综述

    2.1 OpenCV

    OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux、Windows、Android和Mac OS操作系统上。它轻量级而且高效——由一系列 C 函数和少量 C++ 类构成,同时提供了Python、Ruby、MATLAB等语言的接口,实现了图像处理和计算机视觉方面的很多通用算法。
    OpenCV用C++语言编写,它的主要接口也是C++语言,但是依然保留了大量的C语言接口。该库也有大量的Python的接口。如今也提供对于C#、Ch、Ruby,GO的支持。
    OpenCV 拥有包括 500 多个C函数的跨平台的中、高层 API。它不依赖于其它的外部库——尽管也可以使用某些外部库。
    OpenCV可以在Windows,Android,Maemo,FreeBSD,OpenBSD,iOS,Linux 和Mac OS等平台上运行。使用者可以在 SourceForge 获得官方版本,或者从 SVN 获得开发版本。OpenCV也是用CMake。
    OpenCV有多种优化过的算法,这戏算法主要应用与物体识别、图像分割、动作识别、运动跟踪、机器人、人脸识别、运动分析、机器视觉等。

    2.2 Python

    Python是一种跨平台的计算机程序设计语言。 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。最初被设计用于编写自动化脚本(shell),逐渐用于独立的、大型项目的开发。
    Python是一种解释型脚本语言,主要应用于人工智能、软件开发、后端开发、网络爬虫、科学计算和统计以及桌面开发等领域。
    Python用作科学计算的优势如下:
    Python完全免费,众多开源的科学计算库都提供了Python的调用接口。用户可以在任何计算机上免费安装Python及其绝大多数扩展库。
    Python是一门更易学、更严谨的程序设计语言。它能让用户编写出更易读、易维护的代码。
    Python有着丰富的扩展库,可以轻易完成各种高级任务,开发者可以用Python实现完整应用程序所需的各种功能。

    2.3 Django

    Django是一个开放源代码的Web应用框架,由Python写成。采用了MTV的框架模式,即模型M,视图V和模版T。它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的。于2005年7月在BSD许可证下发布。这套框架是以比利时的吉普赛爵士吉他手Django Reinhardt来命名的。
    Django是Python编程语言驱动的一个开源模型.视图,控制器风格的Web应用程序框架。在Dj ango框架中,还包含许多功能强大的第三方插件,使得Django具有较强的可扩展性。
    Django可以运行在Apache,Nginx上,也可以运行在支持WSGI,FastCGI的服务器上。支持多种数据库Postgresql,MySql, Sqlite3,Oracle。

    第3章图像特征获取与描述

    3.1 图像预处理技术

    3.1.1 图像阈值
    我们知道图像阈值分为简单阈值、全局阈值和Otsu二值化。采用OpenCV中的cv2.threshold(),为图像的像素设定一个阈值,当像素值高于阈值时,我们给这个像素赋予一个新值(白色),否则的话,就给它赋予另外一种颜色(可能是黑色)。如果使用全局阈值,就相当于是随便给一个数做阈值,效果的好坏就需要不断的尝试,这样会加大工作量。所以,在这里我们使用函数cv2.threshold时会多传入一个参数(flag):cv2.THRESH_OTSU,这时要将阈值设置为0,然后算法会找到最优阈值。
    在本次项目中,会对用户输入的图像首先使用一个5*5d的高斯核去除噪音,然后使用Otsu二值化。
    3.1.2 图像平滑
    使用低通滤泼器可以达到图像模糊的目的,这在去除图像噪音方面非常有效果。OpenCV提供4种模糊技术:cv2.blur()平均模糊、cv2.GaussianBlur()高斯模糊、cv2.mediaBlur()中值模糊、cv2.bilateralFilter()双边滤波。在本次项目中,会使用5*5的高斯核对用户输入的图像进行处理。
    3.1.3 形态学转换
    形态学操作时根据图像形状进行的简单操作,一般是对二值化图想进行操作,需要输入两个参数:原始图像和结构元素(又称为核),它用来决定操作的性质。形态学操作分为腐蚀和膨胀,OpenCV中有二者的变体,开运算、闭运算、梯度等。
    在本次项目中,主要采用的是开运算(即先腐蚀后膨胀)对用户输入的图像进行处理。

    3.2 人体关键点检测技术

    3.2.1 Harris角点检测
    早在1988年的文章《A Combined Corner and Edge Detector》中就提出了Harris角点检测的算法。由Harris角点检测的结果是一个由角点分数构成的灰度图像。选取合适的阈值对结果图像进行二值化,我们就可以获取图像中的角点了。
    本项目中对用户上传的图片使用Harris算法进行角点检测的结果如下:

    在这里插入图片描述

    3.2.2 SIFT关键点检测
    2004年,D.Lowe提出了一个新的算法:尺度不变特征变换(SIFT),上面使用的角点检测技术Harris,具有旋转不变特征,即使图片发生了旋转,我们也可以找到相同的角点,但是如果图片缩放的话,使用Harris算法检测的话,可能角点就不是角点了。这就需要SIFT来帮我们解决了,这个算法可以帮助我们提取图像中的关键点并计算它们的描述符。
    本项目中,使用cv2.xfeatures2d.SIFT_create()创建一个sift对象,之后调用sift的detect()函数,采用OpenCV提供的绘制关键点函数:cv2.drawKeyPoints(),在关键点部位绘制一个小圆圈。上传图片,点击提取模型,结果如下:

    在这里插入图片描述

    3.2.3 FAST算法
    Edward_Rosten和Tom_Drummond在2006年提出的FAST算法,可以解决上面两种算法,在检测关键点时不够快的缺点。
    算法的原理:
    取图像中的检测点,通过判断检测点的像素值是否比以该点为圆心的周围16个像素点中的大部分像素点的像素值要亮一个阈值或者暗一个阈值,来判断检测点是否是角点。
    本项目中采用cv2.FastFeatureDetector.create()创建一个fast对象,并且使用非最大值抑制,解决检测到的特征点相连问题。之后就可以使用fast的detect()函数检测关键点,并且使用cv2.drawKeyPoints()绘制关键点。项目中使用FAS算法检测用户上传的图像的关键点如下:

    在这里插入图片描述

    由上图FAST算法检测出的的关键点,我们可以看出,即使使用了非最大值抑制,关键点之间还是存在很多相连的关键点。这种效果并不能够满足我们的需要。
    3.2.4 ORB算法
    本次项目采用OpenCV中的Harris角点检测、SIFT关键点检测、角点检测的FAST算法以及ORB算法分别对用户上传的图像进行人体关键点检测。通过对比,发现ORB算法无论是从关键点检测的效果还是从执行效率上都优于Harris、SIFT以及FAST,所以,在项目中会采用ORB(Oriented FAST and Rotated BRIEF)对图像人体关键点检测。
    ORB基本上是FAST关键点检测和BRIEF关键点描述器的结合体,并且增强了性能。
    算法步骤:
    1.创建ORB对象;
    2.使用FAST找到关键点;
    3.使用Harris检点检测对这些关键点进行排序,找到其中的前N个点;
    4.使用金字塔,从而产生图像中人体尺度不变性;
    5.根据ORB_create()中指定的参数WTA_K的值(默认值为2),每次选择2个点进行匹配。
    在项目中对用户上传的图片使用ORB算法检测关键点效果如下:

    在这里插入图片描述

    3.3 人体骨架提取

    3.3.1 OpenCV库计算生态骨架原理
    二值图像X的形态学骨架可以通过选定合适的结构元素B,对X进行连续腐蚀或开运算来求得。设S(X)表示X的骨架,则求图像X的骨架的表达式为:

    在这里插入图片描述
    (1-1)
    在这里插入图片描述
    (1-2)

    其中,Sn(X)为X的第n个骨架子集,N是预算将X腐蚀成空集前的最后一次迭代次数,即。表示连续n次用B对X进行腐蚀,即

    在这里插入图片描述

    (1-3)

    3.3.2 算法步骤
    1.获取原图像的首地址及图像的宽和高,并设置循环标志为1;
    2.对获取的图像5*5的高斯核去除噪音,然后使用Otsu’s二值化,并且控制背景为黑色;
    3.用结构元素腐蚀原有图像,并保存腐蚀结果;
    4.设置循环标志为0,如果腐蚀结果中有一个点为255,即原图像尚未被完全腐蚀成空集,则将循环标志为1;
    5.用结构元素对腐蚀后的图像进行开运算(消除小的白色区域),并求取腐蚀运算与开运算的差(得到消除的白色区域);
    6.把本次循环中保存的腐蚀结果赋值给原图像;
    7.重复步骤【3】-【6】,直到将原图像腐蚀为空集为止;
    最终求得的骨架就是结果。

    第4章 衣吧试衣平台设计与实现

    4.1 需求分析

    4.1.1 功能需求
    试衣平台功能:
    1.照片建模:为用户提供上传二维照片建模的功能;
    2.储衣间:与衣吧试衣平台合作的商家的服装会放在储衣间展示,提供服装加入模型试衣间的功能;
    3.模型试衣间:提供将建立好的模型从数据库中显示在模型试衣间,并且实现试衣。
    4.1.2 系统配置
    开发平台:Windows 10
    编程语言:Python
    开发工具:Pycharm
    相关依赖:Django、Djangorestframework、OpenCV、Numpy、Scipy、Pillow等
    4.2 数据库设计
    本平台采用Mysql数据库构建存储用户信息表front_use、存储用户上传图片表photos以及存储建立的用户模型表person_model。
    存储用户信息的表的主要包括字段:id、password、is_superuser、username、telephone、email、is_active、date_joined。password指的是该用户密码(使用md5加密);is_superuser指的是用户是否是超级管理员,默认为0,不是超级管理员;username指的是用户名;telephone指的是用户的手机号;email指的是用户的邮箱地址;is_active指的是用户当前是否可用;date_joined指的是用户注册的时间;而img_url指的是上传的照片存放在本地服务器的url,用于之后访问。数据表具体信息如下:

    在这里插入图片描述

    存储用户上传的图片的表的主要包括字段:id、position、pub_time、img_url。position指的是该用户上传的第几张图片;pub_time指的是用户上传照片的时间;而img_url指的是上传的照片存放在本地服务器的url,用于之后访问。数据表具体信息如下:

    在这里插入图片描述

    存储用户上传的图片的表的主要包括字段:id、pub_time、model_url。pub_time指的是模型生成的时间;而model_url指的是生成的模型存放在本地服务器的url,用于之后访问。数据表具体信息如下:

    在这里插入图片描述

    4.3 系统实现与平台展示

    4.3.1 衣吧 照片建模

    在这里插入图片描述

    用户可以点击上传图片的按钮,即可跳转以下界面:

    在这里插入图片描述

    点击上传个人全身照之后,保存图片,会提示“图片保存成功”,之后就可以点击提取模型了,如果模型提取成功,会在导航栏处提示“图片处理完成,已保存!”。之后,刷新页面,就可以看到提取的模型骨架了。(因为知识储备不足,导致模型并没有建立成功,只能提取模型骨架。)

    在这里插入图片描述

    4.3.2 衣吧 储衣间
    储衣间:主要实现与衣吧试衣平台合作的商家的服装会放在储衣间展示,提供服装加入模型试衣间的功能。界面如下:

    在这里插入图片描述

    4.3.3 衣吧 模型试衣间
    模型试衣间:主要提供将建立好的模型从数据库中遍历出来,显示在模型试衣间,并且提供模型试衣功能(目前只能展示提取的用户骨架)。

    在这里插入图片描述

    第5章

    5.1 工作总结
    传统的3D人体重建算法需要将问题降维,将复杂的人体形态从三维降到二维层面,以降低问题的难度。但是,信息的传递层级越多,信息的受损也就越大。因此,我们需要做的就是怎么样才能够无需依赖任何参数化的人体模型,从单个彩色图像中直接获取人体的3D模型?而单张图像包含的信息量又相对较少,无疑,这使得从单张图像直接获取3D人体数据又增加了一定的难度。
    人体具有封闭的3D曲面结构,任何一个角度拍摄的图像都存在约一半的不可见部分;人体的四肢更加多变,更加复杂;还存在因为服装、光照、雾等的遮挡问题,人体的3D关键点在视觉上也会有明显的差异,身体的不同部位都会有视觉上的缩短效果,导致人体3D数据更难获取,对深度学习技术的使用限制更多等问题。如果要重建,需要技术从单帧图像中推理出人体的3D形态,并通过光学透视、阴影叠加等基本光学原则准确测出各个关键点在3D空间的位置和朝向,才能得到人体的姿态或表情信息。
    另外,Github上nkolotTI提出的人形重建的卷积网格回归非常值得学习。这个在部署在Windows 10操作系统上时出现opendr安装不成功,查证之后发现,opendr依赖的操作系统只能是MacOS和Linux,Python版本为Python 2.7,而目前使用的是Python 3.7,所以部署过程就此搁置。之后,将试衣平台,衣吧,部署在Ubuntu 16上时,可以再进行安装opendr。
    就目前来说,无论是对OpenCV还是计算机视觉,以及基于深度学习的图像三维重建,现在的技术储备并不能够满足项目的需求,所以还是需要继续学习有关线性蒙皮、骨骼动画等技术,以便之后继续实现该项目做准备。
    5.2 未来展望
    本文研究的内容还处于起步阶段,对于骨骼蒙皮技术尚不能使用,需要进一步掌握线性蒙皮技术以及骨骼动画技术。另外,还需要进一步的进行三维去噪和曲面去噪的学习,使建立的模型能够更加接近人体的特征,最终提高模型试衣的成功率。
    同时,对于衣吧试衣平台的功能也需要进一步优化,需要提供给用户修改模型参数的功能,使用户可以更好的建立属于自己的人体模型。

    参考文献

    【1】Fan H,Su H,Guibas L J.A point set generation network for 3d objects reconstruction from a single image[C].Proceeding of the IEEE conference on computer vision and pattern recognition.2017:605-613.
    【2】权龙,计算机视觉,识别与三维重建.2018:702.
    【3】赵广立,云从科技取得3D人体重建技术新突破.2019:319.
    【4】王雅芳,基于三维人体模型重建的人体测量技术研究与实现.2016:12.
    【5】齐晓屾,基于二维照片的人物三维模型重建系统的设计与实现.2019:610.
    【6】杨成泽,基于图像的三维人体建模技术研究,2011:12.
    展开全文
  • 最近,想实现怎么利用opengl将Kinect扫到人体骨骼坐标点在opengl 中绘制出来,第一个想到的难点就是,在Kinect中的是世界坐标点,我怎么转换到opengl中的屏幕坐标,一开始陷入的就是觉得要改摄像机的参数,这是不对...

    最近,想实现怎么利用opengl将Kinect扫到人体骨骼坐标点在opengl 中绘制出来,第一个想到的难点就是,在Kinect中的是世界坐标点,我怎么转换到opengl中的屏幕坐标,一开始陷入的就是觉得要改摄像机的参数,这是不对的,摄像机改变的只是你看物体的角度。所以经历一番折腾,看过网上许多有关opengl坐标系统转换的博客,我具体渲染出的人体骨骼点如下:

    代码:

    #include <iostream>

    // GLEW
    #define GLEW_STATIC
    #include <GL/glew.h>

    // GLFW
    #include <GLFW/glfw3.h>
    #include <glm/glm.hpp>
    #include <glm/gtc/matrix_transform.hpp>
    #include <glm/gtc/type_ptr.hpp>



    // Function prototypes
    void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode);

    // Window dimensions
    const GLuint WIDTH = 800, HEIGHT = 600;

    // Shaders
    const GLchar* vertexShaderSource = "#version 330 core\n"
    "layout (location = 0) in vec3 position;\n"
    "uniform mat4 model;\n"
    "uniform mat4 view;\n"
    "uniform mat4 projection;\n"
    "void main()\n"
    "{\n"
    "gl_Position =  projection * view * model * vec4(position.x, position.y, position.z, 1.0);\n"
    "}\0";
    const GLchar* fragmentShaderSource = "#version 330 core\n"
    "out vec4 color;\n"
    "void main()\n"
    "{\n"
    "color = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
    "}\n\0";

    // The MAIN function, from here we start the application and run the game loop
    int main()
    {
        std::cout << "Starting GLFW context, OpenGL 3.3" << std::endl;
        // Init GLFW
        glfwInit();
        // Set all the required options for GLFW
        glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
        glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
        glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
        glfwWindowHint(GLFW_RESIZABLE, GL_FALSE);

        // Create a GLFWwindow object that we can use for GLFW's functions
        GLFWwindow* window = glfwCreateWindow(WIDTH, HEIGHT, "LearnOpenGL", nullptr, nullptr);
        glfwMakeContextCurrent(window);

        // Set the required callback functions
        glfwSetKeyCallback(window, key_callback);

        // Set this to true so GLEW knows to use a modern approach to retrieving function pointers and extensions
        glewExperimental = GL_TRUE;
        // Initialize GLEW to setup the OpenGL Function pointers
        glewInit();

        // Define the viewport dimensions
        int width, height;
        glfwGetFramebufferSize(window, &width, &height);
        glViewport(0, 0, width, height);

        //glEnable(GL_DEPTH_TEST);
        // Build and compile our shader program
        // Vertex shader
        GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
        glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
        glCompileShader(vertexShader);
        // Check for compile time errors
        GLint success;
        GLchar infoLog[512];
        glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
        if (!success)
        {
            glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
            std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
        }
        // Fragment shader
        GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
        glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
        glCompileShader(fragmentShader);
        // Check for compile time errors
        glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
        if (!success)
        {
            glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
            std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
        }
        // Link shaders
        GLuint shaderProgram = glCreateProgram();
        glAttachShader(shaderProgram, vertexShader);
        glAttachShader(shaderProgram, fragmentShader);
        glLinkProgram(shaderProgram);
        // Check for linking errors
        glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
        if (!success) {
            glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
            std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
        }
        glDeleteShader(vertexShader);
        glDeleteShader(fragmentShader);


        // Set up vertex data (and buffer(s)) and attribute pointers
        //GLfloat vertices[] = {
        //  // First triangle
        //   0.5f,  0.5f,  // Top Right
        //   0.5f, -0.5f,  // Bottom Right
        //  -0.5f,  0.5f,  // Top Left
        //  // Second triangle
        //   0.5f, -0.5f,  // Bottom Right
        //  -0.5f, -0.5f,  // Bottom Left
        //  -0.5f,  0.5f   // Top Left
        //};
        GLfloat vertices[] = {
            0.01f, 0.01f, 0.0f,  // Top Right
            0.01f, -0.01f, 0.0f,  // Bottom Right
            -0.01f, -0.01f, 0.0f,  // Bottom Left
            -0.01f, 0.01f, 0.0f   // Top Left
        };
        GLuint indices[] = {  // Note that we start from 0!
            0, 1, 3,  // First Triangle
            1, 2, 3   // Second Triangle
        };
        glm::vec3 cubePositions[] = {
            glm::vec3(0.032378f, -0.442654f, 2.17715f),
            glm::vec3(-0.0343935f, -0.433992f, 2.14277f),
            glm::vec3(0.0983881f, -0.438157f, 2.14615f),
            glm::vec3(0.0250801f, -0.155455f, 2.17354f),
            glm::vec3(-0.105409f, -0.747508f, 2.14539f),
            glm::vec3(0.14416f, -0.746396f, 2.15032f),
            glm::vec3(-0.172575f, -1.08588f, 2.20642f),
            glm::vec3(0.167421f, -1.0581f, 2.20065f),
            glm::vec3(0.0200967f, 0.0561917f, 2.16359f),
            glm::vec3(-0.18236f, -1.13302f, 2.08883f),

            glm::vec3(0.171922f, -1.10516f, 2.08213f),
            glm::vec3(0.0183976f, 0.125564f, 2.15752f),
            glm::vec3(0.0436317f, 0.275752f, 2.12795f),
            glm::vec3(-0.110744f, 0.021982f, 2.1629f),
            glm::vec3(0.177801f, 0.00826143f, 2.16602f),
            glm::vec3(-0.248465f, -0.182686f, 2.1887f),
            glm::vec3(0.301957f, -0.186638f, 2.19558f),
            glm::vec3(-0.345132f, -0.377335f, 2.19578f),
            glm::vec3(0.397963f, -0.392711f, 2.17949f),
            glm::vec3(-0.373589f, -0.442521f, 2.16485f),
            glm::vec3(0.419256f, -0.465622f, 2.16209f)

            /*glm::vec3(0.0f, 0.0f, 0.0f),
            glm::vec3(2.0f, 5.0f, -15.0f),
            glm::vec3(-1.5f, -2.2f, -2.5f),
            glm::vec3(-3.8f, -2.0f, -12.3f),
            glm::vec3(2.4f, -0.4f, -3.5f),
            glm::vec3(-1.7f, 3.0f, -7.5f),
            glm::vec3(1.3f, -2.0f, -2.5f),
            glm::vec3(1.5f, 2.0f, -2.5f),
            glm::vec3(1.5f, 0.2f, -1.5f),
            glm::vec3(-1.3f, 1.0f, -1.5f)*/
        };
        GLuint VBO, VAO, EBO;
        glGenVertexArrays(1, &VAO);
        glGenBuffers(1, &VBO);
        glGenBuffers(1, &EBO);
        // Bind the Vertex Array Object first, then bind and set vertex buffer(s) and attribute pointer(s).
        glBindVertexArray(VAO);

        glBindBuffer(GL_ARRAY_BUFFER, VBO);
        glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
        glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

        glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (GLvoid*)0);
        glEnableVertexAttribArray(0);

        glBindBuffer(GL_ARRAY_BUFFER, 0); // Note that this is allowed, the call to glVertexAttribPointer registered VBO as the currently bound vertex buffer object so afterwards we can safely unbind

        glBindVertexArray(0); // Unbind VAO (it's always a good thing to unbind any buffer/array to prevent strange bugs), remember: do NOT unbind the EBO, keep it bound to this VAO


        // Uncommenting this call will result in wireframe polygons.
        //glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

        // Game loop
        while (!glfwWindowShouldClose(window))
        {
            // Check if any events have been activiated (key pressed, mouse moved etc.) and call corresponding response functions
            glfwPollEvents();

            // Render
            // Clear the colorbuffer
            glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
            glClear(GL_COLOR_BUFFER_BIT);

            // Draw our first triangle
            glUseProgram(shaderProgram);
            //glBindVertexArray(VAO);
            //glDrawArrays(GL_TRIANGLES, 0, 6);
            //glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

            glm::mat4 view;
            glm::mat4 projection;
            view = glm::translate(view, glm::vec3(0.0f, 0.0f, -9.0f));
            projection = glm::perspective(20.0f, (GLfloat)WIDTH / (GLfloat)HEIGHT, 0.1f, 100.0f);
            // Get their uniform location
            GLint modelLoc = glGetUniformLocation(shaderProgram, "model");
            GLint viewLoc = glGetUniformLocation(shaderProgram, "view");
            GLint projLoc = glGetUniformLocation(shaderProgram, "projection");
            // Pass the matrices to the shader
            glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(view));
            // Note: currently we set the projection matrix each frame, but since the projection matrix rarely changes it's often best practice to set it outside the main loop only once.
            glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));
            glBindVertexArray(VAO);
            for (GLuint i = 0; i < 21; i++)
            {
                glm::mat4 model;
                model = glm::translate(model, cubePositions[i]);
                /*GLfloat angle = 20.0f * i;
                model = glm::rotate(model, angle, glm::vec3(1.0f, 0.3f, 0.5f));*/
                glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));

                glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
            }
            glBindVertexArray(0);

            // Swap the screen buffers
            glfwSwapBuffers(window);
        }

        
        glBindVertexArray(0);
        // Properly de-allocate all resources once they've outlived their purpose
        glDeleteVertexArrays(1, &VAO);
        glDeleteBuffers(1, &VBO);
        glDeleteBuffers(1, &EBO);
        // Terminate GLFW, clearing any resources allocated by GLFW.
        glfwTerminate();
        return 0;
    }

    // Is called whenever a key is pressed/released via GLFW
    void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode)
    {
        if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
            glfwSetWindowShouldClose(window, GL_TRUE);
    }

    展开全文
  • 本文是在阅读《ios用户体验》的过程中,记录的总结和个人的感受思考。不免有错误之处,恳请读者指正,在下面留言即可。 第一章:ios人机界面指南概述   1、智能手机的特点:大尺寸、高分辨率、强大的计算能力 2...

    如果转载此文,请注明出处:http://blog.csdn.net/paulery2012/article/details/25157347,谢谢!


    前言:

    本文是在阅读《ios用户体验》的过程中,记录的总结和个人的感受思考。不免有错误之处,恳请读者指正,在下面留言即可。


    第一章:ios人机界面指南概述

     

    1、智能手机的特点:大尺寸、高分辨率、强大的计算能力

    2、签名交互:滚动轮、导航键、按键和硬键盘、软键盘、触控笔、触屏,输入特性又被称为“签名交互”,用户可以通过输入方式的组合方式别是设备品牌。

    思考:对iphone来说,签名交互主要有按键、软键盘、触屏

    3、专业文档:Human Interface Principles(人性化界面原则,以下简称HIG)和User Experience Guidelines(用户体验指导)

    4、Apple优先考虑尺寸、重力感应、电容式触摸屏界面输入的动态性,这就说明,Apple意欲使设计和开发团队更加专注于输入和输出技术的改善。

    5、Apple专业文档降低了iOS平台开放给第三方开发者所带来的风险,同时也保持了苹果的品牌形象以及人们对市面上iOS的看法,从而保持他们的持续成功,

     

    第二章:iOS用户体验解析

     

    1、格式塔效应:简单说就是我们所体验的远远大于我们所察觉到的独立部件的品质。

    思考:我们心不在焉,没有经过思考状态时的感觉,也就是整体!=部分之和(来自百度百科)

    2、虚拟键盘的设计

    需求:尺寸有限,按键很小,排列需要非常紧密。有时候你也看不到自己按了哪个键。

    Apple处理方式:

    • 针对目标过小的问题:在手指触碰点的上方显示被触碰的按键,向用户提供视觉反馈
    • 针对目标之间距离过近的问题:运用提示输入的算法,即使用户拼写的不是某个词,系统也会提示和建议这个词
    • 针对目标之间距离过近的问题:运用内联拼写检查算法,支持额外的用户控制和精确输入。

    思考:视觉反馈,拼写错误提示、检查算法,消除用户内心焦躁感,这是一种非常稳健的交互技术

    3、最常用的几种手势

    • Tap:轻击
    • Drag:拖拽(补充:可以设置delegate监听drag状态已进行一系列业务处理)
    • Flick:快速滑动(与拖拽的区别是,可滑动对象会显示出惯性,继续滑动)
    • Swip:轻扫(在不抬起手指的情况下横跨屏幕扫动)
    • Double  Tap:双击(补充:间隔很短的连续2次轻击,使得图形或者图像以双击点为原点,且通常按预定义的比例系数进行缩放。区分关键点:时间间隔)
    • Open Pinch:双指张开(根据张开距离决定放大程度)
    • Close Pinch:双指缩小
    • Long Touch:通常用户调用某些辅助控制(可编辑文本显示放大视图)

    思考:之前有做过一个轻击和双击的区别,就是根据2次轻击的时间间隔来区分。2次点击的时间超过双击时间间隔就可以认定为2次轻击,否则就是双击行为。

    4、iOS是一种平面环境(planar environment),这里说的平面环境指的是用户体验的核心表现形式是二维的。其操作确并不完全是二维的,其实是3个相互依赖共存的平面之间运行的。我们可以将iOS看成3个用户界面层,每一层都有特有的交互类型,这些特定的交互机制决定了这些层的活动,按重要性排序:

    • 默认层:主要是应用Logo和Dock
    • 隐含层:用于App  Switcher和显示内容
    • 叠加层:对话框、警告、模态控制、弹出窗口

    这些层之间的间隔只有几毫米,但是仍然有高区分度。

    思考:相比默认层、隐含层,叠加层的特点是临时性的、中断用户操作,所以叠加层一定要少用、慎用,否则会给用户挫败感,影响用户体验。动态的即时反馈可能是一个不错的可选方案。

    5、简洁性和易用性,有几个原则,在设计或者创建自己应用的时候应该运用的一些理念(重点)

    • 有限的导航
      • 不要提供太多的导航选择,完全没必要,反而让用户感到迷惑,分散用户的注意力
    • 受限的控件映射
      • 对App界面进行划分,并让其分别容纳不同类型的用户界面元素
    • 限制控件的数量
      • 如果太多,应该按功能分散到多个界面,并将同类的分为一组
    • 保证控件的简明
      • 控件的种类不要太多,尽量使用简短的标签和容易理解的图标
    • 让操作系统分担一些任务
      • 用户程序的设置项移到iOS的设置界面中(不常用…)
    • 隐藏用户界面的元素
      • App的控制元素并不需要四种显示在屏幕上,用户可以在需要的时候通过一些简单的手势和触屏时间去调用他们。关键是要向用户提供一种机制来表明这些控件的出现时暂时的,并且让用户知道这些控件隐藏后应该如何重新调用他们
    • 渐进地展开
      • 许多功能不需要始终可用,所以你要努力做到只在用户需要的时候提供,并以此降低应用界面的复杂性
    • 不要过于强调品牌
      • 不要反反复复提及,在一个能充分展示品牌的关键地方,然后在其他地方淡化它的存在(百度导航APP就是使用的HUD提示效果来展示百度的品牌)
    • 状态的持久化和恢复
      • 不要期望用户不间断的使用APP的功能,用户重启该应用的时候,先前的任务能够很容易的回复并且继续下去
    • 自动保存
      • 任何创建相关的任务都必须能够保存,而且应该始终是自动保存的
    • 限制手势种类
      • 太多的了会加大用户学习成本,那么你的应用就会很难被接受
    • 限制层级结构
      • 导航层次太深,就会导致2个问题:1.用户很难了解导航结构 2.不同层级的移动会让人感到厌烦。尽量不要超过3层

    思考:简洁而非简单,复杂高深的技术在适当的时候暴露给用户,才是真正的简洁易用。举个例子,一般App首次启动的时候都是请求用户的各种权限,对通讯录的访问,时候可以定位你的位置之类的,如果在用户使用功能有需要的时候去询问可能更好。

    6、手势:将触控交互能力提升到了不仅仅直接操纵基本交互的新高度。

    7、保持简洁:这一理念一直影响着iOS的设计决策,而这些决策也使得iOS变得更加易于使用和理解。简洁和易用虽然并无直接关联,但是确实相辅相成。

     

    第三章:用户体验的差异化及其策略

     

    1、临界质量(critical mass):是指知识技术积累到一定的临界点,新技术就会跟裂变反应一样爆发,并剧烈扩展。

    2、在数码产品市场,设计人员设计并创建的用户体验与其产品使用者或消费者,宅共同快速地发展变化。本质上,这就是一种反馈循环。随着各种产品的相继发布,越来越出色而独特的交互方式出现在市场上,用户对这些互动的需求和接受程度也越来越强。

    思考:建议使用一下网易新闻和facebook的paper应用,就会有更深的理解

    3、任何交互设计方案的成功与否都是由其可用性衡量的。(重点)

    4、可用性是驱动人们接受一款应用的重要因素,但是用户的多方面需求则更为重要,为了有效地解决用户的需求,我们需要了解以下几个要素:

    • 了解用户的带便,包括需求和对当前交互方式的认知
    • 与竞争对手的产品对比,能提供哪些不同的体验
    • 如果要讲用户的接受度作为重中之重,那么你可能需要着重激起他们的兴趣
    • 在如今市场中,要使用户对你的应用产生兴趣,你就需要探索出非同寻常的解决方案

    5、用户体验策略:技术、需求、用户期望都在不断变换,那么应该有一个明确的计划来处理这种不断变换的状态。有效的用户体验策略能够为我们带来的诸多益处:

    • 使参与产品开发的不同团队保持一致
    • 可以帮助团队将注意力始终放到用户身上,从而确保用户的满意度
    • 它可以使用户体验在产品的生命周期内保持一致,从而在需要时可以维护已有的体验方式甚至是加以改进
    • 有效地提高产品质量,并有助于监督其部署风险。

    6、一个好的策略应该是定期对其目标、用户和市场环境进行重新评估,久而久之变灰形成一套成熟的用户体验。

    思考:对于敏捷开发的团队来说,就更加容易把不断修正的策略运用到实际开发过程中。

    7、差异化可以被视为两个对立端的众多可能。其中,一端代表“相似”,另一端代表“分化”。前者代表了一种较传统的方式,风险低,跟风实现严重;否则则代表一种非常规的方式,它可能风险高,但是创新性也更强。

    8、用户体验策略的实际定位取决于该策略为产品制定的预期目标,你需要思考应该将应用定位在何处才能使其具有更强的市场竞争力或者更符合用户的需求。在考虑应该逐步增强应用的现有功能,还是彻底重新设计该应用。

    9、角色勾勒:想好应用可能吸引的人群,然后对假想的用户进行勾勒,这些角色应该能够为你和设计团队提供足够的信息,宠儿一定程度上贴近真实用户。除了应该明确其年龄、性别、收入水平、职业,还应考虑到其国籍、家庭情况、生活方式等,尽可能的划出角色的兴趣、爱好和社会活动。如果能荣国具体的用例来体现这些动机和目标更好了。

    思考:根据目标人群特点,勾勒出几个角色,进而为典型角色在不同场景下使用APP做铺垫。为了校准你自己对角色特点的判断,可以去找一些符合目标人群特点的人,对他们进行访谈,进一步辅助你做出判断。

    10、角色使用场景:将角色形象放到适当的场景中,就可以通过目标哦用户的视角来体验你所设想的应用

    思考:我们做的一个图书馆的项目,在PPT介绍的时候,我就举了3个不同类型的学生使用我们的APP和不使用我们的APP的生活区别,进而得出结论:我们的APP确实可以帮助各种学生实现他们的需求,为他们的生活带来了很大的便利。

    11、评估竞争对手:了解竞争对手的优势和劣势,竞争对手在做什么,在APP Store上挑出最优秀的应用作为参考即可。选出3~5个应用就可以了。

    12、用户并不只是期待高度差异化和高度创新的用户界面,他们只有在这些体验感觉良好时参会接受他们。

    13、过去成功的交互方案几乎都归因于他们的可用性,而那时的可用性体现了一种工程意识,也就是专注于通过量化的用户输入来改进产品。现在,随着市场的发展,我们不能只关注产品的可用性,更应该理解应用体验的其他方面,这样才能使产品保持市场的竞争力,用户体验的观点综合了美学、感知和情感投入。

    思考:可用性是前提,在此基础上考虑美学、感知和情感投入

    14、用户体验策略应该包括以下方面:

    • 明确的用户角色,包括他们的动机和目标等细节
    • 基于用户的认知对应用的功能进行决策,并加以管理和组织
    • 思考如何规划用例和工作流,如何使其与特定的用户生活方式、特性、动机和目标关联
    • 经过一段时间之后应如何管理用户体验?不但要有功能路线图,还应该考虑核心交互需要如何进一步发展。
    • 站在全局的角度考虑用户体验的连续统一性,包括在获得和下载应用开始的产品生命周期中的各个方面,以及与产品线内的其他应用之间的关系
    • 对竞争对手的产品进行详细的分析,以此来指导、验证和改进自己的产品体验

     

    第四章:杀手级应用:为移动环境而设计

     

    1、移动计算的核心价值:突破时间和空间的限制访问自己的数据、使用既定的功能

    思考:以前PC时代,人们都是端端正正做在电脑旁边,左手键盘右手鼠标。现在歪歪扭扭随便坐,不管是办公室的座位还是厕所的马桶上,拿出手机就开始刷微博、聊天、看视频。

    2、移动电话是一种个人设备,你的移动电话只与你一个人紧密相关。一般来说打你电话就是为了找你,在很多情况下人们将电话看做是你的代理。人们通常会说“我打给你….”,而不是“我打给你的手机….”

    3、iPad也易于携带,但是尺寸太大,它还是无法像iPhone那样体现出来真正的移动性。当然他的缺点也是他的有限。我们可以随时随地使用iPad进行放松休闲,那么花费在这类的休闲娱乐上的时间就比较长了。在iPhone上查看最新的固表报价,当天的天气或者社交网络的最新动态,则属于短时交互

    4、特点总结

    • iPhone:使用频率高,每次时间短,随时随地使用,移动设备,主要:天气等使用应用和社交网络、电商
    • iPad:使用频率低,每次时间长,移动性有限,便携设备,主要:休闲娱乐

    5、iPad缺少通话功能,在情感因素上不想个人电话一样与人紧密相关,所以用户更倾向于和别人分享iPad。iPhone则一般不会与别人分享。

    思考:其实就我来说主要是手机上有短信、照片,可不能让别人乱翻,iPad就无所谓啦~随便玩

    6、构思应用的5个关键用例:通信、娱乐、地理位置服务、商务、可用性

    7、通信:最核心的用例,电话、邮件、短信等一对一通信和社交、媒体、论坛等一对多通信,这里的通信是广义上的通信

    思考:这里的一对一通信不是说一定只是一对一,只是说他的特点和使用频率来讲跟多的是一对一通信

    8、娱乐:2大主题,分别是游戏和内容消费,内容消费包含且不仅限于视频、听音乐、读书、浏览网页、以及其他活动

    9、地理位置服务:GPS和数字罗盘技术,并且其详细程度和精度惊人。地理位置服务仍然是很新的用例,很多开发者往往只触及到这些技术的皮毛。大多数应用程序师傅只着眼于让用户广播自己的位置,或者告诉用户从A到B怎么走。而其最关键的问题是:地理位置服务的内在价值是什么?

    思考:现在很多的地理位置服务(LBS),百度地图推出了搜周边美食,也有一些国外的应用基于LBS的交友类应用。以前见过一个有趣的应用是公交闹钟,到站的时候自动提醒,确实有太多的可以挖掘的东西。

    10、商务:主要分为集展和聚集,前者利用第三方资源来指导复杂的商品选择行为,来提供推荐并形象用户的购买行为,否则通过一系列的自定义参数,从各个独立的来源中自动筛选并管理商品的内容。

    思考:一个是被动行为,一个是主动行为

    11、可用性:如果一款APP能够帮助用户快速并高效的执行一项任务,那么就会有更多地人采用这个应用,这就是可用性。如果可用性是你应用的目标,那么就需要遵循以下两点:合适的功能、任务的效率,前者是提供执行一项任务所需的合适的功能数量,后者是提供执行一项任务所能采用的最简单的方法。

    思考:可用性就是用合适的功能方便人们生活,提高效率

    12、移植为移动应用:把现有的应用移植到移动领域的几个基本步骤:

    • 确定功能的超集:列出功能清单
    • 分组:把相似的功能分组
    • 检查并分析:分析是否适用于移动环境
    • 筛选:根据用户体验策略中确定的主要用例,去掉不相关的功能
    • 确定关键功能的分类:确定时候作为单独的应用,以及时候要将你的应用程序分解为多个子程序

    13、移植的一大挑战:在小尺寸的设备上达到较高的功能密度,绝对是一项挑战。这不仅仅体现在UI映射和布局上,还因为其功能的复杂性意味着导航结构的层次更深。

     

    第五章:利用iOS的功能达到最佳的用户体验

     

    1、设计者需要对四大关键技术有所了解。这四大关键技术分为2个大类,第一类是苹果自有技术,这类技术支持在iOS环境中原生渲染,第二类则是第三方技术OpenGL,而它确实支持对底层的GPU的利用。从设计的角度上来看,原声渲染通常是与畅通用户界面的控件联系在一起的,而OpenGL则常用语游戏中对各种动画和交互进行高性能的图像渲染。

    思考:GPU英文全称Graphic Processing Unit,中文翻译为图形处理器。(图像处理单元)GPU是相对于CPU的一个概念,由于在现代的计算机中(特别是家用系统,游戏的发烧友)图形的处理变得越来越重要,需要一个专门的图形的核心处理器(来自百度百科)

    2、四大关键技术:UIKit、Core Graphics(核心图形)、Core Animation(核心动画)、OpenGL ES(唯一的非苹果提供的技术)

    3、UIKit:95%的用户体验设计都是用UIKit实现的,包括基本的按钮控件、滑块、文本框、开关控件等等,UIKite还提供控件的自定义功能,所以不要拘泥于使用默认的控件。自定义UI空格键也会用到其他的一些图形技术。

    思考:自定义功能用的比较少,以后多了解一下。

    4、Core Graphics:它的核心是二维渲染引擎Quartz 2D,可以用于在应用中事先不同的图像处理功能。他不但可以动态的绘制某些类型的图像,还能作为一个作为一个功能完整的绘图引擎,为应用添加和创建、编辑图像的功能。

    思考:UIKit在自定义图像方面具有高度的灵活性,而在复杂的图像变换、图像处理或者图像的实时合成方面,Core Graphics更有用

    5、Core Animation:提供了一种用户创建和渲染动态视觉交互的简单易用的解决方案,由于它关注的是在已有的用户界面对象中加入动画效果,因此Core Animation与UIKit时紧密结合在一起的,正因为这一点,用户界面控件也可以和动画过渡效果较为完美的整合在一起。

    思考:从易用性上来讲,Core Animation比Core Grapics更好一些

    6、OpenGL ES:本质上是一种针对嵌入式设备的图像渲染API,能够让你直接嵌入在iOS设备中的硬件加速功能,然而,它本身却无法显示用户界面,必须和Core Animation结合使用才能显示用户界面元素。这种强大的技术可以用来渲染那些对涉笔来说极难处理的发杂图像,它通常用于在游戏中实时渲染3D对象。

    7、自定义界面:如果使用SDK默认的对象来构建应用,那么久表示你其实正在使用苹果的原生视觉要素,也就是说用户感受到的是苹果提供的用户体验。当然,这不是什么坏事情,但是如果你希望用户能够感受到独特平白特色的用户体验,那么这种方式恐怕就不合适了。

    8、原生应用和Web应用:Web应用和设备原生渲染的用户体验存在一定的差距。虽然在浏览器的环境中,有很多技术可以渲染出极其具有吸引力的体验,但是其效果仍然无法和原生的环境相比。苹果为你提供了非常强大的技术,不仅能让你实现高度的定制化而且性能香港出色。而Web'方案只能提供其原生体验的部分功能。原生UI渲染具有强大的功能和动态性,而基于Web的体验则灵活且易于维护。

    思考:近年来各大企业一直鼓吹APP要死,以后是大入口时代,而且百度也根据潮流退出了“轻应用”的产品,微信推出了公众账号,各个IT大佬抢占互联网入口。但是目前无论是是轻应用还是公众账号提供的用户体验无法和原生体验相比,但是这种发展趋势不容小觑。

     

    第六章:交互建模和创新概念的创建

     

    1、什么才是“令人惊叹”?在iOS应用的交互方面,我们将“令人惊叹”定义为当表现效果超越了用户情感阀值后的一种情感表达,而这一阀值最终取决于用户。其关键因素如下:

    • 即时响应:设计必须能够引导用户立即做出回应
    • 对创意或差异性的认知:必须能够让用户辨识出设计的概念,或者至少能够感觉到它与常规用户体验有所不同
    • 积极响应:设计本身应该能够减轻用户的对于陌生的用户体验可能的不习惯

    实现这3个因素后,你就能创造出超越用户情感阀值的优秀应用了

    2、设计方案的一些属性:

    • 外观:是指设计方案中屏幕结构、图层、渲染、静态视觉元素的外观属性
    • 交互机制和交互行为:与用户程序的用户元素进行交互时,用户所需要的物理交互、手势以及常规输入方式
    • 视觉交互、运动以及动画:这些能够给设计方案带来活力的动态元素,并且能够通过用户的输入进行反馈

    思考:现在的应用来说,界面美观以及不再稀奇了,那么就要在交互机制、交互行为、动画和运动方面下足功夫了。

    3、交互建模的过程包括了四项主要的任务:其中前三项(需求分析、用例和场景开发、应用程序的工作流)都是必不可少的准备工作,第四项尝试交互建模本身。

    4、需求分析:一般在正式的需求文档中进行详细的描述,如果你采用的敏捷开发的方法,那么需求则比较容易放生变更,但是你至少应该在开始建模之前明确哪些限定应用程序基本功能的关键需求,需求确认之后,就可以开始设计合适的用例了。

    思考:抓住核心的需求,采用敏捷开发的方法,是一个不错的选择。

    5、用例和场景开发:用例,尤其是场景驱动的用例,是交互建模非常重要的不部分,一个号的用例可以帮助团队了解用户在使用应用时会体验到的整体流程,以及如何在使用环境中满足用户的各种需求。

    6、应用程序的工作流:从设计的角度来讲,我们更专注决策逻辑、关键交互以及引导用户从应用A处移到B处的导航结构,这是一种以用户为中心的观念,他会确立应用程序呈献给用户的特性与功能之间的关系,宠儿定义应用的结构。定义明确的工作流可以向你提供应用程序的精确结果,但是他无法提供交互机制和功能的呈现方式。

    思考:需求分析(用户有什么需要实现的实际需求)->用例和场景(目标用户在不同的场景下使用APP)->工作流(目标用户使用这个APP的操作流程),有了这些基础,那么就可以谈交互建模了。

    7、为了交互建模,你需要的是更为详细的工作流,而不是抽象而且高层次的工作流,但是也不需要国语详细,交互模式的详细程序取决于应用的性质。

    8、交互建模需要注意问题:开始交互建模时,你需要以一种抽象的方式进行思考,不需要具体的功能和内容,而要考虑应用所可能采用的各种不同的交互行为,由此来了解如何使用他们来控制界面上的元素。弄清应该在哪里并如何以最佳的方式对应用中的交互方式进行差异化设计,这是进行差异化设计的一个最重要的挑战。

    思考:书中对交互建模的具体细节没有描述,有兴趣了解的读者建议购买相关书籍学习。

    9、如果某项技术无法帮助你打到预期的效果,或者解决方案中的某个方面可能无法适用于应用程序的其他部分,在这些情况下,你需要依靠一些基本的问题解决技术来帮助你走出困境。

    思考:这就是为什么优秀的交互设计师需要对开发的技术有一定程序了解的原因。

    10、强大的Core Animation:系统为设计人员提供了强大的功能,帮助他们创建出极具有魅力的用户体验。动画并不只是为一些随机元素添加一些特效,它还是一种强大的交互工具。

    11、动画:动画是一种能够是物体的属性或者特征随着时间的变换而发生改变的机制,这里的关键就是“时间”,它是你可以用来解决关键交互设计问题的最强大的工具。如果交互空间有限,那么时间的概念就变得格外有用,在空间收到限制的情况下,很那实现复杂的交互或呈现大量信息。这时一般有2种处理方法:

    • 大幅提高信息密度(缺点是不易于读者的阅读和理解)
    • 极端或者减少信息量以匹配屏幕控件(因为信息的不完整性而不能很好的满足设计需要或者或是设计需求)

    时间纬度的引入为我们提供了解决空间受限问题的另一种方案

    思考:空间纬度有限,那么我们就要转变一种思维,从时间、状态的纬度来解决信息展示的问题。状态纬度会在下面讲解。

    12、状态是什么?它是指用户所观察到的或者控制系统所管理的对象的所有属性和特征。

    思考:简而言之,比如用户登录界面,当账号输入结束后,即使提示账号不存在,就是根据输入状态来进行展示信息。

    13、几个概念的解读:

    • 交互方式:人机交互中的基本单元,比如:点击一个按钮或者在屏幕上轻扫,其本质就是用户在系统的提示下做出的某种输入操作。
    • 交互行为:包括用户的输入以及系统对此做出的反馈,这是对系统呈现出来的交互方式所感知到得格塔式效应(忘了这种效应的往前翻一翻)
    • 交互模式:可以预测且组织良好的各种交互行为的累计效果

    思考:交互方式更侧重与输入操作,交互行为就是输入和反馈,交互模式就是总体的效果。

    14、交互建模的基本流程:

    • 抽象:组件抽象化,展示其基本逻辑
    • 改造和重组:按照基本逻辑对可视化交互进行重组规划
    • 验证:研究该交互方式是否适用于已有的工作流中
    • 问题解决:从空间、时间、状态3个不同的纬度触发,解决其概念和交互方面的问题。
    • 扩展:研究如何将你的交互方式应用到APP的所有功能中去
    • 记录:把思考过程记录成为文档,并且将思考结果详细的记录下来
    • 重复:重复上面的几条直到达到满意的效果
    • 文档化:为你构思出来的交互模型创建出一份描述清晰、可视化的文档

     

    第7章:空间映射与触屏人体工程学

     

    1、为什么要学人体工程学的基本知识?有些应用的有趣程序可能足以吸引人们去下载,但是人们使用它时会感到非常困难和不舒服,以至于他们不会在用户的设备上停留太久。所以你在为iPhone或者iPad设计应用时,有必要花时间了解一些人体工程学的基础知识。

    2、iPhone的6种基本的握持姿势:单手纵向操作iPhone、一手纵向握持,一手操作iPhone、双手纵向操作iPhone、单手横向操作iPhone、一手横向握持,一手操作iPhone、双手横向操作iPhone

    思考:为什么iPhone5s没有模仿三星做成大屏手机?也许就是考量用户的基本握持从单手纵向握持操作转向一手纵向握持一手操作iPhone对用户体验的影响,所以在iPhone5增加高度的同时将机身做的更薄,这样中和单手纵向握持的舒适度。相反的例子就是小米3……而且iPhone的四个角的弧度、应用夹四角的维度、应用的四角弧度都是一致的,从视觉和触觉给用户带来无与伦比的舒适感。好像说太多了….

    3、iPad的4中基本的握持姿势:一手纵向握持iPad,一手进行操作、双手纵向使用iPad、双手纵向操作、一手横向握持,一手进行操作、双手横向操作。

    4、在设计触摸控件的时候,你需要考虑的2个基本因素:

    • 尺寸:你设计的控件所占目标区域的大小
    • 间距:控件与它周围其他用户界面元素之间的距离

    需要注意的问题:为了确保系统的可能性,你必须考虑所有的可能性,包括触摸传感器校准市场和偏移平面所产生的视差。这也是考虑到用户需要大尺寸控件带来的心里保障-感觉触摸操作更加舒适。

    思考:下载百度导航APP你就会发现它的Button做的都特别大,就是考虑到使用场景基本都是走路、骑车、开车等较易发生抖动的场景。

    6、设计控件间隔的一个原则:两个触摸对象的间距应该与它们的大小成反比。如果将他们紧密放置就会导致用户很容易点错。

    7、反馈:为用户提供有效的反馈是所有设计方案的基础,通过反馈我们可以确认时间已经发生了,并且被系统捕获了。真实师姐的触摸的概念其实指的就是一种反馈,我们生活在有确定的自然法则支配的世界中,应该多留意自己生活中的真实体验,从而宅交互设计中展现自己最自然的反应

    思考:从之前的硬键盘,到触屏,用户到达了一种直接操纵的程度,从触屏到手势,用户到达了多种生活中的真实操纵状态。慢慢地与真实世界的界限越来越模糊,从自然中抽象出来的交互模型往往令人惊叹,且易于接受。如果你还没有下载facebook的paper,下载试试你会有与现在不一样的感受。

    8、反馈注意的问题:如果在设计方案中整合了更多强大交互反馈,那么一定要考虑时间的概念。这里的时间指的是事件触发和的显示速度,以及显示效果的的持续时间。因为你需要知道动画或者效果如何影响任务整体流程,所以这些都非常重要的因素

    思考:如果你在系统切换到工作流的笑一个环节之前,用户必须等待反馈效果的结束,那么用户就会有挫败感。这是要必须避免的。

    9、对隐藏控件的提示:在状态驱动的用户界面,在用户能够操作控件之前就要调出该控件,如果采用这种方案,你必须为用户提供一些提示或者暗示,告诉他们如何调出这些隐藏控件。(一种简单的做法是,在应用刚启动时,将所有的隐藏控件设置为可见,然后再采用某种动画方式将他们移出屏幕)

     

    第八章:易用性和功能的自动化

     

    1、自动化技术是近几年应用而生的,是用户体验中非常有趣的部分。自动化技术之所以引人注目,是因为他会隐藏操作应用程序方面对用户很关键的细节。

    2、随着市场的成熟,用户也变得更加复杂,在这个过程中就出现了一种趋势--用户渴望增加对应用的控制,而这种控制可以出现在细节层面上,这一层面上暴露了大量的功能细节,用户可以决定使用应用时需要显示哪些功能。在很多情况下,用户熟悉了应用及其复杂的操作后,自然会在应用程序中探索出更多地控制方式,从而简化自己的流程。

    思考:现在许多APP出现的功能个性化定制就是迎合了这种用户的控制要求。用户可以根据自己的需求简化自己的操作流程。开发者也可以统计这些操作流程数据,进一步优化APP,现在很多统计平台已经可以很好的实现这个需求,大家可以了解一下云联盟。

    3、利用iOS自带的技术来为用户优化操作流程,辅助技术:

    • GPS
    • 三轴加速计(微移动,速度以及与上一个位置相对的加速度,比GPS更加精细)
    • 陀螺仪(设备方向)
    • 数字罗盘(地球磁场的设备方向)
    • 距离传感器(物体与设备表面的距离)
    • 摄像头
    • 麦克风

    4、怎样处理功能的自动化?除了之前提到的设法宅操作流程的适宜之处删减用户的操作,并以自动化的技术来替代,还有一种略微不同的方法,我们可以将这种方法拆分为两种基本方式:

    • 删减用户控制:根据对用户意图的推测,移除需要用户执行的某些输入操作
    • 强化用户控制:根据对用户意图的推测,简化用户操作或者对用户操作进行指引

    5、尽管应用程序的复杂度和用户的认知都在不断的增长,但是易用性仍然是最重要的一个方面。从交互设计的角度来看,只要是存在简化交互方式、工作流或应用的可能性,那么都应该对其进行简化和优化。


    展开全文
  • https://developer.vuforia.com/resources/sdk/ios 话说之前说过了咱与本地漫展商合作推出AR app,虽然他们之前也已经做过了但是只有Android版,后来因为某些问题于是准备是让咱来接手后续的开发。(其实本来只是

    转自:http://blog.csdn.net/ekhsofxe_ibb/article/details/18655905?reload

    https://developer.vuforia.com/resources/sdk/ios

    话说之前说过了咱与本地漫展商合作推出AR app,虽然他们之前也已经做过了但是只有Android版,后来因为某些问题于是准备是让咱来接手后续的开发。(其实本来只是打算说iOS可以咱来做…而已…
    不过在还没开始谈的时候就已经通过某种渠道获得了人物模型和动画,花了差不多4天时间从零开始完成了AR识别到人物展示以及人物动作这几个过程,而经过一段时间的“放假”之后最近则是直接完成了人物的交互。可以说目前以及可以达到上架的地步了。
    嘛其实整个流程做完之后回头看其实还是很简单的,于是打算做本教程,当然因为没征得同意所以人物模型什么的是没办法放出的,源代码也是。但是看完整个流程下来不需要源码也行啦~

    OK废话不多说赶紧开始吧~
    首先先确认需求,咱要做的是在某图片上展示个人物会跳舞,触摸之后会有不同的反应。

    接着是确定开发平台,虽然Unity 3D支持Android,但是如果想要做到iOS上还必须有Mac才行,当然Unity3D这个甚至可以制作到各种游戏机上不过目前咱没这个需要。目前就以iOS和Android为主吧~

    确认平台之后就是工具了,首先Unity 3D是必须的(下载地址),官方有30天试用版,至于破解什么的自己去找谷歌娘要吧~
    接着是Vuforia SDK(下载地址),这个是高通的AR方案,支持Android、iOS以及Unity 3D,咱们目前只需要Unity3D的,所以直接下载就好了。
    最后是对应平台的SDK,iOS的话需要Xcode(下载地址),当然还需要真机调试需要iOS付费开发者账户以及证书。嘛这些网上很多就不再重复说了。
    如果是Android的话则需要Eclipse(下载地址)以及Android SDK(下载地址),配置方法网上也很多所以不再重复说了…
    嘛作为手机app开发者连这些都没用过或者说不知道的话那真是失格呢(笑)。

    还有素材别忘记准备了喔!
    1.识别用图片。
    2.人物模型/动画,贴图。

    接下来先来创建识别用图片的“文件”吧~

    将准备好的识别用图片到这里创建Database并添加Target提交图片。(注意提前注册好账号喔~


    最后将生成好的文件下载下来,不过注意下载的时候要选择Unity Editor。


    接着打开Unity 3D,首次打开会有个非常华丽的游戏演示….不过比较残念我们做的不是普通游戏所以新建一个Sence。
    然后将前面下载好的Vuforia SDK(vuforia-unity-android-ios-2-6-7.unitypackage文件)打开,导入到Unity 3D里。
    于是在Project栏里应该能看到一堆东西。


    接着到Assets/Qualcomm Augmented Reality/Prefabs/里把ARCamera和ImageTarget拖到Hierarchy那栏里。

    首先导入前面制作好的图片识别文件(AR.unitypackage),接着在ARCamera的Inspector面板里的Data Set Load Behaviour下能找到刚才导入的那些。勾选之后下面会出现Active,同样勾选了。


    *PS:别忘记调整Camera下的Clipping Planes,将Far设置得尽量大一些。不然AR识别的距离限制得非常近。

    然后到ImageTarget的Inspector面板,在Image Target Behaviour下的Data Set里选择要作为AR识别的图片包。下面的Image Target里选择要作为识别的图片。


    接着导入制作好的3D模型(咱用的是Maya制作好的fbx文件,内置两段动画,另外有几张人物贴图也一并导入),然后将人物模型拖到ImageTarget里面作为子项目。
    因为场景太暗于是咱还放了一盏灯…


    然后调整导入的人物的大小,发现人物只有框架没有贴图,于是在人物模型的Inspector面板里面按Select键,勾选Import Materials,然后下面的Material Naming选择Model Name + Model’s Material这个选项,最后别忘了Apply。这样人物应该变彩色了。

    目前可以识别图片人物也能显示了,但是人物还是不能动的,于是切换到Rig页面,Animation Type选择Legacy,然后Generation选择Store in Root(new),Apply。
    接着切换到Animations页面,因为咱的fbx文件已经包含了动画所以直接勾选Import Animation,Clips里能看到2段动画。注意选择好对应的时间轴区间。


    其中Default Take是咱需要循环播放的,而ArmatureAction则是触摸之后只播放一次的,播放完之后则继续循环播放Default Take。接着Default Take里的Wrap Mode设置是Loop,而ArmatureAction的Wrap Mode则是选择Once。
    嗯别忘了Apply。

    目前为止人物能识别并且可以跳舞了。但是我们需要交互,既触摸屏幕人物会做别的动作。
    说白了动作就是切换Animation的Clips,于是开始代码上的工作了~
    在人物模型(比如咱现在用的是XY_girl__animation)的Inspector面板里按最下面那个大大的Add Component按钮,选择New Script,取个名字(比如咱的Touch Script),Language….嗯咱比较喜欢CSharp就选它吧~(当然你会JAVA可以选它,或者Boo也可以…但是咱下面的代码都是C#就是 了。

    接下来应该应该会打开MonoDevelop-Unity编辑器了。粘贴以下代码,根据自己实际需要进行修改:

    using UnityEngine;
    using System.Collections;
    public class TouchScript : MonoBehaviour {
    Vector2 m_screenpos = new Vector2();
    // Use this for initialization
    void Start () {
    Input.multiTouchEnabled = true;
    }
    void MobileInput() {
    if (Input.touchCount <= 0)
    return;
    if (Input.touchCount == 1){
    if (Input.touches[0].phase == TouchPhase.Began){
    //手指按下了
    m_screenpos = Input.touches[0].position;
    Debug.Log("TOUCHED");
    //如果正在播放着Default Take就开始播放ArmatureAction
    if (animation.IsPlaying("Default Take")){
    animation.Play("ArmatureAction");
    }else{
    animation.Play("Default Take");
    }
    }
    }
    else if (Input.touches[0].phase == TouchPhase.Moved){
    //手指移动了
    Debug.Log("MOVED");
    }
    if (Input.touches[0].phase == TouchPhase.Ended && Input.touches[0].phase != TouchPhase.Canceled){
    Vector2 pos = Input.touches[0].position;
    Debug.Log("TOUCHOUTED");
    //手指松开了
    }
    }
    void DesktopInput(){
    float mx = Input.GetAxis("Mouse X");
    float my = Input.GetAxis("Mouse Y");
    if ( mx!= 0 || my !=0 ){
    if (Input.GetMouseButton(0)){
    //鼠标按键按下了
    Debug.Log("CLICKED");
    //如果正在播放着Default Take就开始播放ArmatureAction
    if (animation.IsPlaying("Default Take")){
    animation.Play("ArmatureAction");
    }else{
    animation.Play("Default Take");
    }
    }
    }
    }
    // Update is called once per frame
    void Update() {
    #if !UNITY_EDITOR && ( UNITY_iOS || UNITY_ANDROID )
    MobileInput();
    #else
    DesktopInput();
    #endif
    //当ArmatureAction播放完毕停下的时候开始循环播放Default Take
    if(!animation.isPlaying){
    animation.Play("Default Take");
    }
    }
    }

    保存之后切换回Unity 3D,接着在菜单栏的File里选Build Settings...,根据实际情况选择Android或者iOS,然后选择Build And Run。
    Android的话需要选择APK文件保存位置以及AndroidSDK所在路径。
    iOS则是选择project保存的位置。
    之后就能在手机上看到AR效果了~

    Unity 3D也支持自带调试的,方法就是按顶上的播放按钮。


    其他Q&A:
    1.想多个人物/物体同时出现/识别。
    在ARCamera的Inspector面板里面的QCARBehaviour下面的Max Simultaneous Image Target设置需要同时识别的数量,最高似乎只能5个。
    另外图片太小或者细节相差不大的图片都不能同时显示,相同图片更加不行了。

    2.如何添加声音。
    这是之后需要制作的,不过音频这个比动画简单多了,而且可以像上面那样使用代码来触发音频播放。

    3.动画除了fbx自带之外,可以直接在unity里创建么?
    要知道这本身就是做游戏的引擎,所以当然可以!咱这里只是根据咱自己的实际情况来写,一般的话只需要制作好的人物模型然后直接在unity里编写出发以及动作什么的,代码上也可以直接控制,详细可以去看unity的AnimatorController相关

    还有问题可以留言给出。
    原代码还没有得到官方授权所以是不能发出来了,但是有问题咱还是能尽量帮忙的~

    展开全文
  • ios用户体验

    2019-07-31 17:17:47
    本文是在阅读《ios用户体验》的过程中,记录的总结和个人的感受思考。不免有错误之处,恳请读者指正,在下面留言即可。 第一章:ios人机界面指南概述 1、智能手机的特点:大尺寸、高分辨率、强大的计算能力 ...
  • 本文是在阅读《ios用户体验》的过程中,记录的总结和个人的感受思考。不免有错误之处,恳请读者指正,在以下留言就可以。 第一章:ios人机界面指南概述   1、智能手机的特点:大尺寸、高分辨率、强大的...
  • 对于学习一些东西,我比较习惯任务驱动式的学习,也...如前文 游戏制作之路:游戏引擎选择、Mac下和Windows下UnrealEngine 4体验对比、文档及其他 所说的,我已经选择了UE4这个画面最顶级的引擎,它即使是在iOS上,...
  • 这篇谈的是如何循序渐进的学习3DMAX。对于新手来说,会感觉无从下手,只能按部就跟着老师学习,或者跟着教程一步一步的学习,再者就看着别人一步一步来。最终也是可以画出效果图,但是对很多命令都是一知半解,这...
  • 黑科技:程序猿如何打造...于是乎就想买一个分体的机械键盘,结果找了半天都没有比较中意的,找到几个人体工程学键盘,都是薄膜的,而且价格高得离谱,不就多个人体工程学光环嘛。。。 普通机械键盘淘宝人体工程学键
  • 移动端3D视觉在AI和AR方面带来颠覆性、全新的用户体验,预计将实现快速的渗透与普及,消费电子从此进入“AI+AR”新时代
  • 李根 发自 凹非寺 量子位 报道 | 公众号 QbitAI旷视者,大视觉之谓也,现在更能显出这家AI独角兽的抱负和野心了。就在昨天(8月8日),旷视发起了一场“3D视觉产...
  • 最值得学习和最具潜力的 44 个顶级开源项目,包括关于机器学习、深度学习、强化学习、语音识别、自然语言处理、计算机视觉、自动建模和分布式平台等等。 I . 适用于经典机器学习的工具 一、SciKit-learn  star 39.2...
  • 加州初创公司推出智能 3D 模型软件 Loom.ai ,利用机器学习和计算机视觉技术,根据用户 2D 平面照片,生成 3D 头像。该公司表示,该技术能做到: 媲美 3D 扫描的的视觉保真度 头像是可动的,像动画人物一样 ...
  • 一:简介 最近项目在做了身份证银行卡识别之后,开始实现人脸识别和活体识别,其中人脸识别包括人脸入库、人脸查找、人脸1:N对比、人脸N:N对比,另外活体识别运用在安全登录功能。 大家都熟知的支付宝使用face++ 的...
  • 一段轻快的旋律里,小鸡、外星人、猴子和机器人的 Animoji,表情伴随着「boom boom boom」次第炸开,简单线条勾勒出了繁复的数字世界。随后,一段短片记录了形形色色的开发者们,在夜深人静万籁俱寂的时刻,潜心敲击...
  • 精品收藏:GitHub人工智能AI开源项目 绝对精品!!!花了点时间,鄙人把这几年收藏的开源精品项目,整理一下,方面以后查找。其中涵盖了姿态检测,图像分割,图像分类,美学评价、人脸识别、多尺度训练,移动端的AI...
  • 工欲善其事必先利其器,这也是大部分开发者在日常工作中最重要开发原则。选择与开发内容相匹配的工具,常常会使我们事半功倍。但面对人工智能的多个领域,如:机器学习、深度学习、NLP等等,多样的工具有时也让我们...
  • 来源:数据Seminar 本文约3800字,建议阅读7分钟。 本文列出了 2017 年 GitHub 平台上最为热门的知识库,其中包含了学习资料与工具。 ...GitHub 是计算机科学领域最为活跃的社区,在 GitHub 上,来自不同背景的...
1 2 3 4 5 ... 9
收藏数 163
精华内容 65
热门标签