Let's play yoga with ARCore by Eunsil Jo

요가레슨 with ARCore
조은실

증강현실 환경 구축을 위한 구글의 플랫폼
현실 환경을 감지하고 상호작용할 수 있는 다양한 API 제공
ARCore

가상현실(Virtual reality, VR)
현실 환경과 유사하지만 실제가 아닌 인공 환경
단순히 가상의 공간을 구현하는 것을 넘어서서 실제에 근접한 공간적, 시간적인 체험을 가능하게 하는
기술

증강현실(Augmented reality, AR)
가상현실의 한 분야로 현실 환경을 가상 물체로 보완함
실제 환경에 가상 사물이나 정보를 합성하여 원래의 환경에 존재하는 사물처럼 보이도록 하는 기술

ARCore vs ARKit
•시작 - 탕고(Tango), 구글 I/O 2017
•안드로이드 7.0 이상, 스마트폰, 웹 브
라우저 지원
•별도 ARCore 앱 설치 필요, 지원 장비
제한
•광범위한 현실 환경 및 추적 정보 저장
•시작 - WWDC 2017
•iOS 11 이상, 아이폰 및 아이패드 지원
•별도 앱 설치 불필요, 아이폰 6s 이후
장비 모두 지원
•최근 정보로 제약된 최소한의 현실 환
경 및 추적 정보 저장

기본 개념
•모션 추적(Motion tracking)
•환경 이해(Environmental understanding)
•조명 추정(Light estimation)

지원 장비
•카메라, 동작 센서, CPU 등 고성능의 하드웨어 필요
•ARCore 앱 설치 필요
•안드로이드 - 구글 플레이
•안드로이드 7.0 이상(장비에 따라 8.0 이상 지원)
•구글 플레이 스토어 지원
•안드로이드 - 중국
•샤오미 앱 스토어(⼩⽶应⽤商店) 혹은 화웨이 앱스 갤러리(华为应⽤商店) 지원
•iOS
•iOS 11 이상
https://developers.google.com/ar/discover/supported-devices

샘플 앱
https://play.google.com/store/apps/details?id=com.github.eunsiljo.arcoresample

ArFragmentBaseArFragment
ArSceneView SceneView SurfaceView
•Session
•PlaneRenderer
•Scene
•Camera
•카메라 권한 확인
•ARCore 앱 설치 여부 확인
•세션(Session) 설정, 제어
•이벤트 감지
•GestureDetector
•OnPeekTouchListener
•OnUpdateListener
•콜백(Callback)
•OnTapArPlaneListener.onTapPlane
Sceneform SDK

build.gradle
apply plugin: ‘com.google.ar.sceneform.plugin'
android {
defaultConfig {
minSdkVersion 24
}
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
}
dependencies {
implementation 'com.google.ar:core:1.5.0'
implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.5.0'
implementation 'com.google.ar.sceneform:core:1.5.0'
implementation 'com.google.ar.sceneform:assets:1.5.0'
}
Java 8
AR 기능이 옵션이라면 sdk 버전 14 이상
AR 기능이 필수라면 sdk 버전 24 이상
ARCore
ArFragment
ArSceneView

AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.ar" />
<uses-feature android:name="android.hardware.camera" />
<application>
<meta-data
android:name="com.google.ar.core"
android:value=“required” />
</application> AR 기능이 필수인 경우
앱 설치 시 ARCore 앱이 함께 설치됨

앵커(Anchor)
평면(Plane)
씬(Scene)
노드(Node)
렌더레이블(Renderable)

Create Renderables
2. 렌더레이블 생성하기

안드로이드 위젯(Android Widgets)
ViewRenderable.builder()
.setView(this, R.layout.view_ar_text)
.build()
.thenAccept { renderable -> textViewRenderable = renderable }
.exceptionally {
showToast("Unable to load view renderable")
null
}
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24dp"
android:text="안녕하세요 :)" />
textViewRenderable?.let {
Node().apply {
setParent(anchorNode)
renderable = it
}
}
CompletableFuture 반환 - Java 8

3D 에셋(3D Assets)
companion object {
private const val HEART_ASSET = "heart.sfb"
private const val DUCK_ASSET =
"https://github.com/KhronosGroup/glTF-Sample-Models/raw/master/2.0/Duck/glTF/Duck.gltf"
}
ModelRenderable.builder()
.setSource(this, Uri.parse(HEART_ASSET))
.build()
.thenAccept { renderable -> heartRenderable = renderable }
…
ModelRenderable.builder()
.setSource(
this,
RenderableSource.builder()
.setSource(
this,
Uri.parse(DUCK_ASSET),
RenderableSource.SourceType.GLTF2
)
.setScale(0.2f)
.setRecenterMode(RenderableSource.RecenterMode.ROOT)
.build()
)
.setRegistryId(DUCK_ASSET)
.build()
.thenAccept { renderable -> duckRenderable = renderable }
…
OBJ, FBX, glTF 3D 파일 지원

