1 of 45

HI

2 of 45

I’m not a GWT expert

3 of 45

CODE

4 of 45

TRENDS

5 of 45

VR

VIRTUAL

REALITY

6 of 45

VR

MORTON HEILING

ANTICIPATE IN

>> 1957 <<

7 of 45

VR

TRON LAUNCH

THE CONCEPT

IN 1982

8 of 45

VR

NINTENDO RULE

THAT IN EARLY

‘90

9 of 45

VR

SEGA RESPOND TO NINTENDO IN 1993

WITH “Sega VR”

10 of 45

VR

MATRIX GO OVER�WITH CREATION

OF A VISIONARY WORLD THAT PEOPLE KNOW

1999

11 of 45

2000

12 of 45

BOOOOM

13 of 45

From there every year is the VR year!

14 of 45

Finally in 2014

Google Cardboard

land

Zuck, what about invest billion in Oculus Rift?!?!

15 of 45

THANK YOU

16 of 45

GWT

for Cardboard

www.gwtcon.org

#GWTcon2015

#GWT4Cardboard #GWT #Cardboard #VR #parallax3d and so on!

17 of 45

What is Cardboard?

http://cardboard.withgoogle.com/

18 of 45

State of

the art?

19 of 45

https://developers.google.com/cardboard/

NATIVE!

20 of 45

VR on web is still experimental

https://vr.chromeexperiments.com/

all these samples are based on

webgl with threejs

21 of 45

Mmmm…

… unstable...

WE LOVE IT!

22 of 45

Why not

use GWT?

The optimization that GWT brings to the generated JS code has the potential to deliver unexpected performances on notoriusly resource-expensive solutions like webgl.

23 of 45

WebGL

http://caniuse.com/#feat=webgl �Claims a global compatibility coverage of 80.74%, not so bad.

24 of 45

A long time ago in a galaxy far, far away…

http://jooink.blogspot.it/search/label/webgl

25 of 45

A framework to manage

3D on webgl is still needed

HOW!?

26 of 45

http://parallax3d.org/�

is the GWT porting of�

http://threejs.org/

27 of 45

Parallax3D vs Threejs

class MyScene extends AnimatedScene {..}�

PerspectiveCamera camera = new PerspectiveCamera(45, getRenderer().getAbsoluteAspectRation(), 1, 1000);

SphereGeometry geometry = new SphereGeometry(220, 20, 20);

var scene = new THREE.Scene();��var camera = new THREE.PerspectiveCamera(45, webglEl.offsetWidth / webglEl.offsetHeight, 1, 1000);

var geometry = new THREE.SphereGeometry(100, 20, 20)

28 of 45

What about…

RENDERING

PHOTOSPHERE?

29 of 45

Map a 360 photo/video onto a 3D sphere

30 of 45

Map a 360 photo/video onto a 3D sphere

MeshBasicMaterial material = new MeshBasicMaterial();

Texture texture = new Texture("/photosphere.jpg");

material.setMap(texture);

material.setSide(SIDE.DOUBLE);

SphereGeometry geometry = new SphereGeometry(220, 20, 20);

Mesh mesh = new Mesh(geometry, material);

getScene().add(mesh);

31 of 45

Camera

POV

Point of View obviosuly...

32 of 45

Camera Point of View

PerspectiveCamera camera = new PerspectiveCamera(45, getRenderer().getAbsoluteAspectRation(), 1, 1000);

The camera needs to look/rotate around linked to the device orientation.

The camera needs to be placed inside the 3D sphere.

33 of 45

Move camera around??

34 of 45

HTML5 DeviceOrientation API!

http://www.html5rocks.com/en/tutorials/device/orientation/

35 of 45

Threejs

provides

DeviceOrientationControls

plugin

36 of 45

Parallax3D

not ;(

37 of 45

Translate threejs DeviceOrientationControls plugin

to parallax3D plugin!

38 of 45

3 hours

later...

39 of 45

DONE!

WAT!?

Where you get accelerometer values?

40 of 45

CTRL+C / CTRL+V! Thanks to @dankurka’s contribution

41 of 45

Great, now

how do we get

a stereo effect?

42 of 45

parallax3D has it!

Hell yeah!

new Stereo(getRenderer(), getScene())

or

new OculusRift(getRenderer(), getScene())

43 of 45

1 minute

later...

44 of 45

45 of 45

Check it out!

goo.gl/QBN9nE