Shay Keinan @Shay_Keinan VR history React VR Three.js & - - PowerPoint PPT Presentation

▶
shay keinan
SMART_READER_LITE
LIVE PREVIEW

Shay Keinan @Shay_Keinan VR history React VR Three.js & - - PowerPoint PPT Presentation

Sep 19, 2022 248 likes •1.32k views

Shay Keinan @Shay_Keinan VR history React VR Three.js & basic Lucid Dreaming Mandukya Upanishad 500 BC Saint Augustine 415 BC Dreams and the Means of directing them. Marquis d'Hervey de Saint-Denys 1867 The Stereoscope

slide-1
SLIDE 1

Shay Keinan

@Shay_Keinan

slide-2
SLIDE 2

VR history & basic React VR Three.js

slide-3
SLIDE 3
slide-4
SLIDE 4

Lucid Dreaming

slide-5
SLIDE 5

500 BC

Mandukya Upanishad

slide-6
SLIDE 6

415 BC

Saint Augustine

slide-7
SLIDE 7

1867

Dreams and the Means of directing them.

Marquis d'Hervey de Saint-Denys

slide-8
SLIDE 8

1838

The Stereoscope

Charles Wheatstone

slide-9
SLIDE 9
slide-10
SLIDE 10

1935

Pygmalion’s Spectacles

Stanley Weinbaum

slide-11
SLIDE 11

The Sensorama Sega VR Nintendo Virtual Boy

slide-12
SLIDE 12

Virtual Reality

Jaron Lanier 1987

slide-13
SLIDE 13

Google cardboard Gear VR

slide-14
SLIDE 14

HTC Vive Playstation VR Oculus Rift

slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19

VIRTUAL REALITY

slide-20
SLIDE 20

VIRTUAL REALITY

CONCEPTS

slide-21
SLIDE 21

Stereoscopic Imaging

slide-22
SLIDE 22

Stereoscopic Imaging

slide-23
SLIDE 23

Stereoscopic Imaging

slide-24
SLIDE 24

Stereoscopic Imaging

slide-25
SLIDE 25

Stereoscopic Imaging

Headset Lenses

Google Cardboard HTV Vive Oculus Rift

slide-26
SLIDE 26

Stereoscopic Imaging

slide-27
SLIDE 27

Stereoscopic Imaging

slide-28
SLIDE 28

Body Movement

slide-29
SLIDE 29

React VR

slide-30
SLIDE 30
slide-31
SLIDE 31

React VR

The Rendering Engines

slide-32
SLIDE 32

React Native Three.js

slide-33
SLIDE 33
slide-34
SLIDE 34

Getting started

slide-35
SLIDE 35

npm install -g react-vr-cli react-vr init WelcomeToVR cd WelcomeToVR npm start http://localhost:8081/vr/index.html

slide-36
SLIDE 36
slide-37
SLIDE 37

__tests__ node_modules static_assets vr Index.vr.js

Folder Structure

Index.html Client.js

slide-38
SLIDE 38

import React from 'react';
 import { AppRegistry, asset, Pano, Text, View } from 'react-vr';
 
 class WelcomeToVR extends React.Component {
 render() {
 return (
 <View>
 <Pano source={asset('chess-world.jpg')}/>
 <Text
 style={{
 fontSize: 0.8,
 textAlign: 'center',
 transform: [{translate: [0, 0, -3]}],
 }}>
 hello
 </Text>
 </View>
 );
 }
 };
 
 AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

index.vr.js

slide-39
SLIDE 39

My Solar System App

First steps with React VR

slide-40
SLIDE 40

bit.ly/solar-demo

slide-41
SLIDE 41
slide-42
SLIDE 42

3D Coordinates

Y Z X

slide-43
SLIDE 43

Transformations Y Z X

Translate, Scale & Rotate

[10,20,20]

transform: [{translate: [10,20,20]}]

slide-44
SLIDE 44

Core Components

<View /> <Text /> <Image />

slide-45
SLIDE 45

Core Components

<View /> <Text /> <Image />

slide-46
SLIDE 46

Core Components

<View /> <Text /> <Image />

slide-47
SLIDE 47

Core Components

<View /> <Text /> <Image />

slide-48
SLIDE 48

Pano

slide-49
SLIDE 49

Pano

UP LEFT DOWN BACK FRONT RIGHT

slide-50
SLIDE 50

Pano

render() {
 return (
 <View>
 <Pano source={asset('stars.jpg')}/>
 </View>
 );
 }

index.vr.js

slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53

Styling with Flex box The same styling and layout system across web, React Native, and VR

slide-54
SLIDE 54
slide-55
SLIDE 55

<Menu />

slide-56
SLIDE 56

menu() {
 return (
 <View
 billboarding={'on'}
 style={styles.menu}>
 { Object.keys(planets).map((planet) =>(
 <View style={styles.planetBtn}>
 <Text style={styles.planetBtnLabel}>{planet}</Text>
 </View>
 )) }
 </View>
 );
 }

<Menu />

slide-57
SLIDE 57

menu() {
 return (
 <View
 billboarding={'on'}
 style={styles.menu}>
 { Object.keys(planets).map((planet) =>(
 <View style={styles.planetBtn}>
 <Text style={styles.planetBtnLabel}>{planet}</Text>
 </View>
 )) }
 </View>
 );
 }

<Menu />

slide-58
SLIDE 58
slide-59
SLIDE 59
slide-60
SLIDE 60

Interactions

slide-61
SLIDE 61

Interactions

FOCUS_IN FOCUS_OUT FOCUS_IN_PRESS FOCUS_IN_LONG_PRESS

slide-62
SLIDE 62

Interactions

