81
Google Cardboard: виртуальная реальность для Android приложений Ефимцева Наталия Павлов Стас,

Google Cardboard (Winter Nights'15)

Embed Size (px)

Citation preview

Page 1: Google Cardboard (Winter Nights'15)

Google Cardboard: виртуальная реальность для Android приложенийЕфимцева Наталия!

Павлов Стас,

Page 2: Google Cardboard (Winter Nights'15)

Дополненная реальность (AR)

Google Ingress

Page 3: Google Cardboard (Winter Nights'15)

Дополненная виртуальность (AV)

EA Sport Games, Nintendo Сайт; http://www.nintendofuse.com/2009/03/13/ea-sports-active-tiger-woods-10-grand-slam-tennis-wii-motion-plus/

Page 4: Google Cardboard (Winter Nights'15)

Виртуальная реальность (VR)

Page 5: Google Cardboard (Winter Nights'15)
Page 6: Google Cardboard (Winter Nights'15)

500K+ cardboard’ов продано

Page 7: Google Cardboard (Winter Nights'15)
Page 8: Google Cardboard (Winter Nights'15)

Как это работает

Page 9: Google Cardboard (Winter Nights'15)

Давайте заглянем внутрь

Page 10: Google Cardboard (Winter Nights'15)
Page 11: Google Cardboard (Winter Nights'15)

NFC тэг

Линзы

Магнит

Page 12: Google Cardboard (Winter Nights'15)
Page 13: Google Cardboard (Winter Nights'15)
Page 14: Google Cardboard (Winter Nights'15)

Глаза

Page 15: Google Cardboard (Winter Nights'15)

Глаза

Линзы

Page 16: Google Cardboard (Winter Nights'15)

Экран

Глаза

Линзы

Page 17: Google Cardboard (Winter Nights'15)
Page 18: Google Cardboard (Winter Nights'15)
Page 19: Google Cardboard (Winter Nights'15)

Эффект дисторсии (Pincushion Distortion)

Page 20: Google Cardboard (Winter Nights'15)

Отрицательная дисторсия Pincushion Distortion

Положительная дисторсия Barrel Distortion

Page 21: Google Cardboard (Winter Nights'15)
Page 22: Google Cardboard (Winter Nights'15)
Page 23: Google Cardboard (Winter Nights'15)

ОТСЛЕЖИВАНИЕ ПОЛОЖЕНИЯ ТЕЛЕФОНА

Page 24: Google Cardboard (Winter Nights'15)

Источник2 КАМЕРЫ

Page 25: Google Cardboard (Winter Nights'15)
Page 26: Google Cardboard (Winter Nights'15)
Page 27: Google Cardboard (Winter Nights'15)
Page 28: Google Cardboard (Winter Nights'15)

Режим телефона

NFC

VR режим

NFC

[возврат]

Page 29: Google Cardboard (Winter Nights'15)

Самое интересно: создание приложений

Page 30: Google Cardboard (Winter Nights'15)
Page 31: Google Cardboard (Winter Nights'15)

g.co/cardboard

Все здесь!

➔VR Toolkit ➔ Примеры

Page 32: Google Cardboard (Winter Nights'15)
Page 33: Google Cardboard (Winter Nights'15)
Page 34: Google Cardboard (Winter Nights'15)
Page 35: Google Cardboard (Winter Nights'15)
Page 36: Google Cardboard (Winter Nights'15)
Page 37: Google Cardboard (Winter Nights'15)
Page 38: Google Cardboard (Winter Nights'15)
Page 39: Google Cardboard (Winter Nights'15)
Page 40: Google Cardboard (Winter Nights'15)
Page 41: Google Cardboard (Winter Nights'15)

class MyGameActivity extends CardboardActivity

Page 42: Google Cardboard (Winter Nights'15)

class MyGameActivity extends CardboardActivity

- Экран не отключается - Портретная ориентация экрна - Кнопки управления громкостью отключаются - Скрывает все системные контролы (Все может быть переопределено)

Page 43: Google Cardboard (Winter Nights'15)

class MyGameRenderer implements CardboardView.StereoRenderer

Page 44: Google Cardboard (Winter Nights'15)

class MyGameRenderer implements CardboardView.StereoRenderer

- onNewFrame - вызывается каждый раз при рендеринге - onDrawEye - вызывается для рендеринга сцены для каждого глаза, - но с разными параметрами - onFinishFrame - вызывается после рендеринга для обоих глаз

Page 45: Google Cardboard (Winter Nights'15)

@Override public void onNewFrame(HeadTransform head) { mLastHeadTransform = head; mTime += TIME_DELTA; !

UpdateAI( TIME_DELTA ); UpdatePhysics( TIME_DELTA ); }

MyGameRenderer.java

Page 46: Google Cardboard (Winter Nights'15)

@Override public void onDrawEye(EyeTransform eye) { Matrix.multiplyMM(view, 0, eye.getEyeView(), 0, camera, 0); Matrix.multiplyMM(mvp, 0, view, 0, model, 0); Matrix.multiplyMM(mvp, 0, eye.getPerspective(), 0, mvp, 0); drawScene(); }

MyGameRenderer.java

Page 47: Google Cardboard (Winter Nights'15)

@Override public void onCardboardTrigger() { if (isLookingAtTreasure()) { pickupTreasure(); } else { showTreasureMap(); } }

MyGameActivity.java

Page 48: Google Cardboard (Winter Nights'15)
Page 49: Google Cardboard (Winter Nights'15)

@Override public void onInsertedIntoCardboard() { this.cardboardView.setVRModeEnabled(true); } !

@Override public void onRemovedFromCardboard() { this.cardboardView.setVRModeEnabled(false); }

MyGameActivity.java

Page 50: Google Cardboard (Winter Nights'15)

cardboard://com.google/cardboard/1.0.0

Page 51: Google Cardboard (Winter Nights'15)

Документация

developers.google.com/cardboard/unity/

Page 52: Google Cardboard (Winter Nights'15)

Рекомендации

Page 53: Google Cardboard (Winter Nights'15)
Page 54: Google Cardboard (Winter Nights'15)

Приложения для виртуальной реальности имеют свои особенности

Page 55: Google Cardboard (Winter Nights'15)

Физическое движение == визуальное движение

Page 56: Google Cardboard (Winter Nights'15)

Cвобода движений

Page 57: Google Cardboard (Winter Nights'15)

Скорость обновления 60 кадров в секунду

Need for Speed: Most Wanted, Criterion Games Image by deadendthrills.com

Page 58: Google Cardboard (Winter Nights'15)

Бесконечный экран

Page 59: Google Cardboard (Winter Nights'15)

Выиграйте cardboard! !

Конкурс на стенде Google !

Началов в 16:15

Page 60: Google Cardboard (Winter Nights'15)

Basic elements Segue slides are sentence

Page 61: Google Cardboard (Winter Nights'15)

Small caption

HeadingSubheadingBody

Source

Code

All text is set in Roboto and Roboto Condensed.

All code is set in Inconsolata. Download all 3 on google.com/fonts

Page 62: Google Cardboard (Winter Nights'15)

#FFA000

#00BCD4

Main colorLighter GraysDarker

Page 63: Google Cardboard (Winter Nights'15)

A

Simple rounded rectangle

Callout Subcaption

Callout Arrows

6px border

Page 64: Google Cardboard (Winter Nights'15)

Example slides

Page 65: Google Cardboard (Winter Nights'15)

Full-bleed, photo-only slides are great

Page 66: Google Cardboard (Winter Nights'15)

Good design is as little design as possible.Dieter Rams

Page 67: Google Cardboard (Winter Nights'15)

Step 1 Step 2 Step 3

End

Page 68: Google Cardboard (Winter Nights'15)

Chart title

7%8%

10%

11%

29%

35%AprilMayJuneJulyAugustSeptember

Chart data source info here

Page 69: Google Cardboard (Winter Nights'15)

Chart data source info here

Chart title

0

25

50

75

100

April May June July

Page 70: Google Cardboard (Winter Nights'15)

Chart data source info here

Chart title

0

25

50

75

100

April May June July

Page 71: Google Cardboard (Winter Nights'15)

<paper-button id="go" disabled>Go!</paper-

HTML

.paper-button { background-color: red;

CSS

document.querySelector('.paper-button') .addEventListener('click', function(e) { // your code here

JavaScript

For really short code snippets, use this style, with optional

indication of filename or

Visit j.mp/iohighlighter in Safari and copy + paste into

Page 72: Google Cardboard (Winter Nights'15)

protected void onTryUpdate(int reason) throws RetryException { // Do some awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse("http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); } Visit j.mp/iohighlighter in

Safari and copy + paste into

MainActivity.j

If your code snippet is over 6 lines, use a full-page slide of code in this style

Page 73: Google Cardboard (Winter Nights'15)

protected void onTryUpdate(int reason) throws RetryException { // Do some awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse("http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); }

MainActivity.j

Use this style to highlight a particular

Page 74: Google Cardboard (Winter Nights'15)

// A couple more notes on code slides: // * Use the Inconsolata font available at google.com/fonts // * Set line spacing to 1.2 // * Don’t use font sizes below 40pt

code_slides.tx

Page 75: Google Cardboard (Winter Nights'15)

Photos make for excellent segue slides

Photo source info here

Use a semitransparent dark gray or black to ensure text is legible

Page 76: Google Cardboard (Winter Nights'15)

Photo source info here

Page 77: Google Cardboard (Winter Nights'15)

BIG IDEAPhoto source info here

Page 78: Google Cardboard (Winter Nights'15)

What’s next?Getting Started with Android Wear developer.android.com/wear

Introduction to Beer-Brewing g.co/beerintro

youtube.com/GoogleDevelopers

Page 79: Google Cardboard (Winter Nights'15)

+Your Name

Thank you!

#optionalhashtag

Page 80: Google Cardboard (Winter Nights'15)

Avoid using the following slide types

Page 81: Google Cardboard (Winter Nights'15)

Avoid using titles

• Also try to avoid bullets · Here’s what sub-bullets look like · But you should generally avoid them, too

• Think about all the awesome visuals you could be showing instead!

• A third bullet (by now, no one’s payingattention to what you’re actually saying)

• DON’T USE 3RD-LEVEL BULLETS!

But when you need to use them, sentence case