It's time to take a look at mobile AR. and small peek at how to build our first Android App. Here is the link to the video: http://bit.ly/2BYUyHC

1. In e N m o G

2. Who A ?

3. Sey am H s e J fa
An o d E ne g Le Sha n I ov s
@wo d s

4. Aug t Re t i M b e

5. V v A

6. AR is y

7. Re l d e r o

8. Sephora

11. So n c o h o s t

12. Options:
1. ARCore
2. ARKit
3. Wikitude
4. Vuforia
5. Maxst
6. EasyAR
7. ARToolKit
8. Xzimg
9. DeepAR

13. thinkmobiles.com

14. Eas R
The Ultimate

15. EasyAR Offers EasyAR Suffers
1. Free
2. Cross Platform
3. No Watermark
4. Unlimited Apps
5. Lots of samples(CPP, Kotlin, …)
6. Backward Compatible
1. Almost No Docs
2. Poor Explanation
3. No Gradle Import

16. Possibilities with EasyAR
Image Tracking/Recognition
Object Tracking/Recognition
Show Objects on Screen
Playing Videos on Object/Image

17. How A d a R
Android SDK

18. 1.Add EasyAR.jar to Libs Folder

19. 2.Add Cpp Library To jniLibs Folder

20. 3.Add Gradle Import to Build.Gradle
4.Sync the Project
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:27.1.1'
testCompile 'junit:junit:4.12'
}

21. How U as R
Android SDK

22. MainActivity
glView = new GLView(this);
requestCameraPermission()
Engine.init(this, API_KEY)

23. MainActivity
private static String key = "===insert your API Key here===";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON,
WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
if (!Engine.initialize(this, key)) {
Log.e("HelloAR", "Initialization Failed.");
}
glView = new GLView(this);
requestCameraPermission();
}

24. @Override
protected void onResume() {
super.onResume();
if (glView != null) { glView.onResume(); }
}
@Override
protected void onPause() {
if (glView != null) { glView.onPause(); }
super.onPause();
}
Activity Lifecycle

25. GLView
https://developer.android.com/guide/topics/graphics/opengl

26. GLView
EGLConfigChooser EGLContextFactory
GLSurfaceView.Renderer
HelloAR

27. GLSurfaceView.Renderer
this.setRenderer(new GLSurfaceView.Renderer() {
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
synchronized (helloAR) {
helloAR.initGL();
}
}
@Override
public void onSurfaceChanged(GL10 gl, int w, int h) {
synchronized (helloAR) {
helloAR.resizeGL(w, h);
}
}
@Override
public void onDrawFrame(GL10 gl) {
synchronized (helloAR) {
helloAR.render();
}
}
});

28. Lifecycle Handling
View
GLSurfaceView
GLView
@Override
public void onResume() {
super.onResume();
Engine.onResume();
}
@Override
public void onPause() {
Engine.onPause();
super.onPause();
}
@Override
protected void onDetachedFromWindow()
{
synchronized (helloAR) {
helloAR.stop();
helloAR.dispose();
}
super.onDetachedFromWindow();
}
@Override
protected void onAttachedToWindow(){
super.onAttachedToWindow();
synchronized (helloAR) {
if (helloAR.initialize()) {
helloAR.start();
}
}
}

29. HelloAR
ImageTrackers
ImageTargets
Streamer
CameraDevice
ObjectRenderer
CameraRenderer
ViewPort

30. HelloAR

31. ImageTarget
1. Asset
2. App
3. Absolute
4. JSON

32. ImageTarget Json
{
"images" :
[
{
"image" :"name1.jpg",
"name" : "name1"
},
{
"image" : "name2.jpg",
"name" : "name2",
"size" : [8.56, 5.4],
"uid" : "uid-string"
}
]
}

33. CameraDevice
CameraFrameStreamer

34. ObjectRenderer

35. VideoRenderer

36. public void render() {
GLES20.glClearColor(1.f, 1.f, 1.f, 1.f);
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
if (videobg_renderer != null) {
Vec4I default_viewport = new Vec4I(0, 0, view_size.data[0], view_size.data[1]);
GLES20.glViewport(default_viewport.data[0], default_viewport.data[1], default_viewport.data[2], default_viewport.data[3]);
if (videobg_renderer.renderErrorMessage(default_viewport)) {
Return;
}
}
if (streamer == null) { return; }
Frame frame = streamer.peek();
try {
updateViewport();
GLES20.glViewport(viewport.data[0], viewport.data[1], viewport.data[2], viewport.data[3]);
if (videobg_renderer != null) {videobg_renderer.render(frame, viewport);}
for (TargetInstance targetInstance : frame.targetInstances()) {
int status = targetInstance.status();
if (status == TargetStatus.Tracked) {
Target target = targetInstance.target();
ImageTarget imagetarget = target instanceof ImageTarget ? (ImageTarget) (target) : null;
if (imagetarget == null) {continue;}
if (box_renderer != null) {
box_renderer.render(camera.projectionGL(0.2f, 500.f), targetInstance.poseGL(), imagetarget.size());
}}}}
finally {
frame.dispose();
}
}

37. Frame frame = streamer.peek();
try {
updateViewport();
GLES20.glViewport(viewport.data[0], viewport.data[1], viewport.data[2], viewport.data[3]);
if (videobg_renderer != null) {
videobg_renderer.render(frame, viewport);
}
for (TargetInstance targetInstance : frame.targetInstances()) {
int status = targetInstance.status();
if (status == TargetStatus.Tracked) {
Target target = targetInstance.target();
ImageTarget imagetarget = target instanceof ImageTarget ? (ImageTarget) (target) : null;
if (imagetarget == null) {continue;}
if (box_renderer != null) {
box_renderer.render(camera.projectionGL(0.2f, 500.f), targetInstance.poseGL(),
imagetarget.size());
}}}}
finally {
frame.dispose();
}

38. if (videobg_renderer != null) {
videobg_renderer.render(frame, viewport);
}

39. for (TargetInstance targetInstance : frame.targetInstances()) {
int status = targetInstance.status();
if (status == TargetStatus.Tracked) {
Target target = targetInstance.target();
ImageTarget imagetarget = target instanceof ImageTarget ?
(ImageTarget) (target) : null;
if (imagetarget == null) {continue;}
if (box_renderer != null) {
box_renderer.render(camera.projectionGL(0.2f,500.f),
targetInstance.poseGL(),
imagetarget.size());
}}}}

40. if (box_renderer != null) {
box_renderer.render(camera.projectionGL(0.2f,500.f), targetInstance.poseGL(),
imagetarget.size());
}

41. An ….. Don

42. Bu l h Ne A p
Now

44. Twi r: @wo d s
Tel m: @wo d s
Sey ar
An o d E ne g Le Sha n I ov s
Tha

45. The E