这个想法一开始就和往常一样:我当时正在研究一个 完全不同的项目 当我偶然发现一位艺术家的作品后偏离了轨道 卡塔利娜·维勒加斯 在社交媒体上。她创建了 Instagram AR 滤镜,使她以贴纸形式出售的插图变得栩栩如生。 AR 并不是什么新鲜事,2012 年我有一个应用程序在我全新的索尼智能手机上展示了这种效果。但发现有一个工具可以轻松制作 AR 效果,然后将其发布到 Instagram 等无处不在的平台上,这真的让我很感兴趣。
然后,我开始考虑考虑到我的个人和职业活动,我可以对这种技术有什么样的用途。我希望我能够创造 美丽的数字插图 并通过让他们互动来给他们一个新的维度,但目前这离我的技能还太远。因此,我决定制作一个对我来说有意义的简单项目:创建一个滤镜,当相机指向我的一张名片时,该滤镜会播放 3D 动画。我有一家小 etsy 商店,我认为这可能是一种有趣的方式来推动我的客户在社交网络上发布有关它的信息,因为一旦他们收到订单和我的名片,他们可能会好奇地尝试这个 AR 过滤器。
,谢谢你的解释 très claires!这就是 vraiment 上衣! en revanche, j'ai un petit soucis, lorsque j'exporte il semble que mon fichier ne peut être exporté que sur Facebook et n'est pas Compatible avec Instagram… je ne sais pas pourquoi… et une fois que l'effet est Accepté我们将宣布发动政变,让您不再为蒙特雷复古!!!这就是问题所在! pouvez-vous m'aider?我是你的苏海特,你的旅程非常精彩。
Making-of
为您的名片制作 AR Instagram 滤镜
30分钟
简单的
免费软件
这个想法一开始就和往常一样:我当时正在研究一个 完全不同的项目 当我偶然发现一位艺术家的作品后偏离了轨道 卡塔利娜·维勒加斯 在社交媒体上。她创建了 Instagram AR 滤镜,使她以贴纸形式出售的插图变得栩栩如生。 AR 并不是什么新鲜事,2012 年我有一个应用程序在我全新的索尼智能手机上展示了这种效果。但发现有一个工具可以轻松制作 AR 效果,然后将其发布到 Instagram 等无处不在的平台上,这真的让我很感兴趣。
然后,我开始考虑考虑到我的个人和职业活动,我可以对这种技术有什么样的用途。我希望我能够创造 美丽的数字插图 并通过让他们互动来给他们一个新的维度,但目前这离我的技能还太远。因此,我决定制作一个对我来说有意义的简单项目:创建一个滤镜,当相机指向我的一张名片时,该滤镜会播放 3D 动画。我有一家小 etsy 商店,我认为这可能是一种有趣的方式来推动我的客户在社交网络上发布有关它的信息,因为一旦他们收到订单和我的名片,他们可能会好奇地尝试这个 AR 过滤器。
要求
软件
创建该项目使用了以下软件:
文件
我将所有项目文件上传到 Google Drive。
项目文件存储库的结构:
演练
为 AR 动画设计名片和模型
名片
您需要完成的第一个任务是设计您自己的名片。
在本教程中,我们将使用由以下人员设计的飞蛾插图 我的才华横溢的朋友陈辉。感谢惠让我们使用您的作品!
看看这篇关于 Spark AR Studio 中目标跟踪的最佳实践 充分了解您的名片设计应该是什么样子,以便过滤器能够轻松识别。
一旦您对您的设计感到满意,请将其打印出来并拍摄卡片的照片。事实上,我发现如果您使用要跟踪的现实世界对象的图片而不是其数字对应物,目标跟踪效果会更好。
AR 动画的模型和视觉元素的准备
接下来设计一个模型,展示您如何设想从上面看到的 AR 动画。它将帮助您在 Spark AR Studio 上组织和定位场景的不同元素。
在矢量编辑器中的不同图层中组织主要元素并将其导出为 .png 具有透明背景的图像。
动画文本:事实证明,这对我来说是该项目中最麻烦的部分之一。简而言之,我在 Inkscape 上设计了文本的笔画,并将其加载到 Blender 上,以便生成逐帧动画。如果有人想了解有关该过程的更多详细信息,请在评论中告诉我,我可能会抽出时间编写有关该过程的简短教程。
安装 Spark AR Studio
前往 Spark AR Studio下载页面,下载安装文件并按照说明安装程序。
使用此程序需要 Facebook 帐户。
创建一个新项目
成功启动并登录 Spark AR Studio 后,通过单击创建一个新项目 创建新的 -> 新项目 -> 目标追踪.
该软件有很多错误且不稳定,因此您可能需要立即保存您的项目,并记住在取得任何重大进展后定期保存。
将纹理导入到项目中
还记得我们之前保存为 .png 的场景元素吗?我们需要将它们加载为 纹理 这样我们就可以在我们的项目中使用它们。
引用该软件的文档:
在里面 资产面板 在窗口的左下角,单击 从计算机导入 并加载所有文件 纹理 Google Drive 存储库的文件夹,除了 /Text 动画帧的内容(目前)。
然后选择 所有新导入的纹理 除了背景和 Business_card_target_image。上 纹理面板 在你的右边 压缩子面板, 将所有三个压缩选项设置为 没有任何。我们这样做是因为图像已经足够精简,并且程序的压缩模块往往会无缘无故地使用太多的 CPU 和 GPU 资源而永远陷入困境。
现在导入文本动画的帧。我必须再次使用一种解决方法来避免永远等待压缩模块(不)完成其工作。在右下角 资产面板, 点击 + 添加资产 -> 进口 -> 从计算机。加载所有图像 /文字动画帧 文件夹,一次一半。我必须这样做以避免程序崩溃......有一个纹理动画导入选项,如果它不......崩溃程序,使用起来会更方便。
导入 50 个帧后,将其全部选中并更改 类型 到 纹理序列 在顶部 纹理面板。
将压缩设置为 没有任何 对于所有三个压缩选项,就像我们对其他纹理所做的那样。
最后,我们需要创建另一种类型的对象来处理我们的动画。在里面 + 添加资产 菜单,选择 动画序列。在右侧打开的面板中,单击 下拉箭头 在...前面 质地 并选择 纹理序列 我们刚刚创建的。
创建材料
要创建所需的材料,请单击 + 添加资产 -> 材料。我们需要 7 个,所以继续复制它 6 次与 CTRL + D。
给所有材料起一个更有意义的名称。现在我们必须为它们每个设置一些参数。
选择除背景之外的所有材质。
上 材质面板 在你的右边选择 两面性 在里面 渲染选项 子面板。这样,如果从下面观察,我们的纹理也是可见的——这与翅膀和飞蛾的身体特别相关,因为它们将悬停在空中。
在里面 高级渲染选项 子面板,取消勾选 写到深度。这将使我们纹理的透明背景真正消失,并且当我们稍后使用平面时不会相互干扰。
然后选择相关的 质地 对于每个材料中的 着色器属性 子面板。
将纹理添加到目标跟踪器
现在我们需要为目标跟踪器提供一个目标——该程序的模块负责定位将触发动画的现实世界对象,并为其提供有关其应定向的平面的信息。
选择 固定目标跟踪器0 在里面 场景 面板位于左上角和 目标追踪器 右侧菜单选择 Business_card_target_image 作为 质地.
为场景元素创建平面
我们要做的第一件事是通过更改场景从 3D 视图切换到 2D 视图 模式.
下一个 右键点击 在 固定目标跟踪器0 到 添加 一个新的 飞机 到现场。
使用 CTRL + D 到 复制 这架飞机 6次 最终得到 7 架飞机。
重命名反映将包含在场景中的所有元素的平面。
在里面 平面面板 在您的右侧添加相关的 材料 到每个平面。
缩放和定位平面
现在我们的平面已经有了纹理,我们需要调整它们以使场景的元素具有适当的尺寸和位置。为此,我们将一次只处理一架飞机。
因此,首先选择除您将使用的第一个飞机(在这种情况下为星星)之外的所有飞机并将其制作 隐 通过取消勾选 可见的.
使用目标图像作为参考 规模 和 复位 星星直到它们以某种方式与背景相匹配。完成后,将“星星”平面的可见性设置为隐藏,然后移动到另一个平面。对除背景和文本动画之外的所有平面重复此操作。
一旦您感到满意,请显示您一直在处理的所有飞机以及背景。选择 背景 飞机和 规模 它达到所需的尺寸 - 理想情况下,您可能希望它完全覆盖目标图像。
然后使 文字动画 可见,并再次将其缩放回原始比例并适当定位。
与背景相比,飞蛾现在看起来有点小。事实上,我们使用目标图像作为参考来缩放飞蛾,但使背景比名片更大。因此,我们的比例不再真正符合模型。
为了解决这个问题,我们希望以一致的方式缩放除背景之外的所有内容。我们将通过将所有这些要素包含在一个 空容器, 和 缩放 这个容器而不是所有单独的飞机。
为文本添加动画
右键点击 在 固定目标跟踪器0 并选择 创建补丁。这将打开 补丁编辑器.
右键点击 在补丁编辑器中添加一个 动画片 修补。 连接 这 成立 连接器的 固定目标跟踪器 补丁到 玩 连接器的 动画片 修补。这将使文本动画在启用 AR 滤镜时开始播放,因为已经找到目标图像。
这样做会自动在两者之间添加脉冲补丁。连接 关掉 连接器的 脉冲 补丁到 重置 连接器的 动画片 修补。这样,当相机移出目标图像时,文本动画就会重新设置,并且可以在重新找到目标时再次播放。
添加一个 帧过渡 修补并连接其 进步 连接器到其对应的 动画片 修补。设置 帧数 = 51.
选择 文本动画序列 来打开 动画序列面板 在你右边。单击 箭 前 当前帧 添加一个新的补丁,使我们能够与场景中显示的帧进行交互。 连接 这个补丁到可用的连接器 帧过渡 修补。
您可以通过修改动画补丁的持续时间参数来控制动画的速度。
制作翅膀动画
连续选择每个机翼并确保它们 位置 在 Z轴 是 0.
使翅膀扇动并不困难。我们只需在两个翅膀对象的 Y 轴上添加旋转动画即可。然而,直接对机翼对象应用这种效果是行不通的。事实上,物体的质心位于机翼的中间,因此如果我们旋转它,它就会从中心旋转。我们需要的是让它从机翼边缘的部分(与身体接触的部分)开始旋转。我希望我在这里有点道理……
因此,我们需要找到一种方法来转移机翼物体的质心。为此,我们将使用空对象,该对象将自动创建,其质心位于场景中间。这些空对象将容纳翅膀对象,并且旋转将应用于空对象本身。我们开始做吧!
右键点击 在 容器 和 添加 A 空对象 在里面。将其重命名为 RightWingContainer 并 复制 它与 CTRL + D。重命名重复的 LeftWingContainer。选择 机翼物体 和 拖放 他们进入各自的 空对象容器.
在里面 补丁编辑器, 右键点击 并添加一个 循环动画 修补。设置 持续时间 = 2 并勾选 镜像 复选框(这样动画可以无缝循环,并且不会在机翼襟翼结束时从头开始重新开始。启用“镜像”后,机翼将在达到向上襟翼的上限后开始向后襟翼)。
接下来添加一个 过渡 补丁和 复制 它。链接 进步 连接器的 循环动画 给两者的对应补丁打补丁 过渡 补丁。
像这样填写过渡补丁的参数:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
选择 右翼集装箱 并在 空对象面板 在你的左边点击 箭 前 回转。这将向补丁编辑器添加一个补丁,以便我们可以与这些值进行交互。连接 价值 最上面的连接器 过渡 补丁到连接器的 右翼集装箱 新创建的补丁。
重复该操作 左翼集装箱 和最底部的过渡补丁。
此时您应该看到您的双翼开始拍动!现在我们只需要把飞蛾沿着 Z 轴移动到更有意义的位置。修补 位置 在 Z轴 的 右翼集装箱, 左翼集装箱 和 身体 反对,直到达到令你满意的结果。
预览结果
您需要下载 Spark AR播放器 首先在手机上安装应用程序。
当您的手机连接到计算机时,您会看到 Spar AR Studio 左下角的手机图标上添加了一个小蓝点。单击它并选择 发送 到您的设备。
将相机对准您之前打印的名片并享受吧!
然后使用手机上的应用程序拍摄效果视频,因为我们下一步需要它。
将 AR 滤镜发布到 Facebook 或 Instagram
单击 发布 左下角预览图标下方的箭头图标。这将打包您的项目,上传并将您重定向到 Spark AR 中心的网页。
请按照以下步骤成功发布您的过滤器:
您可能想检查 Spark AR 政策 在您提交审核之前。我的第一次尝试被拒绝,因为我的网站地址在演示视频中可见。
最后结果
我将为您留下迄今为止我一直在使用的过滤器的演示。
第一个是我为自己的名片创建的,第二个是我使用其中一个进行的第一次测试 我用干花瓣制作的明信片 第三个是为本教程创建的过滤器。
我希望您喜欢学习本教程。
与往常一样,请随时分享有关本教程的任何反馈或您希望在此处发布的任何项目想法。
脚注
以下在线内容在本项目的制作过程中提供了一些帮助和/或灵感:
,谢谢你的解释 très claires!这就是 vraiment 上衣! en revanche, j'ai un petit soucis, lorsque j'exporte il semble que mon fichier ne peut être exporté que sur Facebook et n'est pas Compatible avec Instagram… je ne sais pas pourquoi… et une fois que l'effet est Accepté我们将宣布发动政变,让您不再为蒙特雷复古!!!这就是问题所在! pouvez-vous m'aider?我是你的苏海特,你的旅程非常精彩。
你好,诺埃米,
这是我在 Instagram 上的海报选项和复古效果的教程,它是最重要的,并且是大规模修改的。
祝你澳洲愉快!