NFT潮鞋AR互动零基础教程来啦!

NFT数字藏品,已经成为一种风靡全球的文化潮流。人们不仅能够在元宇宙中拥有数字藏品,还可以利用AR增强现实技术将它们带到现实世界:

今天,我们为大家准备了一份NFT潮鞋定制与AR体验的零基础教程,让你轻松化身为NFT数字藏品的创作者,并通过AR技术,将定制的数字潮鞋试穿在自己的脚上,或摆放在身边。

让我们先来看看完成后的效果吧!等不及的小伙伴也可以直接划到文章最后,进入「AR元宇宙」小程序体验哦~

本次教程分为三大环节,将用到软件Procreate、Photoshop、Blender以及在线网站Kivicube、弥知AR试穿平台(其中免费软件及网站链接我们都会提供)。让我们马上开始吧!

视频教程请点击:https://v.qq.com/x/page/i3347vnz8cn.html

以下为图文教程

准备环节·模型素材获取

1. 首先,同学们需要关注「弥知科技」公众号,在对话框中输入关键词「nft」,点击下载链接以获取本次教程所使用的全部素材,并保存至iPad设备中(可通过微信等渠道传输)。

2. 名为「NFT潮鞋定制素材」的文件夹中包含三个子文件夹,将分别用于本次教程中的模型DIY绘制AR试穿以及SLAM放置三个环节。

环节一·模型DIY绘制

使用工具:Procreate

本环节所需要的素材均在子文件夹「I-模型DIY绘制」中,让我们先以穿着在右脚(R)的潮鞋模型为例,进行DIY绘制:

1.1. 导入白模

首先,进入app「Procreate」,在图库界面点击右上方的「导入」。在已保存至设备的子文件夹中,选择文件「1.R-右脚绘制白模.obj」导入app。

图片

3D白模导入后,技艺精湛的绘图高手就可以直接在上面进行自由创作啦!

图片

不过,新手小白们也无需担心,我们在素材包中提供了精美的贴图,按照接下来的步骤操作,大家都能在不破坏鞋子基本造型的前提下尽情DIY~

1.2. 匹配贴图

点击界面右上方的「图层」选项,在「forbidTex」图层组中,依次选择「基础图层」和材料图层「颜色」(color)。

图片

接着,点击界面左上方的「操作」选项。请注意,一定要先选择「3D」打开「显示2D纹理」,然后再点击「添加」-「插入文件」,导入素材文件中的「3.R-forbid-color.jpg」

导入后,贴图素材就成功与「forbidTex」图层组中的材料图层「颜色」完成了匹配。

其他两个材料图层「粗糙度」(rough)、「金属」(mental)以及「drawTex」图层组都可以用相似的步骤匹配贴图。贴图与材料图层的具体对应关系可参考下图:

图片

贴图匹配完成后,再次点击「操作」中的「3D」选项,关闭「显示2D纹理」。这样,基本造型固定的半成品潮鞋就制作好啦,尽情发挥创意将未匹配贴图的空白鞋面填满吧!

1.3. DIY绘制

小伙伴可以点击「drawTex」中的图层,选择任意画笔进行绘制,自由调节「金属」、「粗糙度」等画笔材质。不过,考虑到后续环节会对绘制的贴图进行镜像翻转,不建议在这里添加文字哦!

图片

1.4. 贴图导出

创作完成后,点击「操作」-「分享」,将模型的纹理导出,生成不同图层组的颜色、粗糙度和金属共6个PNG格式文件,并存储到设备中。为方便后续查找,还请同学们记住保存路径~

图片

到这里,潮鞋的右脚模型DIY绘制就完成啦!导出的纹理贴图可直接应用于后续环节中左脚模型的合成。

当然,想挑战自己的小伙伴也可以将素材包中的「2.L-左脚绘制白模.obj」文件导入Procreate,实现天马行空的创作!

环节二·AR 试穿

使用工具:Photoshop + 在线AR模型编辑器+弥知AR试穿平台

从这一环节开始,我们需要用电脑来完成后续的操作。记得先将上一环节中由Procreate导出的贴图文件传至电脑哦!

2.1. 贴图合并

首先,下载并打开软件Photoshop,导入素材包子文件夹「II- AR试穿」中的两个psd文件。

图片

「1.forbid- ORM.psd」中,导入上一环节中由Procreate导出的「forbidTex-粗糙度」「forbidTex-金属」两个png贴图,并将其移至对应的图层位置。完成后,将文件导出为jpg图片并存储在指定位置。

图片

「2.draw-ORM.psd」中进行同样的操作,将「drawTex-粗糙度」「drawTex-金属」贴图移动到对应图层,并导出生成jpg格式文件。到这里,粗糙度与金属两种材质贴图就完成了合并。

