互联网和智慧终端的普及促进了电商的产生和蓬勃发展,而新技术的产生,则推动着电商领域的不断升级。疫情使得人们更加习惯于使用电商进行购物,但对传统的线上购物模式已经产生了一些厌倦,电商市场急需模式上的变革,让老用户耳目一新,提供便捷的同时促进他们的购物欲望,同时也能凭借爆点吸引到新用户的加入。以此为背景,我们以HMS Core提供的智能图像处理能力,识别用户的面部和身体特征,再结合显示模式,让用户直接在手机上就能体验产品的佩戴效果,提供更加便利的购物体验。

场景

在淘宝、京东、天猫等购物app,以及小红书、得物、什么值得买等好物分享app,可以对产品进行AR体验,便于消费者感受产品效果,也能减少后续的退换货比例。

先看效果

打开App

点击图片可以查看商品的3D模型,可以进行旋转和缩放



开发准备

配置华为Maven仓地址

打开AndroidStudio项目中的build.gradle文件

在“buildscript > repositories”和“allprojects > repositories”中增加SDK的Maven仓地址:

buildscript {
repositories{
...
maven {url 'http://developer.huawei.com/repo/'}
}
}
allprojects {
repositories {

maven { url 'http://developer.huawei.com/repo/'}
}
}

添加编译SDK依赖

打开应用级的“build.gradle”文件

在dependencies中添加图形引擎的SDK包,使用Full-SDK,以及AR Engine的SDK包

dependencies {
….
implementation 'com.huawei.scenekit:full-sdk:5.0.2.302'
implementation 'com.huawei.hms:arenginesdk:2.13.0.4'
}

上述步骤可以参考开发者网站中的应用开发介绍

在AndroidManifest.xml中添加权限

打开main中的AndroidManifest.xml文件,在<application 前添加相机的使用权限

<!--相机权限-->
<uses-permission android:name="android.permission.CAMERA" />

开发步骤

MainActivity配置

在MainActivity的layout配置文件中添加两个按钮,一个背景设为产品的预览图,另一个添加文字“Try it on!”,引导用户进行试戴。

<Button
android:layout_width="260dp"
android:layout_height="160dp"
android:background="@drawable/sunglasses"
android:onClick="onBtnShowProduct" />

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Try it on!" android:textAllCaps="false" android:textSize="24sp" android:onClick="onBtnTryProductOn" />

点击onBtnShowProduct按钮,会加载产品的3D模型,而点击onBtnTryProductOn,则会进入AR试戴界面。

产品3D模型展示

1、创建一个继承自SceneView的SceneSampleView

public class SceneSampleView extends SceneView {

    public SceneSampleView(Context context) {

        super(context);

    }

    public SceneSampleView(Context context, AttributeSet attributeSet) {

        super(context, attributeSet);

    }

}

重写surfaceCreated完成SceneView的创建和初始化,loadScene加载的是要进行渲染显示的模型文件,目前支持glTF和glb格式素材的渲染,loadSkyBox、loadSpecularEnvTexture、loadDiffuseEnvTexture分别进行天空盒纹理、镜面反射纹理和漫反射纹理的加载,目前支持的是cubemap格式的dds文件。

所加载的素材都存放在src->main->assets->SceneView文件夹内。

@Override

public void surfaceCreated(SurfaceHolder holder) {

    super.surfaceCreated(holder);

    // 加载渲染素材

    loadScene("SceneView/sunglasses.glb");

    //调用loadSkyBox加载天空盒纹理贴图素材

    loadSkyBox("SceneView/skyboxTexture.dds");

    //调用loadSpecularEnvTexture加载环境光反射贴图素材

    loadSpecularEnvTexture("SceneView/specularEnvTexture.dds");

    //调用loadDiffuseEnvTexture加载环境光漫反射贴图素材

    loadDiffuseEnvTexture("SceneView/diffuseEnvTexture.dds");

}