도형(Simple Shape)
MaterialFactory.makeOpaqueWithColor(this, Color(android.graphics.Color.RED))
.thenAccept { material ->
sphereRenderable = ShapeFactory.makeSphere(
0.1f,
Vector3(-0.3f, 0f, 0f),
material
)
}
…
MaterialFactory.makeOpaqueWithColor(this, Color(android.graphics.Color.BLUE))
cubeRenderable = ShapeFactory.makeCube(
Vector3(0.2f, 0.2f, 0.2f),
Vector3(0f, 0f, 0f),
material
)
}
…
MaterialFactory.makeOpaqueWithColor(this, Color(android.graphics.Color.YELLOW))
cylinderRenderable = ShapeFactory.makeCylinder(
0.1f,
0.2f,
Vector3(0.3f, 0f, 0f),
material
)
}
…

도형 - 질감(Simple Shape - Material)
MaterialFactory.makeOpaqueWithColor(this, Color(android.graphics.Color.RED))
metallicRenderable = ShapeFactory.makeSphere(
0.1f,
Vector3(-0.15f, 0f, 0f),
material.apply {
setFloat(MaterialFactory.MATERIAL_METALLIC, 1f)
}
)
}
…
material.apply {
setFloat(MaterialFactory.MATERIAL_ROUGHNESS, 1f)
}
material.apply {
setFloat(MaterialFactory.MATERIAL_REFLECTANCE, 1f)
}

Build the Scene
3. 씬 구축하기

위치(Location)
override fun onTapPlane(hitResult: HitResult, plane: Plane, motionEvent: MotionEvent) {
val anchorNode = AnchorNode(hitResult.createAnchor()).apply {
setParent(arFragment.arSceneView.scene)
}
andyRenderable?.let {
Node().apply {
renderable = it
localPosition = Vector3(-0.2f, 0.2f, 0.2f)
}
Node().apply {
renderable = it
}
Node().apply {
renderable = it
localPosition = Vector3(0.2f, -0.2f, -0.2f)
}
}
}
x, y, z 위치 값

크기(Scale)
Node().apply {
renderable = it
localPosition = Vector3(-0.3f, 0f, 0f)
localScale = Vector3(1f, 1f, 1f)
}
Node().apply {
renderable = it
localPosition = Vector3(0f, 0f, 0f)
}
Node().apply {
renderable = it
localPosition = Vector3(0.5f, 0f, 0f)
}

회전(Rotation)
Node().apply {
renderable = it
localPosition = Vector3(-0.8f, 0f, 0f)
localRotation = Quaternion.axisAngle(Vector3(0f, 1f, 0f), 0f)
}
…
…
…
…
…
…
…
…
} x, y, z 축 각도

변형(Transform)
TransformableNode(arFragment.transformationSystem).apply {
renderable = it
select()
}
}

변형(Transform)
https://youtu.be/S37LH6GowC4

애니메이션(Animation)
class RotatingNode(private val duration: Long) : Node() {
private val forwardAnimation: ObjectAnimator by lazy {
ObjectAnimator().apply {
setObjectValues(
Quaternion.axisAngle(Vector3(0.0f, 1.0f, 0.0f), 0f),
Quaternion.axisAngle(Vector3(0.0f, 1.0f, 0.0f), 360f)
)
propertyName = "localRotation"
setEvaluator(QuaternionEvaluator())
repeatCount = ObjectAnimator.INFINITE
repeatMode = ObjectAnimator.RESTART
interpolator = LinearInterpolator()
setAutoCancel(true)
target = this@RotatingNode
duration = this@RotatingNode.duration
}
}
override fun onActivate() {
forwardAnimation.start()
}
override fun onUpdate(frameTime: FrameTime) {
}
}

RotatingNode(1000L).apply {
renderable = it
}
}

https://youtu.be/FbGgb7bOU2c

조명과 그림자(Light & Shadow)
Node().apply {
renderable = it
light = Light.builder(Light.Type.DIRECTIONAL)
.setColor(Color(android.graphics.Color.RED))
.setShadowCastingEnabled(false)
.build()
}
}

Let’s play yoga
4. 요가를 즐기자

이 발표를 통해
https://youtu.be/ttdPqly4OF8

샘플 소스
https://github.com/EunsilJo/ARCoreSample

이미지 참조
•https://developers.google.com/ar, Google - ARCore
•http://file.thisisgame.com/upload/nboard/news/
2016/11/30/20161130110450_6830.jpg, 디스이즈게임
•http://res.heraldm.com/phpwas/restmb_idxmake.php?
idx=93&simg=%2Fcontent%2Fimage%2F2017%2F02%2F03%2F20170203000
821_0.jpg, 포켓몬 고, 나이앤틱, 포켓몬컴퍼니
•https://i.stack.imgur.com/CcvkG.png, Max Seid, Stack Overflow
•https://github.com/KhronosGroup/glTF-Sample-Models/raw/master/2.0/Duck/
glTF/Duck.gltf, Duck
•https://poly.google.com/view/8RA5hHU5gHK, Heart, Poly by Google, CC-BY
•https://poly.google.com/view/4MMQYWR5Xi0, Dhalsim, Anonymous, CC-BY

Let's play yoga with ARCore by Eunsil Jo

Recommended

Recommended

More Related Content

Similar to Let's play yoga with ARCore by Eunsil Jo

Similar to Let's play yoga with ARCore by Eunsil Jo (20)

Let's play yoga with ARCore by Eunsil Jo