Google Cardboard: виртуальная реальность для Android приложений

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

2. Дополненная реальность (AR)
Google Ingress

3. Дополненная виртуальность (AV)
EA Sport Games, Nintendo
Сайт; http://www.nintendofuse.com/2009/03/13/ea-sports-active-tiger-woods-10-grand-slam-tennis-wii-motion-plus/

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

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

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

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

11. NFC тэг
Линзы
Магнит

14. Глаза

15. Глаза
Линзы

16. Экран
Глаза
Линзы

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

20. Отрицательная дисторсия
Pincushion Distortion
Положительная дисторсия
Barrel Distortion

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

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

28. Режим
телефона
NFC
VR режим
NFC
[возврат]

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

31. g.co/cardboard
Все здесь!
➔VR Toolkit
➔ Примеры

41. class MyGameActivity
extends CardboardActivity

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

43. class MyGameRenderer
implements CardboardView.StereoRenderer

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

45. @Override public void
onNewFrame(HeadTransform head)
{
mLastHeadTransform = head;
mTime += TIME_DELTA;
!
UpdateAI( TIME_DELTA );
UpdatePhysics( TIME_DELTA );
}
MyGameRenderer.java

46. @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

47. @Override public void onCardboardTrigger()
{
if (isLookingAtTreasure()) {
pickupTreasure();
} else {
showTreasureMap();
}
}
MyGameActivity.java

49. @Override public void onInsertedIntoCardboard()
{
this.cardboardView.setVRModeEnabled(true);
}
!
@Override public void
onRemovedFromCardboard()
{
this.cardboardView.setVRModeEnabled(false);
}
MyGameActivity.java

50. cardboard://com.google/cardboard/
1.0.0

51. Документация
developers.google.com/cardboard/unity/

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

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

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

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

57. Скорость обновления
60 кадров в секунду
Need for Speed: Most Wanted, Criterion
Games
Image by deadendthrills.com

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

59. Выиграйте
cardboard!
!
Конкурс на
стенде Google
!
Началов в
16:15

60. Basic elements Segue slides
are sentence

61. Small caption
Heading
Subheading
Body
Source
Code
All text is set in Roboto and Roboto
Condensed.
All code is set in Inconsolata.
Download all 3 on google.com/fonts

62. #FFA000
#00BCD4
Main colorLighter GraysDarker

63. A
Simple rounded
rectangle
Callout
Subcaption
Callout Arrows
6px border

64. Example slides

65. Full-bleed, photo-only
slides are great

66. Good design is as little
design as possible.
Dieter Rams

67. Step 1 Step 2 Step 3
End

68. Chart title
7%
8%
10%
11%
29%
35%
April
May
June
July
August
September
Chart data source info here

69. Chart data source info here
Chart title
0
25
50
75
100
April May June July

70. Chart data source info here
Chart title
0
25
50
75
100
April May June July

71. <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

72. 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

73. 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

74. // 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

75. Photos make for
excellent segue slides
Photo source info here
Use a semitransparent dark gray
or black to ensure text is legible

76. Photo source info here

77. BIG IDEA
Photo source info here

78. What’s next?
Getting Started with
Android Wear
developer.android.com/wear
Introduction to Beer-
Brewing
g.co/beerintro
youtube.com/
GoogleDevelopers

79. +Your Name
Thank you!
#optionalhashtag

80. Avoid using the following
slide types

81. 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 paying
attention to what you’re actually saying)
• DON’T USE 3RD-LEVEL BULLETS!
But when you need to use them, sentence case