2、新建一个SceneViewActivity,继承自Activity,在其中用onCreate方法调用setContentView,传入在layout文件中用xml标签创建的SampleView,

public class SceneViewActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_sample);

    }

}

layout文件中的SampleView创建为

<com.huawei.scene.demo.sceneview.SceneSampleView

    android:layout_width="match_parent"

    android:layout_height="match_parent"/>

3、在MainActivity中新建onBtnShowProduct,当点击对应的按钮时,就会调用SceneViewActivity,将商品的3D模型加载,进行渲染,然后显示出来

public void onBtnShowProduct(View view) {

    startActivity(new Intent(this, SceneViewActivity.class));

}

产品AR试戴展示

通过HMS Core提供的面部识别、图像渲染和AR显示能力,可以非常便捷的实现产品的AR试戴展示

1、创建一个FaceViewActivity,继承自Activity,同时创建对应的layout文件

在layout中创建face_view,用于显示试戴效果

<com.huawei.hms.scene.sdk.FaceView

    android:id="@+id/face_view"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    app:sdk_type="AR_ENGINE"></com.huawei.hms.scene.sdk.FaceView>

同时创建一个开关,用于对比佩戴与不佩戴的效果差别

<Switch

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/switch_view"

    android:layout_alignParentTop="true"

    android:layout_marginTop="15dp"

    android:layout_alignParentEnd="true"

    android:layout_marginEnd ="15dp"

    android:text="Try it on"

    android:theme="@style/AppTheme"

    tools:ignore="RelativeOverlap" />

2、在FaceViewActivity中重写onCreate方法,获取FaceView

public class FaceViewActivity extends Activity {

    private FaceView mFaceView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_face_view);

        mFaceView = findViewById(R.id.face_view);

    }

}

3、创建switch开关的监听方法,当开关打开时,使用loadAsset方法加载商品的3D模型,LandmarkType可以选定与人脸的识别位置

mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

    @Override

    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

        mFaceView.clearResource();

        if (isChecked) {

            // Load materials.

         int index = mFaceView.loadAsset("FaceView/sunglasses.glb", LandmarkType.TIP_OF_NOSE);

        }

    }

});

模型的大小和位置可以通过setInitialPose进行调整,建立position,rotation,scale数组,将要调整的数值传入

final float[] position = { 0.0f, 0.0f, -0.15f };

final float[] rotation = { 0.0f, 0.0f, 0.0f, 0.0f };

final float[] scale = { 2.0f, 2.0f, 0.3f };

在loadAsset语句下面加入

mFaceView.setInitialPose(index, position, scale, rotation);

4、在MainActivity中新建onBtnTryProductOn,点击按钮时调用FaceViewActivity让用户查看AR试戴效果

public void onBtnTryProductOn(View view) {

    if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA)

            != PackageManager.PERMISSION_GRANTED) {

        ActivityCompat.requestPermissions(

                this, new String[]{ Manifest.permission.CAMERA }, FACE_VIEW_REQUEST_CODE);

    } else {

        startActivity(new Intent(this, FaceViewActivity.class));

    }

}

访问华为开发者联盟官网

获取开发指导文档

华为HMS Core官方论坛

AR Engine开源仓库链接:GitHubGitee

解决集成问题请到Stack Overflow

关注我们,第一时间了解 HMS Core 最新技术资讯~