图片

2.2. 模型合成

前往Kivicube平台在线AR模型编辑器

首先,将「II- AR试穿」子文件夹中的「3.R-tryon.glb」文件拖入编辑器,我们会看到潮鞋右脚的空白3D模型。

图片

在右侧工具栏中,选择材质「drawTex」。在「基础颜色」栏中,点击「纹理」,将上一环节导出的「drawTex-颜色.png」文件上传。

图片

「金属度·粗糙度」一栏中,点击「纹理」,上传由PS合成导出的「2.draw-ORM.jpg」文件。

图片

接着,将材质切换为「forbidTex」,重复上述步骤,依次将贴图文件「forbidTex-颜色」「1.forbid-ORM.jpg」与模型的「基础颜色」「金属度·粗糙度」进行匹配。

完成后,点击「导出文件」,我们将获得一个已绑定材质贴图的「3.R-tryon」glb格式文件

右脚模型合成结束后,刷新网站页面,将左脚模型「4.L-tryon.glb」拖入编辑器,进行同样的贴图匹配流程。需要同学们注意,如果在环节一只绘制了鞋子的右脚模型,导出的贴图可直接用于此处左脚模型的匹配,能够实现自动镜像翻转哦!

2.3. AR 试穿体验

进入弥知AR试穿平台,点击「立即制作」注册或登录

图片

点击「创建场景」,依次填写场景名称、商品SKU,将上一步用AR编辑器合成的潮鞋glb模型导入(注意区分左右脚),上传缩略图并选择遮罩类型。对信息填写、文件上传等有疑问的小伙伴,可以点击界面上方的「教程」进行详细了解。

图片

提交后,我们就可以扫描二维码进行AR试穿体验。有关参数设置的具体操作,也可以参考「教程」文档。

环节三 · 潮鞋 AR 摆放

使用工具:Blender + 在线AR制作平台Kivicube

3.1. 模型合成

首先,我们需要下载并安装电脑软件Blender(建议下载3.0以上版本),将子文件夹「III- SLAM放置」中的「NFT放置模型.blend」打开。在右上方的「视图着色方式」一栏中,选择「渲染」

图片

选中模型的绘制图层「drawTex」,将我们在环节一中由Procreate导出的三个「drawTex」材质贴图拖进图层。

图片

依次将材质贴图「颜色」、「金属」、「粗糙度」与右侧的「基础色」、「金属度」、「糙度」相连(注意名称对应),并删除原有的三个贴图。到这里,模型「drawTex」的材质贴图就已经完成了绑定。

图片

接着,我们选中模型的「forbidTex」图层,重复上述步骤,将「颜色」、「金属」、「粗糙度」三个贴图与模型绑定(注意名称对应)。

完成后,一定要将模型组件全部选中,再选择左上方「文件」-「导出」-「glTF 2.0」,将模型导出为glb格式文件并保存。

3.2. 创建 SLAM AR 场景

前往Kivicube平台SLAM AR在线制作网站,点击「立即制作」,将上一步导出的glb模型文件上传。设置页面标题,模型缩略图可选,点击「生成体验链接」

图片

在微信中打开小程序「AR元宇宙」,扫描左侧二维码,就可以进行NFT定制潮鞋AR体验,将它SLAM放置在你身边的任意平面上!

图片

为了获得更流畅的循环动画体验,我们可以点击「复制场景ID」。在页面右上角的「工具」栏中,选择「设置SLAM参数」。在面板中,粘贴场景ID打开「动画循环播放」选项。其他参数的设置可阅读参数设置指南。

图片

设置完成后,点击「立即生成」,获取最新的体验二维码。让我们马上打开小程序「AR元宇宙」扫一扫吧!

附加环节 · NFT数字藏品平台上架

除了AR试穿与SLAM摆放,同学们还可以将DIY创作的NFT潮鞋上传至OpenSea、鲸探等国内外数字藏品交易平台,正式开启元宇宙NFT数字创作与收藏之旅!

到这里,本期的零基础教程就告一段落。想实现更多酷炫高级API功能的小伙伴,可以阅读文章《小程序SLAM高级API最佳实践》,也欢迎在评论区留言与提问,我们会及时回复~

扫描下方小程序二维码,开启沉浸式AR元宇宙之旅吧!

关于弥知


专注于AR(增强现实)原创技术研发,是国内领先的AR整体解决方案服务商旗下国内首个WebXR在线制作平台KIVICUBE,帮助用户通过可视化编辑,零基础即可制作出交互丰富的AR商业场景,并一键发布至小程序、公众号与微博等多个平台