menu() {
 return (
 <View
 billboarding={'on'}
 style={styles.menu}>
 { Object.keys(planets).map((planet) => (
 <VrButton key={`button-${planet}`}


  • nClick={() => this.handleClick(planet)}>


<View style={styles.planetBtn}>
 <Text style={styles.planetBtnLabel}>{planet}</Text>
 </View>
 </VrButton>
 )) }
 </View>
 );
 }

slide-63
SLIDE 63
slide-64
SLIDE 64
slide-65
SLIDE 65

__tests__ node_modules static_assets models

Models and Textures

Mars.obj textures Mars.png

slide-66
SLIDE 66

<Planet />

slide-67
SLIDE 67

Loading Models

<Model
 source={{obj: asset(`models/Earth.obj`)}}
 texture={asset(`textures/Earth.png`)}
 lit={true}
 style={styles.planet}
 />

<Planet />

slide-68
SLIDE 68

Loading Models

<Model
 source={{obj: asset(`models/${currentPlanet}.obj`)}}
 texture={asset(`textures/${currentPlanet}.png`)}
 lit={true}
 style={styles.planet}
 />

<Planet />

slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71

constructor() {
 super();
 
 this.state = {
 rotation: 0
 };
 }
 
 componentDidMount() { this.rotate(); }
 
 // planet rotate animation
 rotate() {
 const now = Date.now();
 const delta = now - this.lastUpdate;
 
 this.time++;
 
 this.lastUpdate = now;
 this.setState({
 rotation: this.state.rotation + delta / 150
 });
 this.frameHandle = requestAnimationFrame(this.rotate);
 }

slide-72
SLIDE 72
slide-73
SLIDE 73

constructor(props) {
 super();
 
 this.state = {
 bounceValue: new Animated.Value(1)
 };
 } // bounce animation
 bounce({initial, toValue, friction = 1.5}) {
 value.setValue(initial);
 
 Animated.spring(
 this.state.bounceValue,
 {
 toValue,
 friction,
 }
 ).start();
 }

slide-74
SLIDE 74
slide-75
SLIDE 75

Using Native Modules

slide-76
SLIDE 76

Three.js

Materials Cameras Geometries Loaders Helpers Lights Physics Renderers Plugins

slide-77
SLIDE 77

TetrahedronGeometry

slide-78
SLIDE 78

import {Module} from 'react-vr-web';
 import * as THREE from 'three';
 
 export default class AsteroidsModule extends Module {
 constructor(scene) {
 // The name of the module in NativeModules
 super('Asteroids');
 
 this.scene = scene;
 }
 
 add() {
 const geometry = new THREE.TetrahedronGeometry(10, 1);
 const material = new THREE.MeshLambertMaterial({color: 0x7F492A});
 const mesh = new THREE.Mesh(geometry, material);
 
 this.scene.add(mesh);
 }
 }

The Module

slide-79
SLIDE 79

import {VRInstance} from 'react-vr-web';
 import AsteroidsModule from '../components/nativeModules/asteroidsModule';
 import * as THREE from 'three';
 
 function init(bundle, parent, options) {
 const scene = new THREE.Scene();
 const Asteroids = new AsteroidsModule(scene);
 const vr = new VRInstance(bundle, 'solarSystem', parent, {
 // Add custom options here
 nativeModules: [ Asteroids ],
 scene,
 ...options,
 });
 vr.render = function() {
 // Any custom behavior you want to perform on each frame goes here
 Asteroids.render();
 
 };
 // Begin the animation loop
 vr.start();
 return vr;
 }

Client.js

slide-80
SLIDE 80
slide-81
SLIDE 81
slide-82
SLIDE 82

Virtual Reality Tour

slide-83
SLIDE 83
slide-84
SLIDE 84

<VideoPano source={{ uri: 'assets/my-video.webm' }} />

VideoPano

slide-85
SLIDE 85

Kitchen Hotspot

<Pano source={asset(room.jpeg)} />

slide-86
SLIDE 86

Room Hotspot

<Pano source={asset(kitchen.jpeg)} />

slide-87
SLIDE 87

Geometries Materials Loaders Helpers Lights Cameras Controls

Three.js

slide-88
SLIDE 88

Geometries Materials Loaders Helpers Lights Cameras Controls

React VR

slide-89
SLIDE 89

Three.js React.js Native Modules

slide-90
SLIDE 90
slide-91
SLIDE 91

React.js Three.js

slide-92
SLIDE 92

React Comp. Scene

slide-93
SLIDE 93

init(element) { this.scene = new THREE.Scene(); // width & height of the placeholder const width = element.offsetWidth; const height = element.offsetHeight; this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize(width, height); this.controls = new OrbitControls(this.camera, this.renderer.domElement); element.appendChild(this.renderer.domElement); this.animate(); } animate = () => { this.controls.update(); requestAnimationFrame(this.animate); this.renderer.render(this.scene, this.camera); };

slide-94
SLIDE 94

bit.ly/three-vr

slide-95
SLIDE 95
slide-96
SLIDE 96
slide-97
SLIDE 97
slide-98
SLIDE 98
slide-99
SLIDE 99
slide-100
SLIDE 100
slide-101
SLIDE 101
slide-102
SLIDE 102
slide-103
SLIDE 103

navigator.getVRDisplays().then(displays => { if (displays.length) { this.controls = new THREE.VRControls(this.camera); this.controls.standing = true; } });

slide-104
SLIDE 104

this.effect = new THREE.VREffect(this.renderer); this.effect.setSize(this.width, this.height);

slide-105
SLIDE 105

focus on Layout

React VR

focus on the 3D scene

React + 3D Engine

slide-106
SLIDE 106

Thank You!