眼镜选款新方法,用AR+Scene技术实现3D虚拟试戴的更多相关文章

  1. 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法

    若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...

  2. 厉害了,摩托罗拉发布全球首款支持VR和AR的手机MotoZ

    目前支持谷歌daydream移动VR生态系统的手机型号并不多,除了谷歌自家的Pixel系列外,还有华为推出的mate9系列.如今又到了一位新成员,即升级到Android 7.0后的Moto Z. 更为 ...

  3. SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作)

    SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作) 2012-12-21  未来决定...       http://www.ebama.net/thread-107643-1-1.html ...

  4. 【Android】一种提高Android应用进程存活率新方法

    [Android]一种提高Android应用进程存活率新方法 SkySeraph Jun. 19st 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph ...

  5. Execel(导出新方法):

    #region 新方法 //var sbHtml = new StringBuilder(); //sbHtml.Append("<table border='1' cellspaci ...

  6. 交换ctrl和caps_loack的新方法

    交换ctrl和caps_loack的新方法 Table of Contents 1 过程 1 过程 debian用了几年,由于emacs的关系,一直将右ctrl和caps_lock键交换,使用的是xm ...

  7. MVC导出数据到EXCEL新方法:将视图或分部视图转换为HTML后再直接返回FileResult

    导出EXCEL方法总结 MVC导出数据到EXCEL的方法有很多种,常见的是: 1.采用EXCEL COM组件来动态生成XLS文件并保存到服务器上,然后转到该文件存放路径即可: 优点:可设置丰富的EXC ...

  8. 用javascript得到客户端IP的新方法

    javascript得到客户端IP的新方法 很久以来,我都是经过http://fw.qq.com/ipaddress来得到客户端用户的IP,这个方法简单.快速.实用 . 我们调用它的写法是: < ...

  9. iOS5中UIViewController的新方法

    iOS5中UIViewController的新方法 前言 在苹果的 WWDC2011 大会视频的<Session 101 - What's New in Cocoa> 和<Sessi ...

随机推荐

  1. js 跨域请求失败

    注:错误返回:Failed to load http://xxxxxxxxxxx: No 'Access-Control-Allow-Origin' header is present on the ...

  2. Netty 源码分析系列(一)Netty 概述

    前言 关于Netty的学习,最近看了不少有关视频和书籍,也收获不少,希望把我知道的分享给你们,一起加油,一起成长.前面我们对 Java IO.BIO.NIO. AIO进行了分析,相关文章链接如下: 深 ...

  3. RecyclerView跳转到指定位置的几种种方式

    Mark一下: http://blog.csdn.net/huangxiaoguo1/article/details/53706971 https://www.jianshu.com/p/3acc39 ...

  4. ABC133简要题解

    A T or T TOT 模拟即可 B Good Distance \(O(n^2)\) 模拟. C Remainder Minimization 2019 把 \(r\) 变成 \(l+2019\) ...

  5. springboot集成swagger的pom依赖

    pom依赖加入以下内容 //版本一致做个属性 <properties> <swagger.version>2.6.1</swagger.version> </ ...

  6. JavaWeb——CSS总结

    CSS 记得大一下学期那会参加基地后就开始跟师兄师姐接触前端了,利用业余时间在站看各种视频.由于初次认知并且时间也能不固定集中,也存在跳跃式学习等等原因,这就导致了好多知识点要么漏掉要么没记全,只能懂 ...

  7. uniapp scroll-view 组件横向滑动失效(ios问题出的最多)

    注意事项(做好以下几点就很难出问题): 一.scroll-view组件必须有固定高度,不可出现高度坍塌或让高度消失等现象;(重中之重) 二.一般问题出的多的就是在nvue环境下去使用的scroll-v ...

  8. jpa 指定字段内容按照顺序排序(orderBy when then)

    query.orderBy( criteriaBuilder.desc( criteriaBuilder.selectCase() .when(criteriaBuilder.equal(root.g ...

  9. 使用SuperSocket实现自定义协议C/S设计

    一.简介: 21世纪是出于互联网+的时代,许多传统行业和硬件挂钩的产业也逐步转向了系统集成智能化,简单来说就是需要软硬件的结合.这时,软硬件通讯便是这里面最主要的技术点,我们需要做到的是让硬件能够听懂 ...

  10. excel控件只为简单写入数据表--github找到ExcelUtil笔记

    github地址 https://github.com/SargerasWang/ExcelUtil 文档地址 https://sargeraswang.com/blog/2018/11/27/exc ...